@openziti/ziti-console-lib 0.6.0 → 0.6.2

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

@@ -4,9 +4,9 @@ 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, unset, isBoolean, keys, isEqual, isObject, isArray, isFunction, forOwn, invert, map as map$1, isString, some, filter, delay, sortedUniq } from 'lodash';
+import _, { isEmpty, isNumber, includes, isNil, defer, cloneDeep, set, invoke, get, debounce, isNaN as isNaN$1, forEach, isFunction, unset, isBoolean, keys, isEqual, isObject, isArray, forOwn, invert, map as map$1, isString, some, filter, delay, sortedUniq } from 'lodash';
 import * as i1$1 from '@angular/common/http';
-import { HttpClient, HttpParams, HttpClientModule } from '@angular/common/http';
+import { HttpClient, HttpParams, HttpClientModule, HttpHeaders } from '@angular/common/http';
 import * as i1 from 'ngx-logger';
 import { NgxLoggerLevel } from 'ngx-logger';
 import { __decorate, __param } from 'tslib';
@@ -40,6 +40,7 @@ import * as i5$2 from 'primeng/api';
 import * as i7 from 'ag-grid-angular';
 import { AgGridModule } from 'ag-grid-angular';
 import * as i3$2 from '@angular/cdk/bidi';
+import { MatRadioModule } from '@angular/material/radio';
 import { createAjvValidator, JSONEditor, Mode } from 'vanilla-jsoneditor';
 import * as d3 from 'd3';
 import * as i6 from '@angular/material/autocomplete';
@@ -742,6 +743,15 @@ class ValidationService {
         };
         return isBase64(base64Content);
     }
+    isValidURI(uri) {
+        try {
+            new URL(uri);
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+    }
     redefineObject(obj) {
         for (let prop in obj) {
             if (Array.isArray(obj[prop]) && obj[prop].length == 0) {
@@ -1788,7 +1798,7 @@ class TextListInputComponent {
       </p-chips>
       <div *ngIf="error" class="error">{{error}}</div>
     </div>
- `, isInline: true, styles: ["::ng-deep .p-element .p-chips.p-component{width:100%;font-weight:400;font-family:Open Sans,Arial,sans-serif;height:var(--defaultInputHeight);border-color:var(--stroke);border-style:solid;border-width:var(--inputBorderWidth);border-radius:var(--inputBorderRadius);padding-left:10px;padding-right:10px;outline:none;box-sizing:border-box;font-size:15px;background-color:var(--background)!important;color:var(--text);-webkit-appearance:none}::ng-deep .p-element .p-chips.p-component .p-inputtext.p-chips-multiple-container{width:100%;padding:0;border-width:var(--inputBorderWidth)}::ng-deep .p-element .p-chips.p-component .p-inputtext.p-chips-multiple-container.p-focus{border-color:var(--primaryColor)!important;box-shadow:0 0 7px 0 var(--primaryColorOpaque)!important}::ng-deep .p-element .p-chips.p-component .p-inputtext.p-chips-multiple-container.p-focus.error{border-color:var(--red)!important}::ng-deep .p-element .p-chips .p-chips-multiple-container .p-chips-input-token input{height:25px;font-size:14px;color:#495057;padding:0;margin:0;border:0 none;outline:0 none;background-color:transparent;box-shadow:none;border-radius:0;width:100%}::ng-deep .p-element .p-chips .p-chips-multiple-container .p-chips-token{margin-right:.5rem;font-family:Open Sans,sans-serif;font-weight:600;margin-top:5px;margin-bottom:5px;background:var(--primary);color:var(--white);border-radius:var(--inputBorderRadius);cursor:default;display:inline-flex;align-items:center;flex:0 0 auto;max-width:100%}::ng-deep .p-element .p-chips-token-icon{margin-left:.5rem;cursor:pointer;color:#00f;fill:red}::ng-deep .p-element .p-chips{display:inline-flex}::ng-deep .p-element .p-chips-token-label{min-width:0;overflow:auto}::ng-deep .p-element .p-chips-token-label::-webkit-scrollbar{display:none}::ng-deep .p-element .p-fluid .p-chips{display:flex}::ng-deep .p-element .p-chips-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}::ng-deep .p-element .p-chips-clearable .p-inputtext{position:relative}::ng-deep .p-element .p-inputtext{border:none}\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: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: i3.Chips, selector: "p-chips", inputs: ["style", "styleClass", "disabled", "field", "placeholder", "max", "ariaLabel", "ariaLabelledBy", "tabindex", "inputId", "allowDuplicate", "inputStyle", "inputStyleClass", "addOnTab", "addOnBlur", "separator", "showClear"], outputs: ["onAdd", "onRemove", "onFocus", "onBlur", "onChipClick", "onClear"] }] }); }
+ `, isInline: true, 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: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: i3.Chips, selector: "p-chips", inputs: ["style", "styleClass", "disabled", "field", "placeholder", "max", "ariaLabel", "ariaLabelledBy", "tabindex", "inputId", "allowDuplicate", "inputStyle", "inputStyleClass", "addOnTab", "addOnBlur", "separator", "showClear"], outputs: ["onAdd", "onRemove", "onFocus", "onBlur", "onChipClick", "onClear"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextListInputComponent, decorators: [{
             type: Component,
@@ -1807,7 +1817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
       </p-chips>
       <div *ngIf="error" class="error">{{error}}</div>
     </div>
- `, styles: ["::ng-deep .p-element .p-chips.p-component{width:100%;font-weight:400;font-family:Open Sans,Arial,sans-serif;height:var(--defaultInputHeight);border-color:var(--stroke);border-style:solid;border-width:var(--inputBorderWidth);border-radius:var(--inputBorderRadius);padding-left:10px;padding-right:10px;outline:none;box-sizing:border-box;font-size:15px;background-color:var(--background)!important;color:var(--text);-webkit-appearance:none}::ng-deep .p-element .p-chips.p-component .p-inputtext.p-chips-multiple-container{width:100%;padding:0;border-width:var(--inputBorderWidth)}::ng-deep .p-element .p-chips.p-component .p-inputtext.p-chips-multiple-container.p-focus{border-color:var(--primaryColor)!important;box-shadow:0 0 7px 0 var(--primaryColorOpaque)!important}::ng-deep .p-element .p-chips.p-component .p-inputtext.p-chips-multiple-container.p-focus.error{border-color:var(--red)!important}::ng-deep .p-element .p-chips .p-chips-multiple-container .p-chips-input-token input{height:25px;font-size:14px;color:#495057;padding:0;margin:0;border:0 none;outline:0 none;background-color:transparent;box-shadow:none;border-radius:0;width:100%}::ng-deep .p-element .p-chips .p-chips-multiple-container .p-chips-token{margin-right:.5rem;font-family:Open Sans,sans-serif;font-weight:600;margin-top:5px;margin-bottom:5px;background:var(--primary);color:var(--white);border-radius:var(--inputBorderRadius);cursor:default;display:inline-flex;align-items:center;flex:0 0 auto;max-width:100%}::ng-deep .p-element .p-chips-token-icon{margin-left:.5rem;cursor:pointer;color:#00f;fill:red}::ng-deep .p-element .p-chips{display:inline-flex}::ng-deep .p-element .p-chips-token-label{min-width:0;overflow:auto}::ng-deep .p-element .p-chips-token-label::-webkit-scrollbar{display:none}::ng-deep .p-element .p-fluid .p-chips{display:flex}::ng-deep .p-element .p-chips-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}::ng-deep .p-element .p-chips-clearable .p-inputtext{position:relative}::ng-deep .p-element .p-inputtext{border:none}\n"] }]
+ ` }]
         }], propDecorators: { fieldName: [{
                 type: Input
             }], fieldValue: [{
@@ -2596,9 +2606,9 @@ let ListPageServiceClass = class ListPageServiceClass {
             if (!isEmpty(this.settings?.settings?.session?.id)) {
                 if (this.currentSettings?.session?.id !== settings?.session?.id && this.refreshData) {
                     this.refreshData();
-                    this.currentSettings = settings;
                 }
             }
+            this.currentSettings = settings;
         });
         router.events.subscribe((event) => {
             if (event => event instanceof NavigationEnd) {
@@ -2670,6 +2680,9 @@ let ListPageServiceClass = class ListPageServiceClass {
         }
         return text?.length > 0;
     }
+    getNetworkJwt() {
+        return this.dataService.get('network-jwts', {}, []);
+    }
     openEditForm(itemId = '', basePath) {
         if (isEmpty(itemId)) {
             itemId = 'create';
@@ -3193,9 +3206,18 @@ class TableCellNameComponent {
         return true;
     }
     linkClicked(event) {
-        this.router.navigateByUrl(`${this.cellParams.pathRoot}/${this.item.id}`);
         event.stopPropagation();
         event.preventDefault();
+        if (isFunction(this.cellParams?.cellNamePreCheck)) {
+            this.cellParams?.cellNamePreCheck(this.item).then((result) => {
+                if (!result) {
+                    return;
+                }
+                this.router.navigateByUrl(`${this.cellParams.pathRoot}/${this.item.id}`);
+            });
+            return;
+        }
+        this.router.navigateByUrl(`${this.cellParams.pathRoot}/${this.item.id}`);
     }
     get cellText() {
         let val = get(this.item, this.cellParams?.colDef?.field);
@@ -4646,17 +4668,20 @@ class TabNameService {
             ["routers", [
                     { label: 'Routers', url: '/routers' },
                     { label: 'Transit Routers', url: '/transit-routers' },
-                    { label: 'Router Policies', url: '/router-policies' },
                 ],
             ],
             ["policies", [
                     { label: 'Service Policies', url: '/service-policies' },
                     { label: 'Router Policies', url: '/router-policies' },
-                    { label: 'Service Router Policies', url: '/service-router-policies' },
+                    { label: 'Service Router Policies', url: '/service-router-policies' }
+                ]
+            ],
+            ["authentication", [
+                    { label: 'Certificate Authorities', url: '/certificate-authorities' },
                     { label: 'Auth Policies', url: '/auth-policies' },
                     { label: 'JWT Signers', url: '/jwt-signers' },
-                ],
-            ],
+                ]
+            ]
         ]);
     }
     getTabs(key) {
@@ -4704,12 +4729,31 @@ class ListPageHeaderComponent {
     clickAction(value) {
         this.actionClicked.emit(value);
     }
+    tabSelected(tab) {
+        const parsedUrl = new URL(window.location.href);
+        let path = parsedUrl.pathname;
+        if (document.baseURI) {
+            const base = new URL(document.baseURI).pathname;
+            if (path.startsWith(base)) {
+                path = path.slice(base.length);
+            }
+        }
+        let tabUrl = tab.url;
+        if (tab.url.startsWith('/')) {
+            tabUrl = tab.url.slice(1);
+        }
+        if (path.startsWith('/')) {
+            path = path.slice(1);
+        }
+        // Return the path without parameters
+        return tabUrl === path;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListPageHeaderComponent, selector: "lib-list-page-header", inputs: { title: "title", tabs: "tabs", showAdd: "showAdd", hideAction: "hideAction" }, outputs: { actionClicked: "actionClicked" }, ngImport: i0, template: "<div class=\"header\">\n    <div class=\"title\">\n        <span>{{title}}</span>\n    </div>\n    <div class=\"bread\"></div>\n    <div class=\"line\"></div>\n    <div class=\"tabs\">\n        <div *ngFor=\"let tab of tabs\" class=\"tab\" [routerLink]=\"tab.url\" [hidden]=\"tab.hidden\">{{tab.label}}</div>\n    </div>\n    <div *ngIf=\"showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('add')\"\n         class=\"action icon-plus icon-add\" data-action=\"add\"></div>\n    <div *ngIf=\"!showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('delete')\"\n         class=\"action icon-minus icon-delete\" data-action=\"delete\"></div>\n</div>\n", styles: [".header [class^=icon-],.header [class*=\" icon-\"]{font-family:zac,serif!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.header .hideAction{display:none}.header .action{text-align:center;color:var(--white);line-height:60px;font-size:30px;width:60px;height:60px;border-radius:40px;position:absolute;right:0;top:12px;background-color:var(--primary);cursor:pointer;overflow:hidden;z-index:24;box-shadow:var(--shadow);transition:var(--transition)}.header .action.icon-delete{background-color:var(--red)}.header .line{width:100%;height:4px;background-color:var(--stroke)}.header .tabs{position:relative;display:flex;flex:1 1;flex-wrap:wrap;width:100%;font-size:14px;min-height:40px;padding-top:16px}.header .tabs .tab{position:relative;float:left;margin-right:20px;padding-bottom:5px;margin-bottom:10px;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);border-bottom-width:4px;border-bottom-color:transparent;border-bottom-style:solid}.header .tabs .tab:hover{border-bottom-color:var(--inputBorder)}.header .title{height:30px;overflow:hidden;font-family:Russo One,serif;color:var(--primary);filter:brightness(50%);font-size:30px;text-transform:uppercase;font-weight:400;line-height:34px}@media (max-width: 1024px){.title{font-size:20px!important}.action{line-height:45px!important;font-size:20px!important;width:45px!important;height:45px!important;border-radius:40px!important;top:20px!important;right:0!important}}\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: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListPageHeaderComponent, selector: "lib-list-page-header", inputs: { title: "title", tabs: "tabs", showAdd: "showAdd", hideAction: "hideAction" }, outputs: { actionClicked: "actionClicked" }, ngImport: i0, template: "<div class=\"header\">\n    <div class=\"title\">\n        <span>{{title}}</span>\n    </div>\n    <div class=\"bread\"></div>\n    <div class=\"line\"></div>\n    <div class=\"tabs\">\n        <div *ngFor=\"let tab of tabs\" class=\"tab\" [ngClass]=\"{selected: tabSelected(tab)}\" [routerLink]=\"tab.url\" [hidden]=\"tab.hidden\">{{tab.label}}</div>\n    </div>\n    <div *ngIf=\"showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('add')\"\n         class=\"action icon-plus icon-add\" data-action=\"add\"></div>\n    <div *ngIf=\"!showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('delete')\"\n         class=\"action icon-minus icon-delete\" data-action=\"delete\"></div>\n</div>\n", styles: [".header [class^=icon-],.header [class*=\" icon-\"]{font-family:zac,serif!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.header .hideAction{display:none}.header .action{text-align:center;color:var(--white);line-height:60px;font-size:30px;width:60px;height:60px;border-radius:40px;position:absolute;right:0;top:12px;background-color:var(--primary);cursor:pointer;overflow:hidden;z-index:24;box-shadow:var(--shadow);transition:var(--transition)}.header .action.icon-delete{background-color:var(--red)}.header .line{width:100%;height:4px;background-color:var(--stroke)}.header .tabs{position:relative;display:flex;flex:1 1;flex-wrap:wrap;width:100%;font-size:14px;min-height:40px;padding-top:16px}.header .tabs .tab{position:relative;float:left;margin-right:20px;padding-bottom:5px;margin-bottom:10px;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);border-bottom-width:4px;border-bottom-color:transparent;border-bottom-style:solid}.header .tabs .tab:hover{border-bottom-color:var(--inputBorder)}.header .tabs .tab.selected,.header .tabs .tab.selected:hover{border-bottom-color:var(--primaryColor)}.header .title{height:30px;overflow:hidden;font-family:Russo One,serif;color:var(--primary);filter:brightness(50%);font-size:30px;text-transform:uppercase;font-weight:400;line-height:34px}@media (max-width: 1024px){.title{font-size:20px!important}.action{line-height:45px!important;font-size:20px!important;width:45px!important;height:45px!important;border-radius:40px!important;top:20px!important;right:0!important}}\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: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListPageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-list-page-header', template: "<div class=\"header\">\n    <div class=\"title\">\n        <span>{{title}}</span>\n    </div>\n    <div class=\"bread\"></div>\n    <div class=\"line\"></div>\n    <div class=\"tabs\">\n        <div *ngFor=\"let tab of tabs\" class=\"tab\" [routerLink]=\"tab.url\" [hidden]=\"tab.hidden\">{{tab.label}}</div>\n    </div>\n    <div *ngIf=\"showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('add')\"\n         class=\"action icon-plus icon-add\" data-action=\"add\"></div>\n    <div *ngIf=\"!showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('delete')\"\n         class=\"action icon-minus icon-delete\" data-action=\"delete\"></div>\n</div>\n", styles: [".header [class^=icon-],.header [class*=\" icon-\"]{font-family:zac,serif!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.header .hideAction{display:none}.header .action{text-align:center;color:var(--white);line-height:60px;font-size:30px;width:60px;height:60px;border-radius:40px;position:absolute;right:0;top:12px;background-color:var(--primary);cursor:pointer;overflow:hidden;z-index:24;box-shadow:var(--shadow);transition:var(--transition)}.header .action.icon-delete{background-color:var(--red)}.header .line{width:100%;height:4px;background-color:var(--stroke)}.header .tabs{position:relative;display:flex;flex:1 1;flex-wrap:wrap;width:100%;font-size:14px;min-height:40px;padding-top:16px}.header .tabs .tab{position:relative;float:left;margin-right:20px;padding-bottom:5px;margin-bottom:10px;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);border-bottom-width:4px;border-bottom-color:transparent;border-bottom-style:solid}.header .tabs .tab:hover{border-bottom-color:var(--inputBorder)}.header .title{height:30px;overflow:hidden;font-family:Russo One,serif;color:var(--primary);filter:brightness(50%);font-size:30px;text-transform:uppercase;font-weight:400;line-height:34px}@media (max-width: 1024px){.title{font-size:20px!important}.action{line-height:45px!important;font-size:20px!important;width:45px!important;height:45px!important;border-radius:40px!important;top:20px!important;right:0!important}}\n"] }]
+            args: [{ selector: 'lib-list-page-header', template: "<div class=\"header\">\n    <div class=\"title\">\n        <span>{{title}}</span>\n    </div>\n    <div class=\"bread\"></div>\n    <div class=\"line\"></div>\n    <div class=\"tabs\">\n        <div *ngFor=\"let tab of tabs\" class=\"tab\" [ngClass]=\"{selected: tabSelected(tab)}\" [routerLink]=\"tab.url\" [hidden]=\"tab.hidden\">{{tab.label}}</div>\n    </div>\n    <div *ngIf=\"showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('add')\"\n         class=\"action icon-plus icon-add\" data-action=\"add\"></div>\n    <div *ngIf=\"!showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('delete')\"\n         class=\"action icon-minus icon-delete\" data-action=\"delete\"></div>\n</div>\n", styles: [".header [class^=icon-],.header [class*=\" icon-\"]{font-family:zac,serif!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.header .hideAction{display:none}.header .action{text-align:center;color:var(--white);line-height:60px;font-size:30px;width:60px;height:60px;border-radius:40px;position:absolute;right:0;top:12px;background-color:var(--primary);cursor:pointer;overflow:hidden;z-index:24;box-shadow:var(--shadow);transition:var(--transition)}.header .action.icon-delete{background-color:var(--red)}.header .line{width:100%;height:4px;background-color:var(--stroke)}.header .tabs{position:relative;display:flex;flex:1 1;flex-wrap:wrap;width:100%;font-size:14px;min-height:40px;padding-top:16px}.header .tabs .tab{position:relative;float:left;margin-right:20px;padding-bottom:5px;margin-bottom:10px;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);border-bottom-width:4px;border-bottom-color:transparent;border-bottom-style:solid}.header .tabs .tab:hover{border-bottom-color:var(--inputBorder)}.header .tabs .tab.selected,.header .tabs .tab.selected:hover{border-bottom-color:var(--primaryColor)}.header .title{height:30px;overflow:hidden;font-family:Russo One,serif;color:var(--primary);filter:brightness(50%);font-size:30px;text-transform:uppercase;font-weight:400;line-height:34px}@media (max-width: 1024px){.title{font-size:20px!important}.action{line-height:45px!important;font-size:20px!important;width:45px!important;height:45px!important;border-radius:40px!important;top:20px!important;right:0!important}}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], tabs: [{
@@ -6901,11 +6945,11 @@ class TagSelectorComponent {
         return this._selectedRoleAttributes?.length <= 0 && this._selectedNamedAttributes?.length <= 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: { placeholder: "placeholder", disableField: "disableField", disableCreate: "disableCreate", hideOption: "hideOption", isLoading: "isLoading", errorMessage: "errorMessage", focusOnInit: "focusOnInit", selectedRoleAttributes: "selectedRoleAttributes", selectedNamedAttributes: "selectedNamedAttributes", hasError: "hasError", availableRoleAttributes: "availableRoleAttributes", availableNamedAttributes: "availableNamedAttributes" }, outputs: { addRoleAttribute: "addRoleAttribute", addNamedAttribute: "addNamedAttribute", roleAttributeRemoved: "roleAttributeRemoved", namedAttributeRemoved: "namedAttributeRemoved", selectedRoleAttributesChange: "selectedRoleAttributesChange", selectedNamedAttributesChange: "selectedNamedAttributesChange", filterChange: "filterChange" }, viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }, { propertyName: "dropdownWrapper", first: true, predicate: ["dropdownWrapper"], descendants: true }], ngImport: i0, template: "<span (clickOutside)=\"hide()\" [ngClass]=\"{ readOnly: disableField }\" class=\"clickOutside fullWidth tagsSelector\" >\n    <span\n            class=\"select2 select2-container select2-container--default select2-container--below select2-container--focus\"\n            dir=\"ltr\"\n    >\n        <span class=\"selection\">\n            <span\n                    [ngClass]=\"{ 'select2-selection-focus': !hideSelect, tagError: _hasError }\"\n                    aria-expanded=\"false\"\n                    aria-haspopup=\"true\"\n                    class=\"select2-selection select2-selection--multiple\"\n                    role=\"combobox\"\n                    tabindex=\"-1\"\n            >\n                <input\n                        (focus)=\"inputFocus()\"\n                        (keydown)=\"handleKeyDown($event);\"\n                        (keyup)=\"handleKeyUp($event, filterString);\"\n                        (mouseup)=\"applyFilterMouseUp()\"\n                        [(ngModel)]=\"filterString\"\n                        [disabled]=\"disableField\"\n                        [ngClass]=\"{ empty: isNothingSelected, tagError: _hasError }\"\n                        aria-autocomplete=\"list\"\n                        autocapitalize=\"off\"\n                        autocomplete=\"off\"\n                        autocorrect=\"off\"\n                        class=\"select2-search__field\"\n                        placeholder=\"{{disableField ? (isNothingSelected ? 'Nothing selected' : '') : placeholder}}\"\n                        role=\"textbox\"\n                        spellcheck=\"false\"\n                        tabindex=\"0\"\n                        type=\"search\"\n                        #search\n                />\n                <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n                <ul\n                        (click)=\"openSelect()\"\n                        [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n                        class=\"select2-selection__rendered\"\n                >\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedRoleAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"hashtag select2-selection__choice\"\n                        title=\"#{{ item }}\"\n                    >\n                        <span\n                            (click)=\"removeRoleAttribute(item); $event.stopPropagation()\"\n                            class=\"select2-selection__choice__remove\"\n                            role=\"presentation\"\n                        >\u00D7</span\n                        ><span class=\"select2-selection__choice__text\">#{{ item }}</span>\n                    </li>\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedNamedAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"select2-selection_choice_item\"\n                    >\n                        <div class=\"attag select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                        <div class=\"tag-name select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    (click)=\"removeNamedAttribute(item); $event.stopPropagation()\"\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                    </li>\n                </ul>\n            </span>\n        </span>\n        <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n    </span>\n    <span *ngIf=\"_hasError\" class=\"err\">\n        {{ errorMessage }}\n    </span>\n\n    <span\n            *ngIf=\"!hideSelect\"\n            [ngClass]=\"{ withBorder: !hideSelect }\"\n            class=\"nf-select2-dropdown select2-dropdown--below\"\n            dir=\"ltr\"\n    >\n        <span class=\"select2-results\">\n            <ul\n                    aria-expanded=\"true\"\n                    aria-hidden=\"false\"\n                    aria-multiselectable=\"true\"\n                    class=\"select2-results__options\"\n                    role=\"tree\"\n            >\n                <li\n                    (click)=\"addNewAttribute(filterString)\"\n                    [hidden]=\"filterString === '' || isAttributeSelected(filterString)\"\n                    aria-selected=\"false\"\n                    class=\"select2-results__option hashtag\"\n                    role=\"treeitem\"\n                    title=\"{{ filterString }} (New Attribute)\"\n                >\n                    {{ filterString }} (New Attribute)\n                </li>\n                <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    *ngFor=\"let option of displayedRoleOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                    class=\"hashtag select2-results__option\"\n                    role=\"treeitem\"\n                >\n                    #{{ option }}\n                </li>\n                <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    *ngFor=\"let option of displayedNamedOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                </li>\n            </ul>\n        </span>\n    </span>\n</span>\n", styles: [".searchSelector .tagButton{cursor:pointer;transition:.5s}.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container.select2-container--focus .select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container.select2-container--focus .select2-selection .select2-selection__choice__text{cursor:text;user-select:text;-webkit-user-select:text}.select2-container--default .select2-selection--multiple .select2-selection__choice{overflow:hidden;text-wrap:wrap;display:flex}.select2-container--default .select2-selection--multiple .select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-container--default .select2-selection--multiple .select2-selection__choice.tag-name{background-color:transparent}.select2-results__options li{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;position:relative}.select2-results__options li[hidden]{display:none}.select2-results__option.tag-name,.select2-results__option.attag,.select2-results__option.hashtag,.select2-selection__choice.tag-name,.select2-selection__choice.attag,.select2-selection__choice.hashtag{margin-bottom:0;margin-top:0;font-size:16px;font-weight:600;line-height:unset;padding:5px 10px;float:left;border-radius:var(--inputBorderRadius);margin-left:2px;transition:var(--transition);overflow:hidden;text-wrap:wrap;display:flex}.select2-results__option.hashtag,.select2-selection__choice.hashtag{background-color:var(--primary);position:relative;color:var(--white)}.select2-results__option.attag,.select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-results__option.tag-name,.select2-selection__choice.tag-name{background-color:transparent;position:relative;color:var(--white)}.err{color:var(--red)!important}.select2-selection{border-radius:var(--inputBorderRadius);border-width:var(--inputBorderWidth);border-color:var(--inputBorder);border-style:solid;color:var(--white);padding-left:0}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow-y:auto;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:32px;user-select:none;-webkit-user-select:none;border-radius:var(--inputBorderRadius);border:2px solid var(--stroke);color:var(--white);padding-left:0;background-color:var(--table);overflow:hidden}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection_choice_item{width:100%;overflow:hidden;position:relative}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow-y:auto;overflow-x:hidden;padding-left:8px;padding-right:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-results{display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;width:100%;gap:10px;padding:10px}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:5px}.select2-results__option{display:flex;height:-moz-fit-content;height:fit-content;padding-left:10px;padding-top:2px;padding-bottom:2px;font-size:16px;font-weight:600;user-select:none;-webkit-user-select:none;margin:0}.select2-results__option[hidden]{display:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;width:100%;background-color:var(--background);border-radius:0 0 5px 5px;display:flex;flex-wrap:wrap;gap:5px;padding:0 5px 5px}.select2-container--default .select2-selection--multiple .select2-selection__rendered.empty{padding:0;margin:0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:var(--placeholder);margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:4px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--white);filter:brightness(90%);transition:.3s}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.readOnly{opacity:.75;cursor:default}.readOnly .select2-container .select2-selection__rendered:not(.empty){min-height:var(--defaultInputHeight)}.readOnly .select2-container input:disabled{font-weight:600;font-family:Open Sans,Arial,sans-serif;height:0px!important;width:100%;padding-left:10px;padding-right:10px;margin-bottom:0;border:none;outline:none;box-sizing:border-box;box-shadow:none;cursor:text;text-align:left;background-color:var(--background)!important;color:var(--tableText);text-transform:none}.readOnly .select2-container input:disabled:hover{box-shadow:none;filter:none}.readOnly .select2-container input:disabled.empty{height:50px}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:var(--inputBorderRadius);border:2px solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-3px;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:10px;font-size:26px;cursor:pointer;display:inline-block;font-weight:400;margin-right:2px;color:var(--white)}.fullModal .select2-container--default .select2-selection--multiple{background-color:unset}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--primaryColor)}.select2-container .select2-dropdown{background-color:var(--background)}.select2-container.select2-container--default .select2-results__option[aria-selected=true]{background-color:var(--primaryColor)}.nf-select2-dropdown{background-color:var(--menu);border-top:0px;border-radius:var(--inputBorderRadius);color:var(--white);box-sizing:border-box;display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;position:absolute;width:100%;z-index:99999;max-height:200px;overflow:auto;font-weight:600;margin-top:1px;box-shadow:0 0 0 1px var(--shadow),0 8px 16px var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0px;width:100%}.select2-container input{padding-top:2px;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:503px}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:417px}.fullWidth .select2-container--below.select2-container--focus,.fullWidth .nf-select2-dropdown.select2-dropdown--below{width:100%}.nf-select2-dropdown.select2-dropdown--below.withBorder{border:none}input{box-shadow:none;font-size:14px}.tagError{border-color:var(--red)!important}::ng-deep .select2-container ::placeholder{color:var(--placeholder)}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\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$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i2$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: { placeholder: "placeholder", disableField: "disableField", disableCreate: "disableCreate", hideOption: "hideOption", isLoading: "isLoading", errorMessage: "errorMessage", focusOnInit: "focusOnInit", selectedRoleAttributes: "selectedRoleAttributes", selectedNamedAttributes: "selectedNamedAttributes", hasError: "hasError", availableRoleAttributes: "availableRoleAttributes", availableNamedAttributes: "availableNamedAttributes" }, outputs: { addRoleAttribute: "addRoleAttribute", addNamedAttribute: "addNamedAttribute", roleAttributeRemoved: "roleAttributeRemoved", namedAttributeRemoved: "namedAttributeRemoved", selectedRoleAttributesChange: "selectedRoleAttributesChange", selectedNamedAttributesChange: "selectedNamedAttributesChange", filterChange: "filterChange" }, viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }, { propertyName: "dropdownWrapper", first: true, predicate: ["dropdownWrapper"], descendants: true }], ngImport: i0, template: "<span (clickOutside)=\"hide()\" [ngClass]=\"{ readOnly: disableField }\" class=\"clickOutside fullWidth tagsSelector\" >\n    <span\n            class=\"select2 select2-container select2-container--default select2-container--below select2-container--focus\"\n            dir=\"ltr\"\n    >\n        <span class=\"selection\">\n            <span\n                    [ngClass]=\"{ 'select2-selection-focus': !hideSelect, tagError: _hasError }\"\n                    aria-expanded=\"false\"\n                    aria-haspopup=\"true\"\n                    class=\"select2-selection select2-selection--multiple\"\n                    role=\"combobox\"\n                    tabindex=\"-1\"\n            >\n                <input\n                        (focus)=\"inputFocus()\"\n                        (keydown)=\"handleKeyDown($event);\"\n                        (keyup)=\"handleKeyUp($event, filterString);\"\n                        (mouseup)=\"applyFilterMouseUp()\"\n                        [(ngModel)]=\"filterString\"\n                        [disabled]=\"disableField\"\n                        [ngClass]=\"{ empty: isNothingSelected, tagError: _hasError }\"\n                        aria-autocomplete=\"list\"\n                        autocapitalize=\"off\"\n                        autocomplete=\"off\"\n                        autocorrect=\"off\"\n                        class=\"select2-search__field\"\n                        placeholder=\"{{disableField ? (isNothingSelected ? 'Nothing selected' : '') : placeholder}}\"\n                        role=\"textbox\"\n                        spellcheck=\"false\"\n                        tabindex=\"0\"\n                        type=\"search\"\n                        #search\n                />\n                <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n                <ul\n                        (click)=\"openSelect()\"\n                        [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n                        class=\"select2-selection__rendered\"\n                >\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedRoleAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"hashtag select2-selection__choice\"\n                        title=\"#{{ item }}\"\n                    >\n                        <span\n                            (click)=\"removeRoleAttribute(item); $event.stopPropagation()\"\n                            class=\"select2-selection__choice__remove\"\n                            role=\"presentation\"\n                        >\u00D7</span\n                        ><span class=\"select2-selection__choice__text\">#{{ item }}</span>\n                    </li>\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedNamedAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"select2-selection_choice_item\"\n                    >\n                        <div class=\"attag select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                        <div class=\"tag-name select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    (click)=\"removeNamedAttribute(item); $event.stopPropagation()\"\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                    </li>\n                </ul>\n            </span>\n        </span>\n        <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n    </span>\n    <span *ngIf=\"_hasError\" class=\"err\">\n        {{ errorMessage }}\n    </span>\n\n    <span\n            *ngIf=\"!hideSelect\"\n            [ngClass]=\"{ withBorder: !hideSelect }\"\n            class=\"nf-select2-dropdown select2-dropdown--below\"\n            dir=\"ltr\"\n    >\n        <span class=\"select2-results\">\n            <ul\n                    aria-expanded=\"true\"\n                    aria-hidden=\"false\"\n                    aria-multiselectable=\"true\"\n                    class=\"select2-results__options\"\n                    role=\"tree\"\n            >\n                <li\n                    (click)=\"addNewAttribute(filterString)\"\n                    [hidden]=\"filterString === '' || isAttributeSelected(filterString)\"\n                    aria-selected=\"false\"\n                    class=\"select2-results__option hashtag\"\n                    role=\"treeitem\"\n                    title=\"{{ filterString }} (New Attribute)\"\n                >\n                    {{ filterString }} (New Attribute)\n                </li>\n                <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    *ngFor=\"let option of displayedRoleOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                    class=\"hashtag select2-results__option\"\n                    role=\"treeitem\"\n                >\n                    #{{ option }}\n                </li>\n                <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    *ngFor=\"let option of displayedNamedOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                </li>\n            </ul>\n        </span>\n    </span>\n</span>\n", styles: [".searchSelector .tagButton{cursor:pointer;transition:.5s}.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container.select2-container--focus .select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container.select2-container--focus .select2-selection .select2-selection__choice__text{cursor:text;user-select:text;-webkit-user-select:text}.select2-container--default .select2-selection--multiple .select2-selection__choice{overflow:hidden;text-wrap:wrap;display:flex}.select2-container--default .select2-selection--multiple .select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-container--default .select2-selection--multiple .select2-selection__choice.tag-name{background-color:transparent}.select2-results__options li{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;position:relative}.select2-results__options li[hidden]{display:none}.select2-results__option.tag-name,.select2-results__option.attag,.select2-results__option.hashtag,.select2-selection__choice.tag-name,.select2-selection__choice.attag,.select2-selection__choice.hashtag{margin-bottom:0;margin-top:0;font-size:16px;font-weight:600;line-height:unset;padding:5px 10px;float:left;border-radius:var(--inputBorderRadius);margin-left:2px;transition:var(--transition);overflow:hidden;text-wrap:wrap;display:flex}.select2-results__option.hashtag,.select2-selection__choice.hashtag{background-color:var(--primary);position:relative;color:var(--white)}.select2-results__option.attag,.select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-results__option.tag-name,.select2-selection__choice.tag-name{background-color:transparent;position:relative;color:var(--white)}.err{color:var(--red)!important}.select2-selection{border-radius:var(--inputBorderRadius);border-width:var(--inputBorderWidth);border-color:var(--inputBorder);border-style:solid;color:var(--white);padding-left:0}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow-y:auto;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:32px;user-select:none;-webkit-user-select:none;border-radius:var(--inputBorderRadius);border:2px solid var(--stroke);color:var(--white);padding-left:0;background-color:var(--table);overflow:hidden}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection_choice_item{width:-moz-fit-content;width:fit-content;overflow:hidden;position:relative}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow-y:auto;overflow-x:hidden;padding-left:8px;padding-right:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-results{display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;width:100%;gap:10px;padding:10px}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:5px}.select2-results__option{display:flex;height:-moz-fit-content;height:fit-content;padding-left:10px;padding-top:2px;padding-bottom:2px;font-size:16px;font-weight:600;user-select:none;-webkit-user-select:none;margin:0}.select2-results__option[hidden]{display:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;width:100%;background-color:var(--background);border-radius:0 0 5px 5px;display:flex;flex-wrap:wrap;gap:5px;padding:0 5px 5px}.select2-container--default .select2-selection--multiple .select2-selection__rendered.empty{padding:0;margin:0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:var(--placeholder);margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:4px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--white);filter:brightness(90%);transition:.3s}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.readOnly{opacity:.75;cursor:default}.readOnly .select2-container .select2-selection__rendered:not(.empty){min-height:var(--defaultInputHeight)}.readOnly .select2-container input:disabled{font-weight:600;font-family:Open Sans,Arial,sans-serif;height:0px!important;width:100%;padding-left:10px;padding-right:10px;margin-bottom:0;border:none;outline:none;box-sizing:border-box;box-shadow:none;cursor:text;text-align:left;background-color:var(--background)!important;color:var(--tableText);text-transform:none}.readOnly .select2-container input:disabled:hover{box-shadow:none;filter:none}.readOnly .select2-container input:disabled.empty{height:50px}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:var(--inputBorderRadius);border:2px solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-3px;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:10px;font-size:26px;cursor:pointer;display:inline-block;font-weight:400;margin-right:2px;color:var(--white)}.fullModal .select2-container--default .select2-selection--multiple{background-color:unset}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--primaryColor)}.select2-container .select2-dropdown{background-color:var(--background)}.select2-container.select2-container--default .select2-results__option[aria-selected=true]{background-color:var(--primaryColor)}.nf-select2-dropdown{background-color:var(--menu);border-top:0px;border-radius:var(--inputBorderRadius);color:var(--white);box-sizing:border-box;display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;position:absolute;width:100%;z-index:99999;max-height:200px;overflow:auto;font-weight:600;margin-top:1px;box-shadow:0 0 0 1px var(--shadow),0 8px 16px var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0px;width:100%}.select2-container input{padding-top:2px;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:503px}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:417px}.fullWidth .select2-container--below.select2-container--focus,.fullWidth .nf-select2-dropdown.select2-dropdown--below{width:100%}.nf-select2-dropdown.select2-dropdown--below.withBorder{border:none}input{box-shadow:none;font-size:14px}.tagError{border-color:var(--red)!important}::ng-deep .select2-container ::placeholder{color:var(--placeholder)}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\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$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i2$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tag-selector', template: "<span (clickOutside)=\"hide()\" [ngClass]=\"{ readOnly: disableField }\" class=\"clickOutside fullWidth tagsSelector\" >\n    <span\n            class=\"select2 select2-container select2-container--default select2-container--below select2-container--focus\"\n            dir=\"ltr\"\n    >\n        <span class=\"selection\">\n            <span\n                    [ngClass]=\"{ 'select2-selection-focus': !hideSelect, tagError: _hasError }\"\n                    aria-expanded=\"false\"\n                    aria-haspopup=\"true\"\n                    class=\"select2-selection select2-selection--multiple\"\n                    role=\"combobox\"\n                    tabindex=\"-1\"\n            >\n                <input\n                        (focus)=\"inputFocus()\"\n                        (keydown)=\"handleKeyDown($event);\"\n                        (keyup)=\"handleKeyUp($event, filterString);\"\n                        (mouseup)=\"applyFilterMouseUp()\"\n                        [(ngModel)]=\"filterString\"\n                        [disabled]=\"disableField\"\n                        [ngClass]=\"{ empty: isNothingSelected, tagError: _hasError }\"\n                        aria-autocomplete=\"list\"\n                        autocapitalize=\"off\"\n                        autocomplete=\"off\"\n                        autocorrect=\"off\"\n                        class=\"select2-search__field\"\n                        placeholder=\"{{disableField ? (isNothingSelected ? 'Nothing selected' : '') : placeholder}}\"\n                        role=\"textbox\"\n                        spellcheck=\"false\"\n                        tabindex=\"0\"\n                        type=\"search\"\n                        #search\n                />\n                <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n                <ul\n                        (click)=\"openSelect()\"\n                        [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n                        class=\"select2-selection__rendered\"\n                >\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedRoleAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"hashtag select2-selection__choice\"\n                        title=\"#{{ item }}\"\n                    >\n                        <span\n                            (click)=\"removeRoleAttribute(item); $event.stopPropagation()\"\n                            class=\"select2-selection__choice__remove\"\n                            role=\"presentation\"\n                        >\u00D7</span\n                        ><span class=\"select2-selection__choice__text\">#{{ item }}</span>\n                    </li>\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedNamedAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"select2-selection_choice_item\"\n                    >\n                        <div class=\"attag select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                        <div class=\"tag-name select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    (click)=\"removeNamedAttribute(item); $event.stopPropagation()\"\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                    </li>\n                </ul>\n            </span>\n        </span>\n        <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n    </span>\n    <span *ngIf=\"_hasError\" class=\"err\">\n        {{ errorMessage }}\n    </span>\n\n    <span\n            *ngIf=\"!hideSelect\"\n            [ngClass]=\"{ withBorder: !hideSelect }\"\n            class=\"nf-select2-dropdown select2-dropdown--below\"\n            dir=\"ltr\"\n    >\n        <span class=\"select2-results\">\n            <ul\n                    aria-expanded=\"true\"\n                    aria-hidden=\"false\"\n                    aria-multiselectable=\"true\"\n                    class=\"select2-results__options\"\n                    role=\"tree\"\n            >\n                <li\n                    (click)=\"addNewAttribute(filterString)\"\n                    [hidden]=\"filterString === '' || isAttributeSelected(filterString)\"\n                    aria-selected=\"false\"\n                    class=\"select2-results__option hashtag\"\n                    role=\"treeitem\"\n                    title=\"{{ filterString }} (New Attribute)\"\n                >\n                    {{ filterString }} (New Attribute)\n                </li>\n                <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    *ngFor=\"let option of displayedRoleOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                    class=\"hashtag select2-results__option\"\n                    role=\"treeitem\"\n                >\n                    #{{ option }}\n                </li>\n                <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    *ngFor=\"let option of displayedNamedOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                </li>\n            </ul>\n        </span>\n    </span>\n</span>\n", styles: [".searchSelector .tagButton{cursor:pointer;transition:.5s}.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container.select2-container--focus .select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container.select2-container--focus .select2-selection .select2-selection__choice__text{cursor:text;user-select:text;-webkit-user-select:text}.select2-container--default .select2-selection--multiple .select2-selection__choice{overflow:hidden;text-wrap:wrap;display:flex}.select2-container--default .select2-selection--multiple .select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-container--default .select2-selection--multiple .select2-selection__choice.tag-name{background-color:transparent}.select2-results__options li{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;position:relative}.select2-results__options li[hidden]{display:none}.select2-results__option.tag-name,.select2-results__option.attag,.select2-results__option.hashtag,.select2-selection__choice.tag-name,.select2-selection__choice.attag,.select2-selection__choice.hashtag{margin-bottom:0;margin-top:0;font-size:16px;font-weight:600;line-height:unset;padding:5px 10px;float:left;border-radius:var(--inputBorderRadius);margin-left:2px;transition:var(--transition);overflow:hidden;text-wrap:wrap;display:flex}.select2-results__option.hashtag,.select2-selection__choice.hashtag{background-color:var(--primary);position:relative;color:var(--white)}.select2-results__option.attag,.select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-results__option.tag-name,.select2-selection__choice.tag-name{background-color:transparent;position:relative;color:var(--white)}.err{color:var(--red)!important}.select2-selection{border-radius:var(--inputBorderRadius);border-width:var(--inputBorderWidth);border-color:var(--inputBorder);border-style:solid;color:var(--white);padding-left:0}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow-y:auto;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:32px;user-select:none;-webkit-user-select:none;border-radius:var(--inputBorderRadius);border:2px solid var(--stroke);color:var(--white);padding-left:0;background-color:var(--table);overflow:hidden}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection_choice_item{width:100%;overflow:hidden;position:relative}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow-y:auto;overflow-x:hidden;padding-left:8px;padding-right:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-results{display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;width:100%;gap:10px;padding:10px}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:5px}.select2-results__option{display:flex;height:-moz-fit-content;height:fit-content;padding-left:10px;padding-top:2px;padding-bottom:2px;font-size:16px;font-weight:600;user-select:none;-webkit-user-select:none;margin:0}.select2-results__option[hidden]{display:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;width:100%;background-color:var(--background);border-radius:0 0 5px 5px;display:flex;flex-wrap:wrap;gap:5px;padding:0 5px 5px}.select2-container--default .select2-selection--multiple .select2-selection__rendered.empty{padding:0;margin:0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:var(--placeholder);margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:4px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--white);filter:brightness(90%);transition:.3s}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.readOnly{opacity:.75;cursor:default}.readOnly .select2-container .select2-selection__rendered:not(.empty){min-height:var(--defaultInputHeight)}.readOnly .select2-container input:disabled{font-weight:600;font-family:Open Sans,Arial,sans-serif;height:0px!important;width:100%;padding-left:10px;padding-right:10px;margin-bottom:0;border:none;outline:none;box-sizing:border-box;box-shadow:none;cursor:text;text-align:left;background-color:var(--background)!important;color:var(--tableText);text-transform:none}.readOnly .select2-container input:disabled:hover{box-shadow:none;filter:none}.readOnly .select2-container input:disabled.empty{height:50px}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:var(--inputBorderRadius);border:2px solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-3px;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:10px;font-size:26px;cursor:pointer;display:inline-block;font-weight:400;margin-right:2px;color:var(--white)}.fullModal .select2-container--default .select2-selection--multiple{background-color:unset}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--primaryColor)}.select2-container .select2-dropdown{background-color:var(--background)}.select2-container.select2-container--default .select2-results__option[aria-selected=true]{background-color:var(--primaryColor)}.nf-select2-dropdown{background-color:var(--menu);border-top:0px;border-radius:var(--inputBorderRadius);color:var(--white);box-sizing:border-box;display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;position:absolute;width:100%;z-index:99999;max-height:200px;overflow:auto;font-weight:600;margin-top:1px;box-shadow:0 0 0 1px var(--shadow),0 8px 16px var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0px;width:100%}.select2-container input{padding-top:2px;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:503px}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:417px}.fullWidth .select2-container--below.select2-container--focus,.fullWidth .nf-select2-dropdown.select2-dropdown--below{width:100%}.nf-select2-dropdown.select2-dropdown--below.withBorder{border:none}input{box-shadow:none;font-size:14px}.tagError{border-color:var(--red)!important}::ng-deep .select2-container ::placeholder{color:var(--placeholder)}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\n"] }]
+            args: [{ selector: 'lib-tag-selector', template: "<span (clickOutside)=\"hide()\" [ngClass]=\"{ readOnly: disableField }\" class=\"clickOutside fullWidth tagsSelector\" >\n    <span\n            class=\"select2 select2-container select2-container--default select2-container--below select2-container--focus\"\n            dir=\"ltr\"\n    >\n        <span class=\"selection\">\n            <span\n                    [ngClass]=\"{ 'select2-selection-focus': !hideSelect, tagError: _hasError }\"\n                    aria-expanded=\"false\"\n                    aria-haspopup=\"true\"\n                    class=\"select2-selection select2-selection--multiple\"\n                    role=\"combobox\"\n                    tabindex=\"-1\"\n            >\n                <input\n                        (focus)=\"inputFocus()\"\n                        (keydown)=\"handleKeyDown($event);\"\n                        (keyup)=\"handleKeyUp($event, filterString);\"\n                        (mouseup)=\"applyFilterMouseUp()\"\n                        [(ngModel)]=\"filterString\"\n                        [disabled]=\"disableField\"\n                        [ngClass]=\"{ empty: isNothingSelected, tagError: _hasError }\"\n                        aria-autocomplete=\"list\"\n                        autocapitalize=\"off\"\n                        autocomplete=\"off\"\n                        autocorrect=\"off\"\n                        class=\"select2-search__field\"\n                        placeholder=\"{{disableField ? (isNothingSelected ? 'Nothing selected' : '') : placeholder}}\"\n                        role=\"textbox\"\n                        spellcheck=\"false\"\n                        tabindex=\"0\"\n                        type=\"search\"\n                        #search\n                />\n                <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n                <ul\n                        (click)=\"openSelect()\"\n                        [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n                        class=\"select2-selection__rendered\"\n                >\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedRoleAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"hashtag select2-selection__choice\"\n                        title=\"#{{ item }}\"\n                    >\n                        <span\n                            (click)=\"removeRoleAttribute(item); $event.stopPropagation()\"\n                            class=\"select2-selection__choice__remove\"\n                            role=\"presentation\"\n                        >\u00D7</span\n                        ><span class=\"select2-selection__choice__text\">#{{ item }}</span>\n                    </li>\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedNamedAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"select2-selection_choice_item\"\n                    >\n                        <div class=\"attag select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                        <div class=\"tag-name select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    (click)=\"removeNamedAttribute(item); $event.stopPropagation()\"\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                    </li>\n                </ul>\n            </span>\n        </span>\n        <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n    </span>\n    <span *ngIf=\"_hasError\" class=\"err\">\n        {{ errorMessage }}\n    </span>\n\n    <span\n            *ngIf=\"!hideSelect\"\n            [ngClass]=\"{ withBorder: !hideSelect }\"\n            class=\"nf-select2-dropdown select2-dropdown--below\"\n            dir=\"ltr\"\n    >\n        <span class=\"select2-results\">\n            <ul\n                    aria-expanded=\"true\"\n                    aria-hidden=\"false\"\n                    aria-multiselectable=\"true\"\n                    class=\"select2-results__options\"\n                    role=\"tree\"\n            >\n                <li\n                    (click)=\"addNewAttribute(filterString)\"\n                    [hidden]=\"filterString === '' || isAttributeSelected(filterString)\"\n                    aria-selected=\"false\"\n                    class=\"select2-results__option hashtag\"\n                    role=\"treeitem\"\n                    title=\"{{ filterString }} (New Attribute)\"\n                >\n                    {{ filterString }} (New Attribute)\n                </li>\n                <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    *ngFor=\"let option of displayedRoleOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                    class=\"hashtag select2-results__option\"\n                    role=\"treeitem\"\n                >\n                    #{{ option }}\n                </li>\n                <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    *ngFor=\"let option of displayedNamedOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                </li>\n            </ul>\n        </span>\n    </span>\n</span>\n", styles: [".searchSelector .tagButton{cursor:pointer;transition:.5s}.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container.select2-container--focus .select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container.select2-container--focus .select2-selection .select2-selection__choice__text{cursor:text;user-select:text;-webkit-user-select:text}.select2-container--default .select2-selection--multiple .select2-selection__choice{overflow:hidden;text-wrap:wrap;display:flex}.select2-container--default .select2-selection--multiple .select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-container--default .select2-selection--multiple .select2-selection__choice.tag-name{background-color:transparent}.select2-results__options li{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;position:relative}.select2-results__options li[hidden]{display:none}.select2-results__option.tag-name,.select2-results__option.attag,.select2-results__option.hashtag,.select2-selection__choice.tag-name,.select2-selection__choice.attag,.select2-selection__choice.hashtag{margin-bottom:0;margin-top:0;font-size:16px;font-weight:600;line-height:unset;padding:5px 10px;float:left;border-radius:var(--inputBorderRadius);margin-left:2px;transition:var(--transition);overflow:hidden;text-wrap:wrap;display:flex}.select2-results__option.hashtag,.select2-selection__choice.hashtag{background-color:var(--primary);position:relative;color:var(--white)}.select2-results__option.attag,.select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-results__option.tag-name,.select2-selection__choice.tag-name{background-color:transparent;position:relative;color:var(--white)}.err{color:var(--red)!important}.select2-selection{border-radius:var(--inputBorderRadius);border-width:var(--inputBorderWidth);border-color:var(--inputBorder);border-style:solid;color:var(--white);padding-left:0}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow-y:auto;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:32px;user-select:none;-webkit-user-select:none;border-radius:var(--inputBorderRadius);border:2px solid var(--stroke);color:var(--white);padding-left:0;background-color:var(--table);overflow:hidden}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection_choice_item{width:-moz-fit-content;width:fit-content;overflow:hidden;position:relative}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow-y:auto;overflow-x:hidden;padding-left:8px;padding-right:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-results{display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;width:100%;gap:10px;padding:10px}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:5px}.select2-results__option{display:flex;height:-moz-fit-content;height:fit-content;padding-left:10px;padding-top:2px;padding-bottom:2px;font-size:16px;font-weight:600;user-select:none;-webkit-user-select:none;margin:0}.select2-results__option[hidden]{display:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;width:100%;background-color:var(--background);border-radius:0 0 5px 5px;display:flex;flex-wrap:wrap;gap:5px;padding:0 5px 5px}.select2-container--default .select2-selection--multiple .select2-selection__rendered.empty{padding:0;margin:0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:var(--placeholder);margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:4px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--white);filter:brightness(90%);transition:.3s}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.readOnly{opacity:.75;cursor:default}.readOnly .select2-container .select2-selection__rendered:not(.empty){min-height:var(--defaultInputHeight)}.readOnly .select2-container input:disabled{font-weight:600;font-family:Open Sans,Arial,sans-serif;height:0px!important;width:100%;padding-left:10px;padding-right:10px;margin-bottom:0;border:none;outline:none;box-sizing:border-box;box-shadow:none;cursor:text;text-align:left;background-color:var(--background)!important;color:var(--tableText);text-transform:none}.readOnly .select2-container input:disabled:hover{box-shadow:none;filter:none}.readOnly .select2-container input:disabled.empty{height:50px}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:var(--inputBorderRadius);border:2px solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-3px;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:10px;font-size:26px;cursor:pointer;display:inline-block;font-weight:400;margin-right:2px;color:var(--white)}.fullModal .select2-container--default .select2-selection--multiple{background-color:unset}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--primaryColor)}.select2-container .select2-dropdown{background-color:var(--background)}.select2-container.select2-container--default .select2-results__option[aria-selected=true]{background-color:var(--primaryColor)}.nf-select2-dropdown{background-color:var(--menu);border-top:0px;border-radius:var(--inputBorderRadius);color:var(--white);box-sizing:border-box;display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;position:absolute;width:100%;z-index:99999;max-height:200px;overflow:auto;font-weight:600;margin-top:1px;box-shadow:0 0 0 1px var(--shadow),0 8px 16px var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0px;width:100%}.select2-container input{padding-top:2px;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:503px}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:417px}.fullWidth .select2-container--below.select2-container--focus,.fullWidth .nf-select2-dropdown.select2-dropdown--below{width:100%}.nf-select2-dropdown.select2-dropdown--below.withBorder{border:none}input{box-shadow:none;font-size:14px}.tagError{border-color:var(--red)!important}::ng-deep .select2-container ::placeholder{color:var(--placeholder)}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
                 type: Input
             }], disableField: [{
@@ -7836,7 +7880,7 @@ class ConfigurationsPageComponent extends ListPageComponent {
         super(filterService, svc, consoleEvents, dialogForm);
         this.svc = svc;
         this.tabNames = tabNames;
-        this.title = 'Configuration Management';
+        this.title = 'Configurations';
         this.formDataChanged = false;
     }
     ngOnInit() {
@@ -8367,6 +8411,9 @@ class FormHeaderComponent {
         return hasMoreActions;
     }
     requestAction(action) {
+        if (action?.name === 'save' && this.saveDisabled) {
+            return;
+        }
         if (action.name === 'toggle-view') {
             if (action.data === 'simple') {
                 this.formView = 'raw';
@@ -8394,11 +8441,11 @@ class FormHeaderComponent {
         });
     }
     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", title: "title", moreActions: "moreActions", formView: "formView", saveDisabled: "saveDisabled", saveTooltip: "saveTooltip", actionButtonText: "actionButtonText", moreActionsText: "moreActionsText" }, outputs: { formViewChange: "formViewChange", actionRequested: "actionRequested" }, 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-button\" (click)=\"requestAction({name: 'close'})\">\n                <div class=\"form-title-back-button-image\"></div>\n                <div class=\"form-title-back-button-line\"></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 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                 (click)=\"requestAction({name: 'save'})\"\n                 [ngClass]=\"{'save-disabled': saveDisabled}\"\n                 matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n                 matTooltipPosition=\"below\"\n            >{{actionButtonText}}</div>\n        </div>\n    </div>\n    <div class=\"form-header-group badges-container\">\n        <div *ngFor=\"let badge of data.badges\" 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>", styles: [":host{position:relative;width:100%;max-width:1100px;margin-bottom:10px}.form-header-container{display:flex;flex-direction:column;width:100%}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 375px)}.form-header-container.show-more-actions .header-actions-container{min-width:375px}.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:30px;margin-top:5px;gap:10px}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 200px)}.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:22px;color:var(--tableText);margin-left:7px;min-width:130px;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:5px}.form-header-container .form-title-container .form-title-back-button{display:flex;align-items:center;justify-content:center;position:relative;transform:scaleY(.8);cursor:pointer;padding-right:6px;margin-top:2px;margin-left:4px;transition:.3s}.form-header-container .form-title-container .form-title-back-button:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-button:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-image{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 %23434c5e%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:20px 14px;width:20px;height:14px;transform:rotate(90deg)}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:1px;border-right-width:1px;width:14px;position:absolute;left:8px}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:180px;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:65px;height:33px;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;pointer:not-allowed}.more-actions-container{width:150px;height:33px;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:5px;position:relative;cursor:pointer;z-index:999999;margin-right:20px}.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:5px;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:15px;margin-right:10px}.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:20px 10px;width:20px;height:10px;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:33px;width:100%;box-shadow:0 3px 5px 1px var(--boxShadow);border-radius:5px}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:25px;width:100%;padding-left:15px;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:20px}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);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:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.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:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;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:30px;display:flex;flex-direction:row;align-items:center;border-radius:30px;padding:0 12px;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:5px}.header-badge-container .circle.false{background-color:var(--white)}\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$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormHeaderComponent, selector: "lib-form-header", inputs: { data: "data", title: "title", moreActions: "moreActions", formView: "formView", saveDisabled: "saveDisabled", saveTooltip: "saveTooltip", actionButtonText: "actionButtonText", moreActionsText: "moreActionsText" }, outputs: { formViewChange: "formViewChange", actionRequested: "actionRequested" }, 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-button\" (click)=\"requestAction({name: 'close'})\">\n                <div class=\"form-title-back-button-image\"></div>\n                <div class=\"form-title-back-button-line\"></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 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                 (click)=\"requestAction({name: 'save'})\"\n                 [ngClass]=\"{'save-disabled': saveDisabled}\"\n                 matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n                 matTooltipPosition=\"below\"\n            >{{actionButtonText}}</div>\n        </div>\n    </div>\n    <div class=\"form-header-group badges-container\">\n        <div *ngFor=\"let badge of data.badges\" 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>", styles: [":host{position:relative;width:100%;max-width:1100px;margin-bottom:10px}.form-header-container{display:flex;flex-direction:column;width:100%}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 375px)}.form-header-container.show-more-actions .header-actions-container{min-width:375px}.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:30px;margin-top:5px;gap:10px}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 200px)}.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:22px;color:var(--tableText);margin-left:7px;min-width:130px;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:5px}.form-header-container .form-title-container .form-title-back-button{display:flex;align-items:center;justify-content:center;position:relative;transform:scaleY(.8);cursor:pointer;padding-right:6px;margin-top:2px;margin-left:4px;transition:.3s}.form-header-container .form-title-container .form-title-back-button:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-button:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-image{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 %23434c5e%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:20px 14px;width:20px;height:14px;transform:rotate(90deg)}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:1px;border-right-width:1px;width:14px;position:absolute;left:8px}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:180px;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:65px;height:33px;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:150px;height:33px;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:5px;position:relative;cursor:pointer;z-index:999999;margin-right:20px}.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:5px;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:15px;margin-right:10px}.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:20px 10px;width:20px;height:10px;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:33px;width:100%;box-shadow:0 3px 5px 1px var(--boxShadow);border-radius:5px}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:25px;width:100%;padding-left:15px;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:20px}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);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:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.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:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;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:30px;display:flex;flex-direction:row;align-items:center;border-radius:30px;padding:0 12px;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:5px}.header-badge-container .circle.false{background-color:var(--white)}\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$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
 }
 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-button\" (click)=\"requestAction({name: 'close'})\">\n                <div class=\"form-title-back-button-image\"></div>\n                <div class=\"form-title-back-button-line\"></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 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                 (click)=\"requestAction({name: 'save'})\"\n                 [ngClass]=\"{'save-disabled': saveDisabled}\"\n                 matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n                 matTooltipPosition=\"below\"\n            >{{actionButtonText}}</div>\n        </div>\n    </div>\n    <div class=\"form-header-group badges-container\">\n        <div *ngFor=\"let badge of data.badges\" 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>", styles: [":host{position:relative;width:100%;max-width:1100px;margin-bottom:10px}.form-header-container{display:flex;flex-direction:column;width:100%}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 375px)}.form-header-container.show-more-actions .header-actions-container{min-width:375px}.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:30px;margin-top:5px;gap:10px}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 200px)}.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:22px;color:var(--tableText);margin-left:7px;min-width:130px;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:5px}.form-header-container .form-title-container .form-title-back-button{display:flex;align-items:center;justify-content:center;position:relative;transform:scaleY(.8);cursor:pointer;padding-right:6px;margin-top:2px;margin-left:4px;transition:.3s}.form-header-container .form-title-container .form-title-back-button:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-button:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-image{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 %23434c5e%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:20px 14px;width:20px;height:14px;transform:rotate(90deg)}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:1px;border-right-width:1px;width:14px;position:absolute;left:8px}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:180px;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:65px;height:33px;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;pointer:not-allowed}.more-actions-container{width:150px;height:33px;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:5px;position:relative;cursor:pointer;z-index:999999;margin-right:20px}.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:5px;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:15px;margin-right:10px}.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:20px 10px;width:20px;height:10px;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:33px;width:100%;box-shadow:0 3px 5px 1px var(--boxShadow);border-radius:5px}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:25px;width:100%;padding-left:15px;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:20px}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);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:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.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:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;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:30px;display:flex;flex-direction:row;align-items:center;border-radius:30px;padding:0 12px;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:5px}.header-badge-container .circle.false{background-color:var(--white)}\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-button\" (click)=\"requestAction({name: 'close'})\">\n                <div class=\"form-title-back-button-image\"></div>\n                <div class=\"form-title-back-button-line\"></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 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                 (click)=\"requestAction({name: 'save'})\"\n                 [ngClass]=\"{'save-disabled': saveDisabled}\"\n                 matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n                 matTooltipPosition=\"below\"\n            >{{actionButtonText}}</div>\n        </div>\n    </div>\n    <div class=\"form-header-group badges-container\">\n        <div *ngFor=\"let badge of data.badges\" 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>", styles: [":host{position:relative;width:100%;max-width:1100px;margin-bottom:10px}.form-header-container{display:flex;flex-direction:column;width:100%}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 375px)}.form-header-container.show-more-actions .header-actions-container{min-width:375px}.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:30px;margin-top:5px;gap:10px}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 200px)}.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:22px;color:var(--tableText);margin-left:7px;min-width:130px;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:5px}.form-header-container .form-title-container .form-title-back-button{display:flex;align-items:center;justify-content:center;position:relative;transform:scaleY(.8);cursor:pointer;padding-right:6px;margin-top:2px;margin-left:4px;transition:.3s}.form-header-container .form-title-container .form-title-back-button:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-button:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-image{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 %23434c5e%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:20px 14px;width:20px;height:14px;transform:rotate(90deg)}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:1px;border-right-width:1px;width:14px;position:absolute;left:8px}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:180px;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:65px;height:33px;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:150px;height:33px;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:5px;position:relative;cursor:pointer;z-index:999999;margin-right:20px}.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:5px;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:15px;margin-right:10px}.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:20px 10px;width:20px;height:10px;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:33px;width:100%;box-shadow:0 3px 5px 1px var(--boxShadow);border-radius:5px}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:25px;width:100%;padding-left:15px;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:20px}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);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:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.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:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;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:30px;display:flex;flex-direction:row;align-items:center;border-radius:30px;padding:0 12px;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:5px}.header-badge-container .circle.false{background-color:var(--white)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }], title: [{
@@ -10296,7 +10343,7 @@ class IdentitiesPageComponent extends ListPageComponent {
         this.zacWrapperService = zacWrapperService;
         this.router = router;
         this.extService = extService;
-        this.title = 'Identity Management';
+        this.title = 'Identities';
         this.isLoading = false;
         this.identityRoleAttributes = [];
         this.formDataChanged = false;
@@ -10489,7 +10536,7 @@ class EdgeRoutersPageComponent extends ListPageComponent {
         this.tabNames = tabNames;
         this.zacWrapperService = zacWrapperService;
         this.extService = extService;
-        this.title = 'Edge Router Management';
+        this.title = 'Edge Routers';
         this.isLoading = false;
         this.edgeRouterRoleAttributes = [];
         this.formDataChanged = false;
@@ -10845,7 +10892,7 @@ class ServicesPageComponent extends ListPageComponent {
         this.serviceRoleAttributes = [];
         this.identityRoleAttributes = [];
         this.formDataChanged = false;
-        this.title = 'Manage Services';
+        this.title = 'Services';
         let userLang = navigator.language || 'en-us';
         userLang = userLang.toLowerCase();
     }
@@ -15007,6 +15054,7 @@ class EdgeRouterFormComponent extends ProjectableForm {
             else {
                 this.initData = this.formData;
             }
+            this.extService.updateFormData(this.formData);
         }).finally(() => {
             this.isLoading = false;
         });
@@ -15667,10 +15715,8 @@ class ConfigEditorComponent {
         this.lColorArray = [
             'white',
             'white',
-            'white',
         ];
         this.bColorArray = [
-            'var(--formBase)',
             'var(--formGroup)',
             'var(--formSubGroup)'
         ];
@@ -16139,7 +16185,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>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"formData.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                                    (change)=\"configChanged($event)\"\n                                    [(ngModel)]=\"svc.selectedConfigId\"\n                            >\n                                <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                    <div class=\"config-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>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.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 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.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:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);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:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.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:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;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:10px;height:30px}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);padding:7px;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 3px 9px 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(1px)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 2px 3px 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:10px;padding-right:10px;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 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}.dropdown-container{display:flex;flex-direction:column;position:relative}.dropdown-container .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinerBorderTopMedium);border-right:var(--spinerBorderRightMedium);border-bottom:var(--spinerBorderBottomMedium);border-left:var(--spinerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall);position:absolute;right:18px;top:20px;opacity:.7}.config-filter-container{display:flex;flex-direction:row}.config-filter-container .p-inputtext{border-radius:0;border-width:1px;border-color:var(--stroke);border-style:solid}.config-filter-container .p-inputtext:focus{box-shadow:none}.config-filter-container .p-inputgroup-addon{border-top-left-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius)}.config-filter-container .p-button{border-radius:0;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:var(--primary)}.config-filter-container .p-button.configs-loading .p-button-icon{display:none}.config-filter-container .p-button:focus{box-shadow:none}::ng-deep .config-filter-container .p-button.configs-loading .p-button-icon{display:none}::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:1px}::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: i5$2.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", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { 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"], 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>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"formData.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                                    (change)=\"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>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.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 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.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:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);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:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.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:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;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:10px;height:30px}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);padding:7px;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 3px 9px 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(1px)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 2px 3px 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:10px;padding-right:10px;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 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}.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:1px}::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: i5$2.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", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { 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"], 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,
@@ -16148,7 +16194,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>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"formData.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                                    (change)=\"configChanged($event)\"\n                                    [(ngModel)]=\"svc.selectedConfigId\"\n                            >\n                                <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                    <div class=\"config-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>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.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 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.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:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);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:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.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:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;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:10px;height:30px}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);padding:7px;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 3px 9px 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(1px)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 2px 3px 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:10px;padding-right:10px;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 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}.dropdown-container{display:flex;flex-direction:column;position:relative}.dropdown-container .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinerBorderTopMedium);border-right:var(--spinerBorderRightMedium);border-bottom:var(--spinerBorderBottomMedium);border-left:var(--spinerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall);position:absolute;right:18px;top:20px;opacity:.7}.config-filter-container{display:flex;flex-direction:row}.config-filter-container .p-inputtext{border-radius:0;border-width:1px;border-color:var(--stroke);border-style:solid}.config-filter-container .p-inputtext:focus{box-shadow:none}.config-filter-container .p-inputgroup-addon{border-top-left-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius)}.config-filter-container .p-button{border-radius:0;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:var(--primary)}.config-filter-container .p-button.configs-loading .p-button-icon{display:none}.config-filter-container .p-button:focus{box-shadow:none}::ng-deep .config-filter-container .p-button.configs-loading .p-button-icon{display:none}::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:1px}::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>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"formData.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                                    (change)=\"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>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.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 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.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:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);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:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.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:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;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:10px;height:30px}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);padding:7px;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 3px 9px 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(1px)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 2px 3px 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:10px;padding-right:10px;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 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}.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:1px}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"] }]
         }], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -17531,7 +17577,7 @@ class EdgeRouterPoliciesPageComponent extends ListPageComponent {
         this.routerRoleAttributes = [];
         this.identityRoleAttributes = [];
         this.formDataChanged = false;
-        this.title = 'Manage Edge Router Policies';
+        this.title = 'Edge Router Policies';
         let userLang = navigator.language || 'en-us';
         userLang = userLang.toLowerCase();
     }
@@ -18089,7 +18135,7 @@ class ServicePoliciesPageComponent extends ListPageComponent {
         this.serviceRoleAttributes = [];
         this.identityRoleAttributes = [];
         this.formDataChanged = false;
-        this.title = 'Manage Service Policies';
+        this.title = 'Service Policies';
         let userLang = navigator.language || 'en-us';
         userLang = userLang.toLowerCase();
     }
@@ -19497,7 +19543,7 @@ class ServiceEdgeRouterPoliciesPageComponent extends ListPageComponent {
         this.routerRoleAttributes = [];
         this.serviceRoleAttributes = [];
         this.formDataChanged = false;
-        this.title = 'Manage Service Edge Router Policies';
+        this.title = 'Service Edge Router Policies';
         let userLang = navigator.language || 'en-us';
         userLang = userLang.toLowerCase();
     }
@@ -20207,11 +20253,11 @@ class TerminatorsPageComponent extends ListPageComponent {
         super(filterService, svc, consoleEvents, dialogForm);
         this.svc = svc;
         this.tabNames = tabNames;
-        this.title = 'Terminator Management';
+        this.title = 'Terminators';
         this.formDataChanged = false;
     }
     ngOnInit() {
-        this.tabs = this.tabNames.getTabs('terminators');
+        this.tabs = this.tabNames.getTabs('identities');
         this.svc.refreshData = this.refreshData;
         super.ngOnInit();
     }
@@ -20463,6 +20509,7 @@ class ConfigurationFormComponent extends ProjectableForm {
         this._apiData = {};
     }
     ngOnInit() {
+        this.svc.configJsonView = false;
         super.ngOnInit();
         this.settingsService.settingsChange.subscribe((results) => {
             this.settings = results;
@@ -20824,12 +20871,18 @@ class JwtSignersPageComponent extends ListPageComponent {
         super(filterService, svc, consoleEvents, dialogForm);
         this.svc = svc;
         this.tabNames = tabNames;
-        this.title = 'JWT Signers Management';
+        this.title = 'JWT Signers';
         this.formDataChanged = false;
     }
     ngOnInit() {
-        this.tabs = this.tabNames.getTabs('policies');
+        this.tabs = this.tabNames.getTabs('authentication');
         this.svc.refreshData = this.refreshData;
+        this.svc.getNetworkJwt().then((result) => {
+            if (isEmpty(result?.data)) {
+                return;
+            }
+            this._networkJwt = result.data[0].token;
+        });
         super.ngOnInit();
     }
     headerActionClicked(action) {
@@ -20881,12 +20934,23 @@ class JwtSignersPageComponent extends ListPageComponent {
     dataChanged(event) {
         this.formDataChanged = event;
     }
+    get networkJwt() {
+        return encodeURIComponent(this._networkJwt);
+    }
+    get networkJwtFilename() {
+        let filename = 'network-jwt';
+        if (this.svc?.currentSettings?.selectedEdgeController) {
+            const urlObject = new URL(this.svc?.currentSettings?.selectedEdgeController);
+            filename = urlObject.hostname;
+        }
+        return filename;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JwtSignersPageComponent, deps: [{ token: JwtSignersPageService }, { token: DataTableFilterService }, { token: TabNameService }, { token: ConsoleEventsService }, { token: i3$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JwtSignersPageComponent, selector: "lib-configurations", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-configs-container\">\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [showAdd]=\"!itemsSelected\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n\n    <lib-data-table [tableId]=\"'configurations'\"\n                    [rowData]=\"rowData\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [emptyMsg]=\"'No Configurations defined, Click the plus to add a Configuration.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [menuItems]=\"svc.menuItems\"\n                    (gridReady)=\"gridReady($event)\"\n    >\n    </lib-data-table>\n</div>\n", styles: [".configurations{width:100%;height:100%;display:flex;flex-direction:column;position:relative;flex:1 1 auto}\n"], 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: JwtSignersPageComponent, selector: "lib-jwt-signers", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-configs-container\">\n    <a\n        *ngIf=\"_networkJwt\"\n        class=\"network-jwt-link save-button\"\n        href=\"data:application/ziti-jwt;charset=utf-8,{{networkJwt}}\"\n        download=\"{{networkJwtFilename}}.jwt\"\n    >\n        Download Network JWT\n    </a>\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [showAdd]=\"!itemsSelected\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n\n    <lib-data-table [tableId]=\"'configurations'\"\n                    [rowData]=\"rowData\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [emptyMsg]=\"'No Configurations defined, Click the plus to add a Configuration.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [menuItems]=\"svc.menuItems\"\n                    (gridReady)=\"gridReady($event)\"\n    >\n    </lib-data-table>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".configurations{width:100%;height:100%;display:flex;flex-direction:column;position:relative;flex:1 1 auto}.network-jwt-link{position:absolute;right:90px;top:25px;z-index:10001;height:var(--buttonHeightSmall);padding-left:var(--buttonImagePaddingSmall);background-position:var(--buttonImagePositionSmall);background-image:url(/assets/svgs/DownloadKey.svg);background-repeat:no-repeat;background-size:var(--buttonImageSizeSmall);color:var(--white)}\n"], 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: JwtSignersPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-configurations', template: "<div class=\"ziti-page-container ziti-configs-container\">\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [showAdd]=\"!itemsSelected\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n\n    <lib-data-table [tableId]=\"'configurations'\"\n                    [rowData]=\"rowData\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [emptyMsg]=\"'No Configurations defined, Click the plus to add a Configuration.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [menuItems]=\"svc.menuItems\"\n                    (gridReady)=\"gridReady($event)\"\n    >\n    </lib-data-table>\n</div>\n", styles: [".configurations{width:100%;height:100%;display:flex;flex-direction:column;position:relative;flex:1 1 auto}\n"] }]
+            args: [{ selector: 'lib-jwt-signers', template: "<div class=\"ziti-page-container ziti-configs-container\">\n    <a\n        *ngIf=\"_networkJwt\"\n        class=\"network-jwt-link save-button\"\n        href=\"data:application/ziti-jwt;charset=utf-8,{{networkJwt}}\"\n        download=\"{{networkJwtFilename}}.jwt\"\n    >\n        Download Network JWT\n    </a>\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [showAdd]=\"!itemsSelected\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n\n    <lib-data-table [tableId]=\"'configurations'\"\n                    [rowData]=\"rowData\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [emptyMsg]=\"'No Configurations defined, Click the plus to add a Configuration.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [menuItems]=\"svc.menuItems\"\n                    (gridReady)=\"gridReady($event)\"\n    >\n    </lib-data-table>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".configurations{width:100%;height:100%;display:flex;flex-direction:column;position:relative;flex:1 1 auto}.network-jwt-link{position:absolute;right:90px;top:25px;z-index:10001;height:var(--buttonHeightSmall);padding-left:var(--buttonImagePaddingSmall);background-position:var(--buttonImagePositionSmall);background-image:url(/assets/svgs/DownloadKey.svg);background-repeat:no-repeat;background-size:var(--buttonImageSizeSmall);color:var(--white)}\n"] }]
         }], ctorParameters: function () { return [{ type: JwtSignersPageService }, { type: DataTableFilterService }, { type: TabNameService }, { type: ConsoleEventsService }, { type: i3$1.MatDialog }]; } });
 
 class JwtSigner {
@@ -20894,13 +20958,15 @@ class JwtSigner {
         this.name = '';
         this.audience = '';
         this.issuer = '';
-        this.certPem = '';
+        this.clientId = '';
         this.claimsProperty = '';
         this.enabled = true;
         this.useExternalId = false;
         this.externalAuthUrl = '';
         this.kid = '';
+        this.scopes = [];
         this.jwksEndpoint = undefined;
+        this.certPem = undefined;
         this.tags = {};
     }
 }
@@ -20921,7 +20987,7 @@ class JwtSignerFormService {
         const data = this.getJwtSignerDataModel(formData, isUpdate);
         let prom;
         if (isUpdate) {
-            prom = this.dataService.patch('external-jwt-signers', data, formData.id, true);
+            prom = this.dataService.put('external-jwt-signers', data, formData.id, true);
         }
         else {
             prom = this.dataService.post('external-jwt-signers', data, true);
@@ -21023,6 +21089,7 @@ class JwtSignerFormComponent extends ProjectableForm {
         this.items = [];
         this.settings = {};
         this.fileSelectOpening = false;
+        this.signatureMethod = "JWKS_ENDPOINT";
         this.entityType = 'external-jwt-signers';
         this.entityClass = JwtSigner;
         this._apiData = {};
@@ -21103,17 +21170,40 @@ class JwtSignerFormComponent extends ProjectableForm {
             this.errors.issuer = true;
             labels.push('Issuer');
         }
-        if (isEmpty(this.formData.certPem)) {
+        if (isEmpty(this.formData.certPem) && isEmpty(this.formData.jwksEndpoint)) {
             this.errors.certPem = true;
-            labels.push('Cert PEM');
+            this.errors.jwksEndpoint = true;
+            labels.push('Cert PEM or JWKS Endpoint');
         }
         if (!isEmpty(this.errors)) {
             let missingFields = labels.join(', ');
             growlers.push(new GrowlerModel('error', 'Invalid', `Missing Form Data`, `Please enter a value for the highlighted fields: ${missingFields}`));
         }
-        if (!isEmpty(this.formData.certPem?.trim()) && !this.validationService.isValidPEM(this.formData.certPem?.trim())) {
-            this.errors.certPem = true;
-            growlers.push(new GrowlerModel('error', 'Invalid', `Cert PEM Invalid`, `The value you have entered for the Cert PEM field is invalid. Please check your input and try again.`));
+        if (!isEmpty(growlers)) {
+            growlers.forEach((growlerData) => {
+                this.growlerService.show(growlerData);
+            });
+            return isEmpty(this.errors);
+        }
+        if (this.signatureMethod === 'JWKS_ENDPOINT') {
+            if (isEmpty(this.formData.jwksEndpoint)) {
+                this.errors.jwksEndpoint = true;
+                growlers.push(new GrowlerModel('error', 'Invalid', `Missing JWKS Endpoint`, `Please enter a URI for the JWKS Endpoint.`));
+            }
+            else if (!this.validationService.isValidURI(this.formData.jwksEndpoint)) {
+                this.errors.jwksEndpoint = true;
+                growlers.push(new GrowlerModel('error', 'Invalid', `JWKS Endpoint Invalid`, `The value you have entered for the JWKS Endpoint field is invalid. Please check your input and try again.`));
+            }
+        }
+        else if (this.signatureMethod === 'CERT_PEM') {
+            if (isEmpty(this.formData.certPem)) {
+                this.errors.certPem = true;
+                growlers.push(new GrowlerModel('error', 'Invalid', `Missing Cert PEM`, `Please enter a URI for the JWKS Endpoint.`));
+            }
+            else if (!this.validationService.isValidPEM(this.formData.certPem?.trim())) {
+                this.errors.certPem = true;
+                growlers.push(new GrowlerModel('error', 'Invalid', `Cert PEM Invalid`, `The Cert PEM you entered is invalid. Please check your input and try again.`));
+            }
         }
         growlers.forEach((growlerData) => {
             this.growlerService.show(growlerData);
@@ -21128,12 +21218,14 @@ class JwtSignerFormComponent extends ProjectableForm {
             name: this.formData.name || '',
             audience: this.formData.audience || '',
             issuer: this.formData.issuer || '',
+            clientId: this.formData.clientId || '',
             certPem: this.formData.certPem || '',
             claimsProperty: this.formData.claimsProperty || '',
             enabled: this.formData.enabled,
             useExternalId: this.formData.useExternalId,
-            externalAuthUrl: this.formData.externalAuthUrl || '',
             kid: this.formData.kid || '',
+            externalAuthUrl: this.formData.externalAuthUrl || '',
+            scopes: this.formData.scopes || [],
             tags: this.formData.tags || {}
         };
         if (!isEmpty(this.formData.jwksEndpoint)) {
@@ -21145,6 +21237,12 @@ class JwtSignerFormComponent extends ProjectableForm {
         if (this.formData.id) {
             data.id = this.formData.id;
         }
+        if (this.signatureMethod === 'JWKS_ENDPOINT') {
+            data.certPem = undefined;
+        }
+        else {
+            data.jwksEndpoint = undefined;
+        }
         this._apiData = data;
         return this._apiData;
     }
@@ -21160,6 +21258,21 @@ class JwtSignerFormComponent extends ProjectableForm {
     toggleUseExternalId() {
         this.formData.useExternalId = !this.formData.useExternalId;
     }
+    radioKeyDownHandler(event) {
+        switch (event.key) {
+            case 'ArrowLeft':
+                this.signatureMethod = 'JWKS_ENDPOINT';
+                break;
+            case 'ArrowRight':
+                this.signatureMethod = 'CERT_PEM';
+                break;
+            default:
+                break;
+        }
+    }
+    selectSignatureMethod(method) {
+        this.signatureMethod = method;
+    }
     openFileSelect(event) {
         this.filterInput.nativeElement.click();
         this.fileSelectOpening = true;
@@ -21215,12 +21328,22 @@ class JwtSignerFormComponent extends ProjectableForm {
         const growlerData = new GrowlerModel('success', 'Success', `Text Copied`, `CURL command copied to clipboard`);
         this.growlerService.show(growlerData);
     }
+    scopesOnKeyup(event) {
+        const key = event.key?.toLowerCase();
+        if (key === " " || key === 'enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            const element = event.target;
+            element.blur();
+            element.focus();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JwtSignerFormComponent, deps: [{ token: JwtSignerFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$4.Location }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JwtSignerFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'JWT Signer Details' : 'Create JWT Signer')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n    ></lib-form-header>\n    <div class=\"jwt-signer-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\n                        [title]=\"'Name'\"\n                        [label]=\"'Required'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [layout]=\"'column'\"\n                        [showHeader]=\"false\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-header\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Issuer</span>\n                                <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"The &quot;issuer&quot; field on the JWT Signer must match the &quot;iss&quot; field on the JWT\"\n                                    matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <span class=\"form-field-label\" >Required</span>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\"/>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Claims Property</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"The &quot;claimsProperty&quot; must match the &quot;id&quot; field on a ziti identity (or externalId if &quot;Use External ID&quot; is enabled)\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Enter claims property, defaults to &quot;sub&quot;\" [(ngModel)]=\"formData.claimsProperty\"/>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Audience</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"The &quot;audience&quot; field on the JWT Signer must match the &quot;aud&quot; field on the JWT\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\"/>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">External Auth Url</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Unauthenticated clients can enumerate External JWT Signers that have an &quot;externalAuthUrl&quot; property. Clients will receive the name of the External JWT Signer and the &quot;externalAuthUrl&quot; only. This information can allow clients to initiate client authentication to the target identity provider.\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\"/>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [showHeader]=\"false\"\n                        [layout]=\"'row'\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"config-container-label\">ENABLED</div>\n                            <div\n                                    (click)=\"toggleEnabled()\"\n                                    [ngClass]=\"{ on: formData.enabled }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.enabled\" 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\">Use External ID</div>\n                            <div\n                                    (click)=\"toggleUseExternalId()\"\n                                    [ngClass]=\"{ on: formData.useExternalId }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.useExternalId\" 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-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                    >\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]=\"'Certificate Definition'\"\n                        [label]=\"'REQUIRED'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"form-field-label-container select-file-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">PEM</span>\n                                </div>\n                                <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n                                    Select File\n                                    <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\n                                </span>\n                                <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n                            </div>\n                            <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"formData.certPem\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">KID</span>\n                                </div>\n                                <span class=\"form-field-label\" >Optional</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\"/>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'JWKS Endpoint'\"\n                        [label]=\"'Optional'\"\n                >\n                    <input class=\"form-field-input read-only\" placeholder=\"Enter endpoint URL\" [(ngModel)]=\"formData.jwksEndpoint\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                        [class]=\"'api-data-no-wrap'\"\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>\n", styles: ["@charset \"UTF-8\";.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:25px;width:-moz-fit-content;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);border-style:solid;border-width:1px;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium)}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(1px)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:8px;height:8px;border-radius:50%;background:transparent;border-top:2px solid white;border-right:2px solid white;border-bottom:2px solid transparent;border-left:2px solid transparent;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}\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: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { 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"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JwtSignerFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'JWT Signer Details' : 'Create JWT Signer')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n    ></lib-form-header>\n    <div class=\"jwt-signer-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\n                        [title]=\"'Name'\"\n                        [label]=\"'Required'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [layout]=\"'column'\"\n                        [showHeader]=\"false\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-header\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Issuer</span>\n                                <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"The &quot;issuer&quot; field on the JWT Signer must match the &quot;iss&quot; field on the JWT\"\n                                    matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <span class=\"form-field-label\" >Required</span>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\"/>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Audience</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"The expected &quot;aud&quot; (audience) field on the JWT\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\"/>\n                    </div>\n                    <div class=\"form-field-row\">\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Claims Property</span>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if &quot;Use External Id&quot; is set to true. Defaults to &quot;sub&quot;\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"If enabled, will match the &quot;claimsProperty&quot; to an identity's &quot;externalId&quot; field. If false, it will match to the identity's id field.\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                            </div>\n                            <div class=\"config-item\">\n                                <div class=\"config-container toggle-container\">\n                                    <div class=\"form-field-title-container\">\n                                        <div class=\"config-container-label\">Use External ID</div>\n                                    </div>\n                                    <div\n                                            (click)=\"toggleUseExternalId()\"\n                                            [ngClass]=\"{ on: formData.useExternalId }\"\n                                            class=\"toggle\"\n                                    >\n                                        <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n                                        <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n                                        <div class=\"switch\"></div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\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                            [showHeader]=\"false\"\n                            class=\"form-field-advanced\"\n                    >\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Client ID</span>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"The client id to use when authenticating to the IDP\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">External Auth Url</span>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Scopes</span>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <p-chips (keyup)=\"scopesOnKeyup($event)\"\n                                     [(ngModel)]=\"formData.scopes\"\n                                     [allowDuplicate]=\"false\"\n                                     placeholder=\"Enter scopes\"\n                                     [addOnBlur]=\"true\"\n                                     separator=\",\">\n                            </p-chips>\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]=\"'Verification'\"\n                        [label]=\"'REQUIRED'\"\n                >\n                    <div class=\"radio-group-container\" (keydown)=\"radioKeyDownHandler($event)\" tabindex=\"0\">\n                        <div class=\"radio-button-container\" [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT'}\" (click)=\"selectSignatureMethod('JWKS_ENDPOINT')\">\n                            <div class=\"radio-button-circle\">\n                                <div class=\"radio-button-inner-circle\"></div>\n                            </div>\n                            <span class=\"radio-button-label\">JWKS Endpoint</span>\n                        </div>\n                        <div class=\"radio-button-container\" [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM'}\" (click)=\"selectSignatureMethod('CERT_PEM')\">\n                            <div class=\"radio-button-circle\">\n                                <div class=\"radio-button-inner-circle\"></div>\n                            </div>\n                            <span class=\"radio-button-label\">Cert PEM</span>\n                        </div>\n                    </div>\n                    <div *ngIf=\"signatureMethod === 'JWKS_ENDPOINT'\" class=\"form-field-input-group\">\n                        <div class=\"form-field-label-container select-file-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">JWKS Endpoint</span>\n                                </div>\n                            </div>\n                            <input class=\"form-field-input read-only\" placeholder=\"Enter endpoint URL\" [(ngModel)]=\"formData.jwksEndpoint\" [ngClass]=\"{error: errors['certPem']}\"/>\n                        </div>\n                    </div>\n                    <div *ngIf=\"signatureMethod === 'CERT_PEM'\" class=\"form-field-input-group\">\n                        <div class=\"form-field-label-container select-file-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">PEM</span>\n                                </div>\n                                <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n                                    Select File\n                                    <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\n                                </span>\n                                <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n                            </div>\n                            <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"formData.certPem\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">KID</span>\n                                </div>\n                                <span class=\"form-field-label\" >Optional</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\"/>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [showHeader]=\"false\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"config-container-label\">ENABLED</div>\n                            <div\n                                    (click)=\"toggleEnabled()\"\n                                    [ngClass]=\"{ on: formData.enabled }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.enabled\" 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]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                        [class]=\"'api-data-no-wrap'\"\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>\n", styles: ["@charset \"UTF-8\";.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:25px;width:-moz-fit-content;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);border-style:solid;border-width:1px;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-5px}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(1px)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:8px;height:8px;border-radius:50%;background:transparent;border-top:2px solid white;border-right:2px solid white;border-bottom:2px solid transparent;border-left:2px solid transparent;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:21px;height:21px;border-radius:21px;border-width:2px;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:15px;height:15px;border-radius:15px;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:14px;font-weight:600}\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: i3.Chips, selector: "p-chips", inputs: ["style", "styleClass", "disabled", "field", "placeholder", "max", "ariaLabel", "ariaLabelledBy", "tabindex", "inputId", "allowDuplicate", "inputStyle", "inputStyleClass", "addOnTab", "addOnBlur", "separator", "showClear"], outputs: ["onAdd", "onRemove", "onFocus", "onBlur", "onChipClick", "onClear"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { 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"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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: JwtSignerFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-configuration', template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'JWT Signer Details' : 'Create JWT Signer')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n    ></lib-form-header>\n    <div class=\"jwt-signer-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\n                        [title]=\"'Name'\"\n                        [label]=\"'Required'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [layout]=\"'column'\"\n                        [showHeader]=\"false\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-header\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Issuer</span>\n                                <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"The &quot;issuer&quot; field on the JWT Signer must match the &quot;iss&quot; field on the JWT\"\n                                    matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <span class=\"form-field-label\" >Required</span>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\"/>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Claims Property</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"The &quot;claimsProperty&quot; must match the &quot;id&quot; field on a ziti identity (or externalId if &quot;Use External ID&quot; is enabled)\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Enter claims property, defaults to &quot;sub&quot;\" [(ngModel)]=\"formData.claimsProperty\"/>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Audience</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"The &quot;audience&quot; field on the JWT Signer must match the &quot;aud&quot; field on the JWT\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\"/>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">External Auth Url</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Unauthenticated clients can enumerate External JWT Signers that have an &quot;externalAuthUrl&quot; property. Clients will receive the name of the External JWT Signer and the &quot;externalAuthUrl&quot; only. This information can allow clients to initiate client authentication to the target identity provider.\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\"/>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [showHeader]=\"false\"\n                        [layout]=\"'row'\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"config-container-label\">ENABLED</div>\n                            <div\n                                    (click)=\"toggleEnabled()\"\n                                    [ngClass]=\"{ on: formData.enabled }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.enabled\" 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\">Use External ID</div>\n                            <div\n                                    (click)=\"toggleUseExternalId()\"\n                                    [ngClass]=\"{ on: formData.useExternalId }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.useExternalId\" 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-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                    >\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]=\"'Certificate Definition'\"\n                        [label]=\"'REQUIRED'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"form-field-label-container select-file-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">PEM</span>\n                                </div>\n                                <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n                                    Select File\n                                    <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\n                                </span>\n                                <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n                            </div>\n                            <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"formData.certPem\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">KID</span>\n                                </div>\n                                <span class=\"form-field-label\" >Optional</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\"/>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'JWKS Endpoint'\"\n                        [label]=\"'Optional'\"\n                >\n                    <input class=\"form-field-input read-only\" placeholder=\"Enter endpoint URL\" [(ngModel)]=\"formData.jwksEndpoint\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                        [class]=\"'api-data-no-wrap'\"\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>\n", styles: ["@charset \"UTF-8\";.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:25px;width:-moz-fit-content;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);border-style:solid;border-width:1px;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium)}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(1px)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:8px;height:8px;border-radius:50%;background:transparent;border-top:2px solid white;border-right:2px solid white;border-bottom:2px solid transparent;border-left:2px solid transparent;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}\n"] }]
+            args: [{ selector: 'lib-configuration', template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'JWT Signer Details' : 'Create JWT Signer')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n    ></lib-form-header>\n    <div class=\"jwt-signer-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\n                        [title]=\"'Name'\"\n                        [label]=\"'Required'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [layout]=\"'column'\"\n                        [showHeader]=\"false\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-header\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Issuer</span>\n                                <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"The &quot;issuer&quot; field on the JWT Signer must match the &quot;iss&quot; field on the JWT\"\n                                    matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <span class=\"form-field-label\" >Required</span>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\"/>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Audience</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"The expected &quot;aud&quot; (audience) field on the JWT\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\"/>\n                    </div>\n                    <div class=\"form-field-row\">\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Claims Property</span>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if &quot;Use External Id&quot; is set to true. Defaults to &quot;sub&quot;\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"If enabled, will match the &quot;claimsProperty&quot; to an identity's &quot;externalId&quot; field. If false, it will match to the identity's id field.\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                            </div>\n                            <div class=\"config-item\">\n                                <div class=\"config-container toggle-container\">\n                                    <div class=\"form-field-title-container\">\n                                        <div class=\"config-container-label\">Use External ID</div>\n                                    </div>\n                                    <div\n                                            (click)=\"toggleUseExternalId()\"\n                                            [ngClass]=\"{ on: formData.useExternalId }\"\n                                            class=\"toggle\"\n                                    >\n                                        <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n                                        <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n                                        <div class=\"switch\"></div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\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                            [showHeader]=\"false\"\n                            class=\"form-field-advanced\"\n                    >\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Client ID</span>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"The client id to use when authenticating to the IDP\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">External Auth Url</span>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Scopes</span>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <p-chips (keyup)=\"scopesOnKeyup($event)\"\n                                     [(ngModel)]=\"formData.scopes\"\n                                     [allowDuplicate]=\"false\"\n                                     placeholder=\"Enter scopes\"\n                                     [addOnBlur]=\"true\"\n                                     separator=\",\">\n                            </p-chips>\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]=\"'Verification'\"\n                        [label]=\"'REQUIRED'\"\n                >\n                    <div class=\"radio-group-container\" (keydown)=\"radioKeyDownHandler($event)\" tabindex=\"0\">\n                        <div class=\"radio-button-container\" [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT'}\" (click)=\"selectSignatureMethod('JWKS_ENDPOINT')\">\n                            <div class=\"radio-button-circle\">\n                                <div class=\"radio-button-inner-circle\"></div>\n                            </div>\n                            <span class=\"radio-button-label\">JWKS Endpoint</span>\n                        </div>\n                        <div class=\"radio-button-container\" [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM'}\" (click)=\"selectSignatureMethod('CERT_PEM')\">\n                            <div class=\"radio-button-circle\">\n                                <div class=\"radio-button-inner-circle\"></div>\n                            </div>\n                            <span class=\"radio-button-label\">Cert PEM</span>\n                        </div>\n                    </div>\n                    <div *ngIf=\"signatureMethod === 'JWKS_ENDPOINT'\" class=\"form-field-input-group\">\n                        <div class=\"form-field-label-container select-file-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">JWKS Endpoint</span>\n                                </div>\n                            </div>\n                            <input class=\"form-field-input read-only\" placeholder=\"Enter endpoint URL\" [(ngModel)]=\"formData.jwksEndpoint\" [ngClass]=\"{error: errors['certPem']}\"/>\n                        </div>\n                    </div>\n                    <div *ngIf=\"signatureMethod === 'CERT_PEM'\" class=\"form-field-input-group\">\n                        <div class=\"form-field-label-container select-file-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">PEM</span>\n                                </div>\n                                <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n                                    Select File\n                                    <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\n                                </span>\n                                <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n                            </div>\n                            <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"formData.certPem\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">KID</span>\n                                </div>\n                                <span class=\"form-field-label\" >Optional</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\"/>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [showHeader]=\"false\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"config-container-label\">ENABLED</div>\n                            <div\n                                    (click)=\"toggleEnabled()\"\n                                    [ngClass]=\"{ on: formData.enabled }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.enabled\" 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]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                        [class]=\"'api-data-no-wrap'\"\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>\n", styles: ["@charset \"UTF-8\";.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:25px;width:-moz-fit-content;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);border-style:solid;border-width:1px;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-5px}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(1px)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:8px;height:8px;border-radius:50%;background:transparent;border-top:2px solid white;border-right:2px solid white;border-bottom:2px solid transparent;border-left:2px solid transparent;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:21px;height:21px;border-radius:21px;border-width:2px;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:15px;height:15px;border-radius:15px;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:14px;font-weight:600}\n"] }]
         }], ctorParameters: function () { return [{ type: JwtSignerFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SHAREDZ_EXTENSION]
@@ -21256,150 +21379,907 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-function playerFactory() {
-    return import(/* webpackChunkName: 'lottie-web' */ 'lottie-web');
-}
-class OpenZitiConsoleLibModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OpenZitiConsoleLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: OpenZitiConsoleLibModule, declarations: [ZacWrapperComponent,
-            SafePipe,
-            ExtendableComponent,
-            StringInputComponent,
-            NumberInputComponent,
-            BooleanToggleInputComponent,
-            ObjectComponent,
-            SelectorInputComponent,
-            TextListInputComponent,
-            CheckboxListInputComponent,
-            ProtocolAddressPortInputComponent,
-            SideToolbarComponent,
-            SideNavbarComponent,
-            SideBannerComponent,
-            PasswordInputComponent,
-            TerminatorFormComponent,
-            ConfigurationsPageComponent,
-            ListPageHeaderComponent,
-            FilterBarComponent,
-            ListPageFormComponent,
-            IdentitiesPageComponent,
-            EdgeRoutersPageComponent,
-            DataTableComponent,
-            TableCellSelectComponent,
-            TableColumnSelectComponent,
-            TableCellMenuComponent,
-            TableColumnMenuComponent,
-            TableColumnDefaultComponent,
-            TableColumnFilterComponent,
-            IdentityFormComponent,
-            EdgeRouterFormComponent,
-            HiddenColumnsBarComponent,
-            FilterBarComponent,
-            ExtendableComponent,
-            ConfirmComponent,
-            NoItemsComponent,
-            SideModalComponent,
-            FormHeaderComponent,
-            FormFieldContainerComponent,
-            PreviewListComponent,
-            LoadingIndicatorComponent,
-            FormFieldToggleComponent,
-            JsonViewComponent,
-            TagSelectorComponent,
-            QrCodeComponent,
-            TableCellTokenComponent,
-            OSTooltipComponent,
-            SDKTooltipComponent,
-            OverridesComponent,
-            ResetEnrollmentComponent,
-            IdentityServicePathComponent,
-            NetworkVisualizerComponent,
-            CustomTagsComponent,
-            ServicesPageComponent,
-            ServiceFormComponent,
-            PortRangesComponent,
-            ForwardingConfigComponent,
-            CardListComponent,
-            SimpleServiceComponent,
-            CardComponent,
-            CreationSummaryDialogComponent,
-            ConfigEditorComponent,
-            ServicePoliciesPageComponent,
-            ServicePolicyFormComponent,
-            EdgeRouterPoliciesPageComponent,
-            EdgeRouterPolicyFormComponent,
-            MultiActionButtonComponent,
-            TableCellNameComponent,
-            ServiceEdgeRouterPoliciesPageComponent,
-            ServiceEdgeRouterPolicyFormComponent,
-            TerminatorsPageComponent,
-            TerminatorFormComponent,
-            ConfigurationFormComponent,
-            JwtSignersPageComponent,
-            JwtSignerFormComponent], imports: [CommonModule,
-            FormsModule,
-            MatDialogModule,
-            HttpClientModule,
-            ZacRoutingModule,
-            ChipsModule,
-            CalendarModule,
-            AgGridModule,
-            QRCodeModule,
-            ClickOutsideModule,
-            NgJsonEditorModule,
-            MatTooltipModule,
-            MatAutocompleteModule, i1$2.LottieModule, DropdownModule], exports: [ZacWrapperComponent,
-            ExtendableComponent,
-            SideToolbarComponent,
-            SideNavbarComponent,
-            SideBannerComponent,
-            StringInputComponent,
-            SelectorInputComponent,
-            PasswordInputComponent,
-            NumberInputComponent,
-            BooleanToggleInputComponent,
-            ObjectComponent,
-            TextListInputComponent,
-            IdentityServicePathComponent,
-            NetworkVisualizerComponent,
-            CheckboxListInputComponent,
-            ProtocolAddressPortInputComponent,
-            ConfigurationsPageComponent,
-            ConfigurationFormComponent,
-            EdgeRouterFormComponent,
-            IdentitiesPageComponent,
-            EdgeRoutersPageComponent,
-            ServicesPageComponent,
-            ZacRoutingModule,
-            SideModalComponent,
-            IdentityFormComponent,
-            LoadingIndicatorComponent,
-            GrowlerModule,
-            FormFieldContainerComponent,
-            FormFieldToggleComponent,
-            ServiceFormComponent,
-            ServicePoliciesPageComponent,
-            ServicePolicyFormComponent,
-            EdgeRouterPoliciesPageComponent,
-            TerminatorsPageComponent,
-            TerminatorFormComponent,
-            JwtSignersPageComponent,
-            JwtSignerFormComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OpenZitiConsoleLibModule, providers: [
-            { provide: SHAREDZ_EXTENSION, useClass: ExtensionsNoopService },
-            { provide: ZITI_NAVIGATOR, useValue: {} },
+class AuthPoliciesPageService extends ListPageServiceClass {
+    constructor(schemaSvc, settings, filterService, csvDownloadService, extService, router, dialogForm) {
+        super(settings, filterService, csvDownloadService, extService, router);
+        this.schemaSvc = schemaSvc;
+        this.router = router;
+        this.dialogForm = dialogForm;
+        this.paging = this.DEFAULT_PAGING;
+        this.resourceType = 'auth-policies';
+        this.selectedConfig = {};
+        this.modalType = '';
+        this.menuItems = [
+            { name: 'Edit', action: 'update' },
+            { name: 'Delete', action: 'delete' },
+        ];
+        this.validate = (formData) => {
+            return Promise.resolve({ passed: true });
+        };
+    }
+    initTableColumns() {
+        const allowedHeaderComponentParams = {
+            filterType: 'SELECT',
+            enableSorting: true,
+            filterOptions: [
+                { label: 'All', value: '' },
+                { label: 'Allowed', value: true },
+                { label: 'Not Allowed', value: false },
+            ]
+        };
+        const createdAtHeaderComponentParams = {
+            filterType: 'DATETIME',
+        };
+        return [
             {
-                provide: APP_INITIALIZER,
-                useFactory: onAppInit,
-                deps: [Injector],
-                multi: true
+                colId: 'name',
+                field: 'name',
+                headerName: 'Name',
+                headerComponent: TableColumnDefaultComponent,
+                headerComponentParams: this.headerComponentParams,
+                cellRenderer: TableCellNameComponent,
+                cellRendererParams: { pathRoot: this.basePath, cellNamePreCheck: this.checkDefaultAuthPolicy.bind(this) },
+                onCellClicked: (data) => {
+                    if (this.hasSelectedText()) {
+                        return;
+                    }
+                    this.checkDefaultAuthPolicy(data?.data).then((result) => {
+                        if (!result) {
+                            return;
+                        }
+                        this.openEditForm(data?.data?.id);
+                    });
+                },
+                resizable: true,
+                cellClass: 'nf-cell-vert-align tCol',
+                sortable: true,
+                filter: true,
+                sortColumn: this.sort.bind(this)
             },
-        ], imports: [CommonModule,
-            FormsModule,
-            MatDialogModule,
-            HttpClientModule,
-            ZacRoutingModule,
-            ChipsModule,
-            CalendarModule,
+            {
+                colId: 'primary.cert.allowed',
+                field: 'primary.cert.allowed',
+                headerName: 'Cert',
+                headerComponent: TableColumnDefaultComponent,
+                headerComponentParams: allowedHeaderComponentParams,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align tCol',
+                sortable: true,
+                filter: true,
+                sortColumn: this.sort.bind(this),
+            },
+            {
+                colId: 'primary.extJwt.allowed',
+                field: 'primary.extJwt.allowed',
+                headerName: 'External JWT',
+                headerComponent: TableColumnDefaultComponent,
+                headerComponentParams: allowedHeaderComponentParams,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align tCol',
+                sortable: true,
+                filter: true,
+                sortColumn: this.sort.bind(this),
+            },
+            {
+                colId: 'primary.updb.allowed',
+                field: 'primary.updb.allowed',
+                headerName: 'UPDB',
+                headerComponent: TableColumnDefaultComponent,
+                headerComponentParams: allowedHeaderComponentParams,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align tCol',
+                sortable: true,
+                filter: true,
+                sortColumn: this.sort.bind(this),
+            },
+            {
+                colId: 'createdAt',
+                field: 'createdAt',
+                headerName: 'Created At',
+                headerComponent: TableColumnDefaultComponent,
+                headerComponentParams: createdAtHeaderComponentParams,
+                valueFormatter: this.createdAtFormatter,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align tCol',
+            }
+        ];
+    }
+    checkDefaultAuthPolicy(authPolicy) {
+        if (authPolicy.id !== 'default') {
+            return Promise.resolve(true);
+        }
+        const confirmationMessage = `<p>WARNING: Do not change the default policy unless you're sure you know what you are doing.</p>
+             <p>Before changing the default policy, it's recommended that you make another policy and apply that to other users first. Then make sure you can still authenticate. </p>
+             <p>Do you still want to continue?</p>`;
+        const data = {
+            appendId: 'ConfirmDefaultAuthPolicy',
+            title: 'Are You Sure?',
+            message: confirmationMessage,
+            confirmLabel: 'Yes',
+            cancelLabel: 'Oops, no get me out of here',
+            showCancelLink: true
+        };
+        this.dialogRef = this.dialogForm.open(ConfirmComponent, {
+            data: data,
+            autoFocus: false,
+        });
+        return firstValueFrom(this.dialogRef.afterClosed());
+    }
+    getData(filters, sort) {
+        // we can customize filters or sorting here before moving on...
+        return super.getTableData(this.resourceType, this.paging, filters, sort)
+            .then((results) => {
+            return this.processData(results);
+        });
+    }
+    processData(results) {
+        if (!isEmpty(results?.data)) {
+            //pre-process data before rendering
+            results.data = this.addActionsPerRow(results);
+        }
+        return results;
+    }
+    addActionsPerRow(results) {
+        return results.data.map((row) => {
+            row.actionList = ['update', 'delete'];
+            return row;
+        });
+    }
+    openUpdate(item) {
+        this.modalType = 'auth-policy';
+        if (item) {
+            this.selectedConfig = item;
+            this.selectedConfig.badges = [];
+            unset(this.selectedConfig, '_links');
+        }
+        else {
+            this.selectedConfig = new Service$1();
+        }
+        this.sideModalOpen = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPoliciesPageService, deps: [{ token: SchemaService }, { token: SETTINGS_SERVICE }, { token: DataTableFilterService }, { token: CsvDownloadService }, { token: SHAREDZ_EXTENSION }, { token: i4.Router }, { token: i3$1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPoliciesPageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPoliciesPageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: SchemaService }, { type: SettingsService, decorators: [{
+                    type: Inject,
+                    args: [SETTINGS_SERVICE]
+                }] }, { type: DataTableFilterService }, { type: CsvDownloadService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SHAREDZ_EXTENSION]
+                }] }, { type: i4.Router }, { type: i3$1.MatDialog }]; } });
+
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+class AuthPoliciesPageComponent extends ListPageComponent {
+    constructor(svc, filterService, tabNames, consoleEvents, dialogForm) {
+        super(filterService, svc, consoleEvents, dialogForm);
+        this.svc = svc;
+        this.tabNames = tabNames;
+        this.title = 'Auth Policies';
+        this.formDataChanged = false;
+    }
+    ngOnInit() {
+        this.tabs = this.tabNames.getTabs('authentication');
+        this.svc.refreshData = this.refreshData;
+        super.ngOnInit();
+    }
+    headerActionClicked(action) {
+        switch (action) {
+            case 'add':
+                this.svc.openEditForm();
+                break;
+            case 'edit':
+                this.svc.openEditForm();
+                break;
+            case 'delete':
+                let defaultCheckPromise = Promise.resolve(true);
+                const selectedItems = this.rowData.filter((row) => {
+                    if (row.selected && row.id === 'default') {
+                        defaultCheckPromise = this.svc.checkDefaultAuthPolicy(row);
+                    }
+                    return row.selected;
+                });
+                defaultCheckPromise.then((result) => {
+                    if (!result) {
+                        return;
+                    }
+                    const label = selectedItems.length > 1 ? 'auth policies' : 'auth policy';
+                    this.openBulkDelete(selectedItems, label);
+                });
+                break;
+            default:
+        }
+    }
+    tableAction(event) {
+        switch (event?.action) {
+            case 'toggleAll':
+            case 'toggleItem':
+                this.itemToggled(event.item);
+                break;
+            case 'update':
+                this.svc.checkDefaultAuthPolicy(event.item).then((result) => {
+                    if (!result) {
+                        return;
+                    }
+                    this.svc.openEditForm(event.item?.id);
+                });
+                break;
+            case 'create':
+                this.svc.openEditForm();
+                break;
+            case 'delete':
+                this.svc.checkDefaultAuthPolicy(event.item).then((result) => {
+                    if (!result) {
+                        return;
+                    }
+                    this.deleteItem(event.item);
+                });
+                break;
+            default:
+                break;
+        }
+    }
+    deleteItem(item) {
+        this.openBulkDelete([item], 'auth-policy');
+    }
+    closeModal(event) {
+        this.svc.sideModalOpen = false;
+        if (event?.refresh) {
+            this.refreshData();
+        }
+    }
+    dataChanged(event) {
+        this.formDataChanged = event;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPoliciesPageComponent, deps: [{ token: AuthPoliciesPageService }, { token: DataTableFilterService }, { token: TabNameService }, { token: ConsoleEventsService }, { token: i3$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AuthPoliciesPageComponent, selector: "lib-auth-policies", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-configs-container\">\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [showAdd]=\"!itemsSelected\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n\n    <lib-data-table [tableId]=\"'configurations'\"\n                    [rowData]=\"rowData\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [emptyMsg]=\"'No Configurations defined, Click the plus to add a Configuration.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [menuItems]=\"svc.menuItems\"\n                    (gridReady)=\"gridReady($event)\"\n    >\n    </lib-data-table>\n</div>\n", styles: [".configurations{width:100%;height:100%;display:flex;flex-direction:column;position:relative;flex:1 1 auto}\n"], 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPoliciesPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-auth-policies', template: "<div class=\"ziti-page-container ziti-configs-container\">\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [showAdd]=\"!itemsSelected\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n\n    <lib-data-table [tableId]=\"'configurations'\"\n                    [rowData]=\"rowData\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [emptyMsg]=\"'No Configurations defined, Click the plus to add a Configuration.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [menuItems]=\"svc.menuItems\"\n                    (gridReady)=\"gridReady($event)\"\n    >\n    </lib-data-table>\n</div>\n", styles: [".configurations{width:100%;height:100%;display:flex;flex-direction:column;position:relative;flex:1 1 auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: AuthPoliciesPageService }, { type: DataTableFilterService }, { type: TabNameService }, { type: ConsoleEventsService }, { type: i3$1.MatDialog }]; } });
+
+class AuthPolicy {
+    constructor() {
+        this.name = '';
+        this.id = '';
+        this.primary = {
+            cert: {
+                allowed: false,
+                allowExpiredCerts: false,
+            },
+            extJwt: {
+                allowed: false,
+                allowedSigners: []
+            },
+            updb: {
+                allowed: false,
+                lockoutDurationMinutes: 0,
+                maxAttempts: 5,
+                minPasswordLength: 5,
+                requireMixedCase: false,
+                requireNumberChar: false,
+                requireSpecialChar: false
+            }
+        };
+        this.secondary = {
+            requireTotp: false,
+            requireExtJwtSigner: undefined
+        };
+        this.tags = {};
+    }
+}
+
+class AuthPolicyFormService {
+    constructor(dataService, extService, growlerService, validationService) {
+        this.dataService = dataService;
+        this.extService = extService;
+        this.growlerService = growlerService;
+        this.validationService = validationService;
+        this.items = [];
+        this.errors = [];
+        this.saveDisabled = false;
+        this.jwtSigners = [];
+        this.jwtSignerNamedAttributes = [];
+        this.jwtSignerNamedAttributesMap = {};
+        this.jwtSignersLoading = false;
+        this.paging = {
+            filter: "",
+            noSearch: true,
+            order: "asc",
+            page: 1,
+            searchOn: "name",
+            sort: "name",
+            total: 100
+        };
+    }
+    getJwtSignerNamedAttributes() {
+        return this.dataService.get('external-jwt-signers', { rawFilter: true, filter: '', sort: 'name', order: 'asc', total: -1, page: 1 }, []).then((result) => {
+            const namedAttributes = result.data.map((identity) => {
+                this.jwtSignerNamedAttributesMap[identity.name] = identity.id;
+                return identity.name;
+            });
+            this.jwtSignerNamedAttributes = namedAttributes;
+            return namedAttributes;
+        });
+    }
+    getJwtSigners(filters = [], page = 1) {
+        this.jwtSignersLoading = true;
+        const paging = cloneDeep(this.paging);
+        if (filters.length > 0) {
+            paging.noSearch = false;
+        }
+        return this.dataService.get('external-jwt-signers', paging, filters).then((result) => {
+            this.jwtSigners = result.data;
+        }).finally(() => {
+            this.jwtSignersLoading = false;
+        });
+    }
+    save(formData) {
+        const isUpdate = !isEmpty(formData.id);
+        const data = this.getAuthPolicyDataModel(formData, isUpdate);
+        let prom;
+        if (isUpdate) {
+            prom = this.dataService.put('auth-policies', data, formData.id, true);
+        }
+        else {
+            prom = this.dataService.post('auth-policies', data, true);
+        }
+        return prom.then(async (result) => {
+            const id = isUpdate ? formData.id : (result?.data?.id || result?.id);
+            let config = await this.dataService.getSubdata('auth-policies', id, '').then((svcData) => {
+                return svcData.data;
+            });
+            return this.extService.formDataSaved(config).then((formSavedResult) => {
+                if (!formSavedResult) {
+                    return config;
+                }
+                const growlerData = new GrowlerModel('success', 'Success', `Auth Policy ${isUpdate ? 'Updated' : 'Created'}`, `Successfully ${isUpdate ? 'updated' : 'created'} Auth Policy: ${formData.name}`);
+                this.growlerService.show(growlerData);
+                return config;
+            }).catch((result) => {
+                return false;
+            });
+        }).catch((resp) => {
+            let errorMessage;
+            if (resp?.error?.error?.cause?.message) {
+                errorMessage = resp?.error?.error?.cause?.message;
+            }
+            else if (resp?.error?.error?.cause?.reason) {
+                errorMessage = resp?.error?.error?.cause?.reason;
+            }
+            else if (resp?.error?.message) {
+                errorMessage = resp?.error?.message;
+            }
+            else {
+                errorMessage = 'An unknown error occurred';
+            }
+            const growlerData = new GrowlerModel('error', 'Error', `Error Creating Auth Policy`, errorMessage);
+            this.growlerService.show(growlerData);
+            throw resp;
+        });
+    }
+    getAuthPolicyDataModel(formData, isUpdate) {
+        const saveModel = new AuthPolicy();
+        const modelProperties = keys(saveModel);
+        modelProperties.forEach((prop) => {
+            switch (prop) {
+                default:
+                    saveModel[prop] = formData[prop];
+            }
+        });
+        return saveModel;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPolicyFormService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: GrowlerService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPolicyFormService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPolicyFormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: ZitiDataService, decorators: [{
+                    type: Inject,
+                    args: [ZITI_DATA_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SHAREDZ_EXTENSION]
+                }] }, { type: GrowlerService }, { type: ValidationService }]; } });
+
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+class AuthPolicyFormComponent extends ProjectableForm {
+    constructor(svc, schemaSvc, growlerService, extService, settingsService, zitiService, router, route, location, validationService) {
+        super(growlerService, extService, zitiService, router, route, location);
+        this.svc = svc;
+        this.schemaSvc = schemaSvc;
+        this.settingsService = settingsService;
+        this.zitiService = zitiService;
+        this.router = router;
+        this.route = route;
+        this.validationService = validationService;
+        this.formData = new AuthPolicy();
+        this.errors = {};
+        this.close = new EventEmitter();
+        this.allowedJwtSignerAttributes = [];
+        this.formView = 'simple';
+        this.options = [];
+        this.isEditing = !isEmpty(this.formData.id);
+        this.formDataInvalid = false;
+        this.editMode = false;
+        this.items = [];
+        this.settings = {};
+        this.fileSelectOpening = false;
+        this.entityType = 'auth-policies';
+        this.entityClass = AuthPolicy;
+        this.jwtSignersFilterChangedDebounced = debounce(this.jwtSignerFilterChanged.bind(this), 200);
+        this._apiData = {};
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.svc.getJwtSigners();
+        this.svc.getJwtSignerNamedAttributes().then(() => {
+            this.initSelectedAttributes();
+        });
+        this.settingsService.settingsChange.subscribe((results) => {
+            this.settings = results;
+        });
+    }
+    entityUpdated() {
+        super.entityUpdated();
+    }
+    ngOnDestroy() {
+        this.clearForm();
+    }
+    headerActionRequested(event) {
+        switch (event.name) {
+            case 'save':
+                this.save(event);
+                break;
+            case 'close':
+                this.returnToListPage();
+                break;
+            case 'toggle-view':
+                this.formView = event.data;
+                break;
+        }
+    }
+    clear() {
+        this.formData.configTypeId = '';
+        this.clearForm();
+    }
+    clearForm() {
+        this.items.forEach((item) => {
+            if (item?.component)
+                item.component.destroy();
+        });
+        this.errors = {};
+        this.items = [];
+        this.formData = new AuthPolicy();
+        if (this.subscription)
+            this.subscription.unsubscribe();
+    }
+    allowedJwtSignersChanged(event) {
+        this.formData.primary.extJwt.allowedSigners = this.getSelectedAttributes(this.allowedJwtSignerAttributes, this.svc.jwtSignerNamedAttributesMap);
+    }
+    getSelectedAttributes(namedAttributes, namedAttributeMap) {
+        const prependedNamedAttributes = namedAttributes.map((attr) => {
+            return namedAttributeMap[attr];
+        });
+        return [...prependedNamedAttributes];
+    }
+    initSelectedAttributes() {
+        const jwtSignerNamedAttributesMap = invert(this.svc.jwtSignerNamedAttributesMap);
+        this.formData.primary?.extJwt?.allowedSigners?.forEach(attr => {
+            this.allowedJwtSignerAttributes.push(jwtSignerNamedAttributesMap[attr]);
+        });
+    }
+    async save(event) {
+        if (!this.validate()) {
+            return;
+        }
+        const tagVals = this.getTagValues();
+        if (!isEmpty(tagVals)) {
+            forOwn(tagVals, (value, key) => {
+                this.formData.tags[key] = value;
+            });
+        }
+        const apiData = this.apiData;
+        apiData.id = this.formData.id;
+        this.isLoading = true;
+        this.svc.save(apiData).then((result) => {
+            if (this.isModal) {
+                this.closeModal(true, true);
+                return;
+            }
+            this.initData = this.formData;
+            this._dataChange = false;
+            this.returnToListPage();
+        }).finally(() => {
+            this.isLoading = false;
+        });
+    }
+    validate() {
+        this.errors = {};
+        const labels = [];
+        const growlers = [];
+        if (isEmpty(this.formData.name)) {
+            this.errors.name = true;
+            labels.push('Name');
+        }
+        if (!isEmpty(this.errors)) {
+            let missingFields = labels.join(', ');
+            growlers.push(new GrowlerModel('error', 'Invalid', `Missing Form Data`, `Please enter a value for the highlighted fields: ${missingFields}`));
+        }
+        if (!isEmpty(growlers)) {
+            growlers.forEach((growlerData) => {
+                this.growlerService.show(growlerData);
+            });
+            return isEmpty(this.errors);
+        }
+        growlers.forEach((growlerData) => {
+            this.growlerService.show(growlerData);
+        });
+        return isEmpty(this.errors);
+    }
+    get apiCallURL() {
+        return this.settings.selectedEdgeController + '/edge/management/v1/auth-policies' + (this.formData.id ? `/${this.formData.id}` : '');
+    }
+    get apiData() {
+        const data = {
+            name: this.formData.name || '',
+            primary: this.formData.primary || {},
+            secondary: this.formData.secondary || {},
+            tags: this.formData.tags || {}
+        };
+        this._apiData = data;
+        return this._apiData;
+    }
+    set apiData(data) {
+        this._apiData = data;
+    }
+    dataChanged(event) {
+        this._apiData = cloneDeep(this.apiData);
+    }
+    toggleCertAllowed() {
+        this.formData.primary.cert.allowed = !this.formData.primary.cert.allowed;
+        if (!this.formData.primary.cert.allowed) {
+            this.formData.primary.cert.allowExpiredCerts = false;
+        }
+    }
+    toggleExtJwtAllowed() {
+        this.formData.primary.extJwt.allowed = !this.formData.primary.extJwt.allowed;
+    }
+    toggleUpdbAllowed() {
+        this.formData.primary.updb.allowed = !this.formData.primary.updb.allowed;
+    }
+    toggleAllowExpiredCerts() {
+        this.formData.primary.cert.allowExpiredCerts = !this.formData.primary.cert.allowExpiredCerts;
+    }
+    toggleUpdbMixed() {
+        this.formData.primary.updb.requireMixedCase = !this.formData.primary.updb.requireMixedCase;
+    }
+    toggleUpdbNumeric() {
+        this.formData.primary.updb.requireNumericChar = !this.formData.primary.updb.requireNumericChar;
+    }
+    toggleUpdbSpecial() {
+        this.formData.primary.updb.requireSpecialChar = !this.formData.primary.updb.requireSpecialChar;
+    }
+    toggleRequireTotp() {
+        this.formData.secondary.requireTotp = !this.formData.secondary.requireTotp;
+    }
+    openFileSelect(event) {
+        this.filterInput.nativeElement.click();
+        this.fileSelectOpening = true;
+        delay(() => {
+            this.fileSelectOpening = false;
+        }, 1000);
+    }
+    selectPemFile(event) {
+        console.log(event);
+        const file = event?.target?.files[0];
+        if (file) {
+            const fileReader = new FileReader();
+            fileReader.onload = (fileLoadedEvent) => {
+                const textFromSelectedFile = fileLoadedEvent.target?.result;
+                if (!this.validationService.isValidPEM(textFromSelectedFile?.trim())) {
+                    this.errors.certPem = true;
+                    const growlerData = new GrowlerModel('error', 'Invalid', `Cert PEM Invalid`, `The file selected for the Cert PEM field is invalid. Please check your input and try again.`);
+                    this.growlerService.show(growlerData);
+                    this.formData.certPem = 'Invalid PEM. Please select or enter a valid PEM certificate.';
+                }
+                else {
+                    unset(this.errors, 'certPem');
+                    this.formData.certPem = textFromSelectedFile;
+                }
+            };
+            fileReader.readAsText(file, "UTF-8");
+        }
+    }
+    apiActionRequested(action) {
+        switch (action.id) {
+            case 'cli':
+                this.copyCLICommand();
+                break;
+            case 'curl':
+                this.copyCURLCommand();
+                break;
+        }
+    }
+    copyCLICommand() {
+        const command = `ziti edge ${this.formData.id ? 'update' : 'create'} auth-policy ${this.formData.id ? `'${this.formData.id}'` : ''} ${this.formData.id ? '--name' : ''} '${this.formData.name}' --primary-cert-allowed '${this.formData.primary.cert.allowed}' --primary-cert-expired-allowed '${this.formData.primary.cert.allowExpiredCerts}' --primary-ext-jwt-allowed '${this.formData.primary.extJwt.allowed}' --primary-ext-jwt-allowed-signers ${this.formData.primary.extJwt.allowedSigners.join(',') || ''} --primary-updb-allowed '${this.formData.primary.updb.allowed}' --primary-updb-lockout-min ${this.formData.primary.updb.lockoutDurationMinutes} --primary-updb-max-attempts ${this.formData.primary.updb.maxAttempts} --primary-updb-min-length ${this.formData.primary.updb.minPasswordLength} --primary-updb-req-mixed-case '${this.formData.primary.updb.requireMixedCase}' --primary-updb-req-numbers '${this.formData.primary.updb.requireNumberChar}' --primary-updb-req-special '${this.formData.primary.updb.requireSpecialChar}' --secondary-req-ext-jwt-signer '${this.formData.secondary.requireExtJwtSigner}' --secondary-req-totp '${this.formData.secondary.requireTotp}' --tags-json '${JSON.stringify(this.formData.tags)}'`;
+        navigator.clipboard.writeText(command);
+        const growlerData = new GrowlerModel('success', 'Success', `Text Copied`, `CLI command copied to clipboard`);
+        this.growlerService.show(growlerData);
+    }
+    copyCURLCommand() {
+        const command = `curl '${this.apiCallURL}' \\
+    ${this.formData.id ? '--request PATCH \\' : '\\'}
+    -H 'accept: application/json' \\
+    -H 'content-type: application/json' \\
+    -H 'zt-session: ${this.settings.session.id}' \\
+    --data-raw '${JSON.stringify(this.apiData)}'`;
+        navigator.clipboard.writeText(command);
+        const growlerData = new GrowlerModel('success', 'Success', `Text Copied`, `CURL command copied to clipboard`);
+        this.growlerService.show(growlerData);
+    }
+    scopesOnKeyup(event) {
+        const key = event.key?.toLowerCase();
+        if (key === " " || key === 'enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            const element = event.target;
+            element.blur();
+            element.focus();
+        }
+    }
+    jwtSignerFilterChanged(event) {
+        if (event?.keyCode === KEY_CODES.LEFT_ARROW || event?.keyCode === KEY_CODES.RIGHT_ARROW || event?.keyCode === KEY_CODES.UP_ARROW || event?.keyCode === KEY_CODES.DOWN_ARROW) {
+            return;
+        }
+        let filters = [];
+        if (event?.target?.value) {
+            filters.push({
+                columnId: 'name',
+                value: event.target.value,
+                label: event.target.value,
+                filterName: 'Name',
+                type: 'TEXTINPUT',
+            });
+        }
+        this.svc.getJwtSigners(filters, 1);
+    }
+    secondaryJwtSignerChanged(event) {
+        this.svc.filteredJwtSigners = this.svc.jwtSigners.filter((jwtSigner) => {
+            return jwtSigner.id === this.formData.secondary.requireExtJwtSigner;
+        });
+    }
+    clearJwtSignerFilter(event) {
+        const filters = [];
+        this.svc.getJwtSigners(filters, 1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPolicyFormComponent, deps: [{ token: AuthPolicyFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$4.Location }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AuthPolicyFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n    ></lib-form-header>\n    <div class=\"jwt-signer-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\n                        [title]=\"'Name'\"\n                        [label]=\"'Required'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Primary Authentication'\"\n                        [layout]=\"'row'\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Cert</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow x509 certificate based authentication\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleCertAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.cert.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.cert.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.cert.allowed\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Ext JWT</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow externally signed JWT bearer tokens\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleExtJwtAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.extJwt.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.extJwt.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.extJwt.allowed\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">UPDB</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow authentication via a traditional &quot;Username Password Database&quot;\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleUpdbAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.updb.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.updb.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.updb.allowed\" 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                        *ngIf=\"formData.primary.cert.allowed\"\n                        [title]=\"'Cert Options'\"\n                        [layout]=\"'row'\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Allow Expired Certificates</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow expired client certificates to authenticate\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleAllowExpiredCerts()\"\n                                    [ngClass]=\"{ on: formData.primary.cert.allowExpiredCerts }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.cert.allowExpiredCerts\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.cert.allowExpiredCerts\" 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                        *ngIf=\"formData.primary.extJwt.allowed\"\n                        [title]=\"'Ext JWT Options'\"\n                        [layout]=\"'column'\"\n                >\n                    <div class=\"form-field-label-container allowed-signers-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Allowed JWT Signers</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Choose which External JWT Signers may be used for authentication\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <lib-tag-selector\n                                [(selectedNamedAttributes)]=\"allowedJwtSignerAttributes\"\n                                [availableNamedAttributes]=\"svc.jwtSignerNamedAttributes\"\n                                [placeholder]=\"'Select which External JWT Signers to allow'\"\n                                (selectedNamedAttributesChange)=\"allowedJwtSignersChanged($event)\"\n                        ></lib-tag-selector>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.primary.updb.allowed\"\n                        [title]=\"'UPDB Options'\"\n                        [layout]=\"'column'\"\n                >\n                    <div class=\"form-field-row updb-input-options\">\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Minimum Length</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.minPasswordLength\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Max Attempts</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.maxAttempts\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Lockout Duration <div class=\"form-sub-text\">(min)</div></span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter time in min\" type=\"number\" [(ngModel)]=\"formData.primary.updb.lockoutDurationMinutes\"/>\n                        </div>\n                    </div>\n                    <div class=\"form-field-row\">\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Mixed Case</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require upper and lower case charachters\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbMixed()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireMixedCase }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireMixedCase\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireMixedCase\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Numeric</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require numerical charachters 0-9\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbNumeric()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireNumericChar }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireNumericChar\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireNumericChar\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Special</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require special (non-alpha numeric) charachters. ie. !%$@*\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbSpecial()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireSpecialChar }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireSpecialChar\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireSpecialChar\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\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                    >\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]=\"'Secondary Authentication'\"\n                        [label]=\"'OPTIONAL'\"\n                        [layout]=\"'column'\"\n                        [contentStyle]=\"'z-index: 1000001'\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">TOTP MFA</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Require authenticating clients to have TOTP MFA enabled (Time-based, One-Time Password)\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Require TOTP</div>\n                                </div>\n                                <div\n                                        (click)=\"toggleRequireTotp()\"\n                                        [ngClass]=\"{ on: formData.secondary.requireTotp }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.secondary.requireTotp\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.secondary.requireTotp\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">JWT Signer</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Require every client request to have a JWT from the specified External JTW Signer in the HTTP Authentication header\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <p-dropdown\n                                placeholder=\"Select JWT Signer...\"\n                                optionLabel=\"name\"\n                                optionValue=\"id\"\n                                filterBy=\"name\"\n                                [options]=\"svc.jwtSigners\"\n                                [filter]=\"true\"\n                                [showClear]=\"true\"\n                                (change)=\"secondaryJwtSignerChanged($event)\"\n                                [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\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)=\"jwtSignersFilterChangedDebounced($event)\" />\n                                    </div>\n                                    <button pButton\n                                            icon=\"pi pi-times\"\n                                            [ngClass]=\"{'configs-loading': svc.jwtSignersLoading}\"\n                                            (click)=\"clearJwtSignerFilter($event)\"\n                                            severity=\"secondary\">\n                                    </button>\n                                    <div class=\"spinner\" *ngIf=\"svc.jwtSignersLoading\"></div>\n                                </div>\n                            </ng-template>\n                        </p-dropdown>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                        [class]=\"'api-data-no-wrap'\"\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>\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:500px}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:25px;width:-moz-fit-content;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);border-style:solid;border-width:1px;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-5px}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(1px)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:8px;height:8px;border-radius:50%;background:transparent;border-top:2px solid white;border-right:2px solid white;border-bottom:2px solid transparent;border-left:2px solid transparent;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:21px;height:21px;border-radius:21px;border-width:2px;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:15px;height:15px;border-radius:15px;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:14px;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: i5$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { 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"], 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: AuthPolicyFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-configuration', template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n    ></lib-form-header>\n    <div class=\"jwt-signer-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\n                        [title]=\"'Name'\"\n                        [label]=\"'Required'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Primary Authentication'\"\n                        [layout]=\"'row'\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Cert</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow x509 certificate based authentication\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleCertAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.cert.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.cert.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.cert.allowed\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Ext JWT</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow externally signed JWT bearer tokens\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleExtJwtAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.extJwt.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.extJwt.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.extJwt.allowed\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">UPDB</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow authentication via a traditional &quot;Username Password Database&quot;\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleUpdbAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.updb.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.updb.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.updb.allowed\" 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                        *ngIf=\"formData.primary.cert.allowed\"\n                        [title]=\"'Cert Options'\"\n                        [layout]=\"'row'\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Allow Expired Certificates</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow expired client certificates to authenticate\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleAllowExpiredCerts()\"\n                                    [ngClass]=\"{ on: formData.primary.cert.allowExpiredCerts }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.cert.allowExpiredCerts\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.cert.allowExpiredCerts\" 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                        *ngIf=\"formData.primary.extJwt.allowed\"\n                        [title]=\"'Ext JWT Options'\"\n                        [layout]=\"'column'\"\n                >\n                    <div class=\"form-field-label-container allowed-signers-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Allowed JWT Signers</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Choose which External JWT Signers may be used for authentication\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <lib-tag-selector\n                                [(selectedNamedAttributes)]=\"allowedJwtSignerAttributes\"\n                                [availableNamedAttributes]=\"svc.jwtSignerNamedAttributes\"\n                                [placeholder]=\"'Select which External JWT Signers to allow'\"\n                                (selectedNamedAttributesChange)=\"allowedJwtSignersChanged($event)\"\n                        ></lib-tag-selector>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.primary.updb.allowed\"\n                        [title]=\"'UPDB Options'\"\n                        [layout]=\"'column'\"\n                >\n                    <div class=\"form-field-row updb-input-options\">\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Minimum Length</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.minPasswordLength\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Max Attempts</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.maxAttempts\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Lockout Duration <div class=\"form-sub-text\">(min)</div></span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter time in min\" type=\"number\" [(ngModel)]=\"formData.primary.updb.lockoutDurationMinutes\"/>\n                        </div>\n                    </div>\n                    <div class=\"form-field-row\">\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Mixed Case</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require upper and lower case charachters\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbMixed()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireMixedCase }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireMixedCase\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireMixedCase\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Numeric</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require numerical charachters 0-9\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbNumeric()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireNumericChar }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireNumericChar\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireNumericChar\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Special</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require special (non-alpha numeric) charachters. ie. !%$@*\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbSpecial()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireSpecialChar }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireSpecialChar\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireSpecialChar\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\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                    >\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]=\"'Secondary Authentication'\"\n                        [label]=\"'OPTIONAL'\"\n                        [layout]=\"'column'\"\n                        [contentStyle]=\"'z-index: 1000001'\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">TOTP MFA</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Require authenticating clients to have TOTP MFA enabled (Time-based, One-Time Password)\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Require TOTP</div>\n                                </div>\n                                <div\n                                        (click)=\"toggleRequireTotp()\"\n                                        [ngClass]=\"{ on: formData.secondary.requireTotp }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.secondary.requireTotp\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.secondary.requireTotp\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">JWT Signer</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Require every client request to have a JWT from the specified External JTW Signer in the HTTP Authentication header\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <p-dropdown\n                                placeholder=\"Select JWT Signer...\"\n                                optionLabel=\"name\"\n                                optionValue=\"id\"\n                                filterBy=\"name\"\n                                [options]=\"svc.jwtSigners\"\n                                [filter]=\"true\"\n                                [showClear]=\"true\"\n                                (change)=\"secondaryJwtSignerChanged($event)\"\n                                [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\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)=\"jwtSignersFilterChangedDebounced($event)\" />\n                                    </div>\n                                    <button pButton\n                                            icon=\"pi pi-times\"\n                                            [ngClass]=\"{'configs-loading': svc.jwtSignersLoading}\"\n                                            (click)=\"clearJwtSignerFilter($event)\"\n                                            severity=\"secondary\">\n                                    </button>\n                                    <div class=\"spinner\" *ngIf=\"svc.jwtSignersLoading\"></div>\n                                </div>\n                            </ng-template>\n                        </p-dropdown>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                        [class]=\"'api-data-no-wrap'\"\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>\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:500px}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:25px;width:-moz-fit-content;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);border-style:solid;border-width:1px;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-5px}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(1px)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:8px;height:8px;border-radius:50%;background:transparent;border-top:2px solid white;border-right:2px solid white;border-bottom:2px solid transparent;border-left:2px solid transparent;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:21px;height:21px;border-radius:21px;border-width:2px;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:15px;height:15px;border-radius:15px;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:14px;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}\n"] }]
+        }], ctorParameters: function () { return [{ type: AuthPolicyFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SHAREDZ_EXTENSION]
+                }] }, { type: SettingsService, decorators: [{
+                    type: Inject,
+                    args: [SETTINGS_SERVICE]
+                }] }, { type: ZitiDataService, decorators: [{
+                    type: Inject,
+                    args: [ZITI_DATA_SERVICE]
+                }] }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i1$4.Location }, { type: ValidationService }]; }, propDecorators: { formData: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['fileSelect']
+            }] } });
+
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+function playerFactory() {
+    return import(/* webpackChunkName: 'lottie-web' */ 'lottie-web');
+}
+class OpenZitiConsoleLibModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OpenZitiConsoleLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: OpenZitiConsoleLibModule, declarations: [ZacWrapperComponent,
+            SafePipe,
+            ExtendableComponent,
+            StringInputComponent,
+            NumberInputComponent,
+            BooleanToggleInputComponent,
+            ObjectComponent,
+            SelectorInputComponent,
+            TextListInputComponent,
+            CheckboxListInputComponent,
+            ProtocolAddressPortInputComponent,
+            SideToolbarComponent,
+            SideNavbarComponent,
+            SideBannerComponent,
+            PasswordInputComponent,
+            TerminatorFormComponent,
+            ConfigurationsPageComponent,
+            ListPageHeaderComponent,
+            FilterBarComponent,
+            ListPageFormComponent,
+            IdentitiesPageComponent,
+            EdgeRoutersPageComponent,
+            DataTableComponent,
+            TableCellSelectComponent,
+            TableColumnSelectComponent,
+            TableCellMenuComponent,
+            TableColumnMenuComponent,
+            TableColumnDefaultComponent,
+            TableColumnFilterComponent,
+            IdentityFormComponent,
+            EdgeRouterFormComponent,
+            HiddenColumnsBarComponent,
+            FilterBarComponent,
+            ExtendableComponent,
+            ConfirmComponent,
+            NoItemsComponent,
+            SideModalComponent,
+            FormHeaderComponent,
+            FormFieldContainerComponent,
+            PreviewListComponent,
+            LoadingIndicatorComponent,
+            FormFieldToggleComponent,
+            JsonViewComponent,
+            TagSelectorComponent,
+            QrCodeComponent,
+            TableCellTokenComponent,
+            OSTooltipComponent,
+            SDKTooltipComponent,
+            OverridesComponent,
+            ResetEnrollmentComponent,
+            IdentityServicePathComponent,
+            NetworkVisualizerComponent,
+            CustomTagsComponent,
+            ServicesPageComponent,
+            ServiceFormComponent,
+            PortRangesComponent,
+            ForwardingConfigComponent,
+            CardListComponent,
+            SimpleServiceComponent,
+            CardComponent,
+            CreationSummaryDialogComponent,
+            ConfigEditorComponent,
+            ServicePoliciesPageComponent,
+            ServicePolicyFormComponent,
+            EdgeRouterPoliciesPageComponent,
+            EdgeRouterPolicyFormComponent,
+            MultiActionButtonComponent,
+            TableCellNameComponent,
+            ServiceEdgeRouterPoliciesPageComponent,
+            ServiceEdgeRouterPolicyFormComponent,
+            TerminatorsPageComponent,
+            TerminatorFormComponent,
+            ConfigurationFormComponent,
+            JwtSignersPageComponent,
+            JwtSignerFormComponent,
+            AuthPoliciesPageComponent,
+            AuthPolicyFormComponent], imports: [CommonModule,
+            FormsModule,
+            MatDialogModule,
+            MatRadioModule,
+            HttpClientModule,
+            ZacRoutingModule,
+            ChipsModule,
+            CalendarModule,
+            AgGridModule,
+            QRCodeModule,
+            ClickOutsideModule,
+            NgJsonEditorModule,
+            MatTooltipModule,
+            MatAutocompleteModule, i1$2.LottieModule, DropdownModule], exports: [ZacWrapperComponent,
+            ExtendableComponent,
+            SideToolbarComponent,
+            SideNavbarComponent,
+            SideBannerComponent,
+            StringInputComponent,
+            SelectorInputComponent,
+            PasswordInputComponent,
+            NumberInputComponent,
+            BooleanToggleInputComponent,
+            ObjectComponent,
+            TextListInputComponent,
+            IdentityServicePathComponent,
+            NetworkVisualizerComponent,
+            CheckboxListInputComponent,
+            ProtocolAddressPortInputComponent,
+            ConfigurationsPageComponent,
+            ConfigurationFormComponent,
+            EdgeRouterFormComponent,
+            IdentitiesPageComponent,
+            EdgeRoutersPageComponent,
+            ServicesPageComponent,
+            ZacRoutingModule,
+            SideModalComponent,
+            IdentityFormComponent,
+            LoadingIndicatorComponent,
+            GrowlerModule,
+            FormFieldContainerComponent,
+            FormFieldToggleComponent,
+            ServiceFormComponent,
+            ServicePoliciesPageComponent,
+            ServicePolicyFormComponent,
+            EdgeRouterPoliciesPageComponent,
+            TerminatorsPageComponent,
+            TerminatorFormComponent,
+            JwtSignersPageComponent,
+            JwtSignerFormComponent,
+            AuthPoliciesPageComponent,
+            AuthPolicyFormComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OpenZitiConsoleLibModule, providers: [
+            { provide: SHAREDZ_EXTENSION, useClass: ExtensionsNoopService },
+            { provide: ZITI_NAVIGATOR, useValue: {} },
+            {
+                provide: APP_INITIALIZER,
+                useFactory: onAppInit,
+                deps: [Injector],
+                multi: true
+            },
+        ], imports: [CommonModule,
+            FormsModule,
+            MatDialogModule,
+            MatRadioModule,
+            HttpClientModule,
+            ZacRoutingModule,
+            ChipsModule,
+            CalendarModule,
             AgGridModule,
             QRCodeModule,
             ClickOutsideModule,
@@ -21488,12 +22368,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TerminatorFormComponent,
                         ConfigurationFormComponent,
                         JwtSignersPageComponent,
-                        JwtSignerFormComponent
+                        JwtSignerFormComponent,
+                        AuthPoliciesPageComponent,
+                        AuthPolicyFormComponent
                     ],
                     imports: [
                         CommonModule,
                         FormsModule,
                         MatDialogModule,
+                        MatRadioModule,
                         HttpClientModule,
                         ZacRoutingModule,
                         ChipsModule,
@@ -21544,7 +22427,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TerminatorsPageComponent,
                         TerminatorFormComponent,
                         JwtSignersPageComponent,
-                        JwtSignerFormComponent
+                        JwtSignerFormComponent,
+                        AuthPoliciesPageComponent,
+                        AuthPolicyFormComponent
                     ],
                     providers: [
                         { provide: SHAREDZ_EXTENSION, useClass: ExtensionsNoopService },
@@ -21560,7 +22445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 const VERSION = {
-    "version": "3.5.0"
+    "version": "3.6.1"
 };
 
 /*
@@ -21617,13 +22502,15 @@ const COMPONENTS = {
                     <div class="tab" data-go="/service-policies" data-i18n="ServicePolicies"></div>
                     <div class="tab" data-go="/router-policies" data-i18n="EdgeRouterPolicies"></div>
                     <div class="tab" data-go="/service-router-policies" data-i18n="ServiceRouterPolicies"></div>
-                    <div class="tab" data-go="/auth-policies" data-i18n="AuthPolicies"></div>
-                    <div class="tab" data-go="/jwt-signers" data-i18n="JwtSigners"></div>
                 </div>`,
+    tabAuthentication: `<div class="tabs">
+                            <div class="tab" data-go="/cas" data-i18n="CAs"></div>
+                            <div class="tab" data-go="/auth-policies" data-i18n="AuthPolicies"></div>
+                            <div class="tab" data-go="/jwt-signers" data-i18n="JwtSigners"></div>
+                        </div>`,
     tabRouters: `<div class="tabs">
                     <div class="tab" data-go="/routers" data-i18n="EdgeRouters"></div>
                     <div class="tab" data-go="/transit-routers" data-i18n="TransitRouters"></div>
-                    <div class="tab" data-go="/router-policies" data-i18n="EdgeRouterPolicies"></div>
                 </div>`,
     tabServers: `<div class="tabs">
                   <div class="tab" data-go="/servers" data-i18n="ManageServers">Manage Servers</div>
@@ -21995,6 +22882,11 @@ class ZacWrapperService extends ZacWrapperServiceClass {
                     this.handleServiceResult(result, returnTo);
                 });
                 break;
+            case 'verify':
+                this.callZitiEdge(`${controllerDomain}/edge/management/v1/cas/${params.id}/verify`, params.cert, 'POST', 'text/plain').then((result) => {
+                    this.handleServiceResult(result, returnTo);
+                });
+                break;
             case 'tags':
                 // For no this is a no-op
                 break;
@@ -22390,8 +23282,8 @@ class ZacWrapperService extends ZacWrapperServiceClass {
             });
         });
     }
-    callZitiEdge(url, body, method = 'GET') {
-        const options = this.getHttpOptions();
+    callZitiEdge(url, body, method = 'GET', contentType) {
+        const options = this.getHttpOptions(false, contentType);
         let prom;
         switch (method) {
             case 'GET':
@@ -22429,7 +23321,7 @@ class ZacWrapperService extends ZacWrapperServiceClass {
         if (!this.modalShow || !this.modalClose) {
             return;
         }
-        const modalIds = ['DetailModal', 'AddMessageModal', 'QRModal', 'ResetModal', 'OverrideModal', 'AddModal'];
+        const modalIds = ['DetailModal', 'AddMessageModal', 'QRModal', 'ResetModal', 'OverrideModal', 'AddModal', 'VerifyModal'];
         modal.show = (id, readOnly) => {
             this.modalShow(id, readOnly);
             if (modalIds.includes(id)) {
@@ -22444,7 +23336,7 @@ class ZacWrapperService extends ZacWrapperServiceClass {
             $$4('.tab[data-go="/recipes"]').hide();
         }
     }
-    getHttpOptions(useZitiCreds = false) {
+    getHttpOptions(useZitiCreds = false, contentType) {
         const options = {
             headers: {
                 accept: 'application/json',
@@ -22452,6 +23344,10 @@ class ZacWrapperService extends ZacWrapperServiceClass {
             params: {},
             responseType: 'json',
         };
+        if (contentType) {
+            const headers = new HttpHeaders().set('Content-Type', contentType);
+            options.headers = headers;
+        }
         return options;
     }
     handleError(result) {
@@ -22598,6 +23494,23 @@ class NodeDataService extends ZitiDataService {
             return results;
         })));
     }
+    put(type, model, id, chained = false) {
+        let clientSub;
+        const nodeServerURL = window.location.origin;
+        const serviceUrl = nodeServerURL + '/api/dataSave';
+        const body = { paging: this.DEFAULT_PAGING, type: type, save: model, id: id, chained: chained };
+        return firstValueFrom(this.httpClient.post(serviceUrl, body, {}).pipe(catchError((err) => {
+            const error = "Server Not Accessible";
+            if (err.code !== "ECONNREFUSED")
+                throw (err);
+            throw ({ error: error });
+        }), map((results) => {
+            if (!isEmpty(results.error)) {
+                throw ({ error: results.error });
+            }
+            return results;
+        })));
+    }
     patch(type, model, id, chained = false) {
         let clientSub;
         const nodeServerURL = window.location.origin;
@@ -22901,6 +23814,21 @@ class ZitiControllerDataService extends ZitiDataService {
             return result;
         })));
     }
+    put(type, model, id, chained = false) {
+        const apiVersions = this.settingsService.apiVersions || {};
+        const prefix = apiVersions["edge-management"]?.v1?.path || '/edge/management/v1';
+        const url = this.settingsService.settings.selectedEdgeController;
+        const serviceUrl = url + prefix + "/" + type + '/' + id;
+        this.httpClient.patch(serviceUrl, model, {});
+        return firstValueFrom(this.httpClient.put(serviceUrl, model, {}).pipe(catchError((err) => {
+            const error = "Server Not Accessible";
+            if (err.code !== "ECONNREFUSED")
+                throw (err);
+            throw ({ error: error });
+        }), map((result) => {
+            return result;
+        })));
+    }
     patch(type, model, id, chained = false) {
         const apiVersions = this.settingsService.apiVersions || {};
         const prefix = apiVersions["edge-management"]?.v1?.path || '/edge/management/v1';
@@ -23140,5 +24068,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BooleanToggleInputComponent, COMPONENTS, CardListComponent, CheckboxListInputComponent, ConfigurationFormComponent, ConfigurationService, ConfigurationsPageComponent, CsvDownloadService, DEACTIVATE_GUARD, DataTableFilterService, DeactivateGuardService, EDGE_ROUTER_EXTENSION_SERVICE, EDGE_ROUTER_POLICY_EXTENSION_SERVICE, EdgeRouter, EdgeRouterFormComponent, EdgeRouterFormService, EdgeRouterPoliciesPageComponent, EdgeRouterPoliciesPageService, EdgeRouterPolicyFormComponent, EdgeRouterPolicyFormService, EdgeRoutersPageComponent, EdgeRoutersPageService, Entity, ExtendableComponent, ExtensionsNoopService, FormFieldContainerComponent, FormFieldToggleComponent, FormHeaderComponent, GrowlerComponent, GrowlerModel, GrowlerModule, GrowlerService, IDENTITY_EXTENSION_SERVICE, IdentitiesPageComponent, IdentitiesPageService, Identity$1 as Identity, IdentityFormComponent, IdentityFormService, IdentityServicePathComponent, JwtSignerFormComponent, JwtSignerFormService, JwtSignersPageComponent, JwtSignersPageService, KEY_CODES, ListPageComponent, ListPageServiceClass, LoadingIndicatorComponent, LoggerService, LoginServiceClass, NetworkVisualizerComponent, NodeDataService, NodeWrapperService, NoopLoginService, NoopTabInterceptorService, NumberInputComponent, ObjectComponent, OpenZitiConsoleLibModule, PasswordInputComponent, ProjectableForm, ProtocolAddressPortInputComponent, ResetEnrollmentService, SERVICE_EDGE_ROUTER_POLICY_EXTENSION_SERVICE, SERVICE_EXTENSION_SERVICE, SERVICE_POLICY_EXTENSION_SERVICE, SETTINGS_SERVICE, SHAREDZ_EXTENSION, SelectorInputComponent, ServiceEdgeRouterPoliciesPageComponent, ServiceEdgeRouterPoliciesPageService, ServiceEdgeRouterPolicyFormComponent, ServiceEdgeRouterPolicyFormService, ServiceFormComponent, ServiceFormService, ServicePoliciesPageComponent, ServicePoliciesPageService, ServicePolicyFormComponent, ServicePolicyFormService, ServicesPageComponent, ServicesPageService, SettingsService, SettingsServiceClass, SideBannerComponent, SideModalComponent, SideNavbarComponent, SideToolbarComponent, SimpleServiceComponent, StringInputComponent, TabNameService, TerminatorFormComponent, TerminatorFormService, TerminatorsPageComponent, TerminatorsPageService, TextListInputComponent, VERSION, VisualizerServiceClass, ZAC_LOGIN_SERVICE, ZAC_WRAPPER_SERVICE, ZITI_DATA_SERVICE, ZITI_DOMAIN_CONTROLLER, ZITI_NAVIGATOR, ZITI_TAB_OVERRIDES, ZITI_URLS, ZacRoutingModule, ZacWrapperComponent, ZacWrapperService, ZacWrapperServiceClass, ZitiControllerDataService, ZitiDataService, playerFactory };
+export { AuthPoliciesPageComponent, AuthPoliciesPageService, AuthPolicyFormComponent, AuthPolicyFormService, BooleanToggleInputComponent, COMPONENTS, CardListComponent, CheckboxListInputComponent, ConfigurationFormComponent, ConfigurationService, ConfigurationsPageComponent, CsvDownloadService, DEACTIVATE_GUARD, DataTableFilterService, DeactivateGuardService, EDGE_ROUTER_EXTENSION_SERVICE, EDGE_ROUTER_POLICY_EXTENSION_SERVICE, EdgeRouter, EdgeRouterFormComponent, EdgeRouterFormService, EdgeRouterPoliciesPageComponent, EdgeRouterPoliciesPageService, EdgeRouterPolicyFormComponent, EdgeRouterPolicyFormService, EdgeRoutersPageComponent, EdgeRoutersPageService, Entity, ExtendableComponent, ExtensionsNoopService, FormFieldContainerComponent, FormFieldToggleComponent, FormHeaderComponent, GrowlerComponent, GrowlerModel, GrowlerModule, GrowlerService, IDENTITY_EXTENSION_SERVICE, IdentitiesPageComponent, IdentitiesPageService, Identity$1 as Identity, IdentityFormComponent, IdentityFormService, IdentityServicePathComponent, JwtSignerFormComponent, JwtSignerFormService, JwtSignersPageComponent, JwtSignersPageService, KEY_CODES, ListPageComponent, ListPageServiceClass, LoadingIndicatorComponent, LoggerService, LoginServiceClass, NetworkVisualizerComponent, NodeDataService, NodeWrapperService, NoopLoginService, NoopTabInterceptorService, NumberInputComponent, ObjectComponent, OpenZitiConsoleLibModule, PasswordInputComponent, ProjectableForm, ProtocolAddressPortInputComponent, ResetEnrollmentService, SERVICE_EDGE_ROUTER_POLICY_EXTENSION_SERVICE, SERVICE_EXTENSION_SERVICE, SERVICE_POLICY_EXTENSION_SERVICE, SETTINGS_SERVICE, SHAREDZ_EXTENSION, SelectorInputComponent, ServiceEdgeRouterPoliciesPageComponent, ServiceEdgeRouterPoliciesPageService, ServiceEdgeRouterPolicyFormComponent, ServiceEdgeRouterPolicyFormService, ServiceFormComponent, ServiceFormService, ServicePoliciesPageComponent, ServicePoliciesPageService, ServicePolicyFormComponent, ServicePolicyFormService, ServicesPageComponent, ServicesPageService, SettingsService, SettingsServiceClass, SideBannerComponent, SideModalComponent, SideNavbarComponent, SideToolbarComponent, SimpleServiceComponent, StringInputComponent, TabNameService, TerminatorFormComponent, TerminatorFormService, TerminatorsPageComponent, TerminatorsPageService, TextListInputComponent, VERSION, VisualizerServiceClass, ZAC_LOGIN_SERVICE, ZAC_WRAPPER_SERVICE, ZITI_DATA_SERVICE, ZITI_DOMAIN_CONTROLLER, ZITI_NAVIGATOR, ZITI_TAB_OVERRIDES, ZITI_URLS, ZacRoutingModule, ZacWrapperComponent, ZacWrapperService, ZacWrapperServiceClass, ZitiControllerDataService, ZitiDataService, playerFactory };
 //# sourceMappingURL=openziti-ziti-console-lib.mjs.map