@openziti/ziti-console-lib 0.6.6 → 0.6.8

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

@@ -1869,6 +1869,7 @@ class TextListInputComponent {
         this.error = '';
         this.fieldValueChange = new EventEmitter();
         this.valueChange = new Subject();
+        this.emitEventsDebounced = debounce(this.emitEvents.bind(this), 500);
         this._isValid = true;
     }
     set fieldName(name) {
@@ -1891,13 +1892,11 @@ class TextListInputComponent {
             element.blur();
             element.focus();
         }
-        this.emitEvents();
+        this.emitEventsDebounced();
     }
     emitEvents() {
-        debounce(() => {
-            this.fieldValueChange.emit(this.fieldValue);
-            this.valueChange.next(this.fieldValue);
-        }, 500)();
+        this.fieldValueChange.emit(this.fieldValue);
+        this.valueChange.next(this.fieldValue);
     }
     setIsValid(isValid) {
         this._isValid = isValid;
@@ -1913,7 +1912,8 @@ class TextListInputComponent {
           [placeholder]="placeholder"
           [addOnBlur]="true"
           [ngClass]="fieldClass + (!_isValid ? ' invalid' : '')" 
-          (onBlur)="emitEvents()"
+          (onBlur)="emitEventsDebounced()"
+          (onModelChange)="emitEvents()"
           separator=",">
       </p-chips>
       <div *ngIf="error" class="error">{{error}}</div>
@@ -1932,7 +1932,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
           [placeholder]="placeholder"
           [addOnBlur]="true"
           [ngClass]="fieldClass + (!_isValid ? ' invalid' : '')" 
-          (onBlur)="emitEvents()"
+          (onBlur)="emitEventsDebounced()"
+          (onModelChange)="emitEvents()"
           separator=",">
       </p-chips>
       <div *ngIf="error" class="error">{{error}}</div>
@@ -16368,6 +16369,7 @@ class ServiceFormService {
             this.saveDisabled = true;
         }
         else if (this.selectedConfigId) {
+            attachLabel = 'Attach to Service';
             this.filteredConfigs.forEach((config) => {
                 if (this.selectedConfigId === config.id) {
                     selectedConfig = config;
@@ -16457,6 +16459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class ConfigEditorComponent {
     set configData(data) {
         this._configData = data;
+        this.initFormData();
     }
     ;
     get configData() {
@@ -16471,6 +16474,7 @@ class ConfigEditorComponent {
     }
     set schema(schema) {
         this._schema = schema;
+        this.initFormData();
         this.createForm();
         this.updateConfigData();
     }
@@ -16480,6 +16484,7 @@ class ConfigEditorComponent {
     constructor(schemaSvc, growlerService) {
         this.schemaSvc = schemaSvc;
         this.growlerService = growlerService;
+        this.configDataInit = false;
         this.items = [];
         this.lColorArray = [
             'white',
@@ -16501,9 +16506,6 @@ class ConfigEditorComponent {
     }
     ngOnInit() {
         this.createForm();
-        defer(() => {
-            this.formDataChanged();
-        });
     }
     createForm() {
         this.clearForm();
@@ -16639,6 +16641,7 @@ class ConfigEditorComponent {
         return data;
     }
     validateConfig(schema, showGrowler = true) {
+        this.configData = this.removeUndefinedProperties(this.configData);
         let validationErrors;
         let valid = true;
         if (schema) {
@@ -16719,10 +16722,16 @@ class ConfigEditorComponent {
         const growlerData = new GrowlerModel('error', 'Error', `Error Validating Config`, validationMessage);
         this.growlerService.show(growlerData);
     }
+    initFormData() {
+        if (!this.configDataInit && !isEmpty(this._configData) && !isEmpty(this.schema)) {
+            this.configDataInit = true;
+            this.formDataChanged();
+        }
+    }
     formDataChanged() {
-        delay(() => {
+        defer(() => {
             this.getConfigDataFromForm();
-        }, 200);
+        });
     }
     jsonDataChanged(event) {
         defer(() => {
@@ -16730,12 +16739,25 @@ class ConfigEditorComponent {
             this.updateFormView(this.items, this.configData);
         });
     }
+    removeUndefinedProperties(data) {
+        if (Array.isArray(data)) {
+            return data
+                .map(item => this.removeUndefinedProperties(item))
+                .filter(item => item !== undefined);
+        }
+        else if (typeof data === 'object' && data !== null) {
+            return Object.fromEntries(Object.entries(data)
+                .filter(([_, value]) => value !== undefined)
+                .map(([key, value]) => [key, this.removeUndefinedProperties(value)]));
+        }
+        return data;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigEditorComponent, deps: [{ token: SchemaService }, { token: GrowlerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: { configErrors: "configErrors", configData: "configData", showJsonView: "showJsonView", schema: "schema" }, outputs: { configErrorsChange: "configErrorsChange", configDataChange: "configDataChange" }, viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: ["dynamicform"], descendants: true, read: ViewContainerRef }, { propertyName: "editor", first: true, predicate: JsonEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"form-field-extended-fields\" [hidden]=\"showJsonView\" (mouseup)=\"formDataChangedDebounced($event)\" (keyup)=\"formDataChangedDebounced($event)\">\n    <ng-container #dynamicform></ng-container>\n</div>\n<lib-json-view *ngIf=\"showJsonView && !hideConfigJSON\" (dataChange)=\"jsonDataChangedDebounced($event)\" [(data)]=\"configData\"></lib-json-view>\n<lib-json-view *ngIf=\"showJsonView && hideConfigJSON\" [(data)]=\"configData\"></lib-json-view>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: { configErrors: "configErrors", configData: "configData", showJsonView: "showJsonView", schema: "schema" }, outputs: { configErrorsChange: "configErrorsChange", configDataChange: "configDataChange" }, viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: ["dynamicform"], descendants: true, read: ViewContainerRef }, { propertyName: "editor", first: true, predicate: JsonEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"form-field-extended-fields\" [hidden]=\"showJsonView\" (mouseup)=\"formDataChangedDebounced($event)\" (keyup)=\"formDataChangedDebounced($event)\" (clickOutside)=\"formDataChangedDebounced($event)\">\n    <ng-container #dynamicform></ng-container>\n</div>\n<lib-json-view *ngIf=\"showJsonView && !hideConfigJSON\" (dataChange)=\"jsonDataChangedDebounced($event)\" [(data)]=\"configData\"></lib-json-view>\n<lib-json-view *ngIf=\"showJsonView && hideConfigJSON\" [(data)]=\"configData\"></lib-json-view>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-config-editor', template: "<div class=\"form-field-extended-fields\" [hidden]=\"showJsonView\" (mouseup)=\"formDataChangedDebounced($event)\" (keyup)=\"formDataChangedDebounced($event)\">\n    <ng-container #dynamicform></ng-container>\n</div>\n<lib-json-view *ngIf=\"showJsonView && !hideConfigJSON\" (dataChange)=\"jsonDataChangedDebounced($event)\" [(data)]=\"configData\"></lib-json-view>\n<lib-json-view *ngIf=\"showJsonView && hideConfigJSON\" [(data)]=\"configData\"></lib-json-view>" }]
+            args: [{ selector: 'lib-config-editor', template: "<div class=\"form-field-extended-fields\" [hidden]=\"showJsonView\" (mouseup)=\"formDataChangedDebounced($event)\" (keyup)=\"formDataChangedDebounced($event)\" (clickOutside)=\"formDataChangedDebounced($event)\">\n    <ng-container #dynamicform></ng-container>\n</div>\n<lib-json-view *ngIf=\"showJsonView && !hideConfigJSON\" (dataChange)=\"jsonDataChangedDebounced($event)\" [(data)]=\"configData\"></lib-json-view>\n<lib-json-view *ngIf=\"showJsonView && hideConfigJSON\" [(data)]=\"configData\"></lib-json-view>" }]
         }], ctorParameters: function () { return [{ type: SchemaService }, { type: GrowlerService }]; }, propDecorators: { configErrors: [{
                 type: Input
             }], configErrorsChange: [{
@@ -17013,7 +17035,7 @@ class ServiceFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"returnToListPage()\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"formData.moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n        [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Name'\" [label]=\"'Required'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this Service\"\n                        [ngClass]=\"{error: svc.errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Service attributes'\"\n                        [label]=\"'Optional'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"serviceRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Services'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Add Configurations'\"\n                        (actionRequested)=\"attachConfig()\"\n                        (keyup.enter)=\"captureConfigEnterEvent($event)\"\n                        [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Select a Config</span>\n                        </div>\n                        <select\n                                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                                (change)=\"configTypeChanged($event)\"\n                                id=\"SelectedConfigType\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select configuration type...</option>\n                            <option\n                                    *ngFor=\"let type of svc.configTypes\"\n                                    [value]=\"type.id\"\n                            >\n                                {{ type.name }}\n                            </option>\n                        </select>\n                        <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n                            <p-dropdown\n                                    placeholder=\"Select configuration...\"\n                                    optionLabel=\"name\"\n                                    optionValue=\"id\"\n                                    filterBy=\"name\"\n                                    [options]=\"svc.filteredConfigs\"\n                                    [filter]=\"true\"\n                                    [showClear]=\"true\"\n                                    [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                                    (change)=\"configChanged($event)\"\n                                    [(ngModel)]=\"svc.selectedConfigId\"\n                            >\n                                <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                    <div class=\"dropdown-filter-container\">\n                                        <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                            <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                            <input\n                                                    type=\"text\"\n                                                    pInputText\n                                                    placeholder=\"Filter\"\n                                                    (keyup)=\"configFilterChangedDebounced($event)\" />\n                                        </div>\n                                        <button pButton\n                                                icon=\"pi pi-times\"\n                                                [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n                                                (click)=\"clearConfigFilter($event)\"\n                                                severity=\"secondary\">\n                                        </button>\n                                        <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n                                    </div>\n                                </ng-template>\n                            </p-dropdown>\n                        </div>\n                        <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n                            <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                                {{svc.attachLabel}}\n                            </div>\n                        </div>\n                        <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n                            <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Config Name</span>\n                                <div\n                                        class=\"save-button\"\n                                        (click)=\"attachConfig()\"\n                                        *ngIf=\"svc.selectedConfigId !== 'preview'\"\n                                >{{svc.attachLabel}}\n                                </div>\n                            </div>\n                            <input\n                                    *ngIf=\"showConfigData\"\n                                    [(ngModel)]=\"svc.newConfigName\"\n                                    class=\"form-field-input\"\n                                    [placeholder]=\"'New Config Name'\"\n                                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                                    style=\"margin-bottom: 20px;\"\n                            />\n                            <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Configuration Data</span>\n                                <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\n                                    <span\n                                            class=\"toggle-option-text\"\n                                            [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                            (click)=\"svc.toggleJSONView()\"\n                                    >\n                                        FORM\n                                    </span>\n                                                <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                                    <div\n                                                            class=\"form-toggle-switch\"\n                                                            [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                                    >\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                    </div>\n                                                </div>\n                                                <span\n                                                        class=\"toggle-option-text\"\n                                                        [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                                        (click)=\"svc.toggleJSONView()\"\n                                                >\n                                        JSON\n                                    </span>\n                                </div>\n                            </div>\n                            <lib-config-editor\n                                [(configData)]=\"svc.configData\"\n                                [schema]=\"svc.selectedSchema\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"svc.configErrors\"\n                                #configEditor\n                            ></lib-config-editor>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Terminator Strategy'\"\n                        [title2]=\"'Encryption'\"\n                        [layout]=\"'row'\"\n                        [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n                        [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                                [(ngModel)]=\"formData.terminatorStrategy\"\n                                id=\"authPolicyId\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select a Strategy....</option>\n                            <option\n                                    *ngFor=\"let strat of strategies\"\n                                    [value]=\"strat.id\"\n                            >\n                                {{ strat.label }}\n                            </option>\n                        </select>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">Require Encryption</div>\n                                <div\n                                        (click)=\"toggleEncryptionRequired()\"\n                                        [ngClass]=\"{ on: formData.encryptionRequired }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                    [title]=\"'Associated Entities'\"\n                    [label]=\"'Click for detailed view'\"\n                    [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                    [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Configurations</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedConfigsLoading\"\n                        [allNames]=\"svc.addedConfigs\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Config'\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedServicePoliciesLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewPolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"svc.associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Terminators</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedTerminators ? svc.associatedTerminators.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedTerminatorsLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewTerminator($event, router)\"\n                            [tooltip]=\"'View Terminator'\"\n                            [allNames]=\"svc.associatedTerminators\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n<!--                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"svc.associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n                >\n                </lib-form-field-container>-->\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [class]=\"'api-call-container'\"\n                        [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:10px;height:30px}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);padding:7px;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 3px 9px 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(1px)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 2px 3px 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
+        ], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"returnToListPage()\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"formData.moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n        [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Name'\" [label]=\"'Required'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this Service\"\n                        [ngClass]=\"{error: svc.errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Service attributes'\"\n                        [label]=\"'Optional'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"serviceRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Services'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Add Configurations'\"\n                        (actionRequested)=\"attachConfig()\"\n                        (keyup.enter)=\"captureConfigEnterEvent($event)\"\n                        [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Select a Config</span>\n                        </div>\n                        <select\n                                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                                (change)=\"configTypeChanged($event)\"\n                                id=\"SelectedConfigType\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select configuration type...</option>\n                            <option\n                                    *ngFor=\"let type of svc.configTypes\"\n                                    [value]=\"type.id\"\n                            >\n                                {{ type.name }}\n                            </option>\n                        </select>\n                        <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n                            <p-dropdown\n                                    placeholder=\"Select configuration...\"\n                                    optionLabel=\"name\"\n                                    optionValue=\"id\"\n                                    filterBy=\"name\"\n                                    [options]=\"svc.filteredConfigs\"\n                                    [filter]=\"true\"\n                                    [showClear]=\"true\"\n                                    [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                                    (onChange)=\"configChanged($event)\"\n                                    [(ngModel)]=\"svc.selectedConfigId\"\n                            >\n                                <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                    <div class=\"dropdown-filter-container\">\n                                        <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                            <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                            <input\n                                                    type=\"text\"\n                                                    pInputText\n                                                    placeholder=\"Filter\"\n                                                    (keyup)=\"configFilterChangedDebounced($event)\" />\n                                        </div>\n                                        <button pButton\n                                                icon=\"pi pi-times\"\n                                                [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n                                                (click)=\"clearConfigFilter($event)\"\n                                                severity=\"secondary\">\n                                        </button>\n                                        <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n                                    </div>\n                                </ng-template>\n                            </p-dropdown>\n                        </div>\n                        <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n                            <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                                {{svc.attachLabel}}\n                            </div>\n                        </div>\n                        <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n                            <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Config Name</span>\n                                <div\n                                        class=\"save-button\"\n                                        (click)=\"attachConfig()\"\n                                        *ngIf=\"svc.selectedConfigId !== 'preview'\"\n                                >{{svc.attachLabel}}\n                                </div>\n                            </div>\n                            <input\n                                    *ngIf=\"showConfigData\"\n                                    [(ngModel)]=\"svc.newConfigName\"\n                                    class=\"form-field-input\"\n                                    [placeholder]=\"'New Config Name'\"\n                                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                                    style=\"margin-bottom: 20px;\"\n                            />\n                            <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Configuration Data</span>\n                                <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\n                                    <span\n                                            class=\"toggle-option-text\"\n                                            [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                            (click)=\"svc.toggleJSONView()\"\n                                    >\n                                        FORM\n                                    </span>\n                                                <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                                    <div\n                                                            class=\"form-toggle-switch\"\n                                                            [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                                    >\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                    </div>\n                                                </div>\n                                                <span\n                                                        class=\"toggle-option-text\"\n                                                        [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                                        (click)=\"svc.toggleJSONView()\"\n                                                >\n                                        JSON\n                                    </span>\n                                </div>\n                            </div>\n                            <lib-config-editor\n                                [(configData)]=\"svc.configData\"\n                                [schema]=\"svc.selectedSchema\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"svc.configErrors\"\n                                #configEditor\n                            ></lib-config-editor>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Terminator Strategy'\"\n                        [title2]=\"'Encryption'\"\n                        [layout]=\"'row'\"\n                        [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n                        [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                                [(ngModel)]=\"formData.terminatorStrategy\"\n                                id=\"authPolicyId\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select a Strategy....</option>\n                            <option\n                                    *ngFor=\"let strat of strategies\"\n                                    [value]=\"strat.id\"\n                            >\n                                {{ strat.label }}\n                            </option>\n                        </select>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">Require Encryption</div>\n                                <div\n                                        (click)=\"toggleEncryptionRequired()\"\n                                        [ngClass]=\"{ on: formData.encryptionRequired }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                    [title]=\"'Associated Entities'\"\n                    [label]=\"'Click for detailed view'\"\n                    [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                    [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Configurations</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedConfigsLoading\"\n                        [allNames]=\"svc.addedConfigs\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Config'\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedServicePoliciesLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewPolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"svc.associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Terminators</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedTerminators ? svc.associatedTerminators.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedTerminatorsLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewTerminator($event, router)\"\n                            [tooltip]=\"'View Terminator'\"\n                            [allNames]=\"svc.associatedTerminators\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n<!--                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"svc.associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n                >\n                </lib-form-field-container>-->\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [class]=\"'api-call-container'\"\n                        [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:10px;height:30px}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);padding:7px;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 3px 9px 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(1px)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 2px 3px 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceFormComponent, decorators: [{
             type: Component,
@@ -17022,7 +17044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"returnToListPage()\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"formData.moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n        [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Name'\" [label]=\"'Required'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this Service\"\n                        [ngClass]=\"{error: svc.errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Service attributes'\"\n                        [label]=\"'Optional'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"serviceRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Services'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Add Configurations'\"\n                        (actionRequested)=\"attachConfig()\"\n                        (keyup.enter)=\"captureConfigEnterEvent($event)\"\n                        [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Select a Config</span>\n                        </div>\n                        <select\n                                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                                (change)=\"configTypeChanged($event)\"\n                                id=\"SelectedConfigType\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select configuration type...</option>\n                            <option\n                                    *ngFor=\"let type of svc.configTypes\"\n                                    [value]=\"type.id\"\n                            >\n                                {{ type.name }}\n                            </option>\n                        </select>\n                        <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n                            <p-dropdown\n                                    placeholder=\"Select configuration...\"\n                                    optionLabel=\"name\"\n                                    optionValue=\"id\"\n                                    filterBy=\"name\"\n                                    [options]=\"svc.filteredConfigs\"\n                                    [filter]=\"true\"\n                                    [showClear]=\"true\"\n                                    [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                                    (change)=\"configChanged($event)\"\n                                    [(ngModel)]=\"svc.selectedConfigId\"\n                            >\n                                <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                    <div class=\"dropdown-filter-container\">\n                                        <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                            <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                            <input\n                                                    type=\"text\"\n                                                    pInputText\n                                                    placeholder=\"Filter\"\n                                                    (keyup)=\"configFilterChangedDebounced($event)\" />\n                                        </div>\n                                        <button pButton\n                                                icon=\"pi pi-times\"\n                                                [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n                                                (click)=\"clearConfigFilter($event)\"\n                                                severity=\"secondary\">\n                                        </button>\n                                        <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n                                    </div>\n                                </ng-template>\n                            </p-dropdown>\n                        </div>\n                        <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n                            <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                                {{svc.attachLabel}}\n                            </div>\n                        </div>\n                        <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n                            <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Config Name</span>\n                                <div\n                                        class=\"save-button\"\n                                        (click)=\"attachConfig()\"\n                                        *ngIf=\"svc.selectedConfigId !== 'preview'\"\n                                >{{svc.attachLabel}}\n                                </div>\n                            </div>\n                            <input\n                                    *ngIf=\"showConfigData\"\n                                    [(ngModel)]=\"svc.newConfigName\"\n                                    class=\"form-field-input\"\n                                    [placeholder]=\"'New Config Name'\"\n                                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                                    style=\"margin-bottom: 20px;\"\n                            />\n                            <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Configuration Data</span>\n                                <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\n                                    <span\n                                            class=\"toggle-option-text\"\n                                            [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                            (click)=\"svc.toggleJSONView()\"\n                                    >\n                                        FORM\n                                    </span>\n                                                <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                                    <div\n                                                            class=\"form-toggle-switch\"\n                                                            [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                                    >\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                    </div>\n                                                </div>\n                                                <span\n                                                        class=\"toggle-option-text\"\n                                                        [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                                        (click)=\"svc.toggleJSONView()\"\n                                                >\n                                        JSON\n                                    </span>\n                                </div>\n                            </div>\n                            <lib-config-editor\n                                [(configData)]=\"svc.configData\"\n                                [schema]=\"svc.selectedSchema\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"svc.configErrors\"\n                                #configEditor\n                            ></lib-config-editor>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Terminator Strategy'\"\n                        [title2]=\"'Encryption'\"\n                        [layout]=\"'row'\"\n                        [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n                        [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                                [(ngModel)]=\"formData.terminatorStrategy\"\n                                id=\"authPolicyId\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select a Strategy....</option>\n                            <option\n                                    *ngFor=\"let strat of strategies\"\n                                    [value]=\"strat.id\"\n                            >\n                                {{ strat.label }}\n                            </option>\n                        </select>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">Require Encryption</div>\n                                <div\n                                        (click)=\"toggleEncryptionRequired()\"\n                                        [ngClass]=\"{ on: formData.encryptionRequired }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                    [title]=\"'Associated Entities'\"\n                    [label]=\"'Click for detailed view'\"\n                    [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                    [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Configurations</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedConfigsLoading\"\n                        [allNames]=\"svc.addedConfigs\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Config'\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedServicePoliciesLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewPolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"svc.associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Terminators</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedTerminators ? svc.associatedTerminators.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedTerminatorsLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewTerminator($event, router)\"\n                            [tooltip]=\"'View Terminator'\"\n                            [allNames]=\"svc.associatedTerminators\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n<!--                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"svc.associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n                >\n                </lib-form-field-container>-->\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [class]=\"'api-call-container'\"\n                        [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:10px;height:30px}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);padding:7px;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 3px 9px 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(1px)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 2px 3px 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"] }]
+                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"returnToListPage()\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"formData.moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n        [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Name'\" [label]=\"'Required'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this Service\"\n                        [ngClass]=\"{error: svc.errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Service attributes'\"\n                        [label]=\"'Optional'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"serviceRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Services'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Add Configurations'\"\n                        (actionRequested)=\"attachConfig()\"\n                        (keyup.enter)=\"captureConfigEnterEvent($event)\"\n                        [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Select a Config</span>\n                        </div>\n                        <select\n                                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                                (change)=\"configTypeChanged($event)\"\n                                id=\"SelectedConfigType\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select configuration type...</option>\n                            <option\n                                    *ngFor=\"let type of svc.configTypes\"\n                                    [value]=\"type.id\"\n                            >\n                                {{ type.name }}\n                            </option>\n                        </select>\n                        <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n                            <p-dropdown\n                                    placeholder=\"Select configuration...\"\n                                    optionLabel=\"name\"\n                                    optionValue=\"id\"\n                                    filterBy=\"name\"\n                                    [options]=\"svc.filteredConfigs\"\n                                    [filter]=\"true\"\n                                    [showClear]=\"true\"\n                                    [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                                    (onChange)=\"configChanged($event)\"\n                                    [(ngModel)]=\"svc.selectedConfigId\"\n                            >\n                                <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                    <div class=\"dropdown-filter-container\">\n                                        <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                            <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                            <input\n                                                    type=\"text\"\n                                                    pInputText\n                                                    placeholder=\"Filter\"\n                                                    (keyup)=\"configFilterChangedDebounced($event)\" />\n                                        </div>\n                                        <button pButton\n                                                icon=\"pi pi-times\"\n                                                [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n                                                (click)=\"clearConfigFilter($event)\"\n                                                severity=\"secondary\">\n                                        </button>\n                                        <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n                                    </div>\n                                </ng-template>\n                            </p-dropdown>\n                        </div>\n                        <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n                            <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                                {{svc.attachLabel}}\n                            </div>\n                        </div>\n                        <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n                            <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Config Name</span>\n                                <div\n                                        class=\"save-button\"\n                                        (click)=\"attachConfig()\"\n                                        *ngIf=\"svc.selectedConfigId !== 'preview'\"\n                                >{{svc.attachLabel}}\n                                </div>\n                            </div>\n                            <input\n                                    *ngIf=\"showConfigData\"\n                                    [(ngModel)]=\"svc.newConfigName\"\n                                    class=\"form-field-input\"\n                                    [placeholder]=\"'New Config Name'\"\n                                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                                    style=\"margin-bottom: 20px;\"\n                            />\n                            <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Configuration Data</span>\n                                <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\n                                    <span\n                                            class=\"toggle-option-text\"\n                                            [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                            (click)=\"svc.toggleJSONView()\"\n                                    >\n                                        FORM\n                                    </span>\n                                                <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                                    <div\n                                                            class=\"form-toggle-switch\"\n                                                            [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                                    >\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                    </div>\n                                                </div>\n                                                <span\n                                                        class=\"toggle-option-text\"\n                                                        [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                                        (click)=\"svc.toggleJSONView()\"\n                                                >\n                                        JSON\n                                    </span>\n                                </div>\n                            </div>\n                            <lib-config-editor\n                                [(configData)]=\"svc.configData\"\n                                [schema]=\"svc.selectedSchema\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"svc.configErrors\"\n                                #configEditor\n                            ></lib-config-editor>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Terminator Strategy'\"\n                        [title2]=\"'Encryption'\"\n                        [layout]=\"'row'\"\n                        [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n                        [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                                [(ngModel)]=\"formData.terminatorStrategy\"\n                                id=\"authPolicyId\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select a Strategy....</option>\n                            <option\n                                    *ngFor=\"let strat of strategies\"\n                                    [value]=\"strat.id\"\n                            >\n                                {{ strat.label }}\n                            </option>\n                        </select>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">Require Encryption</div>\n                                <div\n                                        (click)=\"toggleEncryptionRequired()\"\n                                        [ngClass]=\"{ on: formData.encryptionRequired }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                    [title]=\"'Associated Entities'\"\n                    [label]=\"'Click for detailed view'\"\n                    [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                    [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Configurations</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedConfigsLoading\"\n                        [allNames]=\"svc.addedConfigs\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Config'\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedServicePoliciesLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewPolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"svc.associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Terminators</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedTerminators ? svc.associatedTerminators.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedTerminatorsLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewTerminator($event, router)\"\n                            [tooltip]=\"'View Terminator'\"\n                            [allNames]=\"svc.associatedTerminators\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n<!--                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"svc.associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n                >\n                </lib-form-field-container>-->\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [class]=\"'api-call-container'\"\n                        [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:10px;height:30px}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);padding:7px;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 3px 9px 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(1px)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 2px 3px 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"] }]
         }], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -21995,7 +22017,7 @@ class AuthPoliciesPageService extends ListPageServiceClass {
                             if (!result) {
                                 return;
                             }
-                            this.openEditForm(data?.data?.id);
+                            this.openEditForm(data?.id);
                         });
                     } },
                 onCellClicked: (data) => {
@@ -23032,7 +23054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 const VERSION = {
-    "version": "3.6.3"
+    "version": "3.6.5"
 };
 
 /*