@openziti/ziti-console-lib 0.4.2 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/features/config-editor/config-editor.component.mjs +19 -4
- package/esm2022/lib/features/json-view/json-view.component.mjs +6 -3
- package/esm2022/lib/features/projectable-forms/configuration/configuration-form.component.mjs +8 -4
- package/fesm2022/openziti-ziti-console-lib.mjs +30 -8
- package/fesm2022/openziti-ziti-console-lib.mjs.map +1 -1
- package/lib/features/config-editor/config-editor.component.d.ts +4 -0
- package/lib/features/config-editor/config-editor.component.d.ts.map +1 -1
- package/lib/features/json-view/json-view.component.d.ts +1 -0
- package/lib/features/json-view/json-view.component.d.ts.map +1 -1
- package/lib/features/projectable-forms/configuration/configuration-form.component.d.ts +2 -1
- package/lib/features/projectable-forms/configuration/configuration-form.component.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ import * as i1$1 from '@angular/common/http';
|
|
|
8
8
|
import { HttpClient, HttpClientModule } from '@angular/common/http';
|
|
9
9
|
import * as i1 from 'ngx-logger';
|
|
10
10
|
import { NgxLoggerLevel } from 'ngx-logger';
|
|
11
|
-
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';
|
|
11
|
+
import _, { isNumber, includes, isNil, defer, set, invoke, get, debounce, isEmpty, isNaN as isNaN$1, cloneDeep, unset, isBoolean, keys, forEach, isEqual, slice, delay, isFunction, map as map$1, forOwn, isString, some, filter, sortedUniq, invert, isArray } from 'lodash';
|
|
12
12
|
import { __decorate, __param } from 'tslib';
|
|
13
13
|
import * as i1$4 from '@angular/common';
|
|
14
14
|
import { CommonModule } from '@angular/common';
|
|
@@ -8135,6 +8135,9 @@ class JsonViewComponent {
|
|
|
8135
8135
|
event.stopPropagation();
|
|
8136
8136
|
event.preventDefault();
|
|
8137
8137
|
}
|
|
8138
|
+
jsonChanged(event) {
|
|
8139
|
+
this.dataChange.emit(this.data);
|
|
8140
|
+
}
|
|
8138
8141
|
copyToClipboad() {
|
|
8139
8142
|
var clipData = JSON.stringify(JSON.parse(JSON.stringify(this.data)), null, 2);
|
|
8140
8143
|
navigator.clipboard.writeText(clipData);
|
|
@@ -8142,11 +8145,11 @@ class JsonViewComponent {
|
|
|
8142
8145
|
this.growlerService.show(growlerData);
|
|
8143
8146
|
}
|
|
8144
8147
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewComponent, deps: [{ token: GrowlerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8145
|
-
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"] }] }); }
|
|
8148
|
+
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"] }] }); }
|
|
8146
8149
|
}
|
|
8147
8150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewComponent, decorators: [{
|
|
8148
8151
|
type: Component,
|
|
8149
|
-
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"] }]
|
|
8152
|
+
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"] }]
|
|
8150
8153
|
}], ctorParameters: function () { return [{ type: GrowlerService }]; }, propDecorators: { data: [{
|
|
8151
8154
|
type: Input
|
|
8152
8155
|
}], schema: [{
|
|
@@ -8211,9 +8214,14 @@ class ConfigEditorComponent {
|
|
|
8211
8214
|
this.configDataChange = new EventEmitter();
|
|
8212
8215
|
this._showJsonView = false;
|
|
8213
8216
|
this._schema = false;
|
|
8217
|
+
this.formDataChangedDebounced = debounce(this.formDataChanged.bind(this), 350);
|
|
8218
|
+
this.jsonDataChangedDebounced = debounce(this.jsonDataChanged.bind(this), 350);
|
|
8214
8219
|
}
|
|
8215
8220
|
ngOnInit() {
|
|
8216
8221
|
this.createForm();
|
|
8222
|
+
defer(() => {
|
|
8223
|
+
this.formDataChanged();
|
|
8224
|
+
});
|
|
8217
8225
|
}
|
|
8218
8226
|
createForm() {
|
|
8219
8227
|
this.clearForm();
|
|
@@ -8373,12 +8381,22 @@ class ConfigEditorComponent {
|
|
|
8373
8381
|
});
|
|
8374
8382
|
return isValid;
|
|
8375
8383
|
}
|
|
8384
|
+
formDataChanged() {
|
|
8385
|
+
delay(() => {
|
|
8386
|
+
this.getConfigDataFromForm();
|
|
8387
|
+
}, 200);
|
|
8388
|
+
}
|
|
8389
|
+
jsonDataChanged(event) {
|
|
8390
|
+
defer(() => {
|
|
8391
|
+
this.configDataChange.emit(this.configData);
|
|
8392
|
+
});
|
|
8393
|
+
}
|
|
8376
8394
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigEditorComponent, deps: [{ token: SchemaService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8377
|
-
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"] }] }); }
|
|
8395
|
+
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"] }] }); }
|
|
8378
8396
|
}
|
|
8379
8397
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigEditorComponent, decorators: [{
|
|
8380
8398
|
type: Component,
|
|
8381
|
-
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>" }]
|
|
8399
|
+
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>" }]
|
|
8382
8400
|
}], ctorParameters: function () { return [{ type: SchemaService }]; }, propDecorators: { configErrors: [{
|
|
8383
8401
|
type: Input
|
|
8384
8402
|
}], configErrorsChange: [{
|
|
@@ -8913,17 +8931,21 @@ class ConfigurationFormComponent extends ProjectableForm {
|
|
|
8913
8931
|
configTypeId: this.formData?.configTypeId || '',
|
|
8914
8932
|
data: this.formData?.data || {},
|
|
8915
8933
|
};
|
|
8916
|
-
|
|
8934
|
+
this._apiData = data;
|
|
8935
|
+
return this._apiData;
|
|
8917
8936
|
}
|
|
8918
8937
|
set apiData(data) {
|
|
8919
8938
|
this._apiData = data;
|
|
8920
8939
|
}
|
|
8940
|
+
dataChanged(event) {
|
|
8941
|
+
this._apiData = cloneDeep(this.apiData);
|
|
8942
|
+
}
|
|
8921
8943
|
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 }); }
|
|
8922
|
-
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)]=\"
|
|
8944
|
+
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"] }] }); }
|
|
8923
8945
|
}
|
|
8924
8946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigurationFormComponent, decorators: [{
|
|
8925
8947
|
type: Component,
|
|
8926
|
-
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)]=\"
|
|
8948
|
+
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"] }]
|
|
8927
8949
|
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
8928
8950
|
type: Inject,
|
|
8929
8951
|
args: [SHAREDZ_EXTENSION]
|