@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
29 lines • 14.8 kB
JavaScript
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { C8yTranslatePipe, DateTimePickerModule, FormGroupComponent } from '@c8y/ngx-components';
import { FormsModule } from '@c8y/ngx-components';
import { FormGroup, ReactiveFormsModule } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@c8y/ngx-components";
export class CustomPropertyFieldComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomPropertyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomPropertyFieldComponent, isStandalone: true, selector: "c8y-custom-property-field", inputs: { fieldDefinition: "fieldDefinition", form: "form" }, ngImport: i0, template: "<ng-container *ngIf=\"form && fieldDefinition\">\n <ng-container [ngSwitch]=\"fieldDefinition.type\">\n <ng-container *ngSwitchCase=\"'boolean'\">\n <c8y-form-group [formGroup]=\"form\">\n <label\n class=\"c8y-checkbox\"\n [title]=\"fieldDefinition.label | translate\"\n [for]=\"fieldDefinition.id\"\n >\n <input\n type=\"checkbox\"\n [id]=\"fieldDefinition.id\"\n [formControlName]=\"fieldDefinition.id\"\n />\n <span></span>\n <span>{{ fieldDefinition.label | translate }}</span>\n </label>\n </c8y-form-group>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <c8y-form-group [formGroup]=\"form\">\n <label [for]=\"fieldDefinition.id\">\n {{ fieldDefinition.label | translate }}\n </label>\n <input\n class=\"form-control\"\n type=\"number\"\n [id]=\"fieldDefinition.id\"\n [formControlName]=\"fieldDefinition.id\"\n />\n </c8y-form-group>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'integer'\">\n <c8y-form-group [formGroup]=\"form\">\n <label [for]=\"fieldDefinition.id\">\n {{ fieldDefinition.label | translate }}\n </label>\n <input\n class=\"form-control\"\n type=\"number\"\n [id]=\"fieldDefinition.id\"\n [formControlName]=\"fieldDefinition.id\"\n />\n </c8y-form-group>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'string'\">\n <c8y-form-group\n *ngIf=\"!fieldDefinition.format\"\n [formGroup]=\"form\"\n >\n <label [for]=\"fieldDefinition.id\">\n {{ fieldDefinition.label | translate }}\n </label>\n <input\n class=\"form-control\"\n type=\"text\"\n [id]=\"fieldDefinition.id\"\n [formControlName]=\"fieldDefinition.id\"\n />\n </c8y-form-group>\n\n <c8y-form-group\n *ngIf=\"fieldDefinition.format === 'datetime'\"\n [formGroup]=\"form\"\n >\n <label [for]=\"fieldDefinition.id\">\n {{ fieldDefinition.label | translate }}\n </label>\n <c8y-date-time-picker\n [id]=\"fieldDefinition.id\"\n [formControlName]=\"fieldDefinition.id\"\n data-cy=\"c8y-custom-property-field--date-time-picker\"\n ></c8y-date-time-picker>\n </c8y-form-group>\n </ng-container>\n </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "component", type: i3.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomPropertyFieldComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-custom-property-field', standalone: true, imports: [
CommonModule,
C8yTranslatePipe,
FormGroupComponent,
FormsModule,
ReactiveFormsModule,
DateTimePickerModule
], template: "<ng-container *ngIf=\"form && fieldDefinition\">\n <ng-container [ngSwitch]=\"fieldDefinition.type\">\n <ng-container *ngSwitchCase=\"'boolean'\">\n <c8y-form-group [formGroup]=\"form\">\n <label\n class=\"c8y-checkbox\"\n [title]=\"fieldDefinition.label | translate\"\n [for]=\"fieldDefinition.id\"\n >\n <input\n type=\"checkbox\"\n [id]=\"fieldDefinition.id\"\n [formControlName]=\"fieldDefinition.id\"\n />\n <span></span>\n <span>{{ fieldDefinition.label | translate }}</span>\n </label>\n </c8y-form-group>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <c8y-form-group [formGroup]=\"form\">\n <label [for]=\"fieldDefinition.id\">\n {{ fieldDefinition.label | translate }}\n </label>\n <input\n class=\"form-control\"\n type=\"number\"\n [id]=\"fieldDefinition.id\"\n [formControlName]=\"fieldDefinition.id\"\n />\n </c8y-form-group>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'integer'\">\n <c8y-form-group [formGroup]=\"form\">\n <label [for]=\"fieldDefinition.id\">\n {{ fieldDefinition.label | translate }}\n </label>\n <input\n class=\"form-control\"\n type=\"number\"\n [id]=\"fieldDefinition.id\"\n [formControlName]=\"fieldDefinition.id\"\n />\n </c8y-form-group>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'string'\">\n <c8y-form-group\n *ngIf=\"!fieldDefinition.format\"\n [formGroup]=\"form\"\n >\n <label [for]=\"fieldDefinition.id\">\n {{ fieldDefinition.label | translate }}\n </label>\n <input\n class=\"form-control\"\n type=\"text\"\n [id]=\"fieldDefinition.id\"\n [formControlName]=\"fieldDefinition.id\"\n />\n </c8y-form-group>\n\n <c8y-form-group\n *ngIf=\"fieldDefinition.format === 'datetime'\"\n [formGroup]=\"form\"\n >\n <label [for]=\"fieldDefinition.id\">\n {{ fieldDefinition.label | translate }}\n </label>\n <c8y-date-time-picker\n [id]=\"fieldDefinition.id\"\n [formControlName]=\"fieldDefinition.id\"\n data-cy=\"c8y-custom-property-field--date-time-picker\"\n ></c8y-date-time-picker>\n </c8y-form-group>\n </ng-container>\n </ng-container>\n</ng-container>\n" }]
}], propDecorators: { fieldDefinition: [{
type: Input
}], form: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLXByb3BlcnR5LWZpZWxkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3RlbmFudHMvY3VzdG9tLXByb3BlcnRpZXMvY3VzdG9tLXByb3BlcnR5LWZpZWxkL2N1c3RvbS1wcm9wZXJ0eS1maWVsZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi90ZW5hbnRzL2N1c3RvbS1wcm9wZXJ0aWVzL2N1c3RvbS1wcm9wZXJ0eS1maWVsZC9jdXN0b20tcHJvcGVydHktZmllbGQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFakQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxvQkFBb0IsRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ2pHLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNsRCxPQUFPLEVBQUUsU0FBUyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7O0FBZWhFLE1BQU0sT0FBTyw0QkFBNEI7K0dBQTVCLDRCQUE0QjttR0FBNUIsNEJBQTRCLG1KQ3BCekMsdy9FQWdGQSwyQ0RyRUksWUFBWSwwVEFDWixnQkFBZ0Isa0RBQ2hCLGtCQUFrQixzSUFDbEIsV0FBVyw2L0JBQ1gsbUJBQW1CLCtVQUNuQixvQkFBb0I7OzRGQUlYLDRCQUE0QjtrQkFieEMsU0FBUzsrQkFDRSwyQkFBMkIsY0FDekIsSUFBSSxXQUNQO3dCQUNQLFlBQVk7d0JBQ1osZ0JBQWdCO3dCQUNoQixrQkFBa0I7d0JBQ2xCLFdBQVc7d0JBQ1gsbUJBQW1CO3dCQUNuQixvQkFBb0I7cUJBQ3JCOzhCQUtELGVBQWU7c0JBRGQsS0FBSztnQkFJTixJQUFJO3NCQURILEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUZW5hbnRDdXN0b21Qcm9wZXJ0eUZpZWxkIH0gZnJvbSAnLi4vY3VzdG9tLXByb3BlcnRpZXMuc2VydmljZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQzh5VHJhbnNsYXRlUGlwZSwgRGF0ZVRpbWVQaWNrZXJNb2R1bGUsIEZvcm1Hcm91cENvbXBvbmVudCB9IGZyb20gJ0BjOHkvbmd4LWNvbXBvbmVudHMnO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYzh5L25neC1jb21wb25lbnRzJztcbmltcG9ydCB7IEZvcm1Hcm91cCwgUmVhY3RpdmVGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LWN1c3RvbS1wcm9wZXJ0eS1maWVsZCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgQzh5VHJhbnNsYXRlUGlwZSxcbiAgICBGb3JtR3JvdXBDb21wb25lbnQsXG4gICAgRm9ybXNNb2R1bGUsXG4gICAgUmVhY3RpdmVGb3Jtc01vZHVsZSxcbiAgICBEYXRlVGltZVBpY2tlck1vZHVsZVxuICBdLFxuICB0ZW1wbGF0ZVVybDogJy4vY3VzdG9tLXByb3BlcnR5LWZpZWxkLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBDdXN0b21Qcm9wZXJ0eUZpZWxkQ29tcG9uZW50IHtcbiAgQElucHV0KClcbiAgZmllbGREZWZpbml0aW9uOiBUZW5hbnRDdXN0b21Qcm9wZXJ0eUZpZWxkO1xuXG4gIEBJbnB1dCgpXG4gIGZvcm06IEZvcm1Hcm91cDtcbn1cbiIsIjxuZy1jb250YWluZXIgKm5nSWY9XCJmb3JtICYmIGZpZWxkRGVmaW5pdGlvblwiPlxuICA8bmctY29udGFpbmVyIFtuZ1N3aXRjaF09XCJmaWVsZERlZmluaXRpb24udHlwZVwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIidib29sZWFuJ1wiPlxuICAgICAgPGM4eS1mb3JtLWdyb3VwIFtmb3JtR3JvdXBdPVwiZm9ybVwiPlxuICAgICAgICA8bGFiZWxcbiAgICAgICAgICBjbGFzcz1cImM4eS1jaGVja2JveFwiXG4gICAgICAgICAgW3RpdGxlXT1cImZpZWxkRGVmaW5pdGlvbi5sYWJlbCB8IHRyYW5zbGF0ZVwiXG4gICAgICAgICAgW2Zvcl09XCJmaWVsZERlZmluaXRpb24uaWRcIlxuICAgICAgICA+XG4gICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgW2lkXT1cImZpZWxkRGVmaW5pdGlvbi5pZFwiXG4gICAgICAgICAgICBbZm9ybUNvbnRyb2xOYW1lXT1cImZpZWxkRGVmaW5pdGlvbi5pZFwiXG4gICAgICAgICAgLz5cbiAgICAgICAgICA8c3Bhbj48L3NwYW4+XG4gICAgICAgICAgPHNwYW4+e3sgZmllbGREZWZpbml0aW9uLmxhYmVsIHwgdHJhbnNsYXRlIH19PC9zcGFuPlxuICAgICAgICA8L2xhYmVsPlxuICAgICAgPC9jOHktZm9ybS1ncm91cD5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIidudW1iZXInXCI+XG4gICAgICA8Yzh5LWZvcm0tZ3JvdXAgW2Zvcm1Hcm91cF09XCJmb3JtXCI+XG4gICAgICAgIDxsYWJlbCBbZm9yXT1cImZpZWxkRGVmaW5pdGlvbi5pZFwiPlxuICAgICAgICAgIHt7IGZpZWxkRGVmaW5pdGlvbi5sYWJlbCB8IHRyYW5zbGF0ZSB9fVxuICAgICAgICA8L2xhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjbGFzcz1cImZvcm0tY29udHJvbFwiXG4gICAgICAgICAgdHlwZT1cIm51bWJlclwiXG4gICAgICAgICAgW2lkXT1cImZpZWxkRGVmaW5pdGlvbi5pZFwiXG4gICAgICAgICAgW2Zvcm1Db250cm9sTmFtZV09XCJmaWVsZERlZmluaXRpb24uaWRcIlxuICAgICAgICAvPlxuICAgICAgPC9jOHktZm9ybS1ncm91cD5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIidpbnRlZ2VyJ1wiPlxuICAgICAgPGM4eS1mb3JtLWdyb3VwIFtmb3JtR3JvdXBdPVwiZm9ybVwiPlxuICAgICAgICA8bGFiZWwgW2Zvcl09XCJmaWVsZERlZmluaXRpb24uaWRcIj5cbiAgICAgICAgICB7eyBmaWVsZERlZmluaXRpb24ubGFiZWwgfCB0cmFuc2xhdGUgfX1cbiAgICAgICAgPC9sYWJlbD5cbiAgICAgICAgPGlucHV0XG4gICAgICAgICAgY2xhc3M9XCJmb3JtLWNvbnRyb2xcIlxuICAgICAgICAgIHR5cGU9XCJudW1iZXJcIlxuICAgICAgICAgIFtpZF09XCJmaWVsZERlZmluaXRpb24uaWRcIlxuICAgICAgICAgIFtmb3JtQ29udHJvbE5hbWVdPVwiZmllbGREZWZpbml0aW9uLmlkXCJcbiAgICAgICAgLz5cbiAgICAgIDwvYzh5LWZvcm0tZ3JvdXA+XG4gICAgPC9uZy1jb250YWluZXI+XG5cbiAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCInc3RyaW5nJ1wiPlxuICAgICAgPGM4eS1mb3JtLWdyb3VwXG4gICAgICAgICpuZ0lmPVwiIWZpZWxkRGVmaW5pdGlvbi5mb3JtYXRcIlxuICAgICAgICBbZm9ybUdyb3VwXT1cImZvcm1cIlxuICAgICAgPlxuICAgICAgICA8bGFiZWwgW2Zvcl09XCJmaWVsZERlZmluaXRpb24uaWRcIj5cbiAgICAgICAgICB7eyBmaWVsZERlZmluaXRpb24ubGFiZWwgfCB0cmFuc2xhdGUgfX1cbiAgICAgICAgPC9sYWJlbD5cbiAgICAgICAgPGlucHV0XG4gICAgICAgICAgY2xhc3M9XCJmb3JtLWNvbnRyb2xcIlxuICAgICAgICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICAgICAgICBbaWRdPVwiZmllbGREZWZpbml0aW9uLmlkXCJcbiAgICAgICAgICBbZm9ybUNvbnRyb2xOYW1lXT1cImZpZWxkRGVmaW5pdGlvbi5pZFwiXG4gICAgICAgIC8+XG4gICAgICA8L2M4eS1mb3JtLWdyb3VwPlxuXG4gICAgICA8Yzh5LWZvcm0tZ3JvdXBcbiAgICAgICAgKm5nSWY9XCJmaWVsZERlZmluaXRpb24uZm9ybWF0ID09PSAnZGF0ZXRpbWUnXCJcbiAgICAgICAgW2Zvcm1Hcm91cF09XCJmb3JtXCJcbiAgICAgID5cbiAgICAgICAgPGxhYmVsIFtmb3JdPVwiZmllbGREZWZpbml0aW9uLmlkXCI+XG4gICAgICAgICAge3sgZmllbGREZWZpbml0aW9uLmxhYmVsIHwgdHJhbnNsYXRlIH19XG4gICAgICAgIDwvbGFiZWw+XG4gICAgICAgIDxjOHktZGF0ZS10aW1lLXBpY2tlclxuICAgICAgICAgIFtpZF09XCJmaWVsZERlZmluaXRpb24uaWRcIlxuICAgICAgICAgIFtmb3JtQ29udHJvbE5hbWVdPVwiZmllbGREZWZpbml0aW9uLmlkXCJcbiAgICAgICAgICBkYXRhLWN5PVwiYzh5LWN1c3RvbS1wcm9wZXJ0eS1maWVsZC0tZGF0ZS10aW1lLXBpY2tlclwiXG4gICAgICAgID48L2M4eS1kYXRlLXRpbWUtcGlja2VyPlxuICAgICAgPC9jOHktZm9ybS1ncm91cD5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC9uZy1jb250YWluZXI+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==