UNPKG

@ngx-formly/bootstrap

Version:

ngx-formly is an Angular 2 module which has a Components to help customize and render JavaScript/JSON configured forms. The formly-form Component and the FormlyConfig service are very powerful and bring unmatched maintainability to your application's form

2 lines 10.5 kB
!function(o,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@ngx-formly/core"),require("@angular/forms"),require("rxjs"),require("@angular/common"),require("@ngx-formly/core/select")):"function"==typeof define&&define.amd?define("@ngx-formly/bootstrap",["exports","@angular/core","@ngx-formly/core","@angular/forms","rxjs","@angular/common","@ngx-formly/core/select"],t):t((o["ngx-formly"]=o["ngx-formly"]||{},o["ngx-formly"].bootstrap={}),o.ng.core,o.core$1,o.ng.forms,o.rxjs,o.ng.common,o.select)}(this,function(o,e,t,n,r,l,i){"use strict";var a=function(o,t){return(a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(o,t){o.__proto__=t}||function(o,t){for(var e in t)t.hasOwnProperty(e)&&(o[e]=t[e])})(o,t)};function s(o,t){function e(){this.constructor=o}a(o,t),o.prototype=null===t?Object.create(t):(e.prototype=t.prototype,new e)}var p=function(o){function t(){return null!==o&&o.apply(this,arguments)||this}return s(t,o),t.decorators=[{type:e.Component,args:[{selector:"formly-field-checkbox",template:'\n <div class="custom-control custom-checkbox">\n <input class="custom-control-input" type="checkbox"\n [class.is-invalid]="showError"\n [indeterminate]="to.indeterminate && field.formControl.value === null"\n [formControl]="formControl"\n [formlyAttributes]="field">\n <label class="custom-control-label" [for]="id">\n {{ to.label }}\n <span *ngIf="to.required && to.hideRequiredMarker !== true">*</span>\n </label>\n </div>\n '}]}],t}(t.FieldType),d=function(o){function t(){return null!==o&&o.apply(this,arguments)||this}return s(t,o),t.createControl=function(e,o){if(o.templateOptions.options instanceof r.Observable)throw new Error("[Formly Error] You cannot pass an Observable to a multicheckbox yet.");var t=o.templateOptions.options.reduce(function(o,t){return o[t.key]=new n.FormControl(e?e[t.key]:undefined),o},{});return new n.FormGroup(t,o.validators?o.validators.validation:undefined,o.asyncValidators?o.asyncValidators.validation:undefined)},t.decorators=[{type:e.Component,args:[{selector:"formly-field-multicheckbox",template:'\n <div class="custom-control custom-checkbox" *ngFor="let option of to.options; let i = index;">\n <input class="custom-control-input" type="checkbox"\n [id]="id + \'_\' + i"\n [value]="option.value"\n [formControl]="formControl.get(option.key)"\n [formlyAttributes]="field">\n <label class="custom-control-label" [for]="id + \'_\' + i">\n {{ option.value }}\n </label>\n </div>\n '}]}],t}(t.FieldType),c=function(o){function t(){return null!==o&&o.apply(this,arguments)||this}return s(t,o),Object.defineProperty(t.prototype,"type",{get:function(){return this.to.type||"text"},enumerable:!0,configurable:!0}),t.decorators=[{type:e.Component,args:[{selector:"formly-field-input",template:'\n <input *ngIf="type !== \'number\' else numberTmp" [type]="type" [formControl]="formControl" class="form-control" [formlyAttributes]="field" [class.is-invalid]="showError">\n <ng-template #numberTmp>\n <input type="number" [formControl]="formControl" class="form-control" [formlyAttributes]="field" [class.is-invalid]="showError">\n </ng-template>\n ',host:{"[class.d-inline-flex]":"to.addonLeft || to.addonRight","[class.custom-file]":"to.addonLeft || to.addonRight"}}]}],t}(t.FieldType),u=function(o){function t(){return null!==o&&o.apply(this,arguments)||this}return s(t,o),t.decorators=[{type:e.Component,args:[{selector:"formly-field-radio",template:'\n <div [formGroup]="form">\n <div class="custom-control custom-radio" *ngFor="let option of to.options | formlySelectOptions:field | async; let i = index;">\n <input class="custom-control-input" type="radio"\n [id]="id + \'_\' + i"\n [name]="id"\n [class.is-invalid]="showError"\n [value]="option.value"\n [formControl]="formControl"\n [formlyAttributes]="field">\n <label class="custom-control-label" [for]="id + \'_\' + i">\n {{ option.label }}\n </label>\n </div>\n </div>\n '}]}],t}(t.FieldType),f=function(o){function t(){return null!==o&&o.apply(this,arguments)||this}return s(t,o),t.decorators=[{type:e.Component,args:[{selector:"formly-field-textarea",template:'\n <textarea [formControl]="formControl" [cols]="to.cols"\n [rows]="to.rows" class="form-control" [class.is-invalid]="showError"\n [formlyAttributes]="field">\n </textarea>\n '}]}],t}(t.FieldType),m=function(o){function t(){return null!==o&&o.apply(this,arguments)||this}return s(t,o),t.decorators=[{type:e.Component,args:[{selector:"formly-field-select",template:'\n <select *ngIf="to.multiple; else singleSelect" class="form-control"\n multiple\n [class.custom-select]="to.customSelect"\n [formControl]="formControl"\n [class.is-invalid]="showError"\n [formlyAttributes]="field">\n <ng-container *ngFor="let item of to.options | formlySelectOptions:field | async">\n <optgroup *ngIf="item.group" label="{{item.label}}">\n <option *ngFor="let child of item.group" [value]="child.value" [disabled]="child.disabled">\n {{ child.label }}\n </option>\n </optgroup>\n <option *ngIf="!item.group" [value]="item.value" [disabled]="item.disabled">{{ item.label }}</option>\n </ng-container>\n </select>\n\n <ng-template #singleSelect>\n <select class="form-control"\n [formControl]="formControl"\n [class.custom-select]="to.customSelect"\n [class.is-invalid]="showError"\n [formlyAttributes]="field">\n <option *ngIf="to.placeholder" value="">{{ to.placeholder }}</option>\n <ng-container *ngFor="let item of to.options | formlySelectOptions:field | async">\n <optgroup *ngIf="item.group" label="{{item.label}}">\n <option *ngFor="let child of item.group" [value]="child.value" [disabled]="child.disabled">\n {{ child.label }}\n </option>\n </optgroup>\n <option *ngIf="!item.group" [value]="item.value" [disabled]="item.disabled">{{ item.label }}</option>\n </ng-container>\n </select>\n </ng-template>\n '}]}],t}(t.FieldType),g=function(o){function t(){return null!==o&&o.apply(this,arguments)||this}return s(t,o),t.decorators=[{type:e.Component,args:[{selector:"formly-wrapper-form-field",template:'\n <div class="form-group" [class.has-error]="showError">\n <label *ngIf="to.label && to.hideLabel !== true" [attr.for]="id">\n {{ to.label }} <ng-container *ngIf="to.required && to.hideRequiredMarker !== true">*</ng-container>\n </label>\n\n <ng-template #fieldComponent></ng-template>\n\n <div *ngIf="showError" class="invalid-feedback" [style.display]="\'block\'">\n <formly-validation-message [field]="field"></formly-validation-message>\n </div>\n\n <small *ngIf="to.description" class="form-text text-muted">{{ to.description }}</small>\n </div>\n '}]}],t.propDecorators={fieldComponent:[{type:e.ViewChild,args:["fieldComponent",{read:e.ViewContainerRef}]}]},t}(t.FieldWrapper),y=function(o){function t(){return null!==o&&o.apply(this,arguments)||this}return s(t,o),t.prototype.addonRightClick=function(o){this.to.addonRight.onClick&&this.to.addonRight.onClick(this.to,this,o)},t.prototype.addonLeftClick=function(o){this.to.addonLeft.onClick&&this.to.addonLeft.onClick(this.to,this,o)},t.decorators=[{type:e.Component,args:[{selector:"formly-wrapper-addons",template:'\n <div class="input-group">\n <div class="input-group-prepend"\n *ngIf="to.addonLeft"\n [ngStyle]="{cursor: to.addonLeft.onClick ? \'pointer\' : \'inherit\'}"\n (click)="addonLeftClick($event)">\n <i class="input-group-text" [ngClass]="to.addonLeft.class" *ngIf="to.addonLeft.class"></i>\n <span *ngIf="to.addonLeft.text" class="input-group-text">{{ to.addonLeft.text }}</span>\n </div>\n <ng-template #fieldComponent></ng-template>\n <div class="input-group-append"\n *ngIf="to.addonRight"\n [ngStyle]="{cursor: to.addonRight.onClick ? \'pointer\' : \'inherit\'}"\n (click)="addonRightClick($event)">\n <i class="input-group-text" [ngClass]="to.addonRight.class" *ngIf="to.addonRight.class"></i>\n <span *ngIf="to.addonRight.text" class="input-group-text">{{ to.addonRight.text }}</span>\n </div>\n </div>\n ',styles:["\n :host ::ng-deep .input-group>:not(:first-child)> .form-control {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n :host ::ng-deep .input-group>:not(:last-child)> .form-control {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n "]}]}],t.propDecorators={fieldComponent:[{type:e.ViewChild,args:["fieldComponent",{read:e.ViewContainerRef}]}]},t}(t.FieldWrapper),h=function(){function o(){}return o.prototype.run=function(o){o.templateManipulators.postWrapper.push(function(o){if(o&&o.templateOptions&&(o.templateOptions.addonLeft||o.templateOptions.addonRight))return"addons"})},o}(),b=[c,p,u,m,f,d,y,g],v={types:[{name:"input",component:c,wrappers:["form-field"]},{name:"checkbox",component:p,wrappers:["form-field"],defaultOptions:{templateOptions:{indeterminate:!0,hideLabel:!0}}},{name:"radio",component:u,wrappers:["form-field"],defaultOptions:{templateOptions:{options:[]}}},{name:"select",component:m,wrappers:["form-field"],defaultOptions:{templateOptions:{options:[]}}},{name:"textarea",component:f,wrappers:["form-field"],defaultOptions:{templateOptions:{cols:1,rows:1}}},{name:"multicheckbox",component:d,wrappers:["form-field"],defaultOptions:{templateOptions:{options:[]}}}],wrappers:[{name:"addons",component:y},{name:"form-field",component:g}],manipulators:[{"class":h,method:"run"}]},C=function(){function o(){}return o.decorators=[{type:e.NgModule,args:[{declarations:[b],imports:[l.CommonModule,n.ReactiveFormsModule,i.FormlySelectModule,t.FormlyModule.forRoot(v)]}]}],o}();o.FormlyBootstrapModule=C,o.FormlyFieldCheckbox=p,o.FormlyFieldMultiCheckbox=d,o.FormlyFieldInput=c,o.FormlyFieldRadio=u,o.FormlyFieldTextArea=f,o.FormlyFieldSelect=m,o.FormlyWrapperFormField=g,o.FormlyWrapperAddons=y,o.ɵb=v,o.ɵa=b,o.ɵc=h,Object.defineProperty(o,"__esModule",{value:!0})}); //# sourceMappingURL=ngx-formly-bootstrap.umd.min.js.map