@openziti/ziti-console-lib 0.4.2 → 0.4.4

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

@@ -8,7 +8,7 @@ import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import * as i1 from 'ngx-logger';
 import { NgxLoggerLevel } from 'ngx-logger';
-import _, { isNumber, includes, isNil, defer, set, invoke, get, debounce, isEmpty, isNaN as isNaN$1, cloneDeep, unset, isBoolean, keys, forEach, isEqual, slice, isFunction, map as map$1, forOwn, isString, some, filter, sortedUniq, invert, isArray } from 'lodash';
+import _, { isNumber, includes, isNil, defer, set, invoke, get, debounce, isEmpty, isNaN as isNaN$1, cloneDeep, unset, isBoolean, keys, forEach, isEqual, delay, isFunction, map as map$1, forOwn, isString, some, filter, sortedUniq, invert, isArray } from 'lodash';
 import { __decorate, __param } from 'tslib';
 import * as i1$4 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -2421,6 +2421,7 @@ let ListPageServiceClass = class ListPageServiceClass {
         this.csvDownloadService = csvDownloadService;
         this.extensionService = extensionService;
         this.router = router;
+        this.basePath = '';
         this.headerComponentParams = {
             filterType: 'TEXTINPUT',
             enableSorting: true
@@ -2483,6 +2484,15 @@ let ListPageServiceClass = class ListPageServiceClass {
                 }
             }
         });
+        router.events.subscribe((event) => {
+            if (event => event instanceof NavigationEnd) {
+                if (!event?.snapshot?.routeConfig?.path) {
+                    return;
+                }
+                const pathSegments = event.snapshot.routeConfig.path.split('/');
+                this.basePath = pathSegments[0];
+            }
+        });
     }
     initMenuActions() {
         if (this.extensionService.listActions) {
@@ -2544,22 +2554,12 @@ let ListPageServiceClass = class ListPageServiceClass {
         }
         return text?.length > 0;
     }
-    openEditForm(itemId = '', baseUrl) {
+    openEditForm(itemId = '', basePath) {
         if (isEmpty(itemId)) {
             itemId = 'create';
         }
-        baseUrl = baseUrl ? baseUrl : this.getBaseURLPath();
-        this.router?.navigateByUrl(`${baseUrl}${itemId}`);
-    }
-    getBaseURLPath() {
-        let path = '';
-        window.location.pathname.split('/').forEach(segment => {
-            if (isEmpty(segment)) {
-                return;
-            }
-            path += `${segment}/`;
-        });
-        return path;
+        basePath = basePath ? basePath : this.basePath;
+        this.router?.navigateByUrl(`${basePath}${itemId}`);
     }
 };
 ListPageServiceClass = __decorate([
@@ -3075,16 +3075,16 @@ class TableCellNameComponent {
         return true;
     }
     linkClicked(event) {
-        this.router.navigateByUrl(`${this.cellParams.pathRoot}${this.item.id}`);
+        this.router.navigateByUrl(`${this.cellParams.pathRoot}/${this.item.id}`);
         event.stopPropagation();
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableCellNameComponent, deps: [{ token: i3$2.MatDialog }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableCellNameComponent, selector: "lib-table-cell-name", ngImport: i0, template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}{{item.id}}\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            <div *ngIf=\"cellParams.showIdentityIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.hasApiSession}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.hasEdgeRouterConnection}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <div *ngIf=\"cellParams.showRouterIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.isVerified}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.isOnline}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <strong>{{item.name}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;gap:5px}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:4px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableCellNameComponent, selector: "lib-table-cell-name", ngImport: i0, template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}/{{item.id}}\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            <div *ngIf=\"cellParams.showIdentityIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.hasApiSession}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.hasEdgeRouterConnection}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <div *ngIf=\"cellParams.showRouterIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.isVerified}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.isOnline}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <strong>{{item.name}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;gap:5px}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:4px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableCellNameComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table-cell-name', template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}{{item.id}}\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            <div *ngIf=\"cellParams.showIdentityIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.hasApiSession}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.hasEdgeRouterConnection}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <div *ngIf=\"cellParams.showRouterIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.isVerified}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.isOnline}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <strong>{{item.name}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;gap:5px}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:4px}\n"] }]
+            args: [{ selector: 'lib-table-cell-name', template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}/{{item.id}}\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            <div *ngIf=\"cellParams.showIdentityIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.hasApiSession}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.hasEdgeRouterConnection}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <div *ngIf=\"cellParams.showRouterIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.isVerified}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.isOnline}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <strong>{{item.name}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;gap:5px}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:4px}\n"] }]
         }], ctorParameters: function () { return [{ type: i3$2.MatDialog }, { type: i3.Router }]; } });
 
 /*
@@ -4325,7 +4325,7 @@ class ConfigurationsPageService extends ListPageServiceClass {
                 headerComponent: TableColumnDefaultComponent,
                 headerComponentParams: this.headerComponentParams,
                 cellRenderer: TableCellNameComponent,
-                cellRendererParams: { pathRoot: 'configs/' },
+                cellRendererParams: { pathRoot: this.basePath },
                 onCellClicked: (data) => {
                     if (this.hasSelectedText()) {
                         return;
@@ -5245,7 +5245,7 @@ class IdentitiesPageService extends ListPageServiceClass {
                 headerComponent: TableColumnDefaultComponent,
                 headerComponentParams: this.headerComponentParams,
                 cellRenderer: TableCellNameComponent,
-                cellRendererParams: { pathRoot: this.getBaseURLPath(), showIdentityIcons: true },
+                cellRendererParams: { pathRoot: this.basePath, showIdentityIcons: true },
                 onCellClicked: (data) => {
                     if (this.hasSelectedText()) {
                         return;
@@ -5804,7 +5804,7 @@ class EdgeRoutersPageService extends ListPageServiceClass {
                 headerComponent: TableColumnDefaultComponent,
                 headerComponentParams: this.headerComponentParams,
                 cellRenderer: TableCellNameComponent,
-                cellRendererParams: { pathRoot: this.getBaseURLPath(), showRouterIcons: true },
+                cellRendererParams: { pathRoot: this.basePath, showRouterIcons: true },
                 onCellClicked: (data) => {
                     if (this.hasSelectedText()) {
                         return;
@@ -7755,6 +7755,7 @@ class ProjectableForm extends ExtendableComponent {
         this.initData = {};
         this._dataChange = false;
         this.apiOptions = [{ id: 'cli', label: 'Copy as CLI' }, { id: 'curl', label: 'Copy as CURL' }];
+        this.basePath = '';
         this.checkDataChangeDebounced = debounce(this.checkDataChange, 100, { maxWait: 100 });
         this.subscription = new Subscription();
         this.subscription.add(this.route?.params?.subscribe(params => {
@@ -7763,6 +7764,15 @@ class ProjectableForm extends ExtendableComponent {
                 this.entityId = id;
             }
         }));
+        this.subscription.add(router.events.subscribe((event) => {
+            if (event => event instanceof NavigationEnd) {
+                if (!event?.snapshot?.routeConfig?.path) {
+                    return;
+                }
+                const pathSegments = event.snapshot.routeConfig.path.split('/');
+                this.basePath = pathSegments[0];
+            }
+        }));
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
@@ -7886,8 +7896,7 @@ class ProjectableForm extends ExtendableComponent {
         }
     }
     returnToListPage() {
-        const baseUrl = this.getBaseURLPath();
-        this.router?.navigateByUrl(`${baseUrl}`);
+        this.router?.navigateByUrl(`${this.basePath}`);
     }
     ngDoCheck() {
         this.checkDataChangeDebounced();
@@ -7940,18 +7949,6 @@ class ProjectableForm extends ExtendableComponent {
             return results.data;
         });
     }
-    getBaseURLPath() {
-        let path = '';
-        const urlSegments = window.location.pathname.split('/');
-        const baseSegments = slice(urlSegments, 0, urlSegments.length - 1);
-        baseSegments.forEach(segment => {
-            if (isEmpty(segment)) {
-                return;
-            }
-            path += `/${segment}`;
-        });
-        return path;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProjectableForm, deps: [{ token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: ZITI_DATA_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProjectableForm, selector: "ng-component", inputs: { isModal: "isModal", entityId: "entityId", formData: "formData" }, outputs: { close: "close", dataChange: "dataChange" }, viewQueries: [{ propertyName: "nameFieldInput", first: true, predicate: ["nameFieldInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""] }); }
 }
@@ -8135,6 +8132,9 @@ class JsonViewComponent {
         event.stopPropagation();
         event.preventDefault();
     }
+    jsonChanged(event) {
+        this.dataChange.emit(this.data);
+    }
     copyToClipboad() {
         var clipData = JSON.stringify(JSON.parse(JSON.stringify(this.data)), null, 2);
         navigator.clipboard.writeText(clipData);
@@ -8142,11 +8142,11 @@ class JsonViewComponent {
         this.growlerService.show(growlerData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewComponent, deps: [{ token: GrowlerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JsonViewComponent, selector: "lib-json-view", inputs: { data: "data", schema: "schema", readOnly: "readOnly", jsonInvalid: "jsonInvalid", showCopy: "showCopy" }, outputs: { dataChange: "dataChange", jsonChange: "jsonChange", jsonInvalidChange: "jsonInvalidChange" }, viewQueries: [{ propertyName: "editorDiv", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"jsoneditor\" [ngClass]=\"{'read-only': readOnly}\" #editor (keyup.enter)=\"enterKeyPressed($event)\"></div>\n<div *ngIf=\"showCopy\" class=\"icon-copy copy\" (click)=\"copyToClipboad()\"></div>", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column;position:relative}#jsoneditor{height:100%;min-height:200px;border-color:var(--inputBorder);border-style:solid;border-radius:7px;overflow:hidden}#jsoneditor.read-only .jse-menu{display:none}.copy.icon-copy{position:absolute;top:10px;right:10px;background:transparent}::ng-deep #jsoneditor .jse-json-node.svelte-1wlxti1 .jse-insert-area.svelte-1wlxti1.svelte-1wlxti1.svelte-1wlxti1{display:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JsonViewComponent, selector: "lib-json-view", inputs: { data: "data", schema: "schema", readOnly: "readOnly", jsonInvalid: "jsonInvalid", showCopy: "showCopy" }, outputs: { dataChange: "dataChange", jsonChange: "jsonChange", jsonInvalidChange: "jsonInvalidChange" }, viewQueries: [{ propertyName: "editorDiv", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"jsoneditor\" [ngClass]=\"{'read-only': readOnly}\" #editor (keyup.enter)=\"enterKeyPressed($event)\" (keyup)=\"jsonChanged($event)\"></div>\n<div *ngIf=\"showCopy\" class=\"icon-copy copy\" (click)=\"copyToClipboad()\"></div>", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column;position:relative}#jsoneditor{height:100%;min-height:200px;border-color:var(--inputBorder);border-style:solid;border-radius:7px;overflow:hidden}#jsoneditor.read-only .jse-menu{display:none}.copy.icon-copy{position:absolute;top:10px;right:10px;background:transparent}::ng-deep #jsoneditor .jse-json-node.svelte-1wlxti1 .jse-insert-area.svelte-1wlxti1.svelte-1wlxti1.svelte-1wlxti1{display:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-json-view', template: "<div id=\"jsoneditor\" [ngClass]=\"{'read-only': readOnly}\" #editor (keyup.enter)=\"enterKeyPressed($event)\"></div>\n<div *ngIf=\"showCopy\" class=\"icon-copy copy\" (click)=\"copyToClipboad()\"></div>", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column;position:relative}#jsoneditor{height:100%;min-height:200px;border-color:var(--inputBorder);border-style:solid;border-radius:7px;overflow:hidden}#jsoneditor.read-only .jse-menu{display:none}.copy.icon-copy{position:absolute;top:10px;right:10px;background:transparent}::ng-deep #jsoneditor .jse-json-node.svelte-1wlxti1 .jse-insert-area.svelte-1wlxti1.svelte-1wlxti1.svelte-1wlxti1{display:none}\n"] }]
+            args: [{ selector: 'lib-json-view', template: "<div id=\"jsoneditor\" [ngClass]=\"{'read-only': readOnly}\" #editor (keyup.enter)=\"enterKeyPressed($event)\" (keyup)=\"jsonChanged($event)\"></div>\n<div *ngIf=\"showCopy\" class=\"icon-copy copy\" (click)=\"copyToClipboad()\"></div>", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column;position:relative}#jsoneditor{height:100%;min-height:200px;border-color:var(--inputBorder);border-style:solid;border-radius:7px;overflow:hidden}#jsoneditor.read-only .jse-menu{display:none}.copy.icon-copy{position:absolute;top:10px;right:10px;background:transparent}::ng-deep #jsoneditor .jse-json-node.svelte-1wlxti1 .jse-insert-area.svelte-1wlxti1.svelte-1wlxti1.svelte-1wlxti1{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: GrowlerService }]; }, propDecorators: { data: [{
                 type: Input
             }], schema: [{
@@ -8211,9 +8211,14 @@ class ConfigEditorComponent {
         this.configDataChange = new EventEmitter();
         this._showJsonView = false;
         this._schema = false;
+        this.formDataChangedDebounced = debounce(this.formDataChanged.bind(this), 350);
+        this.jsonDataChangedDebounced = debounce(this.jsonDataChanged.bind(this), 350);
     }
     ngOnInit() {
         this.createForm();
+        defer(() => {
+            this.formDataChanged();
+        });
     }
     createForm() {
         this.clearForm();
@@ -8373,12 +8378,22 @@ class ConfigEditorComponent {
         });
         return isValid;
     }
+    formDataChanged() {
+        delay(() => {
+            this.getConfigDataFromForm();
+        }, 200);
+    }
+    jsonDataChanged(event) {
+        defer(() => {
+            this.configDataChange.emit(this.configData);
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigEditorComponent, deps: [{ token: SchemaService }], 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\">\n    <ng-container #dynamicform></ng-container>\n</div>\n<lib-json-view *ngIf=\"showJsonView && !hideConfigJSON\" [(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)\">\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"] }] }); }
 }
 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\">\n    <ng-container #dynamicform></ng-container>\n</div>\n<lib-json-view *ngIf=\"showJsonView && !hideConfigJSON\" [(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)\">\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 }]; }, propDecorators: { configErrors: [{
                 type: Input
             }], configErrorsChange: [{
@@ -8913,17 +8928,21 @@ class ConfigurationFormComponent extends ProjectableForm {
             configTypeId: this.formData?.configTypeId || '',
             data: this.formData?.data || {},
         };
-        return data;
+        this._apiData = data;
+        return this._apiData;
     }
     set apiData(data) {
         this._apiData = data;
     }
+    dataChanged(event) {
+        this._apiData = cloneDeep(this.apiData);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigurationFormComponent, deps: [{ token: ConfigurationService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigurationFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n            [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"config-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Config Name'\" [label]=\"'Required'\">\n                    <input\n                        id=\"ConfigName\"\n                        type=\"text\"\n                        maxlength=\"500\"\n                        placeholder=\"Name this config\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                    >\n                </lib-form-field-container>\n                <lib-form-field-container [showHeader]=\"false\">\n                    <div class=\"config-title-row\">\n                        <span class=\"form-field-title\">Configuration Data</span>\n                        <div class=\"form-header-toggle-container\">\n                                        <span\n                                                class=\"toggle-option-text\"\n                                                [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                                (click)=\"svc.toggleJSONView()\"\n                                        >\n                                            FORM\n                                        </span>\n                            <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                <div\n                                        class=\"form-toggle-switch\"\n                                        [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                >\n                                    <div class=\"form-toggle-indicator\"></div>\n                                    <div class=\"form-toggle-indicator\"></div>\n                                </div>\n                            </div>\n                            <span\n                                    class=\"toggle-option-text\"\n                                    [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                    (click)=\"svc.toggleJSONView()\"\n                            >\n                                            JSON\n                                        </span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">{{isEditing ? 'Config Type' : 'Select a Config Type'}}</span>\n                        </div>\n                        <select\n                                id=\"ConfigTypes\"\n                                class=\"config-type-select\"\n                                [(ngModel)]=\"formData.configTypeId\"\n                                (change)=\"getSchema()\"\n                                [ngClass]=\"{disabled: isEditing, error: errors['configTypeId']}\"\n                        >\n                            <option value=\"\">Select A Type...</option>\n                            <option *ngFor=\"let config of options\"\n                                    [value]=\"config.id\">{{config.name}}\n                            </option>\n                        </select>\n                        <lib-config-editor\n                                [hidden]=\"configTypeEmpty\"\n                                [schema]=\"selectedSchema\"\n                                [(configData)]=\"formData.data\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"errors\"\n                                #configEditor\n                        ></lib-config-editor>\n                    </div>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".config-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigurationFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n            [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"config-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Config Name'\" [label]=\"'Required'\">\n                    <input\n                        id=\"ConfigName\"\n                        type=\"text\"\n                        maxlength=\"500\"\n                        placeholder=\"Name this config\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        (keyup)=\"apiData()\"\n                    >\n                </lib-form-field-container>\n                <lib-form-field-container [showHeader]=\"false\">\n                    <div class=\"config-title-row\">\n                        <span class=\"form-field-title\">Configuration Data</span>\n                        <div class=\"form-header-toggle-container\">\n                                        <span\n                                                class=\"toggle-option-text\"\n                                                [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                                (click)=\"svc.toggleJSONView()\"\n                                        >\n                                            FORM\n                                        </span>\n                            <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                <div\n                                        class=\"form-toggle-switch\"\n                                        [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                >\n                                    <div class=\"form-toggle-indicator\"></div>\n                                    <div class=\"form-toggle-indicator\"></div>\n                                </div>\n                            </div>\n                            <span\n                                    class=\"toggle-option-text\"\n                                    [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                    (click)=\"svc.toggleJSONView()\"\n                            >\n                                            JSON\n                                        </span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">{{isEditing ? 'Config Type' : 'Select a Config Type'}}</span>\n                        </div>\n                        <select\n                                id=\"ConfigTypes\"\n                                class=\"config-type-select\"\n                                [(ngModel)]=\"formData.configTypeId\"\n                                (change)=\"getSchema()\"\n                                [ngClass]=\"{disabled: isEditing, error: errors['configTypeId']}\"\n                        >\n                            <option value=\"\">Select A Type...</option>\n                            <option *ngFor=\"let config of options\"\n                                    [value]=\"config.id\">{{config.name}}\n                            </option>\n                        </select>\n                        <lib-config-editor\n                                [hidden]=\"configTypeEmpty\"\n                                [schema]=\"selectedSchema\"\n                                [(configData)]=\"formData.data\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"errors\"\n                                (configDataChange)=\"dataChanged($event)\"\n                                #configEditor\n                        ></lib-config-editor>\n                    </div>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"_apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".config-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigurationFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-configuration', template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n            [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"config-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Config Name'\" [label]=\"'Required'\">\n                    <input\n                        id=\"ConfigName\"\n                        type=\"text\"\n                        maxlength=\"500\"\n                        placeholder=\"Name this config\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                    >\n                </lib-form-field-container>\n                <lib-form-field-container [showHeader]=\"false\">\n                    <div class=\"config-title-row\">\n                        <span class=\"form-field-title\">Configuration Data</span>\n                        <div class=\"form-header-toggle-container\">\n                                        <span\n                                                class=\"toggle-option-text\"\n                                                [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                                (click)=\"svc.toggleJSONView()\"\n                                        >\n                                            FORM\n                                        </span>\n                            <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                <div\n                                        class=\"form-toggle-switch\"\n                                        [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                >\n                                    <div class=\"form-toggle-indicator\"></div>\n                                    <div class=\"form-toggle-indicator\"></div>\n                                </div>\n                            </div>\n                            <span\n                                    class=\"toggle-option-text\"\n                                    [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                    (click)=\"svc.toggleJSONView()\"\n                            >\n                                            JSON\n                                        </span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">{{isEditing ? 'Config Type' : 'Select a Config Type'}}</span>\n                        </div>\n                        <select\n                                id=\"ConfigTypes\"\n                                class=\"config-type-select\"\n                                [(ngModel)]=\"formData.configTypeId\"\n                                (change)=\"getSchema()\"\n                                [ngClass]=\"{disabled: isEditing, error: errors['configTypeId']}\"\n                        >\n                            <option value=\"\">Select A Type...</option>\n                            <option *ngFor=\"let config of options\"\n                                    [value]=\"config.id\">{{config.name}}\n                            </option>\n                        </select>\n                        <lib-config-editor\n                                [hidden]=\"configTypeEmpty\"\n                                [schema]=\"selectedSchema\"\n                                [(configData)]=\"formData.data\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"errors\"\n                                #configEditor\n                        ></lib-config-editor>\n                    </div>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".config-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}\n"] }]
+            args: [{ selector: 'lib-configuration', template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n            [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"config-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Config Name'\" [label]=\"'Required'\">\n                    <input\n                        id=\"ConfigName\"\n                        type=\"text\"\n                        maxlength=\"500\"\n                        placeholder=\"Name this config\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        (keyup)=\"apiData()\"\n                    >\n                </lib-form-field-container>\n                <lib-form-field-container [showHeader]=\"false\">\n                    <div class=\"config-title-row\">\n                        <span class=\"form-field-title\">Configuration Data</span>\n                        <div class=\"form-header-toggle-container\">\n                                        <span\n                                                class=\"toggle-option-text\"\n                                                [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                                (click)=\"svc.toggleJSONView()\"\n                                        >\n                                            FORM\n                                        </span>\n                            <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                <div\n                                        class=\"form-toggle-switch\"\n                                        [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                >\n                                    <div class=\"form-toggle-indicator\"></div>\n                                    <div class=\"form-toggle-indicator\"></div>\n                                </div>\n                            </div>\n                            <span\n                                    class=\"toggle-option-text\"\n                                    [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                    (click)=\"svc.toggleJSONView()\"\n                            >\n                                            JSON\n                                        </span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">{{isEditing ? 'Config Type' : 'Select a Config Type'}}</span>\n                        </div>\n                        <select\n                                id=\"ConfigTypes\"\n                                class=\"config-type-select\"\n                                [(ngModel)]=\"formData.configTypeId\"\n                                (change)=\"getSchema()\"\n                                [ngClass]=\"{disabled: isEditing, error: errors['configTypeId']}\"\n                        >\n                            <option value=\"\">Select A Type...</option>\n                            <option *ngFor=\"let config of options\"\n                                    [value]=\"config.id\">{{config.name}}\n                            </option>\n                        </select>\n                        <lib-config-editor\n                                [hidden]=\"configTypeEmpty\"\n                                [schema]=\"selectedSchema\"\n                                [(configData)]=\"formData.data\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"errors\"\n                                (configDataChange)=\"dataChanged($event)\"\n                                #configEditor\n                        ></lib-config-editor>\n                    </div>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"_apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".config-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}\n"] }]
         }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SHAREDZ_EXTENSION]
@@ -10660,6 +10679,7 @@ class ServicesPageService extends ListPageServiceClass {
             { name: 'Download Selected', action: 'download-selected' },
         ];
         this.resourceType = 'services';
+        this.basePath = '/services/advanced';
         this.validate = (formData) => {
             return Promise.resolve({ passed: true });
         };
@@ -10680,7 +10700,7 @@ class ServicesPageService extends ListPageServiceClass {
                 headerComponent: TableColumnDefaultComponent,
                 headerComponentParams: this.headerComponentParams,
                 cellRenderer: TableCellNameComponent,
-                cellRendererParams: { pathRoot: 'services/advanced/' },
+                cellRendererParams: { pathRoot: '/services/advanced' },
                 onCellClicked: (data) => {
                     if (this.hasSelectedText()) {
                         return;
@@ -16257,7 +16277,7 @@ class EdgeRouterPoliciesPageService extends ListPageServiceClass {
                 headerComponent: TableColumnDefaultComponent,
                 headerComponentParams: this.headerComponentParams,
                 cellRenderer: TableCellNameComponent,
-                cellRendererParams: { pathRoot: 'router-policies/' },
+                cellRendererParams: { pathRoot: this.basePath },
                 onCellClicked: (data) => {
                     if (this.hasSelectedText()) {
                         return;
@@ -16775,7 +16795,7 @@ class ServicePoliciesPageService extends ListPageServiceClass {
                 headerComponent: TableColumnDefaultComponent,
                 headerComponentParams: this.headerComponentParams,
                 cellRenderer: TableCellNameComponent,
-                cellRendererParams: { pathRoot: 'service-policies/' },
+                cellRendererParams: { pathRoot: this.basePath },
                 onCellClicked: (data) => {
                     if (this.hasSelectedText()) {
                         return;
@@ -18270,7 +18290,7 @@ class ServiceEdgeRouterPoliciesPageService extends ListPageServiceClass {
                 headerComponent: TableColumnDefaultComponent,
                 headerComponentParams: this.headerComponentParams,
                 cellRenderer: TableCellNameComponent,
-                cellRendererParams: { pathRoot: 'service-router-policies/' },
+                cellRendererParams: { pathRoot: this.basePath },
                 onCellClicked: (data) => {
                     if (this.hasSelectedText()) {
                         return;
@@ -19323,7 +19343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 const VERSION = {
-    "version": "3.4.2"
+    "version": "3.4.3"
 };
 
 /*