@c8y/ngx-components/fesm2022/c8y-ngx-components-computed-asset-properties-configuration-snapshot-config.component-C5QMFdX1.mjs

Angular modules for Cumulocity IoT applications

import * as i0 from '@angular/core';
import { inject, DestroyRef, Input, Component } from '@angular/core';
import * as i3 from '@angular/forms';
import { FormBuilder, NgForm, Validators, ControlContainer, ReactiveFormsModule } from '@angular/forms';
import * as i1 from '@c8y/ngx-components';
import { CoreModule, CommonModule, C8yTranslatePipe } from '@c8y/ngx-components';
import { startWith } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i2 from '@angular/common';

class ConfigurationSnapshotConfigComponent {
    constructor() {
        this.formBuilder = inject(FormBuilder);
        this.form = inject(NgForm);
        this.destroyRef = inject(DestroyRef);
    }
    ngOnInit() {
        this.initForm();
        this.setupLegacyToggle();
    }
    onBeforeSave(config) {
        if (this.formGroup.valid) {
            Object.assign(config, this.formGroup.value);
            return true;
        }
        return false;
    }
    initForm() {
        this.formGroup = this.createForm();
        this.form.form.addControl('config', this.formGroup);
        this.formGroup.patchValue(this.config);
    }
    createForm() {
        return this.formBuilder.group({
            legacy: [true, [Validators.required]],
            type: ['', []]
        });
    }
    setupLegacyToggle() {
        this.formGroup
            .get('legacy')
            ?.valueChanges.pipe(startWith(this.isLegacy), takeUntilDestroyed(this.destroyRef))
            .subscribe(isLegacy => {
            this.updateTypeControlBasedOnLegacy(isLegacy);
        });
    }
    updateTypeControlBasedOnLegacy(isLegacy) {
        const typeControl = this.formGroup.get('type');
        if (isLegacy) {
            typeControl?.setValue(null);
            typeControl?.clearValidators();
            typeControl?.setErrors(null);
        }
        else {
            typeControl?.setValidators([Validators.required]);
        }
        typeControl?.updateValueAndValidity();
    }
    get isLegacy() {
        return this.formGroup.get('legacy')?.value;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurationSnapshotConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfigurationSnapshotConfigComponent, isStandalone: true, selector: "c8y-configuration-snapshot-config", inputs: { config: "config" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <c8y-form-group class=\"m-b-8\">\n    <label\n      class=\"c8y-switch\"\n      [title]=\"'Legacy configuration' | translate\"\n    >\n      <input\n        type=\"checkbox\"\n        formControlName=\"legacy\"\n      />\n      <span></span>\n      <span>{{ 'Legacy configuration' | translate }}</span>\n      <span class=\"sr-only\">{{ 'Legacy configuration' | translate }}</span>\n    </label>\n  </c8y-form-group>\n\n  <c8y-form-group\n    class=\"form-group-sm m-b-16\"\n    *ngIf=\"!isLegacy\"\n  >\n    <label\n      [title]=\"'Configuration type' | translate\"\n      translate\n    >\n      Configuration type\n    </label>\n    <input\n      class=\"form-control\"\n      name=\"type\"\n      type=\"text\"\n      formControlName=\"type\"\n    />\n    <c8y-messages\n      [show]=\"formGroup.controls?.type?.touched && formGroup?.controls?.type?.errors\"\n    ></c8y-messages>\n  </c8y-form-group>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurationSnapshotConfigComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-configuration-snapshot-config', imports: [CoreModule, CommonModule, C8yTranslatePipe, ReactiveFormsModule], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<form [formGroup]=\"formGroup\">\n  <c8y-form-group class=\"m-b-8\">\n    <label\n      class=\"c8y-switch\"\n      [title]=\"'Legacy configuration' | translate\"\n    >\n      <input\n        type=\"checkbox\"\n        formControlName=\"legacy\"\n      />\n      <span></span>\n      <span>{{ 'Legacy configuration' | translate }}</span>\n      <span class=\"sr-only\">{{ 'Legacy configuration' | translate }}</span>\n    </label>\n  </c8y-form-group>\n\n  <c8y-form-group\n    class=\"form-group-sm m-b-16\"\n    *ngIf=\"!isLegacy\"\n  >\n    <label\n      [title]=\"'Configuration type' | translate\"\n      translate\n    >\n      Configuration type\n    </label>\n    <input\n      class=\"form-control\"\n      name=\"type\"\n      type=\"text\"\n      formControlName=\"type\"\n    />\n    <c8y-messages\n      [show]=\"formGroup.controls?.type?.touched && formGroup?.controls?.type?.errors\"\n    ></c8y-messages>\n  </c8y-form-group>\n</form>\n" }]
        }], propDecorators: { config: [{
                type: Input
            }] } });

export { ConfigurationSnapshotConfigComponent };
//# sourceMappingURL=c8y-ngx-components-computed-asset-properties-configuration-snapshot-config.component-C5QMFdX1.mjs.map