@openziti/ziti-console-lib 0.4.7 → 0.4.8

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

@@ -8,7 +8,7 @@ import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import * as i1 from 'ngx-logger';
 import { NgxLoggerLevel } from 'ngx-logger';
-import _, { isNumber, includes, isNil, defer, set, invoke, get, debounce, isEmpty, isNaN as isNaN$1, cloneDeep, unset, isBoolean, keys, forEach, isEqual, delay, isFunction, map as map$1, forOwn, isString, some, filter, sortedUniq, invert, isArray } from 'lodash';
+import _, { isNumber, includes, isNil, defer, set, invoke, get, debounce, isEmpty, isNaN as isNaN$1, cloneDeep, unset, isBoolean, keys, forEach, isEqual, isObject, isArray, delay, isFunction, map as map$1, forOwn, isString, some, filter, sortedUniq, invert } from 'lodash';
 import { __decorate, __param } from 'tslib';
 import * as i1$4 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -2270,8 +2270,10 @@ class ConfirmComponent {
             confirmLabel: '',
             cancelLabel: '',
             bulletList: [],
+            submessage: '',
             showCancelButton: false,
-            showCancelLink: false
+            showCancelLink: false,
+            imageUrl: '../../assets/svgs/Confirm_Trash.svg'
         };
         this.dataObj = data;
         if (isNil(this.dataObj?.cancelLabel) || isEmpty(this.dataObj?.cancelLabel)) {
@@ -2285,11 +2287,11 @@ class ConfirmComponent {
         this.dialogRef.close(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmComponent, deps: [{ token: i3$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmComponent, selector: "lib-confirm", ngImport: i0, template: "<div class=\"confirm-modal-container\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"confirm-model-body\">\n        <div class=\"confirm-modal-content\">\n            <div class=\"confirm-title-container\">\n                <span class=\"confirm-title\">{{dataObj.title}}</span>\n                <span class=\"confirm-subtitle\">{{dataObj.subtitle}}</span>\n            </div>\n            <div class=\"confirm-modal-main\">\n                <div class=\"confirm-modal-icon\"></div>\n                <div>\n                    <div class=\"confirm-message-content\">\n                        <span [innerHTML]=\"dataObj.message\"></span>\n                    </div>\n                    <div class=\"confirm-message-bullet-list\">\n                        <ul>\n                            <li *ngFor=\"let item of dataObj.bulletList\" class=\"confirm-item-name\">{{item}}</li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"confirm-buttons-container\">\n        <div class=\"linkButton cancel\" (click)=\"cancel()\" *ngIf=\"dataObj.showCancelLink\">{{dataObj.cancelLabel}}</div>\n        <button class=\"button save cancel\" (click)=\"cancel()\" *ngIf=\"dataObj.showCancelButton\">{{dataObj.cancelLabel}}</button>\n        <button class=\"button save confirm\" (click)=\"confirm()\">{{dataObj.confirmLabel}}</button>\n    </div>\n</div>\n", styles: [".confirm-modal-container{display:flex;flex-direction:column;background-color:var(--background);border-radius:25px}.confirm-modal-container .confirm-model-body{display:flex;flex-direction:row;align-items:center}.confirm-modal-container .confirm-model-body .confirm-modal-content{display:flex;flex-direction:column}.confirm-modal-container .confirm-model-body .confirm-modal-main{display:flex;flex-direction:row;align-items:center}.confirm-modal-container .confirm-model-body .confirm-modal-icon{width:120px;height:120px;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg id%3D'Layer_1' style%3D'enable-background%3Anew 0 0 72 72%3B' version%3D'1.1' viewBox%3D'0 0 72 72'     x%3D'0px'     xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23FFFFFF%3B  %7D  .st1 %7B    fill%3A %23D9DFE3%3B  %7D  .st2 %7B    fill%3A none%3B    stroke%3A %23648293%3B    stroke-width%3A 1.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D%3C%2Fstyle%3E  %3Cpolygon class%3D'st0' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 46.9%2C10.7 35.7%2C2.1 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 9.3%2C19.7%0915.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cpolygon class%3D'st1' points%3D'50.4%2C8.7 46.9%2C10.7 42.6%2C13.1 35.7%2C8.1 28.9%2C13.2 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 59.2%2C19.7%0959.2%2C13.7 '%2F%3E  %3Cpolygon class%3D'st2' points%3D'9.3%2C19.7 15.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cg%3E%09%3Cline class%3D'st2' x1%3D'60.1' x2%3D'26.9' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'54' x2%3D'14' y1%3D'19.7' y2%3D'59.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.6' x2%3D'31.3' y1%3D'39.3' y2%3D'19.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.3' x2%3D'44.5' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'17.4' x2%3D'57.4' y1%3D'19.7' y2%3D'59.6'%2F%3E    %3Cline class%3D'st2' x1%3D'59.8' x2%3D'40.1' y1%3D'39.3' y2%3D'19.7'%2F%3E%3C%2Fg%3E  %3Cline class%3D'st2' x1%3D'6.4' x2%3D'65' y1%3D'19.7' y2%3D'19.7'%2F%3E  %3Cpolyline class%3D'st2' points%3D'12.3%2C19.7 12.3%2C13.7 21.1%2C8.7 27.6%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 43.9%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'24.5%2C10.7 35.7%2C2.1 46.9%2C10.7 '%2F%3E%3C%2Fsvg%3E\");background-size:contain;z-index:20;box-sizing:var(--shadow);margin-left:15px}.confirm-modal-container .confirm-title-container{width:100%;display:flex;flex-direction:column}.confirm-modal-container .confirm-title-container .confirm-title{color:var(--primaryColor);font-size:30px;position:relative;padding-left:0;width:400px;background:none;text-transform:none;height:auto;font-family:Russo One;margin-top:30px;margin-left:150px;filter:brightness(50%)}.confirm-modal-container .confirm-message-content{color:var(--text);font-size:14px;position:relative;margin:5px 15px 15px;padding:0;font-weight:600;font-family:Open Sans;overflow:auto;display:flex;align-items:center;justify-content:center;color:var(--tableText);max-width:400px}.confirm-modal-container .confirm-message-bullet-list{margin-left:20px;margin-bottom:15px;margin-right:20px;max-height:200px;overflow:auto}.confirm-modal-container .confirm-message-bullet-list .confirm-item-name{color:var(--primaryColor);text-decoration:none;transition:.5s ease}.confirm-modal-container .confirm-message-bullet-list .confirm-item-name::marker{color:var(--tableText)}.confirm-modal-container .confirm-message-bullet-list ul{margin:0}.confirm-modal-container .confirm-buttons-container{display:flex;justify-content:flex-end;flex-direction:row;width:100%;padding-right:20px;padding-bottom:20px;align-items:flex-end}.confirm-modal-container .confirm-buttons-container .linkButton{position:absolute;left:25px;color:var(--subText);font-weight:600}.confirm-modal-container button{width:100px;height:40px;color:var(--white);display:flex;align-items:center;justify-content:center}.confirm-modal-container button.confirm{background-color:var(--secondary)}.confirm-modal-container button.cancel{background-color:var(--primary)}\n"], dependencies: [{ 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmComponent, selector: "lib-confirm", ngImport: i0, template: "<div class=\"confirm-modal-container\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"confirm-model-body\">\n        <div class=\"confirm-modal-content\">\n            <div class=\"confirm-title-container\">\n                <span class=\"confirm-title\">{{dataObj.title}}</span>\n                <span class=\"confirm-subtitle\">{{dataObj.subtitle}}</span>\n            </div>\n            <div class=\"confirm-modal-main\">\n                <div class=\"confirm-modal-icon\" style=\"background-image: url({{dataObj.imageUrl}})\"></div>\n                <div>\n                    <div class=\"confirm-message-content\">\n                        <span [innerHTML]=\"dataObj.message\"></span>\n                    </div>\n                    <div class=\"confirm-message-bullet-list\">\n                        <ul>\n                            <li *ngFor=\"let item of dataObj.bulletList\" class=\"confirm-item-name\">{{item}}</li>\n                        </ul>\n                    </div>\n                    <div *ngIf=\"dataObj.submessage && dataObj.submessage.length > 0\" class=\"confirm-message-sub-content\">\n                        <span [innerHTML]=\"dataObj.submessage\"></span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"confirm-buttons-container\">\n        <div class=\"linkButton cancel\" (click)=\"cancel()\" *ngIf=\"dataObj.showCancelLink\">{{dataObj.cancelLabel}}</div>\n        <button class=\"button save cancel\" (click)=\"cancel()\" *ngIf=\"dataObj.showCancelButton\">{{dataObj.cancelLabel}}</button>\n        <button class=\"button save confirm\" (click)=\"confirm()\">{{dataObj.confirmLabel}}</button>\n    </div>\n</div>\n", styles: [".confirm-modal-container{display:flex;flex-direction:column;background-color:var(--background);border-radius:25px}.confirm-modal-container .confirm-model-body{display:flex;flex-direction:row;align-items:center}.confirm-modal-container .confirm-model-body .confirm-modal-content{display:flex;flex-direction:column}.confirm-modal-container .confirm-model-body .confirm-modal-main{display:flex;flex-direction:row;align-items:center}.confirm-modal-container .confirm-model-body .confirm-modal-icon{width:120px;height:120px;background-size:contain;z-index:20;box-sizing:var(--shadow);margin-left:15px}.confirm-modal-container .confirm-title-container{width:100%;display:flex;flex-direction:column}.confirm-modal-container .confirm-title-container .confirm-title{color:var(--primaryColor);font-size:30px;position:relative;padding-left:0;width:400px;background:none;text-transform:none;height:auto;font-family:Russo One;margin-top:30px;margin-left:150px;filter:brightness(50%)}.confirm-modal-container .confirm-message-sub-content,.confirm-modal-container .confirm-message-content{color:var(--text);font-size:14px;position:relative;margin:5px 15px 15px;padding:0;font-weight:600;font-family:Open Sans;overflow:auto;display:flex;align-items:center;justify-content:flex-start;color:var(--tableText);max-width:400px}.confirm-modal-container .confirm-message-bullet-list{margin-left:20px;margin-bottom:15px;margin-right:20px;max-height:200px;overflow:auto}.confirm-modal-container .confirm-message-bullet-list .confirm-item-name{color:var(--primaryColor);text-decoration:none;transition:.5s ease}.confirm-modal-container .confirm-message-bullet-list .confirm-item-name::marker{color:var(--tableText)}.confirm-modal-container .confirm-message-bullet-list ul{margin:0}.confirm-modal-container .confirm-buttons-container{display:flex;justify-content:flex-end;flex-direction:row;width:100%;padding-right:20px;padding-bottom:20px;align-items:flex-end}.confirm-modal-container .confirm-buttons-container .linkButton{position:absolute;left:25px;color:var(--subText);font-weight:600}.confirm-modal-container button{width:100px;height:40px;color:var(--white);display:flex;align-items:center;justify-content:center}.confirm-modal-container button.confirm{background-color:var(--secondary)}.confirm-modal-container button.cancel{background-color:var(--primary)}\n"], dependencies: [{ 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-confirm', template: "<div class=\"confirm-modal-container\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"confirm-model-body\">\n        <div class=\"confirm-modal-content\">\n            <div class=\"confirm-title-container\">\n                <span class=\"confirm-title\">{{dataObj.title}}</span>\n                <span class=\"confirm-subtitle\">{{dataObj.subtitle}}</span>\n            </div>\n            <div class=\"confirm-modal-main\">\n                <div class=\"confirm-modal-icon\"></div>\n                <div>\n                    <div class=\"confirm-message-content\">\n                        <span [innerHTML]=\"dataObj.message\"></span>\n                    </div>\n                    <div class=\"confirm-message-bullet-list\">\n                        <ul>\n                            <li *ngFor=\"let item of dataObj.bulletList\" class=\"confirm-item-name\">{{item}}</li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"confirm-buttons-container\">\n        <div class=\"linkButton cancel\" (click)=\"cancel()\" *ngIf=\"dataObj.showCancelLink\">{{dataObj.cancelLabel}}</div>\n        <button class=\"button save cancel\" (click)=\"cancel()\" *ngIf=\"dataObj.showCancelButton\">{{dataObj.cancelLabel}}</button>\n        <button class=\"button save confirm\" (click)=\"confirm()\">{{dataObj.confirmLabel}}</button>\n    </div>\n</div>\n", styles: [".confirm-modal-container{display:flex;flex-direction:column;background-color:var(--background);border-radius:25px}.confirm-modal-container .confirm-model-body{display:flex;flex-direction:row;align-items:center}.confirm-modal-container .confirm-model-body .confirm-modal-content{display:flex;flex-direction:column}.confirm-modal-container .confirm-model-body .confirm-modal-main{display:flex;flex-direction:row;align-items:center}.confirm-modal-container .confirm-model-body .confirm-modal-icon{width:120px;height:120px;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg id%3D'Layer_1' style%3D'enable-background%3Anew 0 0 72 72%3B' version%3D'1.1' viewBox%3D'0 0 72 72'     x%3D'0px'     xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23FFFFFF%3B  %7D  .st1 %7B    fill%3A %23D9DFE3%3B  %7D  .st2 %7B    fill%3A none%3B    stroke%3A %23648293%3B    stroke-width%3A 1.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D%3C%2Fstyle%3E  %3Cpolygon class%3D'st0' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 46.9%2C10.7 35.7%2C2.1 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 9.3%2C19.7%0915.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cpolygon class%3D'st1' points%3D'50.4%2C8.7 46.9%2C10.7 42.6%2C13.1 35.7%2C8.1 28.9%2C13.2 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 59.2%2C19.7%0959.2%2C13.7 '%2F%3E  %3Cpolygon class%3D'st2' points%3D'9.3%2C19.7 15.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cg%3E%09%3Cline class%3D'st2' x1%3D'60.1' x2%3D'26.9' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'54' x2%3D'14' y1%3D'19.7' y2%3D'59.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.6' x2%3D'31.3' y1%3D'39.3' y2%3D'19.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.3' x2%3D'44.5' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'17.4' x2%3D'57.4' y1%3D'19.7' y2%3D'59.6'%2F%3E    %3Cline class%3D'st2' x1%3D'59.8' x2%3D'40.1' y1%3D'39.3' y2%3D'19.7'%2F%3E%3C%2Fg%3E  %3Cline class%3D'st2' x1%3D'6.4' x2%3D'65' y1%3D'19.7' y2%3D'19.7'%2F%3E  %3Cpolyline class%3D'st2' points%3D'12.3%2C19.7 12.3%2C13.7 21.1%2C8.7 27.6%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 43.9%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'24.5%2C10.7 35.7%2C2.1 46.9%2C10.7 '%2F%3E%3C%2Fsvg%3E\");background-size:contain;z-index:20;box-sizing:var(--shadow);margin-left:15px}.confirm-modal-container .confirm-title-container{width:100%;display:flex;flex-direction:column}.confirm-modal-container .confirm-title-container .confirm-title{color:var(--primaryColor);font-size:30px;position:relative;padding-left:0;width:400px;background:none;text-transform:none;height:auto;font-family:Russo One;margin-top:30px;margin-left:150px;filter:brightness(50%)}.confirm-modal-container .confirm-message-content{color:var(--text);font-size:14px;position:relative;margin:5px 15px 15px;padding:0;font-weight:600;font-family:Open Sans;overflow:auto;display:flex;align-items:center;justify-content:center;color:var(--tableText);max-width:400px}.confirm-modal-container .confirm-message-bullet-list{margin-left:20px;margin-bottom:15px;margin-right:20px;max-height:200px;overflow:auto}.confirm-modal-container .confirm-message-bullet-list .confirm-item-name{color:var(--primaryColor);text-decoration:none;transition:.5s ease}.confirm-modal-container .confirm-message-bullet-list .confirm-item-name::marker{color:var(--tableText)}.confirm-modal-container .confirm-message-bullet-list ul{margin:0}.confirm-modal-container .confirm-buttons-container{display:flex;justify-content:flex-end;flex-direction:row;width:100%;padding-right:20px;padding-bottom:20px;align-items:flex-end}.confirm-modal-container .confirm-buttons-container .linkButton{position:absolute;left:25px;color:var(--subText);font-weight:600}.confirm-modal-container button{width:100px;height:40px;color:var(--white);display:flex;align-items:center;justify-content:center}.confirm-modal-container button.confirm{background-color:var(--secondary)}.confirm-modal-container button.cancel{background-color:var(--primary)}\n"] }]
+            args: [{ selector: 'lib-confirm', template: "<div class=\"confirm-modal-container\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"confirm-model-body\">\n        <div class=\"confirm-modal-content\">\n            <div class=\"confirm-title-container\">\n                <span class=\"confirm-title\">{{dataObj.title}}</span>\n                <span class=\"confirm-subtitle\">{{dataObj.subtitle}}</span>\n            </div>\n            <div class=\"confirm-modal-main\">\n                <div class=\"confirm-modal-icon\" style=\"background-image: url({{dataObj.imageUrl}})\"></div>\n                <div>\n                    <div class=\"confirm-message-content\">\n                        <span [innerHTML]=\"dataObj.message\"></span>\n                    </div>\n                    <div class=\"confirm-message-bullet-list\">\n                        <ul>\n                            <li *ngFor=\"let item of dataObj.bulletList\" class=\"confirm-item-name\">{{item}}</li>\n                        </ul>\n                    </div>\n                    <div *ngIf=\"dataObj.submessage && dataObj.submessage.length > 0\" class=\"confirm-message-sub-content\">\n                        <span [innerHTML]=\"dataObj.submessage\"></span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"confirm-buttons-container\">\n        <div class=\"linkButton cancel\" (click)=\"cancel()\" *ngIf=\"dataObj.showCancelLink\">{{dataObj.cancelLabel}}</div>\n        <button class=\"button save cancel\" (click)=\"cancel()\" *ngIf=\"dataObj.showCancelButton\">{{dataObj.cancelLabel}}</button>\n        <button class=\"button save confirm\" (click)=\"confirm()\">{{dataObj.confirmLabel}}</button>\n    </div>\n</div>\n", styles: [".confirm-modal-container{display:flex;flex-direction:column;background-color:var(--background);border-radius:25px}.confirm-modal-container .confirm-model-body{display:flex;flex-direction:row;align-items:center}.confirm-modal-container .confirm-model-body .confirm-modal-content{display:flex;flex-direction:column}.confirm-modal-container .confirm-model-body .confirm-modal-main{display:flex;flex-direction:row;align-items:center}.confirm-modal-container .confirm-model-body .confirm-modal-icon{width:120px;height:120px;background-size:contain;z-index:20;box-sizing:var(--shadow);margin-left:15px}.confirm-modal-container .confirm-title-container{width:100%;display:flex;flex-direction:column}.confirm-modal-container .confirm-title-container .confirm-title{color:var(--primaryColor);font-size:30px;position:relative;padding-left:0;width:400px;background:none;text-transform:none;height:auto;font-family:Russo One;margin-top:30px;margin-left:150px;filter:brightness(50%)}.confirm-modal-container .confirm-message-sub-content,.confirm-modal-container .confirm-message-content{color:var(--text);font-size:14px;position:relative;margin:5px 15px 15px;padding:0;font-weight:600;font-family:Open Sans;overflow:auto;display:flex;align-items:center;justify-content:flex-start;color:var(--tableText);max-width:400px}.confirm-modal-container .confirm-message-bullet-list{margin-left:20px;margin-bottom:15px;margin-right:20px;max-height:200px;overflow:auto}.confirm-modal-container .confirm-message-bullet-list .confirm-item-name{color:var(--primaryColor);text-decoration:none;transition:.5s ease}.confirm-modal-container .confirm-message-bullet-list .confirm-item-name::marker{color:var(--tableText)}.confirm-modal-container .confirm-message-bullet-list ul{margin:0}.confirm-modal-container .confirm-buttons-container{display:flex;justify-content:flex-end;flex-direction:row;width:100%;padding-right:20px;padding-bottom:20px;align-items:flex-end}.confirm-modal-container .confirm-buttons-container .linkButton{position:absolute;left:25px;color:var(--subText);font-weight:600}.confirm-modal-container button{width:100px;height:40px;color:var(--white);display:flex;align-items:center;justify-content:center}.confirm-modal-container button.confirm{background-color:var(--secondary)}.confirm-modal-container button.cancel{background-color:var(--primary)}\n"] }]
         }], ctorParameters: function () { return [{ type: i3$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -3224,9 +3226,9 @@ class ForwardingConfigService {
     }
     getProperties(protocol, address, port, forwardProtocol, forwardAddress, forwardPort, allowedProtocols, allowedAddresses, allowedPortRanges) {
         const props = [
-            { key: 'protocol', value: protocol },
-            { key: 'address', value: address },
-            { key: 'port', value: port },
+            { key: 'protocol', value: forwardProtocol ? undefined : protocol },
+            { key: 'address', value: forwardAddress ? undefined : address },
+            { key: 'port', value: forwardPort ? undefined : port },
             { key: 'forwardProtocol', value: forwardProtocol ? forwardProtocol : undefined },
             { key: 'forwardAddress', value: forwardAddress ? forwardAddress : undefined },
             { key: 'forwardPort', value: forwardPort ? forwardPort : undefined },
@@ -7480,6 +7482,18 @@ class DataTableComponent {
             case 'services':
                 this.entityTypeLabel = 'Services';
                 break;
+            case 'configurations':
+                this.entityTypeLabel = 'Configs';
+                break;
+            case 'service-policies':
+                this.entityTypeLabel = 'Service Policies';
+                break;
+            case 'edge-router-policies':
+                this.entityTypeLabel = 'Edge Router Policies';
+                break;
+            case 'service-edge-router-policies':
+                this.entityTypeLabel = 'Service Edge Router Policies';
+                break;
         }
     }
     setColumnVisibilityColumn(column, visible) {
@@ -7794,13 +7808,14 @@ const { context, tags, resources, service, app: app$1 } = window;
 class Entity {
 }
 class ProjectableForm extends ExtendableComponent {
-    constructor(growlerService, extService, zitiService, router, route) {
+    constructor(growlerService, extService, zitiService, router, route, location) {
         super();
         this.growlerService = growlerService;
         this.extService = extService;
         this.zitiService = zitiService;
         this.router = router;
         this.route = route;
+        this.location = location;
         this.isModal = false;
         this.dataChange = new EventEmitter();
         this.errors = {};
@@ -7817,6 +7832,7 @@ class ProjectableForm extends ExtendableComponent {
         this.basePath = '';
         this.checkDataChangeDebounced = debounce(this.checkDataChange, 100, { maxWait: 100 });
         this.subscription = new Subscription();
+        this.previousRoute = this.router.getCurrentNavigation().previousNavigation?.finalUrl?.toString();
         this.subscription.add(this.route?.params?.subscribe(params => {
             const id = params['id'];
             if (!isEmpty(id)) {
@@ -7955,19 +7971,42 @@ class ProjectableForm extends ExtendableComponent {
         }
     }
     returnToListPage() {
-        this.router?.navigateByUrl(`${this.basePath}`);
+        if (this.location && this.previousRoute) {
+            this.location.back();
+        }
+        else {
+            this.router?.navigateByUrl(`${this.basePath}`);
+        }
     }
     ngDoCheck() {
         this.checkDataChangeDebounced();
     }
     checkDataChange() {
-        const dataChange = !isEqual(this.initData, this.formData);
+        let initData = cloneDeep(this.initData);
+        initData = this.omitEmptyData(initData);
+        let formData = cloneDeep(this.formData);
+        formData = this.omitEmptyData(formData);
+        const dataChange = !isEqual(initData, formData);
         if (dataChange !== this._dataChange) {
             this.dataChange.emit(dataChange);
         }
         this._dataChange = dataChange;
         app$1.isDirty = false;
     }
+    omitEmptyData(object) {
+        forEach(object, (val, key) => {
+            if (this.omitDataIteratee(val)) {
+                unset(object, key);
+            }
+            else if (isObject(val)) {
+                this.omitEmptyData(val);
+            }
+        });
+        return object;
+    }
+    omitDataIteratee(val) {
+        return isNil(val) || (isArray(val) && isEmpty(val));
+    }
     copyToClipboard(val) {
         navigator.clipboard.writeText(val);
         const growlerData = new GrowlerModel('success', 'Success', `Text Copied`, `API call URL copied to clipboard`);
@@ -8008,7 +8047,7 @@ class ProjectableForm extends ExtendableComponent {
             return results.data;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProjectableForm, deps: [{ token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: ZITI_DATA_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProjectableForm, deps: [{ token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: ZITI_DATA_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i1$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProjectableForm, selector: "ng-component", inputs: { isModal: "isModal", entityId: "entityId", formData: "formData" }, outputs: { close: "close", dataChange: "dataChange" }, viewQueries: [{ propertyName: "nameFieldInput", first: true, predicate: ["nameFieldInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProjectableForm, decorators: [{
@@ -8020,7 +8059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: ZitiDataService, decorators: [{
                     type: Inject,
                     args: [ZITI_DATA_SERVICE]
-                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }]; }, propDecorators: { isModal: [{
+                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i1$4.Location }]; }, propDecorators: { isModal: [{
                 type: Input
             }], entityId: [{
                 type: Input
@@ -8834,8 +8873,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     limitations under the License.
 */
 class ConfigurationFormComponent extends ProjectableForm {
-    constructor(svc, schemaSvc, growlerService, extService, settingsService, zitiService, router, route) {
-        super(growlerService, extService, zitiService, router, route);
+    constructor(svc, schemaSvc, growlerService, extService, settingsService, zitiService, router, route, location) {
+        super(growlerService, extService, zitiService, router, route, location);
         this.svc = svc;
         this.schemaSvc = schemaSvc;
         this.settingsService = settingsService;
@@ -9014,7 +9053,7 @@ class ConfigurationFormComponent extends ProjectableForm {
     dataChanged(event) {
         this._apiData = cloneDeep(this.apiData);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigurationFormComponent, deps: [{ token: ConfigurationService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigurationFormComponent, deps: [{ token: ConfigurationService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i1$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigurationFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], 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 ? 'Edit Config' : 'Create Config')\"\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=\"config-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]=\"'Config Name'\" [label]=\"'Required'\">\n                    <input\n                        id=\"ConfigName\"\n                        type=\"text\"\n                        maxlength=\"500\"\n                        placeholder=\"Name this config\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        (keyup)=\"apiData()\"\n                    >\n                </lib-form-field-container>\n                <lib-form-field-container [showHeader]=\"false\">\n                    <div class=\"config-title-row\">\n                        <span class=\"form-field-title\">Configuration Data</span>\n                        <div class=\"form-header-toggle-container\">\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                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">{{isEditing ? 'Config Type' : 'Select a Config Type'}}</span>\n                        </div>\n                        <select\n                                id=\"ConfigTypes\"\n                                class=\"config-type-select\"\n                                [(ngModel)]=\"formData.configTypeId\"\n                                (change)=\"getSchema()\"\n                                [ngClass]=\"{disabled: isEditing, error: errors['configTypeId']}\"\n                        >\n                            <option value=\"\">Select A Type...</option>\n                            <option *ngFor=\"let config of options\"\n                                    [value]=\"config.id\">{{config.name}}\n                            </option>\n                        </select>\n                        <lib-config-editor\n                                [hidden]=\"configTypeEmpty\"\n                                [schema]=\"selectedSchema\"\n                                [(configData)]=\"formData.data\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"errors\"\n                                (configDataChange)=\"dataChanged($event)\"\n                                #configEditor\n                        ></lib-config-editor>\n                    </div>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"_apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".config-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}\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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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: ConfigurationFormComponent, decorators: [{
@@ -9029,7 +9068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: ZitiDataService, decorators: [{
                     type: Inject,
                     args: [ZITI_DATA_SERVICE]
-                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }]; }, propDecorators: { formData: [{
+                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i1$4.Location }]; }, propDecorators: { formData: [{
                 type: Input
             }], errors: [{
                 type: Input
@@ -11075,58 +11114,76 @@ function onAppInit(injector) {
     limitations under the License.
 */
 class PreviewListComponent {
-    constructor() {
+    constructor(router) {
+        this.router = router;
+        //@Input() hideOption: string;
         this.label = '';
         this.clickable = false;
         this.isLoading = false;
         this.allNames = [];
+        this.items = [];
         this.allowRemove = false;
         this.tooltip = '';
         this.itemSelected = new EventEmitter();
         this.itemRemoved = new EventEmitter();
-        this.names = [];
+        this.previewItems = [];
+        this.hideOption = 'asdf';
         this.filterFor = '';
     }
     ngOnInit() {
-        this.names = [];
-        this.names.push(...this.allNames);
-        this.names = this.names.filter((item) => item !== this.hideOption);
+        this.previewItems = [];
+        if (!isEmpty(this.allNames)) {
+            this.previewItems.push(...this.allNames);
+            this.previewItems = this.previewItems.filter((item) => item !== this.hideOption);
+        }
+        else {
+            this.previewItems.push(...this.items);
+        }
         this.sort();
     }
     ngOnChanges() {
-        this.names = [];
-        this.names.push(...this.allNames);
-        this.names = this.names.filter((item) => item !== this.hideOption);
+        this.previewItems = [];
+        this.previewItems.push(...this.allNames);
+        this.previewItems = this.previewItems.filter((item) => item !== this.hideOption);
         this.sort();
     }
     onKeydownEvent() {
-        this.names = [];
+        this.previewItems = [];
         for (let i = 0; i < this.allNames.length; i++) {
-            if (this.allNames[i].indexOf(this.filterFor) >= 0) {
-                this.names.push(this.allNames[i]);
+            if (!isEmpty(this.allNames)) {
+                if (this.allNames[i].indexOf(this.filterFor) >= 0) {
+                    this.previewItems.push(this.allNames[i]);
+                }
+            }
+            else {
+                if (this.items[i].name.indexOf(this.filterFor) >= 0) {
+                    this.previewItems.push(this.items[i]);
+                }
             }
         }
         this.sort();
     }
     sort() {
-        this.names.sort((item1, item2) => item1.localeCompare(item2));
+        this.previewItems.sort((item1, item2) => (item1.name ? item1.name.localeCompare(item2.name) : item1.localeCompare(item2)));
     }
-    selected(name) {
+    selected(item) {
         if (this.clickable)
-            this.itemSelected.emit(name);
+            this.itemSelected.emit(item);
     }
-    remove(name) {
-        this.itemRemoved.emit(name);
+    remove(item) {
+        this.itemRemoved.emit(item);
+    }
+    linkClicked(event, item) {
+        this.router.navigateByUrl(item.href);
+        event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviewListComponent, selector: "lib-preview-list", inputs: { hideOption: "hideOption", label: "label", clickable: "clickable", isLoading: "isLoading", allNames: "allNames", allowRemove: "allowRemove", tooltip: "tooltip" }, outputs: { itemSelected: "itemSelected", itemRemoved: "itemRemoved" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"listBox row\">\n    <input (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n    <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n    <div class=\"text row\">\n        <div (click)=\"selected(name)\" *ngFor=\"let name of names\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n            <div *ngIf=\"allowRemove\" class=\"icon-clear\" (click)=\"remove(name)\"></div>\n            <span class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"above\">{{ name }}</span>\n        </div>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0}.listBox{background-color:var(--stroke);padding:10px;border-radius:7px;height:100%;min-height:180px}.listBox input{height:40px;border-radius:27px;font-size:14px;font-weight:600;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAuCAYAAABTTPsKAAAD4klEQVRYhc2ZyYsUSRSHvypLbRfGDfWgzngYFRR3EUQPOm5oOyMuKIoo4kk9iAriQfAPcAMvKuJBPAyiXmbAwWVUFGEYmMHlIi24ogd3cW3trpYnv4CooLKrKiuzqn5QUBmZEe/Lly9fvIjMPH36CmA4cABYAHSnsdQK/AVsBR4Y8E/ATaA30KXBYJ3agffA+Cywt8FhEZsx7jUPf/bC4BNwuc5woWYBPdTWmgti9hSwrv6MBToOrFVD92xwsqOOYFEqYAqBGzGOC5gshv07aANuNZCnM8A4IOcacsEFdjyp9lzly0KipZEBA7VYSKwEfpf7nTqU4uqpHkWYVlkInAR+ATZ4AZ4HmoErdQKeCVz0eGymO2asrpawE38D0xXHdjcfFM93aww7Avgf6CUPWyK4Dsw2cJfW7A4WA4/1P6NHcgHoV0PYfrLpwqFdTIv1vyAPvwXmyLMd8voQ4A+gaw1gu8rWENl2T3mO2AiBTfeARYphFB7TgMM1AD4sWy7V5sVyz78oBDZd0wvoZHe7HtiWIuw22fBntQ1iKVAxYFRw7PE8nVEZ2pwCbLPGdimsXbaPF7vYZYmi54A/gfneY7JSdCpwOyHYscC/QJOOLSOcA36NKg+iPIw6rNBM2Ka2bnqLBycAO1hjdfNgW2QzspbpDNj0EZintzSv6wdojdVUom9natIYAzRmXjbmyWakSgGbnigsnJdzepQngqmzXGXUd6wXam2y8aTUGOUAm/4DVnvHZmgpsDsG8G719SvF1bJRUuUCm84Au7zMkfWMl6sl6uPs5jXmmXIH6CxLRMkqu+Weh94BPwJvSvTrAzwCftCxhcFpq8AqMR4W8OXIFqk/AxPUv0lJfl/Q114gP4yGAT092BtxFrxxgL8Ay4D7OrYa4LciwKOBNRHrxKye0pdKjVcSw74eBSuV4RHXtUW0W9+HcQzHBUaVlFPUflxU+4eI9pKqBriUDqm+db9nSQwaJ4bLldUDOzyn9G904KHAxKRtpBkSpsQ3ZNL0sG1EW9r6quNw2R5Lab90vbX67ZXUS5cUcJTnZmjqtjQ2KAlD1QB/9v4PVAETbgnk5OWeSYQDVQKf9WayjKbnO9oxT03VAO8HrgZbAubpS1pU2tLHKrh/VOtGTdMVqdqQmAvs1Eo37z32LarGWrXXMAV4WW9gBGlL8sn2DS1YRo3U57TNScUvCWYJAxsDHPXarKy00vMgcD6pD5ZJ5mELkU3AQuC15+2stk/7JmEkjYnDlu+jtL/rpuZwRn0Rd/C0Zrrn+m69UauK71ulkt2EbU7HUtrFzxF9BXLpzzZLtusDZuUCvgHvMdO9Y7xsIwAAAABJRU5ErkJggg==);background-size:auto 21px;background-position:top 8px right 12px;background-repeat:no-repeat;margin-bottom:10px;padding-left:14px}.text{overflow-y:scroll;height:100%}.listText{width:100%;position:relative;float:left;font-size:14px;font-weight:600;padding-left:10px;padding-right:10px;margin-bottom:2px;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:5px}.listText .icon-clear{margin-top:2px}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);transform:translateY(1px)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.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}\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: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewListComponent, deps: [{ token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviewListComponent, selector: "lib-preview-list", inputs: { label: "label", clickable: "clickable", isLoading: "isLoading", allNames: "allNames", items: "items", allowRemove: "allowRemove", tooltip: "tooltip" }, outputs: { itemSelected: "itemSelected", itemRemoved: "itemRemoved" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"listBox row\">\n    <input (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n    <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n    <div class=\"text row\">\n        <div (click)=\"selected(item)\" *ngFor=\"let item of previewItems\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n            <div *ngIf=\"allowRemove\" class=\"icon-clear\" (click)=\"remove(item)\"></div>\n            <span *ngIf=\"!item.href\" class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item }}</span>\n            <a *ngIf=\"item.href\" [href]=\"'./' + item.href\" (click)=\"linkClicked($event, item)\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\"><span *ngIf=\"item.name\" class=\"preview-name\">{{ item.name }}</span></a>\n        </div>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0}.listBox{background-color:var(--stroke);padding:10px;border-radius:7px;height:100%;min-height:180px}.listBox input{height:40px;border-radius:27px;font-size:14px;font-weight:600;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAuCAYAAABTTPsKAAAD4klEQVRYhc2ZyYsUSRSHvypLbRfGDfWgzngYFRR3EUQPOm5oOyMuKIoo4kk9iAriQfAPcAMvKuJBPAyiXmbAwWVUFGEYmMHlIi24ogd3cW3trpYnv4CooLKrKiuzqn5QUBmZEe/Lly9fvIjMPH36CmA4cABYAHSnsdQK/AVsBR4Y8E/ATaA30KXBYJ3agffA+Cywt8FhEZsx7jUPf/bC4BNwuc5woWYBPdTWmgti9hSwrv6MBToOrFVD92xwsqOOYFEqYAqBGzGOC5gshv07aANuNZCnM8A4IOcacsEFdjyp9lzly0KipZEBA7VYSKwEfpf7nTqU4uqpHkWYVlkInAR+ATZ4AZ4HmoErdQKeCVz0eGymO2asrpawE38D0xXHdjcfFM93aww7Avgf6CUPWyK4Dsw2cJfW7A4WA4/1P6NHcgHoV0PYfrLpwqFdTIv1vyAPvwXmyLMd8voQ4A+gaw1gu8rWENl2T3mO2AiBTfeARYphFB7TgMM1AD4sWy7V5sVyz78oBDZd0wvoZHe7HtiWIuw22fBntQ1iKVAxYFRw7PE8nVEZ2pwCbLPGdimsXbaPF7vYZYmi54A/gfneY7JSdCpwOyHYscC/QJOOLSOcA36NKg+iPIw6rNBM2Ka2bnqLBycAO1hjdfNgW2QzspbpDNj0EZintzSv6wdojdVUom9natIYAzRmXjbmyWakSgGbnigsnJdzepQngqmzXGXUd6wXam2y8aTUGOUAm/4DVnvHZmgpsDsG8G719SvF1bJRUuUCm84Au7zMkfWMl6sl6uPs5jXmmXIH6CxLRMkqu+Weh94BPwJvSvTrAzwCftCxhcFpq8AqMR4W8OXIFqk/AxPUv0lJfl/Q114gP4yGAT092BtxFrxxgL8Ay4D7OrYa4LciwKOBNRHrxKye0pdKjVcSw74eBSuV4RHXtUW0W9+HcQzHBUaVlFPUflxU+4eI9pKqBriUDqm+db9nSQwaJ4bLldUDOzyn9G904KHAxKRtpBkSpsQ3ZNL0sG1EW9r6quNw2R5Lab90vbX67ZXUS5cUcJTnZmjqtjQ2KAlD1QB/9v4PVAETbgnk5OWeSYQDVQKf9WayjKbnO9oxT03VAO8HrgZbAubpS1pU2tLHKrh/VOtGTdMVqdqQmAvs1Eo37z32LarGWrXXMAV4WW9gBGlL8sn2DS1YRo3U57TNScUvCWYJAxsDHPXarKy00vMgcD6pD5ZJ5mELkU3AQuC15+2stk/7JmEkjYnDlu+jtL/rpuZwRn0Rd/C0Zrrn+m69UauK71ulkt2EbU7HUtrFzxF9BXLpzzZLtusDZuUCvgHvMdO9Y7xsIwAAAABJRU5ErkJggg==);background-size:auto 21px;background-position:top 8px right 12px;background-repeat:no-repeat;margin-bottom:10px;padding-left:14px}.text{overflow-y:scroll;height:100%}.listText{width:100%;position:relative;float:left;font-size:14px;font-weight:600;padding-left:10px;padding-right:10px;margin-bottom:2px;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:5px}.listText a{color:var(--primary)}.listText .icon-clear{margin-top:2px}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);transform:translateY(1px)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.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}\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: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-preview-list', template: "<div class=\"listBox row\">\n    <input (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n    <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n    <div class=\"text row\">\n        <div (click)=\"selected(name)\" *ngFor=\"let name of names\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n            <div *ngIf=\"allowRemove\" class=\"icon-clear\" (click)=\"remove(name)\"></div>\n            <span class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"above\">{{ name }}</span>\n        </div>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0}.listBox{background-color:var(--stroke);padding:10px;border-radius:7px;height:100%;min-height:180px}.listBox input{height:40px;border-radius:27px;font-size:14px;font-weight:600;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAuCAYAAABTTPsKAAAD4klEQVRYhc2ZyYsUSRSHvypLbRfGDfWgzngYFRR3EUQPOm5oOyMuKIoo4kk9iAriQfAPcAMvKuJBPAyiXmbAwWVUFGEYmMHlIi24ogd3cW3trpYnv4CooLKrKiuzqn5QUBmZEe/Lly9fvIjMPH36CmA4cABYAHSnsdQK/AVsBR4Y8E/ATaA30KXBYJ3agffA+Cywt8FhEZsx7jUPf/bC4BNwuc5woWYBPdTWmgti9hSwrv6MBToOrFVD92xwsqOOYFEqYAqBGzGOC5gshv07aANuNZCnM8A4IOcacsEFdjyp9lzly0KipZEBA7VYSKwEfpf7nTqU4uqpHkWYVlkInAR+ATZ4AZ4HmoErdQKeCVz0eGymO2asrpawE38D0xXHdjcfFM93aww7Avgf6CUPWyK4Dsw2cJfW7A4WA4/1P6NHcgHoV0PYfrLpwqFdTIv1vyAPvwXmyLMd8voQ4A+gaw1gu8rWENl2T3mO2AiBTfeARYphFB7TgMM1AD4sWy7V5sVyz78oBDZd0wvoZHe7HtiWIuw22fBntQ1iKVAxYFRw7PE8nVEZ2pwCbLPGdimsXbaPF7vYZYmi54A/gfneY7JSdCpwOyHYscC/QJOOLSOcA36NKg+iPIw6rNBM2Ka2bnqLBycAO1hjdfNgW2QzspbpDNj0EZintzSv6wdojdVUom9natIYAzRmXjbmyWakSgGbnigsnJdzepQngqmzXGXUd6wXam2y8aTUGOUAm/4DVnvHZmgpsDsG8G719SvF1bJRUuUCm84Au7zMkfWMl6sl6uPs5jXmmXIH6CxLRMkqu+Weh94BPwJvSvTrAzwCftCxhcFpq8AqMR4W8OXIFqk/AxPUv0lJfl/Q114gP4yGAT092BtxFrxxgL8Ay4D7OrYa4LciwKOBNRHrxKye0pdKjVcSw74eBSuV4RHXtUW0W9+HcQzHBUaVlFPUflxU+4eI9pKqBriUDqm+db9nSQwaJ4bLldUDOzyn9G904KHAxKRtpBkSpsQ3ZNL0sG1EW9r6quNw2R5Lab90vbX67ZXUS5cUcJTnZmjqtjQ2KAlD1QB/9v4PVAETbgnk5OWeSYQDVQKf9WayjKbnO9oxT03VAO8HrgZbAubpS1pU2tLHKrh/VOtGTdMVqdqQmAvs1Eo37z32LarGWrXXMAV4WW9gBGlL8sn2DS1YRo3U57TNScUvCWYJAxsDHPXarKy00vMgcD6pD5ZJ5mELkU3AQuC15+2stk/7JmEkjYnDlu+jtL/rpuZwRn0Rd/C0Zrrn+m69UauK71ulkt2EbU7HUtrFzxF9BXLpzzZLtusDZuUCvgHvMdO9Y7xsIwAAAABJRU5ErkJggg==);background-size:auto 21px;background-position:top 8px right 12px;background-repeat:no-repeat;margin-bottom:10px;padding-left:14px}.text{overflow-y:scroll;height:100%}.listText{width:100%;position:relative;float:left;font-size:14px;font-weight:600;padding-left:10px;padding-right:10px;margin-bottom:2px;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:5px}.listText .icon-clear{margin-top:2px}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);transform:translateY(1px)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.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}\n"] }]
-        }], propDecorators: { hideOption: [{
-                type: Input
-            }], label: [{
+            args: [{ selector: 'lib-preview-list', template: "<div class=\"listBox row\">\n    <input (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n    <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n    <div class=\"text row\">\n        <div (click)=\"selected(item)\" *ngFor=\"let item of previewItems\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n            <div *ngIf=\"allowRemove\" class=\"icon-clear\" (click)=\"remove(item)\"></div>\n            <span *ngIf=\"!item.href\" class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item }}</span>\n            <a *ngIf=\"item.href\" [href]=\"'./' + item.href\" (click)=\"linkClicked($event, item)\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\"><span *ngIf=\"item.name\" class=\"preview-name\">{{ item.name }}</span></a>\n        </div>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0}.listBox{background-color:var(--stroke);padding:10px;border-radius:7px;height:100%;min-height:180px}.listBox input{height:40px;border-radius:27px;font-size:14px;font-weight:600;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAuCAYAAABTTPsKAAAD4klEQVRYhc2ZyYsUSRSHvypLbRfGDfWgzngYFRR3EUQPOm5oOyMuKIoo4kk9iAriQfAPcAMvKuJBPAyiXmbAwWVUFGEYmMHlIi24ogd3cW3trpYnv4CooLKrKiuzqn5QUBmZEe/Lly9fvIjMPH36CmA4cABYAHSnsdQK/AVsBR4Y8E/ATaA30KXBYJ3agffA+Cywt8FhEZsx7jUPf/bC4BNwuc5woWYBPdTWmgti9hSwrv6MBToOrFVD92xwsqOOYFEqYAqBGzGOC5gshv07aANuNZCnM8A4IOcacsEFdjyp9lzly0KipZEBA7VYSKwEfpf7nTqU4uqpHkWYVlkInAR+ATZ4AZ4HmoErdQKeCVz0eGymO2asrpawE38D0xXHdjcfFM93aww7Avgf6CUPWyK4Dsw2cJfW7A4WA4/1P6NHcgHoV0PYfrLpwqFdTIv1vyAPvwXmyLMd8voQ4A+gaw1gu8rWENl2T3mO2AiBTfeARYphFB7TgMM1AD4sWy7V5sVyz78oBDZd0wvoZHe7HtiWIuw22fBntQ1iKVAxYFRw7PE8nVEZ2pwCbLPGdimsXbaPF7vYZYmi54A/gfneY7JSdCpwOyHYscC/QJOOLSOcA36NKg+iPIw6rNBM2Ka2bnqLBycAO1hjdfNgW2QzspbpDNj0EZintzSv6wdojdVUom9natIYAzRmXjbmyWakSgGbnigsnJdzepQngqmzXGXUd6wXam2y8aTUGOUAm/4DVnvHZmgpsDsG8G719SvF1bJRUuUCm84Au7zMkfWMl6sl6uPs5jXmmXIH6CxLRMkqu+Weh94BPwJvSvTrAzwCftCxhcFpq8AqMR4W8OXIFqk/AxPUv0lJfl/Q114gP4yGAT092BtxFrxxgL8Ay4D7OrYa4LciwKOBNRHrxKye0pdKjVcSw74eBSuV4RHXtUW0W9+HcQzHBUaVlFPUflxU+4eI9pKqBriUDqm+db9nSQwaJ4bLldUDOzyn9G904KHAxKRtpBkSpsQ3ZNL0sG1EW9r6quNw2R5Lab90vbX67ZXUS5cUcJTnZmjqtjQ2KAlD1QB/9v4PVAETbgnk5OWeSYQDVQKf9WayjKbnO9oxT03VAO8HrgZbAubpS1pU2tLHKrh/VOtGTdMVqdqQmAvs1Eo37z32LarGWrXXMAV4WW9gBGlL8sn2DS1YRo3U57TNScUvCWYJAxsDHPXarKy00vMgcD6pD5ZJ5mELkU3AQuC15+2stk/7JmEkjYnDlu+jtL/rpuZwRn0Rd/C0Zrrn+m69UauK71ulkt2EbU7HUtrFzxF9BXLpzzZLtusDZuUCvgHvMdO9Y7xsIwAAAABJRU5ErkJggg==);background-size:auto 21px;background-position:top 8px right 12px;background-repeat:no-repeat;margin-bottom:10px;padding-left:14px}.text{overflow-y:scroll;height:100%}.listText{width:100%;position:relative;float:left;font-size:14px;font-weight:600;padding-left:10px;padding-right:10px;margin-bottom:2px;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:5px}.listText a{color:var(--primary)}.listText .icon-clear{margin-top:2px}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);transform:translateY(1px)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i3.Router }]; }, propDecorators: { label: [{
                 type: Input
             }], clickable: [{
                 type: Input
@@ -11134,6 +11191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], allNames: [{
                 type: Input
+            }], items: [{
+                type: Input
             }], allowRemove: [{
                 type: Input
             }], tooltip: [{
@@ -11282,8 +11341,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     limitations under the License.
 */
 class IdentityFormComponent extends ProjectableForm {
-    constructor(settingsService, svc, identitiesService, zitiService, growlerService, extService, router, route) {
-        super(growlerService, extService, zitiService, router, route);
+    constructor(settingsService, svc, identitiesService, zitiService, growlerService, extService, router, route, location) {
+        super(growlerService, extService, zitiService, router, route, location);
         this.settingsService = settingsService;
         this.svc = svc;
         this.identitiesService = identitiesService;
@@ -11560,13 +11619,13 @@ class IdentityFormComponent extends ProjectableForm {
     }
     clear() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentityFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: IdentityFormService }, { token: IdentitiesPageService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: IDENTITY_EXTENSION_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentityFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: IdentityFormService }, { token: IdentitiesPageService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: IDENTITY_EXTENSION_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i1$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IdentityFormComponent, selector: "lib-identity-form", inputs: { formData: "formData", identityRoleAttributes: "identityRoleAttributes" }, outputs: { close: "close" }, providers: [
             {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"identity-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this identity\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Identity attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"identityRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Identities'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Auth Policy'\"\n                        [label]=\"'OPTIONAL'\"\n                        [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.authPolicyId\"\n                            id=\"authPolicyId\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"\">Select an Authentication Policy</option>\n                        <option\n                            *ngFor=\"let policy of authPolicies\"\n                            [value]=\"policy.id\"\n                        >\n                            {{ policy.name }}\n                        </option>\n                    </select>\n                    <input class=\"form-field-input\" placeholder=\"Optional External ID\" [(ngModel)]=\"formData.externalId\"/>\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]=\"'Enrollment Type'\"\n                        [title2]=\"enrollmentTypeTitle\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                            id=\"EnrollmentType\"\n                            class=\"form-field-dropdown\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentType\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option value=\"ott\">One Time Token</option>\n                            <option value=\"CA\">Certificate Authority</option>\n                            <option value=\"updb\">UPDB</option>\n                        </select>\n                        <select\n                            id=\"CertAuthorities\"\n                            class=\"form-field-dropdown\"\n                            *ngIf=\"enrollmentType === 'CA'\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentCA\"\n                            [ngClass]=\"{error: errors.enrollmentCA}\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option *ngFor=\"let ca of cas\" [value]=\"ca.id\">{{ca.name}}</option>\n                        </select>\n                        <input\n                            *ngIf=\"enrollmentType === 'updb' && !isEditing\"\n                            [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                            [(ngModel)]=\"enrollmentUPDB\"\n                            (keyup)=\"updateEnrollment()\"\n                            class=\"form-field-input\"\n                            id=\"UPDBName\"\n                            type=\"text\"\n                            maxlength=\"500\"\n                            placeholder=\"Enter a name\"\n                        >\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Admin'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced is-admin-container\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">IS ADMIN</div>\n                                <div\n                                        (click)=\"toggleIsAdmin()\"\n                                        [ngClass]=\"{ on: formData.isAdmin }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Hosting Cost'\"\n                            [title2]=\"'Precedence'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <input class=\"form-field-input\" [(ngModel)]=\"formData.defaultHostingCost\" type=\"number\"/>\n                        <select\n                            [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                            id=\"hostingPrecedence\"\n                            class=\"form-field-dropdown\"\n                        >\n                            <option value=\"default\">Default</option>\n                            <option value=\"required\">Required</option>\n                            <option value=\"failed\">Failed</option>\n                        </select>\n                    </lib-form-field-container>\n                    <lib-form-field-container *ngFor=\"let tagElement of tagElements\"\n                            [title]=\"tagElement.label\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <div [innerHTML]=\"tagElement.content | safe\"></div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken || hasAuthenticator\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                        [identity]=\"formData\"\n                        [jwt]=\"jwt\"\n                        [expiration]=\"enrollmentExpiration\"\n                        [authenticators]=\"formData.authenticators\"\n                        [type]=\"'identity'\"\n                        [canExpand]=\"true\"\n                        (doRefresh)=\"refreshIdentity()\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"true\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"associatedServiceNames\"\n                    ></lib-preview-list>\n                    <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                        <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                        <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicePoliciesLoading\"\n                        [allNames]=\"associatedServicePolicyNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;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}::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:2px}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}::ng-deep .copy.icon-copy.url-copy{background-color:var(--navigation)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: ["hideOption", "label", "clickable", "isLoading", "allNames", "allowRemove", "tooltip"], 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: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"identity-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this identity\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Identity attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"identityRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Identities'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Auth Policy'\"\n                        [label]=\"'OPTIONAL'\"\n                        [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.authPolicyId\"\n                            id=\"authPolicyId\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"\">Select an Authentication Policy</option>\n                        <option\n                            *ngFor=\"let policy of authPolicies\"\n                            [value]=\"policy.id\"\n                        >\n                            {{ policy.name }}\n                        </option>\n                    </select>\n                    <input class=\"form-field-input\" placeholder=\"Optional External ID\" [(ngModel)]=\"formData.externalId\"/>\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]=\"'Enrollment Type'\"\n                        [title2]=\"enrollmentTypeTitle\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                            id=\"EnrollmentType\"\n                            class=\"form-field-dropdown\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentType\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option value=\"ott\">One Time Token</option>\n                            <option value=\"CA\">Certificate Authority</option>\n                            <option value=\"updb\">UPDB</option>\n                        </select>\n                        <select\n                            id=\"CertAuthorities\"\n                            class=\"form-field-dropdown\"\n                            *ngIf=\"enrollmentType === 'CA'\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentCA\"\n                            [ngClass]=\"{error: errors.enrollmentCA}\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option *ngFor=\"let ca of cas\" [value]=\"ca.id\">{{ca.name}}</option>\n                        </select>\n                        <input\n                            *ngIf=\"enrollmentType === 'updb' && !isEditing\"\n                            [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                            [(ngModel)]=\"enrollmentUPDB\"\n                            (keyup)=\"updateEnrollment()\"\n                            class=\"form-field-input\"\n                            id=\"UPDBName\"\n                            type=\"text\"\n                            maxlength=\"500\"\n                            placeholder=\"Enter a name\"\n                        >\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Admin'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced is-admin-container\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">IS ADMIN</div>\n                                <div\n                                        (click)=\"toggleIsAdmin()\"\n                                        [ngClass]=\"{ on: formData.isAdmin }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Hosting Cost'\"\n                            [title2]=\"'Precedence'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <input class=\"form-field-input\" [(ngModel)]=\"formData.defaultHostingCost\" type=\"number\"/>\n                        <select\n                            [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                            id=\"hostingPrecedence\"\n                            class=\"form-field-dropdown\"\n                        >\n                            <option value=\"default\">Default</option>\n                            <option value=\"required\">Required</option>\n                            <option value=\"failed\">Failed</option>\n                        </select>\n                    </lib-form-field-container>\n                    <lib-form-field-container *ngFor=\"let tagElement of tagElements\"\n                            [title]=\"tagElement.label\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <div [innerHTML]=\"tagElement.content | safe\"></div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken || hasAuthenticator\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                        [identity]=\"formData\"\n                        [jwt]=\"jwt\"\n                        [expiration]=\"enrollmentExpiration\"\n                        [authenticators]=\"formData.authenticators\"\n                        [type]=\"'identity'\"\n                        [canExpand]=\"true\"\n                        (doRefresh)=\"refreshIdentity()\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"true\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"associatedServiceNames\"\n                    ></lib-preview-list>\n                    <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                        <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                        <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicePoliciesLoading\"\n                        [allNames]=\"associatedServicePolicyNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;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}::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:2px}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}::ng-deep .copy.icon-copy.url-copy{background-color:var(--navigation)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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"], 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: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentityFormComponent, decorators: [{
             type: Component,
@@ -11585,7 +11644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IDENTITY_EXTENSION_SERVICE]
-                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }]; }, propDecorators: { formData: [{
+                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i1$4.Location }]; }, propDecorators: { formData: [{
                 type: Input
             }], identityRoleAttributes: [{
                 type: Input
@@ -14951,8 +15010,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: i1$1.HttpClient }, { type: LoggerService }, { type: TreeNodeProcessor }, { type: NetworkVisualizerHelper }]; } });
 
 class EdgeRouterFormComponent extends ProjectableForm {
-    constructor(settingsService, svc, zitiService, growlerService, extService, router, route) {
-        super(growlerService, extService, zitiService, router, route);
+    constructor(settingsService, svc, zitiService, growlerService, extService, router, route, location) {
+        super(growlerService, extService, zitiService, router, route, location);
         this.settingsService = settingsService;
         this.svc = svc;
         this.zitiService = zitiService;
@@ -15114,13 +15173,13 @@ class EdgeRouterFormComponent extends ProjectableForm {
     }
     clear() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: EdgeRouterFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: EDGE_ROUTER_EXTENSION_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: EdgeRouterFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: EDGE_ROUTER_EXTENSION_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i1$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EdgeRouterFormComponent, selector: "lib-edge-router-form", inputs: { formData: "formData", edgeRouterRoleAttributes: "edgeRouterRoleAttributes" }, outputs: { close: "close" }, providers: [
             {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this edge router\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Edge Router attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Edge Routers'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'TUNNELER'\"\n                        [title2]=\"'TRAVERSAL'\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                                <div\n                                        (click)=\"toggleTunnelerEnabled()\"\n                                        [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                                <div\n                                        (click)=\"toggleNoTraversal()\"\n                                        [ngClass]=\"{ on: !formData.noTraversal }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                            [identity]=\"formData\"\n                            [jwt]=\"formData.enrollmentJwt\"\n                            [token]=\"formData.enrollmentToken\"\n                            [expiration]=\"formData.enrollmentExpiresAt\"\n                            (doRefresh)=\"refreshEdgeRouter()\"\n                            [type]=\"'router'\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentities.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"identitiesLoading\"\n                        [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"'OPTIONAL'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap: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}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;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}::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:2px}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "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: ["hideOption", "label", "clickable", "isLoading", "allNames", "allowRemove", "tooltip"], 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: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this edge router\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Edge Router attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Edge Routers'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'TUNNELER'\"\n                        [title2]=\"'TRAVERSAL'\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                                <div\n                                        (click)=\"toggleTunnelerEnabled()\"\n                                        [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                                <div\n                                        (click)=\"toggleNoTraversal()\"\n                                        [ngClass]=\"{ on: !formData.noTraversal }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                            [identity]=\"formData\"\n                            [jwt]=\"formData.enrollmentJwt\"\n                            [token]=\"formData.enrollmentToken\"\n                            [expiration]=\"formData.enrollmentExpiresAt\"\n                            (doRefresh)=\"refreshEdgeRouter()\"\n                            [type]=\"'router'\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentities.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"identitiesLoading\"\n                        [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"'OPTIONAL'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap: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}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;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}::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:2px}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "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"], 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: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterFormComponent, decorators: [{
             type: Component,
@@ -15139,7 +15198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [EDGE_ROUTER_EXTENSION_SERVICE]
-                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }]; }, propDecorators: { formData: [{
+                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i1$4.Location }]; }, propDecorators: { formData: [{
                 type: Input
             }], edgeRouterRoleAttributes: [{
                 type: Input
@@ -15181,6 +15240,7 @@ class ServiceFormService {
             total: 100
         };
         this.formData = {};
+        this.selectedConfig = {};
         this.selectedConfigId = '';
         this.configs = [];
         this.configTypes = [];
@@ -15189,7 +15249,7 @@ class ServiceFormService {
         this.selectedConfigName = '';
         this.selectedConfigTypeId = '';
         this.selectedConfigType = {};
-        this.addedConfigNames = [];
+        this.addedConfigs = [];
         this.addedTerminatorNames = [];
         this.addedTerminators = [];
         this.configJsonView = false;
@@ -15214,6 +15274,7 @@ class ServiceFormService {
         this.associatedTerminators = [];
         this.associatedServicePolicies = [];
         this.associatedServicePolicyNames = [];
+        this.associatedServicePoliciesMap = {};
         this.lColorArray = [
             'white',
             'white',
@@ -15284,22 +15345,22 @@ class ServiceFormService {
         this.zitiService.getSubdata('services', this.formData.id, 'service-policies').then((result) => {
             this.associatedServicePolicies = result.data;
             this.associatedServicePolicyNames = this.associatedServicePolicies.map((policy) => {
+                this.associatedServicePoliciesMap[policy.name] = policy;
                 return policy.name;
             });
         });
     }
-    previewConfig(configName) {
+    previewConfig(configName, router) {
         this.showCfgPreviewOption = true;
-        this.configData = this.associatedConfigsMap[configName].data;
-        this.selectedConfigName = this.associatedConfigsMap[configName].name;
-        this.selectedConfigId = 'preview';
-        this.selectedConfigTypeId = this.associatedConfigsMap[configName].configTypeId;
-        this.configTypeChanged(false);
-        this.selectedConfigId = 'preview';
-        this.newConfigName = this.selectedConfigName;
-        defer(() => {
-            this.selectedConfigId = 'preview';
-        });
+        this.selectedConfig = this.associatedConfigsMap[configName];
+        router.navigate(['/configs/' + this.selectedConfig.id]);
+        return;
+    }
+    previewPolicy(policyName, router) {
+        this.showCfgPreviewOption = true;
+        this.selectedConfig = this.associatedServicePoliciesMap[policyName];
+        router.navigate(['/service-policies/' + this.selectedConfig.id]);
+        return;
     }
     addTerminators(serviceId) {
         const promises = [];
@@ -15339,9 +15400,10 @@ class ServiceFormService {
         this.zitiService.getSubdata('services', this.formData.id, 'configs').then((result) => {
             this.associatedConfigs = result.data;
             this.associatedConfigsMap = {};
-            this.addedConfigNames = this.associatedConfigs.map((cfg) => {
+            this.addedConfigs = this.associatedConfigs.map((cfg) => {
                 this.associatedConfigsMap[cfg.name] = cfg;
-                return cfg.name;
+                cfg.href = '/configs/' + cfg.id;
+                return cfg;
             });
         });
     }
@@ -15383,14 +15445,15 @@ class ServiceFormService {
         this.configChanged(resetData);
     }
     updatedAddedConfigs() {
-        this.addedConfigNames = [];
+        this.addedConfigs = [];
         this.configs.forEach((availableConfig) => {
             const cfgExists = some(this.formData.configs, configId => {
                 return availableConfig.id == configId;
             });
             if (cfgExists) {
-                this.addedConfigNames.push(availableConfig.name);
-                this.addedConfigNames = [...this.addedConfigNames];
+                availableConfig.href = '/configs/' + availableConfig.id;
+                this.addedConfigs.push(availableConfig);
+                this.addedConfigs = [...this.addedConfigs];
             }
         });
     }
@@ -15419,6 +15482,7 @@ class ServiceFormService {
                 .then((result) => {
                 const cfg = result?.data;
                 newConfig.id = result?.id ? result.id : result?.data?.id;
+                newConfig.href = '/configs/' + newConfig.id;
                 this.associatedConfigsMap[newConfig.name] = { data: newConfig.data, name: newConfig.name, configTypeId: newConfig.configTypeId };
                 return newConfig.id;
             })
@@ -15435,8 +15499,8 @@ class ServiceFormService {
             if (!isEmpty(configId)) {
                 this.saveDisabled = false;
                 this.formData.configs.push(configId);
-                this.addedConfigNames.push(this.newConfigName);
-                this.addedConfigNames = [...this.addedConfigNames];
+                this.addedConfigs.push(newConfig);
+                this.addedConfigs = [...this.addedConfigs];
                 this.getConfigs();
                 const growlerData = new GrowlerModel('success', 'Success', `New Config Attached`, `New Config ${this.newConfigName} has been created and attached to the service`);
                 this.growlerService.show(growlerData);
@@ -15456,15 +15520,16 @@ class ServiceFormService {
                 }
             });
             if (!configAdded) {
-                let configName = '';
+                let newConfig;
                 this.configs.forEach((config) => {
                     if (config.id === addedConfigId) {
-                        configName = config.name;
+                        newConfig = config;
                     }
                 });
-                if (!isEmpty(configName)) {
-                    this.addedConfigNames.push(configName);
-                    this.addedConfigNames = [...this.addedConfigNames];
+                if (newConfig) {
+                    newConfig.href = '/configs/' + newConfig.id;
+                    this.addedConfigs.push(newConfig);
+                    this.addedConfigs = [...this.addedConfigs];
                 }
                 this.formData.configs.push(addedConfigId);
                 this.selectedConfigTypeId = '';
@@ -15477,10 +15542,10 @@ class ServiceFormService {
             }
         }
     }
-    removeConfig(nameToRemove) {
+    removeConfig(configToRemove) {
         let configIdToRemove;
         this.configs.forEach((availableConfig) => {
-            if (availableConfig.name === nameToRemove) {
+            if (availableConfig.name === configToRemove.name) {
                 configIdToRemove = availableConfig.id;
             }
         });
@@ -15488,12 +15553,12 @@ class ServiceFormService {
             const newConfigs = filter(this.formData.configs, configId => {
                 return configId !== configIdToRemove;
             });
-            const newConfigNames = filter(this.addedConfigNames, (configName) => {
-                return configName !== nameToRemove;
+            const newConfigItems = filter(this.addedConfigs, (config) => {
+                return config.name !== configToRemove.name;
             });
             this.formData.configs = newConfigs;
-            this.addedConfigNames = newConfigNames;
-            if (this.selectedConfigId === 'preview' && nameToRemove === this.selectedConfigName) {
+            this.addedConfigs = newConfigItems;
+            if (this.selectedConfigId === 'preview' && configToRemove.name === this.selectedConfigName) {
                 this.selectedConfigId = '';
                 this.selectedConfigTypeId = '';
             }
@@ -15612,8 +15677,8 @@ class ServiceFormComponent extends ProjectableForm {
     get formData() {
         return this.svc.formData;
     }
-    constructor(settingsService, svc, zitiService, growlerService, extService, router, route) {
-        super(growlerService, extService, zitiService, router, route);
+    constructor(settingsService, svc, zitiService, growlerService, extService, router, route, location) {
+        super(growlerService, extService, zitiService, router, route, location);
         this.settingsService = settingsService;
         this.svc = svc;
         this.zitiService = zitiService;
@@ -15722,7 +15787,7 @@ class ServiceFormComponent extends ProjectableForm {
                 break;
             case 'close':
                 this.resetForm();
-                this.router?.navigateByUrl(`/services`);
+                this.returnToListPage();
                 break;
             case 'toggle-view':
                 this.formView = action.data;
@@ -15779,13 +15844,13 @@ class ServiceFormComponent extends ProjectableForm {
     }
     clear() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: ServiceFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: SERVICE_EXTENSION_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: ServiceFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: SERVICE_EXTENSION_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i1$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ServiceFormComponent, selector: "lib-service-form", inputs: { formData: "formData", serviceRoleAttributes: "serviceRoleAttributes" }, outputs: { close: "close" }, providers: [
             {
                 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                        <select\n                                [(ngModel)]=\"svc.selectedConfigId\"\n                                (change)=\"configChanged($event)\"\n                                id=\"SelectedConfig\"\n                                class=\"form-field-dropdown\"\n                                [ngClass]=\"{'disabled': !svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''}\"\n                        >\n                            <option value=\"\">Select configuration...</option>\n                            <option value=\"add-new\">Add a New  Config</option>\n                            <option value=\"preview\" *ngIf=\"svc.selectedConfigId === 'preview'\">View Config Data</option>\n                            <option\n                                    *ngFor=\"let config of svc.filteredConfigs\"\n                                    [value]=\"config.id\"\n                            >\n                                {{ config.name }}\n                            </option>\n                        </select>\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]=\"'Selected Configurations'\"\n                    [count]=\"svc.addedConfigNames ? svc.addedConfigNames.length : 0\"\n                    [helpText]=\"'Preview list of all service configurations that this service is associated with.'\"\n                >\n                    <lib-preview-list\n                        [allNames]=\"svc.addedConfigNames\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [tooltip]=\"'View Config Data'\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event)\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"svc.associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [allNames]=\"svc.associatedServicePolicyNames\"\n                    ></lib-preview-list>\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:2px;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:7px;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:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;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}::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:2px}::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: "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: ["hideOption", "label", "clickable", "isLoading", "allNames", "allowRemove", "tooltip"], 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                        <select\n                                [(ngModel)]=\"svc.selectedConfigId\"\n                                (change)=\"configChanged($event)\"\n                                id=\"SelectedConfig\"\n                                class=\"form-field-dropdown\"\n                                [ngClass]=\"{'disabled': !svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''}\"\n                        >\n                            <option value=\"\">Select configuration...</option>\n                            <option value=\"add-new\">Add a New  Config</option>\n                            <option value=\"preview\" *ngIf=\"svc.selectedConfigId === 'preview'\">View Config Data</option>\n                            <option\n                                    *ngFor=\"let config of svc.filteredConfigs\"\n                                    [value]=\"config.id\"\n                            >\n                                {{ config.name }}\n                            </option>\n                        </select>\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]=\"'Selected Configurations'\"\n                    [count]=\"svc.addedConfigs ? svc.addedConfigs.length : 0\"\n                    [helpText]=\"'Preview list of all service configurations that this service is associated with.'\"\n                >\n                    <lib-preview-list\n                        [allNames]=\"svc.addedConfigs\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [tooltip]=\"'View Config'\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event, router)\"\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-preview-list\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewPolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"svc.associatedServicePolicyNames\"\n                    ></lib-preview-list>\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:2px;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:7px;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:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;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}::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:2px}::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: "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"], 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,
@@ -15794,7 +15859,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                        <select\n                                [(ngModel)]=\"svc.selectedConfigId\"\n                                (change)=\"configChanged($event)\"\n                                id=\"SelectedConfig\"\n                                class=\"form-field-dropdown\"\n                                [ngClass]=\"{'disabled': !svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''}\"\n                        >\n                            <option value=\"\">Select configuration...</option>\n                            <option value=\"add-new\">Add a New  Config</option>\n                            <option value=\"preview\" *ngIf=\"svc.selectedConfigId === 'preview'\">View Config Data</option>\n                            <option\n                                    *ngFor=\"let config of svc.filteredConfigs\"\n                                    [value]=\"config.id\"\n                            >\n                                {{ config.name }}\n                            </option>\n                        </select>\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]=\"'Selected Configurations'\"\n                    [count]=\"svc.addedConfigNames ? svc.addedConfigNames.length : 0\"\n                    [helpText]=\"'Preview list of all service configurations that this service is associated with.'\"\n                >\n                    <lib-preview-list\n                        [allNames]=\"svc.addedConfigNames\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [tooltip]=\"'View Config Data'\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event)\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"svc.associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [allNames]=\"svc.associatedServicePolicyNames\"\n                    ></lib-preview-list>\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:2px;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:7px;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:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;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}::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:2px}::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                        <select\n                                [(ngModel)]=\"svc.selectedConfigId\"\n                                (change)=\"configChanged($event)\"\n                                id=\"SelectedConfig\"\n                                class=\"form-field-dropdown\"\n                                [ngClass]=\"{'disabled': !svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''}\"\n                        >\n                            <option value=\"\">Select configuration...</option>\n                            <option value=\"add-new\">Add a New  Config</option>\n                            <option value=\"preview\" *ngIf=\"svc.selectedConfigId === 'preview'\">View Config Data</option>\n                            <option\n                                    *ngFor=\"let config of svc.filteredConfigs\"\n                                    [value]=\"config.id\"\n                            >\n                                {{ config.name }}\n                            </option>\n                        </select>\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]=\"'Selected Configurations'\"\n                    [count]=\"svc.addedConfigs ? svc.addedConfigs.length : 0\"\n                    [helpText]=\"'Preview list of all service configurations that this service is associated with.'\"\n                >\n                    <lib-preview-list\n                        [allNames]=\"svc.addedConfigs\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [tooltip]=\"'View Config'\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event, router)\"\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-preview-list\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewPolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"svc.associatedServicePolicyNames\"\n                    ></lib-preview-list>\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:2px;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:7px;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:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;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}::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:2px}::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]
@@ -15804,7 +15869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SERVICE_EXTENSION_SERVICE]
-                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }]; }, propDecorators: { formData: [{
+                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i1$4.Location }]; }, propDecorators: { formData: [{
                 type: Input
             }], serviceRoleAttributes: [{
                 type: Input
@@ -16164,6 +16229,10 @@ class SimpleServiceComponent extends ProjectableForm {
         if (!this.validate()) {
             return;
         }
+        const hasConflicts = await this.checkNameConflicts();
+        if (hasConflicts) {
+            return;
+        }
         const summaryData = this.showSummary();
         this.serviceApiData.configs = [];
         await this.createInterceptConfig(summaryData);
@@ -16298,11 +16367,93 @@ class SimpleServiceComponent extends ProjectableForm {
                 /// Do nothing, stay on page
             }
             else {
-                this.closeModal(true, true, '');
+                this.router?.navigateByUrl(`${this.basePath}`);
             }
         });
         return summaryData;
     }
+    async checkNameConflicts() {
+        const filter = {
+            filterName: 'name',
+            columnId: 'name',
+            value: this.serviceApiData.name,
+            label: '',
+            type: 'TEXTINPUT',
+            hidden: false,
+            verb: '='
+        };
+        const results = {
+            serviceConflict: false,
+            interceptConflict: false,
+            hostConflict: false,
+            dialPolicyConflict: false,
+            bindPolicyConflict: false,
+            names: []
+        };
+        const paging = cloneDeep(this.zitiService.DEFAULT_PAGING);
+        paging.noSearch = false;
+        const serviceProm = this.zitiService.get('services', paging, [filter]).then((result) => {
+            if (result.data?.length > 0) {
+                results.serviceConflict = true;
+                results.names.push(this.serviceApiData.name);
+            }
+        });
+        filter.value = this.interceptConfigApiData.name;
+        const interceptProm = this.zitiService.get('configs', paging, [filter]).then((result) => {
+            if (result.data?.length > 0) {
+                results.interceptConflict = true;
+                results.names.push(this.interceptConfigApiData.name);
+            }
+        });
+        filter.value = this.hostConfigApiData.name;
+        const hostProm = this.zitiService.get('configs', paging, [filter]).then((result) => {
+            if (result.data?.length > 0) {
+                results.hostConflict = true;
+                results.names.push(this.hostConfigApiData.name);
+            }
+        });
+        filter.value = this.dialPolicyApiData.name;
+        const dialProm = this.zitiService.get('service-policies', paging, [filter]).then((result) => {
+            if (result.data?.length > 0) {
+                results.dialPolicyConflict = true;
+                results.names.push(this.dialPolicyApiData.name);
+            }
+        });
+        filter.value = this.bindPolicyApiData.name;
+        const bindProm = this.zitiService.get('service-policies', paging, [filter]).then((result) => {
+            if (result.data?.length > 0) {
+                results.bindPolicyConflict = true;
+                results.names.push(this.bindPolicyApiData.name);
+            }
+        });
+        return Promise.all([serviceProm, interceptProm, hostProm, dialProm, bindProm]).then(() => {
+            let hasConflict = results.names.length > 0;
+            if (hasConflict) {
+                this.errors.name = true;
+                this.showConflictWarning(results);
+            }
+            return hasConflict;
+        });
+    }
+    showConflictWarning(conflictData) {
+        const data = {
+            appendId: 'SimpleServiceConflicts',
+            title: 'Name Conflict',
+            message: `The name you have entered has conflicts for the following entities`,
+            bulletList: conflictData.names,
+            submessage: `Please update the entered name and try again.`,
+            confirmLabel: 'Return',
+            showCancelLink: false,
+            imageUrl: '../../assets/svgs/Growl_Error.svg'
+        };
+        this.dialogRef = this.dialogForm.open(ConfirmComponent, {
+            data: data,
+            autoFocus: false,
+        });
+        this.dialogRef.afterClosed(() => {
+            this.nameFieldInput.nativeElement.focus();
+        });
+    }
     async createInterceptConfig(summaryData) {
         if (this.sdkOnlyDial) {
             return;
@@ -17707,11 +17858,11 @@ class ServicePoliciesPageComponent extends ListPageComponent {
         this.svc.serviceType = event;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServicePoliciesPageComponent, deps: [{ token: ServicePoliciesPageService }, { token: DataTableFilterService }, { token: i3$2.MatDialog }, { token: TabNameService }, { token: ConsoleEventsService }, { token: ZAC_WRAPPER_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ServicePoliciesPageComponent, selector: "lib-service-policies-page", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-service-policies-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 Service Policies defined, Click the plus to add a Service Policy.'\"\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: [""], 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", "columnDefinitions", "refreshCount"], outputs: ["actionRequested", "gridReady", "dragStart", "dragLeave", "pageChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ServicePoliciesPageComponent, selector: "lib-service-policies-page", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-service-policies-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]=\"'service-policies'\"\n                    [rowData]=\"rowData\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [emptyMsg]=\"'No Service Policies defined, Click the plus to add a Service Policy.'\"\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: [""], 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", "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: ServicePoliciesPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-service-policies-page', template: "<div class=\"ziti-page-container ziti-service-policies-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 Service Policies defined, Click the plus to add a Service Policy.'\"\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" }]
+            args: [{ selector: 'lib-service-policies-page', template: "<div class=\"ziti-page-container ziti-service-policies-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]=\"'service-policies'\"\n                    [rowData]=\"rowData\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [emptyMsg]=\"'No Service Policies defined, Click the plus to add a Service Policy.'\"\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" }]
         }], ctorParameters: function () { return [{ type: ServicePoliciesPageService }, { type: DataTableFilterService }, { type: i3$2.MatDialog }, { type: TabNameService }, { type: ConsoleEventsService }, { type: ZacWrapperServiceClass, decorators: [{
                     type: Inject,
                     args: [ZAC_WRAPPER_SERVICE]
@@ -17956,8 +18107,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 class ServicePolicyFormComponent extends ProjectableForm {
-    constructor(settingsService, svc, zitiService, growlerService, extService, router, route) {
-        super(growlerService, extService, zitiService, router, route);
+    constructor(settingsService, svc, zitiService, growlerService, extService, router, route, location) {
+        super(growlerService, extService, zitiService, router, route, location);
         this.settingsService = settingsService;
         this.svc = svc;
         this.zitiService = zitiService;
@@ -18094,6 +18245,7 @@ class ServicePolicyFormComponent extends ProjectableForm {
                 this.closeModal(true, true);
             }
             const data = result?.data?.id ? result.data : result;
+            this._dataChange = false;
             if (!isEmpty(data.id)) {
                 this.formData = data || this.formData;
                 this.initData = this.formData;
@@ -18177,13 +18329,13 @@ class ServicePolicyFormComponent extends ProjectableForm {
     }
     clear() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServicePolicyFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: ServicePolicyFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: SERVICE_POLICY_EXTENSION_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServicePolicyFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: ServicePolicyFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: SERVICE_POLICY_EXTENSION_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i1$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ServicePolicyFormComponent, selector: "lib-service-policy-form", inputs: { formData: "formData" }, outputs: { close: "close" }, providers: [
             {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge service policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Posture Check Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100001'\"\n                        [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n                            [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            [placeholder]=\"'Select posture check attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Type'\"\n                        [title2]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.type\"\n                            id=\"PolicyType\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"Bind\">Bind</option>\n                        <option value=\"Dial\">Dial</option>\n                    </select>\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"servicesLoading\"\n                            [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"identitiesLoading\"\n                            [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Posture Checks'\"\n                        [count]=\"svc.associatedPostureCheckNames.length\"\n                        [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"postureChecksLoading\"\n                            [allNames]=\"svc.associatedPostureCheckNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "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: ["hideOption", "label", "clickable", "isLoading", "allNames", "allowRemove", "tooltip"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], 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"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge service policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Posture Check Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100001'\"\n                        [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n                            [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            [placeholder]=\"'Select posture check attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Type'\"\n                        [title2]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.type\"\n                            id=\"PolicyType\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"Bind\">Bind</option>\n                        <option value=\"Dial\">Dial</option>\n                    </select>\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"servicesLoading\"\n                            [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"identitiesLoading\"\n                            [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Posture Checks'\"\n                        [count]=\"svc.associatedPostureCheckNames.length\"\n                        [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"postureChecksLoading\"\n                            [allNames]=\"svc.associatedPostureCheckNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "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"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServicePolicyFormComponent, decorators: [{
             type: Component,
@@ -18202,7 +18354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SERVICE_POLICY_EXTENSION_SERVICE]
-                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }]; }, propDecorators: { formData: [{
+                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i1$4.Location }]; }, propDecorators: { formData: [{
                 type: Input
             }], close: [{
                 type: Output
@@ -18394,8 +18546,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 class EdgeRouterPolicyFormComponent extends ProjectableForm {
-    constructor(settingsService, svc, zitiService, growlerService, extService, router, route) {
-        super(growlerService, extService, zitiService, router, route);
+    constructor(settingsService, svc, zitiService, growlerService, extService, router, route, location) {
+        super(growlerService, extService, zitiService, router, route, location);
         this.settingsService = settingsService;
         this.svc = svc;
         this.zitiService = zitiService;
@@ -18532,11 +18684,8 @@ class EdgeRouterPolicyFormComponent extends ProjectableForm {
         this.isLoading = true;
         this.applySelectedAttributes();
         this.svc.save(this.formData).then((result) => {
-            if (result?.close) {
-                this.closeModal(true, true);
-                this.returnToListPage();
-            }
             const data = result?.data?.id ? result.data : result;
+            this._dataChange = false;
             if (!isEmpty(data.id)) {
                 this.formData = data || this.formData;
                 this.initData = this.formData;
@@ -18544,6 +18693,10 @@ class EdgeRouterPolicyFormComponent extends ProjectableForm {
             else {
                 this.initData = this.formData;
             }
+            if (result?.close) {
+                this.closeModal(true, true);
+                this.returnToListPage();
+            }
         }).finally(() => {
             this.isLoading = false;
         });
@@ -18613,13 +18766,13 @@ ${this.formData.id ? '--request PATCH \\' : ''}
     }
     clear() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterPolicyFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: EdgeRouterPolicyFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: EDGE_ROUTER_POLICY_EXTENSION_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterPolicyFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: EdgeRouterPolicyFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: EDGE_ROUTER_POLICY_EXTENSION_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i1$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EdgeRouterPolicyFormComponent, selector: "lib-edge-router-policy-form", inputs: { formData: "formData" }, outputs: { close: "close" }, providers: [
             {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"identitiesLoading\"\n                            [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "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: ["hideOption", "label", "clickable", "isLoading", "allNames", "allowRemove", "tooltip"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], 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"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"identitiesLoading\"\n                            [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "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"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterPolicyFormComponent, decorators: [{
             type: Component,
@@ -18638,7 +18791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [EDGE_ROUTER_POLICY_EXTENSION_SERVICE]
-                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }]; }, propDecorators: { formData: [{
+                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i1$4.Location }]; }, propDecorators: { formData: [{
                 type: Input
             }], close: [{
                 type: Output
@@ -19301,8 +19454,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
-    constructor(settingsService, svc, zitiService, growlerService, extService, router, route) {
-        super(growlerService, extService, zitiService, router, route);
+    constructor(settingsService, svc, zitiService, growlerService, extService, router, route, location) {
+        super(growlerService, extService, zitiService, router, route, location);
         this.settingsService = settingsService;
         this.svc = svc;
         this.zitiService = zitiService;
@@ -19439,6 +19592,7 @@ class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
         this.applySelectedAttributes();
         this.svc.save(this.formData).then((result) => {
             const data = result?.data?.id ? result.data : result;
+            this._dataChange = false;
             if (!isEmpty(data.id)) {
                 this.formData = data || this.formData;
                 this.initData = this.formData;
@@ -19518,13 +19672,13 @@ ${this.formData.id ? '--request PATCH \\' : ''}
     }
     clear() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceEdgeRouterPolicyFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: ServiceEdgeRouterPolicyFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: SERVICE_EDGE_ROUTER_POLICY_EXTENSION_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceEdgeRouterPolicyFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: ServiceEdgeRouterPolicyFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: SERVICE_EDGE_ROUTER_POLICY_EXTENSION_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i1$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ServiceEdgeRouterPolicyFormComponent, selector: "lib-service-edge-router-policy-form", inputs: { formData: "formData" }, outputs: { close: "close" }, providers: [
             {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service edge edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"servicesLoading\"\n                            [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "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: ["hideOption", "label", "clickable", "isLoading", "allNames", "allowRemove", "tooltip"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], 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"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service edge edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"servicesLoading\"\n                            [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "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"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceEdgeRouterPolicyFormComponent, decorators: [{
             type: Component,
@@ -19543,7 +19697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SERVICE_EDGE_ROUTER_POLICY_EXTENSION_SERVICE]
-                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }]; }, propDecorators: { formData: [{
+                }] }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i1$4.Location }]; }, propDecorators: { formData: [{
                 type: Input
             }], close: [{
                 type: Output
@@ -21330,7 +21484,8 @@ class ZitiControllerDataService extends ZitiDataService {
             let filterVal = '';
             switch (filter.type) {
                 case 'TEXTINPUT':
-                    filterVal = `${filter.columnId} contains "${filter.value}"`;
+                    const verb = filter.verb ? filter.verb : 'contains';
+                    filterVal = `${filter.columnId} ${verb} "${filter.value}"`;
                     break;
                 case 'SELECT':
                 case 'COMBO':