UNPKG

@ngx-formly/bootstrap

Version:

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

144 lines (142 loc) 12.8 kB
import { Component, ChangeDetectionStrategy } from '@angular/core'; import { FieldType } from '@ngx-formly/bootstrap/form-field'; import * as i0 from "@angular/core"; import * as i1 from "@angular/common"; import * as i2 from "@angular/forms"; import * as i3 from "@ngx-formly/core"; import * as i4 from "@ngx-formly/core/select"; export class FormlyFieldSelect extends FieldType { constructor() { super(...arguments); this.defaultOptions = { props: { compareWith(o1, o2) { return o1 === o2; }, }, }; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyFieldSelect, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyFieldSelect, selector: "formly-field-select", usesInheritance: true, ngImport: i0, template: ` <ng-template #fieldTypeTemplate> <select *ngIf="props.multiple; else singleSelect" class="form-select" multiple [formControl]="formControl" [compareWith]="props.compareWith" [class.is-invalid]="showError" [formlyAttributes]="field" [attr.aria-describedby]="id + '-formly-validation-error'" [attr.aria-invalid]="showError" > <ng-container *ngIf="props.options | formlySelectOptions: field | async as opts"> <ng-container *ngFor="let opt of opts"> <option *ngIf="!opt.group; else optgroup" [ngValue]="opt.value" [disabled]="opt.disabled"> {{ opt.label }} </option> <ng-template #optgroup> <optgroup [label]="opt.label"> <option *ngFor="let child of opt.group" [ngValue]="child.value" [disabled]="child.disabled"> {{ child.label }} </option> </optgroup> </ng-template> </ng-container> </ng-container> </select> <ng-template #singleSelect> <select class="form-select" [formControl]="formControl" [compareWith]="props.compareWith" [class.is-invalid]="showError" [formlyAttributes]="field" [attr.aria-describedby]="id + '-formly-validation-error'" [attr.aria-invalid]="showError" > <option *ngIf="props.placeholder" [ngValue]="undefined">{{ props.placeholder }}</option> <ng-container *ngIf="props.options | formlySelectOptions: field | async as opts"> <ng-container *ngFor="let opt of opts"> <option *ngIf="!opt.group; else optgroup" [ngValue]="opt.value" [disabled]="opt.disabled"> {{ opt.label }} </option> <ng-template #optgroup> <optgroup [label]="opt.label"> <option *ngFor="let child of opt.group" [ngValue]="child.value" [disabled]="child.disabled"> {{ child.label }} </option> </optgroup> </ng-template> </ng-container> </ng-container> </select> </ng-template> </ng-template> `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.LegacyFormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyFieldSelect, decorators: [{ type: Component, args: [{ selector: 'formly-field-select', template: ` <ng-template #fieldTypeTemplate> <select *ngIf="props.multiple; else singleSelect" class="form-select" multiple [formControl]="formControl" [compareWith]="props.compareWith" [class.is-invalid]="showError" [formlyAttributes]="field" [attr.aria-describedby]="id + '-formly-validation-error'" [attr.aria-invalid]="showError" > <ng-container *ngIf="props.options | formlySelectOptions: field | async as opts"> <ng-container *ngFor="let opt of opts"> <option *ngIf="!opt.group; else optgroup" [ngValue]="opt.value" [disabled]="opt.disabled"> {{ opt.label }} </option> <ng-template #optgroup> <optgroup [label]="opt.label"> <option *ngFor="let child of opt.group" [ngValue]="child.value" [disabled]="child.disabled"> {{ child.label }} </option> </optgroup> </ng-template> </ng-container> </ng-container> </select> <ng-template #singleSelect> <select class="form-select" [formControl]="formControl" [compareWith]="props.compareWith" [class.is-invalid]="showError" [formlyAttributes]="field" [attr.aria-describedby]="id + '-formly-validation-error'" [attr.aria-invalid]="showError" > <option *ngIf="props.placeholder" [ngValue]="undefined">{{ props.placeholder }}</option> <ng-container *ngIf="props.options | formlySelectOptions: field | async as opts"> <ng-container *ngFor="let opt of opts"> <option *ngIf="!opt.group; else optgroup" [ngValue]="opt.value" [disabled]="opt.disabled"> {{ opt.label }} </option> <ng-template #optgroup> <optgroup [label]="opt.label"> <option *ngFor="let child of opt.group" [ngValue]="child.value" [disabled]="child.disabled"> {{ child.label }} </option> </optgroup> </ng-template> </ng-container> </ng-container> </select> </ng-template> </ng-template> `, changeDetection: ChangeDetectionStrategy.OnPush, }] }] }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LnR5cGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvdWkvYm9vdHN0cmFwL3NlbGVjdC9zcmMvc2VsZWN0LnR5cGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSx1QkFBdUIsRUFBUSxNQUFNLGVBQWUsQ0FBQztBQUV6RSxPQUFPLEVBQUUsU0FBUyxFQUFvQixNQUFNLGtDQUFrQyxDQUFDOzs7Ozs7QUEwRS9FLE1BQU0sT0FBTyxpQkFBa0IsU0FBUSxTQUF1QztJQTlEOUU7O1FBK0RXLG1CQUFjLEdBQUc7WUFDeEIsS0FBSyxFQUFFO2dCQUNMLFdBQVcsQ0FBQyxFQUFPLEVBQUUsRUFBTztvQkFDMUIsT0FBTyxFQUFFLEtBQUssRUFBRSxDQUFDO2dCQUNuQixDQUFDO2FBQ0Y7U0FDRixDQUFDO0tBQ0g7K0dBUlksaUJBQWlCO21HQUFqQixpQkFBaUIsa0ZBNURsQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBeURUOzs0RkFHVSxpQkFBaUI7a0JBOUQ3QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBeURUO29CQUNELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2lCQUNoRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIFR5cGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZpZWxkVHlwZUNvbmZpZywgRm9ybWx5RmllbGRDb25maWcgfSBmcm9tICdAbmd4LWZvcm1seS9jb3JlJztcbmltcG9ydCB7IEZpZWxkVHlwZSwgRm9ybWx5RmllbGRQcm9wcyB9IGZyb20gJ0BuZ3gtZm9ybWx5L2Jvb3RzdHJhcC9mb3JtLWZpZWxkJztcbmltcG9ydCB7IEZvcm1seUZpZWxkU2VsZWN0UHJvcHMgfSBmcm9tICdAbmd4LWZvcm1seS9jb3JlL3NlbGVjdCc7XG5cbmludGVyZmFjZSBTZWxlY3RQcm9wcyBleHRlbmRzIEZvcm1seUZpZWxkUHJvcHMsIEZvcm1seUZpZWxkU2VsZWN0UHJvcHMge1xuICBtdWx0aXBsZT86IGJvb2xlYW47XG4gIGNvbXBhcmVXaXRoPzogKG8xOiBhbnksIG8yOiBhbnkpID0+IGJvb2xlYW47XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgRm9ybWx5U2VsZWN0RmllbGRDb25maWcgZXh0ZW5kcyBGb3JtbHlGaWVsZENvbmZpZzxTZWxlY3RQcm9wcz4ge1xuICB0eXBlOiAnc2VsZWN0JyB8IFR5cGU8Rm9ybWx5RmllbGRTZWxlY3Q+O1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmb3JtbHktZmllbGQtc2VsZWN0JyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bmctdGVtcGxhdGUgI2ZpZWxkVHlwZVRlbXBsYXRlPlxuICAgICAgPHNlbGVjdFxuICAgICAgICAqbmdJZj1cInByb3BzLm11bHRpcGxlOyBlbHNlIHNpbmdsZVNlbGVjdFwiXG4gICAgICAgIGNsYXNzPVwiZm9ybS1zZWxlY3RcIlxuICAgICAgICBtdWx0aXBsZVxuICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZm9ybUNvbnRyb2xcIlxuICAgICAgICBbY29tcGFyZVdpdGhdPVwicHJvcHMuY29tcGFyZVdpdGhcIlxuICAgICAgICBbY2xhc3MuaXMtaW52YWxpZF09XCJzaG93RXJyb3JcIlxuICAgICAgICBbZm9ybWx5QXR0cmlidXRlc109XCJmaWVsZFwiXG4gICAgICAgIFthdHRyLmFyaWEtZGVzY3JpYmVkYnldPVwiaWQgKyAnLWZvcm1seS12YWxpZGF0aW9uLWVycm9yJ1wiXG4gICAgICAgIFthdHRyLmFyaWEtaW52YWxpZF09XCJzaG93RXJyb3JcIlxuICAgICAgPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwicHJvcHMub3B0aW9ucyB8IGZvcm1seVNlbGVjdE9wdGlvbnM6IGZpZWxkIHwgYXN5bmMgYXMgb3B0c1wiPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IG9wdCBvZiBvcHRzXCI+XG4gICAgICAgICAgICA8b3B0aW9uICpuZ0lmPVwiIW9wdC5ncm91cDsgZWxzZSBvcHRncm91cFwiIFtuZ1ZhbHVlXT1cIm9wdC52YWx1ZVwiIFtkaXNhYmxlZF09XCJvcHQuZGlzYWJsZWRcIj5cbiAgICAgICAgICAgICAge3sgb3B0LmxhYmVsIH19XG4gICAgICAgICAgICA8L29wdGlvbj5cbiAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSAjb3B0Z3JvdXA+XG4gICAgICAgICAgICAgIDxvcHRncm91cCBbbGFiZWxdPVwib3B0LmxhYmVsXCI+XG4gICAgICAgICAgICAgICAgPG9wdGlvbiAqbmdGb3I9XCJsZXQgY2hpbGQgb2Ygb3B0Lmdyb3VwXCIgW25nVmFsdWVdPVwiY2hpbGQudmFsdWVcIiBbZGlzYWJsZWRdPVwiY2hpbGQuZGlzYWJsZWRcIj5cbiAgICAgICAgICAgICAgICAgIHt7IGNoaWxkLmxhYmVsIH19XG4gICAgICAgICAgICAgICAgPC9vcHRpb24+XG4gICAgICAgICAgICAgIDwvb3B0Z3JvdXA+XG4gICAgICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvc2VsZWN0PlxuXG4gICAgICA8bmctdGVtcGxhdGUgI3NpbmdsZVNlbGVjdD5cbiAgICAgICAgPHNlbGVjdFxuICAgICAgICAgIGNsYXNzPVwiZm9ybS1zZWxlY3RcIlxuICAgICAgICAgIFtmb3JtQ29udHJvbF09XCJmb3JtQ29udHJvbFwiXG4gICAgICAgICAgW2NvbXBhcmVXaXRoXT1cInByb3BzLmNvbXBhcmVXaXRoXCJcbiAgICAgICAgICBbY2xhc3MuaXMtaW52YWxpZF09XCJzaG93RXJyb3JcIlxuICAgICAgICAgIFtmb3JtbHlBdHRyaWJ1dGVzXT1cImZpZWxkXCJcbiAgICAgICAgICBbYXR0ci5hcmlhLWRlc2NyaWJlZGJ5XT1cImlkICsgJy1mb3JtbHktdmFsaWRhdGlvbi1lcnJvcidcIlxuICAgICAgICAgIFthdHRyLmFyaWEtaW52YWxpZF09XCJzaG93RXJyb3JcIlxuICAgICAgICA+XG4gICAgICAgICAgPG9wdGlvbiAqbmdJZj1cInByb3BzLnBsYWNlaG9sZGVyXCIgW25nVmFsdWVdPVwidW5kZWZpbmVkXCI+e3sgcHJvcHMucGxhY2Vob2xkZXIgfX08L29wdGlvbj5cbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwicHJvcHMub3B0aW9ucyB8IGZvcm1seVNlbGVjdE9wdGlvbnM6IGZpZWxkIHwgYXN5bmMgYXMgb3B0c1wiPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgb3B0IG9mIG9wdHNcIj5cbiAgICAgICAgICAgICAgPG9wdGlvbiAqbmdJZj1cIiFvcHQuZ3JvdXA7IGVsc2Ugb3B0Z3JvdXBcIiBbbmdWYWx1ZV09XCJvcHQudmFsdWVcIiBbZGlzYWJsZWRdPVwib3B0LmRpc2FibGVkXCI+XG4gICAgICAgICAgICAgICAge3sgb3B0LmxhYmVsIH19XG4gICAgICAgICAgICAgIDwvb3B0aW9uPlxuICAgICAgICAgICAgICA8bmctdGVtcGxhdGUgI29wdGdyb3VwPlxuICAgICAgICAgICAgICAgIDxvcHRncm91cCBbbGFiZWxdPVwib3B0LmxhYmVsXCI+XG4gICAgICAgICAgICAgICAgICA8b3B0aW9uICpuZ0Zvcj1cImxldCBjaGlsZCBvZiBvcHQuZ3JvdXBcIiBbbmdWYWx1ZV09XCJjaGlsZC52YWx1ZVwiIFtkaXNhYmxlZF09XCJjaGlsZC5kaXNhYmxlZFwiPlxuICAgICAgICAgICAgICAgICAgICB7eyBjaGlsZC5sYWJlbCB9fVxuICAgICAgICAgICAgICAgICAgPC9vcHRpb24+XG4gICAgICAgICAgICAgICAgPC9vcHRncm91cD5cbiAgICAgICAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8L3NlbGVjdD5cbiAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgYCxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEZvcm1seUZpZWxkU2VsZWN0IGV4dGVuZHMgRmllbGRUeXBlPEZpZWxkVHlwZUNvbmZpZzxTZWxlY3RQcm9wcz4+IHtcbiAgb3ZlcnJpZGUgZGVmYXVsdE9wdGlvbnMgPSB7XG4gICAgcHJvcHM6IHtcbiAgICAgIGNvbXBhcmVXaXRoKG8xOiBhbnksIG8yOiBhbnkpIHtcbiAgICAgICAgcmV0dXJuIG8xID09PSBvMjtcbiAgICAgIH0sXG4gICAgfSxcbiAgfTtcbn1cbiJdfQ==