@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
69 lines (66 loc) • 10.7 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, Input, Component } from '@angular/core';
import * as i2$1 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 { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
import { DEFAULT_SEVERITY_VALUES, AlarmSeverityToIconPipe, AlarmSeverityToIconClassPipe } from '@c8y/ngx-components/alarms';
import { SEVERITY_LABELS } from '@c8y/client';
import * as i2 from '@angular/common';
class ComputedPropertyAlarmCountConfigComponent {
constructor() {
this.severityList = Object.keys(SEVERITY_LABELS);
this.SEVERITY_LABELS = SEVERITY_LABELS;
this.formBuilder = inject(FormBuilder);
this.form = inject(NgForm);
}
ngOnInit() {
this.initForm();
}
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({
type: ['', [Validators.required]],
severities: this.formBuilder.group(DEFAULT_SEVERITY_VALUES, {
validators: this.minSelectedCheckboxes(1)
})
});
}
minSelectedCheckboxes(min = 1) {
const validator = (formGroup) => {
const totalSelected = Object.values(formGroup.controls).reduce((prev, next) => (next.value ? prev + next.value : prev), 0);
return totalSelected >= min ? null : { required: true };
};
return validator;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ComputedPropertyAlarmCountConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ComputedPropertyAlarmCountConfigComponent, isStandalone: true, selector: "c8y-alarm-count-config", inputs: { config: "config" }, ngImport: i0, template: "<form\n class=\"row d-flex-md\"\n [formGroup]=\"formGroup\"\n>\n <div class=\"col-md-6\">\n <c8y-form-group class=\"m-b-16\">\n <label\n [title]=\"'Alarm type' | translate\"\n translate\n >\n Alarm type\n </label>\n <input\n class=\"form-control\"\n placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: 'c8y_UnavailabilityAlarm' } }}\"\n name=\"type\"\n type=\"string\"\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 </div>\n <div class=\"col-md-6\">\n <div\n class=\"form-group\"\n formArrayName=\"severities\"\n >\n <label>{{ 'Severities' | translate }}</label>\n <c8y-form-group\n [hasError]=\"formGroup.controls.severities.hasError('required')\"\n [ngClass]=\"{\n 'm-b-8': !formGroup.controls.severities.hasError('required')\n }\"\n data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n >\n <div class=\"d-flex gap-8\">\n <ng-container *ngFor=\"let severityOption of severityList\">\n <label\n class=\"c8y-checkbox m-t-0 gap-4\"\n [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n >\n <input\n type=\"checkbox\"\n [formControlName]=\"severityOption\"\n [name]=\"severityOption\"\n />\n <span class=\"a-s-center\"></span>\n <ng-container>\n <i\n class=\"a-s-center m-r-4 icon-20 {{ severityOption | AlarmSeverityToIconClass }}\"\n [c8yIcon]=\"severityOption | AlarmSeverityToIcon\"\n ></i>\n </ng-container>\n <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n </label>\n </ng-container>\n </div>\n <c8y-messages>\n <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n {{ 'Select at least one severity.' | translate }}\n </c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: "directive", type: i1.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmSeverityToIconClassPipe, name: "AlarmSeverityToIconClass" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ComputedPropertyAlarmCountConfigComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-alarm-count-config', imports: [
CoreModule,
DatapointSelectorModule,
CommonModule,
C8yTranslatePipe,
ReactiveFormsModule,
AlarmSeverityToIconPipe,
AlarmSeverityToIconClassPipe
], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<form\n class=\"row d-flex-md\"\n [formGroup]=\"formGroup\"\n>\n <div class=\"col-md-6\">\n <c8y-form-group class=\"m-b-16\">\n <label\n [title]=\"'Alarm type' | translate\"\n translate\n >\n Alarm type\n </label>\n <input\n class=\"form-control\"\n placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: 'c8y_UnavailabilityAlarm' } }}\"\n name=\"type\"\n type=\"string\"\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 </div>\n <div class=\"col-md-6\">\n <div\n class=\"form-group\"\n formArrayName=\"severities\"\n >\n <label>{{ 'Severities' | translate }}</label>\n <c8y-form-group\n [hasError]=\"formGroup.controls.severities.hasError('required')\"\n [ngClass]=\"{\n 'm-b-8': !formGroup.controls.severities.hasError('required')\n }\"\n data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n >\n <div class=\"d-flex gap-8\">\n <ng-container *ngFor=\"let severityOption of severityList\">\n <label\n class=\"c8y-checkbox m-t-0 gap-4\"\n [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n >\n <input\n type=\"checkbox\"\n [formControlName]=\"severityOption\"\n [name]=\"severityOption\"\n />\n <span class=\"a-s-center\"></span>\n <ng-container>\n <i\n class=\"a-s-center m-r-4 icon-20 {{ severityOption | AlarmSeverityToIconClass }}\"\n [c8yIcon]=\"severityOption | AlarmSeverityToIcon\"\n ></i>\n </ng-container>\n <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n </label>\n </ng-container>\n </div>\n <c8y-messages>\n <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n {{ 'Select at least one severity.' | translate }}\n </c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n</form>\n" }]
}], propDecorators: { config: [{
type: Input
}] } });
export { ComputedPropertyAlarmCountConfigComponent };
//# sourceMappingURL=c8y-ngx-components-computed-asset-properties-alarm-count-config.component-Zygcid6r.mjs.map