@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
109 lines (105 loc) • 6.35 kB
JavaScript
import { AsyncPipe } from '@angular/common';
import * as i0 from '@angular/core';
import { ViewChild, Component } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { EditorComponent, MonacoEditorMarkerValidatorDirective } from '@c8y/ngx-components/editor';
import * as i3 from '@c8y/ngx-components';
import { CoreModule } from '@c8y/ngx-components';
import { BehaviorSubject } from 'rxjs';
import * as i1 from '@angular/router';
class AdvancedEditBrandingComponent {
constructor(activatedRoute) {
this.activatedRoute = activatedRoute;
this.optionsJsonString = new BehaviorSubject('');
this.valueString = new BehaviorSubject('');
this.editorOptions = {};
this.infoText = '';
this.attributeToEdit = '';
const data = this.activatedRoute.snapshot.data;
if (data && data.attributeToEdit) {
this.attributeToEdit = data.attributeToEdit;
}
if (data && data.language) {
this.editorOptions.language = data.language;
}
if (data && data.infoText) {
this.infoText = data.infoText;
}
if (data && data.editorSchema) {
this.JSONSchema = data.editorSchema;
}
}
onEditorInit(_data) {
if (!this.JSONSchema) {
return;
}
this.editorComponent.monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
schemas: [{ schema: this.JSONSchema, fileMatch: ['*'], uri: 'branding' }],
enableSchemaRequest: false,
allowComments: false
});
}
writeValue(obj) {
this.optionsJsonString.next(obj);
if (this.attributeToEdit) {
obj = obj ? obj : '{}';
const parsed = JSON.parse(obj);
if (!parsed[this.attributeToEdit] || typeof parsed[this.attributeToEdit] !== 'string') {
obj = '';
}
else {
obj = parsed[this.attributeToEdit];
}
}
this.valueString.next(obj);
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
onValueChange(value) {
if (value === this.valueString.value) {
return;
}
this.valueString.next(value);
if (this.attributeToEdit) {
const parsed = JSON.parse(this.optionsJsonString.value);
parsed[this.attributeToEdit] = value;
value = JSON.stringify(parsed, null, 2);
}
this.optionsJsonString.next(value);
if (this.onChange) {
this.onChange(value);
}
if (this.onTouched) {
this.onTouched();
}
if (this.onValidatorChange) {
this.onValidatorChange();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdvancedEditBrandingComponent, deps: [{ token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AdvancedEditBrandingComponent, isStandalone: true, selector: "c8y-advanced-edit-branding", host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "@if (infoText) {\n <div class=\"card-block separator-bottom m-b-16\">\n <p class=\"icon-flex\">\n <i\n class=\"text-info m-r-4 icon-16\"\n c8yIcon=\"info-circle\"\n ></i>\n <span>\n {{ infoText | translate }}\n </span>\n </p>\n </div>\n}\n\n<c8y-editor\n class=\"flex-grow\"\n [editorOptions]=\"editorOptions\"\n [ngModel]=\"valueString | async\"\n (ngModelChange)=\"onValueChange($event)\"\n (editorInit)=\"onEditorInit($event)\"\n monacoEditorMarkerValidator\n></c8y-editor>\n", dependencies: [{ kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MonacoEditorMarkerValidatorDirective, selector: "c8y-editor [monacoEditorMarkerValidator]" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdvancedEditBrandingComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-advanced-edit-branding', host: { class: 'd-contents' }, standalone: true, imports: [
EditorComponent,
AsyncPipe,
FormsModule,
MonacoEditorMarkerValidatorDirective,
CoreModule
], template: "@if (infoText) {\n <div class=\"card-block separator-bottom m-b-16\">\n <p class=\"icon-flex\">\n <i\n class=\"text-info m-r-4 icon-16\"\n c8yIcon=\"info-circle\"\n ></i>\n <span>\n {{ infoText | translate }}\n </span>\n </p>\n </div>\n}\n\n<c8y-editor\n class=\"flex-grow\"\n [editorOptions]=\"editorOptions\"\n [ngModel]=\"valueString | async\"\n (ngModelChange)=\"onValueChange($event)\"\n (editorInit)=\"onEditorInit($event)\"\n monacoEditorMarkerValidator\n></c8y-editor>\n" }]
}], ctorParameters: () => [{ type: i1.ActivatedRoute }], propDecorators: { editorComponent: [{
type: ViewChild,
args: [EditorComponent]
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { AdvancedEditBrandingComponent };
//# sourceMappingURL=c8y-ngx-components-branding-plain-branding-editor-lazy.mjs.map