UNPKG

@ngx-formly/bootstrap

Version:

Formly is a dynamic (JSON powered) form library for Angular that bring unmatched maintainability to your application's forms.

149 lines (143 loc) 6.99 kB
import * as i0 from '@angular/core'; import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core'; import { FieldType, FormlyBootstrapFormFieldModule } from '@ngx-formly/bootstrap/form-field'; import * as i1 from '@angular/common'; import { CommonModule } from '@angular/common'; import * as i2 from '@ngx-formly/core'; import { FormlyModule } from '@ngx-formly/core'; import * as i3 from '@ngx-formly/core/select'; import { FormlySelectModule } from '@ngx-formly/core/select'; import { ReactiveFormsModule } from '@angular/forms'; class FormlyFieldMultiCheckbox extends FieldType { constructor() { super(...arguments); this.defaultOptions = { props: { formCheck: 'default', // 'default' | 'inline' | 'switch' | 'inline-switch' }, }; } onChange(value, checked) { this.formControl.markAsDirty(); if (this.props.type === 'array') { this.formControl.patchValue(checked ? [...(this.formControl.value || []), value] : [...(this.formControl.value || [])].filter((o) => o !== value)); } else { this.formControl.patchValue({ ...this.formControl.value, [value]: checked }); } this.formControl.markAsTouched(); } isChecked(option) { const value = this.formControl.value; return value && (this.props.type === 'array' ? value.indexOf(option.value) !== -1 : value[option.value]); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyFieldMultiCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyFieldMultiCheckbox, selector: "formly-field-multicheckbox", usesInheritance: true, ngImport: i0, template: ` <ng-template #fieldTypeTemplate> <div *ngFor="let option of props.options | formlySelectOptions: field | async; let i = index" class="form-check" [ngClass]="{ 'form-check-inline': props.formCheck === 'inline' || props.formCheck === 'inline-switch', 'form-switch': props.formCheck === 'switch' || props.formCheck === 'inline-switch', }" > <input type="checkbox" [id]="id + '_' + i" class="form-check-input" [class.is-invalid]="showError" [value]="option.value" [checked]="isChecked(option)" [formlyAttributes]="field" [disabled]="formControl.disabled || option.disabled" [attr.aria-describedby]="id + '-formly-validation-error'" [attr.aria-invalid]="showError" (change)="onChange(option.value, $any($event.target).checked)" /> <label class="form-check-label" [for]="id + '_' + i"> {{ option.label }} </label> </div> </ng-template> `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.LegacyFormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyFieldMultiCheckbox, decorators: [{ type: Component, args: [{ selector: 'formly-field-multicheckbox', template: ` <ng-template #fieldTypeTemplate> <div *ngFor="let option of props.options | formlySelectOptions: field | async; let i = index" class="form-check" [ngClass]="{ 'form-check-inline': props.formCheck === 'inline' || props.formCheck === 'inline-switch', 'form-switch': props.formCheck === 'switch' || props.formCheck === 'inline-switch', }" > <input type="checkbox" [id]="id + '_' + i" class="form-check-input" [class.is-invalid]="showError" [value]="option.value" [checked]="isChecked(option)" [formlyAttributes]="field" [disabled]="formControl.disabled || option.disabled" [attr.aria-describedby]="id + '-formly-validation-error'" [attr.aria-invalid]="showError" (change)="onChange(option.value, $any($event.target).checked)" /> <label class="form-check-label" [for]="id + '_' + i"> {{ option.label }} </label> </div> </ng-template> `, changeDetection: ChangeDetectionStrategy.OnPush, }] }] }); function withFormlyFieldMultiCheckbox() { return { types: [ { name: 'multicheckbox', component: FormlyFieldMultiCheckbox, wrappers: ['form-field'], }, ], }; } class FormlyBootstrapMultiCheckboxModule { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyBootstrapMultiCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); } static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FormlyBootstrapMultiCheckboxModule, declarations: [FormlyFieldMultiCheckbox], imports: [CommonModule, ReactiveFormsModule, FormlyBootstrapFormFieldModule, FormlySelectModule, i2.FormlyModule] }); } static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyBootstrapMultiCheckboxModule, imports: [CommonModule, ReactiveFormsModule, FormlyBootstrapFormFieldModule, FormlySelectModule, FormlyModule.forChild(withFormlyFieldMultiCheckbox())] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyBootstrapMultiCheckboxModule, decorators: [{ type: NgModule, args: [{ declarations: [FormlyFieldMultiCheckbox], imports: [ CommonModule, ReactiveFormsModule, FormlyBootstrapFormFieldModule, FormlySelectModule, FormlyModule.forChild(withFormlyFieldMultiCheckbox()), ], }] }] }); /** * Generated bundle index. Do not edit. */ export { FormlyBootstrapMultiCheckboxModule, FormlyFieldMultiCheckbox, withFormlyFieldMultiCheckbox }; //# sourceMappingURL=ngx-formly-bootstrap-multicheckbox.mjs.map