ngx-antd-json-schema-form/bundles/ngx-antd-json-schema-form.umd.min.js

JSON form schema using ant-design and prismjs

!function(n,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/forms"),require("@angular/platform-browser/animations"),require("ng-zorro-antd"),require("@angular/common"),require("@angular/common/locales/en"),require("prismjs/prism"),require("prismjs/components/prism-typescript"),require("prismjs/components/prism-sql"),require("prismjs/components/prism-http"),require("@angular/core"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("ngx-antd-json-schema-form",["exports","@angular/forms","@angular/platform-browser/animations","ng-zorro-antd","@angular/common","@angular/common/locales/en","prismjs/prism","prismjs/components/prism-typescript","prismjs/components/prism-sql","prismjs/components/prism-http","@angular/core","@angular/platform-browser"],o):o(n["ngx-antd-json-schema-form"]={},n.ng.forms,n.ng.platformBrowser.animations,n.ngZorroAntd,n.ng.common,n.ng.common.locales.en,null,null,null,null,n.ng.core,n.ng.platformBrowser)}(this,function(n,e,o,i,t,r,s,a,l,f,c,g){"use strict";r=r&&r.hasOwnProperty("default")?r["default"]:r;var m=function(){return(m=Object.assign||function(n){for(var o,t=1,e=arguments.length;t<e;t++)for(var i in o=arguments[t])Object.prototype.hasOwnProperty.call(o,i)&&(n[i]=o[i]);return n}).apply(this,arguments)};function p(n,o){var t="function"==typeof Symbol&&n[Symbol.iterator];if(!t)return n;var e,i,r=t.call(n),s=[];try{for(;(void 0===o||0<o--)&&!(e=r.next()).done;)s.push(e.value)}catch(a){i={error:a}}finally{try{e&&!e.done&&(t=r["return"])&&t.call(r)}finally{if(i)throw i.error}}return s}var u=function(){function n(){this.schema=[],this.registeredForm=new c.EventEmitter,this.formChange=new c.EventEmitter,this.formTouch=new c.EventEmitter,this.submit=new c.EventEmitter,this.formValid=new c.EventEmitter,this.formSettings=this.getDefaultSettings()}return n.prototype.ngOnChanges=function(n){n.schema&&(this.schema=n.schema.currentValue,this.registerForm()),n.settings&&(this.settings=n.settings.currentValue,this.formSettings=this.mergeFormSettings(this.formSettings,this.settings),this.submitButtonConfig=this.getSubmitButtonConfig(this.formSettings.submitButton))},n.prototype.registerForm=function(){this.form=this.createGroup(this.schema),this.registeredForm.emit(this.form),this.handleEmitters(),this.onFormUpdate()},n.prototype.handleSubmit=function(n){n.preventDefault(),n.stopPropagation(),this.submit.emit(this.form.getRawValue())},n.prototype.onFormUpdate=function(){var n=this;this.form.valueChanges.subscribe(function(o){n.schema.forEach(function(n){o[n.key]!==undefined&&(n.value=o[n.key])}),n.handleEmitters()})},n.prototype.createGroup=function(n){var t={};return n&&n.forEach(function(n){var o={value:n.value!==undefined?n.value:"",disabled:n.disabled||!1};t[n.key]=n.required?new e.FormControl(o,e.Validators.required):new e.FormControl(o)}),new e.FormGroup(t)},n.prototype.handleEmitters=function(){var n=this.form.valid;this.submitButtonConfig=this.getSubmitButtonConfig({disabled:!n}),this.formValid.emit(n),this.form.dirty&&(this.formChange.emit({raw:this.form.getRawValue(),schema:this.schema}),this.formTouch.emit(this.form.dirty))},n.prototype.getDefaultSettings=function(){var n=m({},{nzGutter:8,itemClass:"",nzSpanLabel:8,labelClass:"",nzSpanControl:16,fieldClass:""},{submitButton:{show:!0,label:"Submit",disabled:!1}});return JSON.parse(JSON.stringify(n))},n.prototype.getSubmitButtonConfig=function(n){void 0===n&&(n={});var o=Object.assign(m({key:"submit",type:"button"},this.formSettings.submitButton),n);return this.formSettings.submitButton=o,JSON.parse(JSON.stringify(o))},n.prototype.mergeFormSettings=function(n,o){var t=o.submitButton||{},e=Object.assign(n.submitButton,t),i=Object.assign(n,o);return i.submitButton=e,i},n.decorators=[{type:c.Component,args:[{selector:"ngx-antd-json-schema-form",template:'<form *ngIf="form" class="json-schema-form" nz-form [formGroup]="form" (submit)="handleSubmit($event)">\n  <ng-container *ngFor="let field of schema" dynamicField [config]="field" [settings]="formSettings" [group]="form">\n  </ng-container>\n  <json-schema-form-button\n    *ngIf="formSettings.submitButton.show"\n    [group]="form"\n    [config]="submitButtonConfig"\n    [settings]="formSettings"\n  >\n  </json-schema-form-button>\n</form>\n',encapsulation:c.ViewEncapsulation.None,styles:[".json-form-schema-field.ant-form-item{padding-bottom:0;margin-bottom:0}"]}]}],n.ctorParameters=function(){return[]},n.propDecorators={schema:[{type:c.Input}],settings:[{type:c.Input}],registeredForm:[{type:c.Output}],formChange:[{type:c.Output}],formTouch:[{type:c.Output}],submit:[{type:c.Output}],formValid:[{type:c.Output}]},n}(),d=function(){function n(){}return n.prototype.ngOnChanges=function(n){n.group&&(this.group=n.group.currentValue),n.config&&(this.config=n.config.currentValue),n.settings&&(this.settings=n.settings.currentValue)},n.decorators=[{type:c.Component,args:[{selector:"json-schema-form-button",template:'<nz-form-item\n  class="json-form-schema-field json-schema-form-button {{ config.itemClass ? config.itemClass : settings.itemClass }}"\n  [formGroup]="group"\n  nz-row\n  [nzGutter]="config.nzGutter ? config.nzGutter : settings.nzGutter"\n  nzFlex\n>\n  <nz-form-control\n    nz-col\n    [nzSpan]="config.nzSpanControl ? config.nzSpanControl : settings.nzSpanControl"\n    [nzOffset]="config.nzSpanLabel ? config.nzSpanLabel : settings.nzSpanLabel"\n  >\n    <button\n      nz-button\n      nzType="primary"\n      [disabled]="config.disabled"\n      type="submit"\n      [ngClass]="config.fieldClass ? config.fieldClass : settings.fieldClass"\n    >\n      {{ config.label }}\n    </button>\n  </nz-form-control>\n</nz-form-item>\n',styles:[".json-form-schema-field.ant-form-item{padding-bottom:0;margin-bottom:0}"]}]}],n.propDecorators={group:[{type:c.Input}],config:[{type:c.Input}],settings:[{type:c.Input}]},n}(),z=function(){function n(){}return n.decorators=[{type:c.Component,args:[{selector:"json-schema-form-input",template:'<nz-form-item\n  *ngIf="!config.hidden"\n  class="json-form-schema-field {{ config.itemClass ? config.itemClass : settings.itemClass }}"\n  [formGroup]="group"\n  nz-row\n  [nzGutter]="config.nzGutter ? config.nzGutter : settings.nzGutter"\n  nzFlex\n>\n  <nz-form-label\n    nz-col\n    [nzSpan]="config.nzSpanLabel ? config.nzSpanLabel : settings.nzSpanLabel"\n    [nzRequired]="config.required"\n    [nzFor]="config.key"\n    [ngClass]="config.labelClass ? config.labelClass : settings.labelClass"\n  >\n    <span [innerHTML]="config.label"></span>\n  </nz-form-label>\n  <nz-form-control nz-col [nzSpan]="config.nzSpanControl ? config.nzSpanControl : settings.nzSpanControl">\n    <input\n      nz-input\n      [readonly]="config.readonly"\n      [formControlName]="config.key"\n      [id]="config.key"\n      [placeholder]="config.placeholder || config.label"\n      [ngClass]="config.fieldClass ? config.fieldClass : settings.fieldClass"\n    />\n    <nz-form-explain *ngIf="group.get(config.key).dirty && group.get(config.key).errors">\n      Please enter {{ config.label }}\n    </nz-form-explain>\n  </nz-form-control>\n</nz-form-item>\n',styles:[".json-form-schema-field.ant-form-item{padding-bottom:0;margin-bottom:0}"]}]}],n}(),h=function(){function n(){}return n.decorators=[{type:c.Component,args:[{selector:"json-schema-form-checkbox",template:'<nz-form-item\n  *ngIf="!config.hidden"\n  class="json-form-schema-field {{ config.itemClass ? config.itemClass : settings.itemClass }}"\n  [formGroup]="group"\n  nz-row\n  [nzGutter]="config.nzGutter ? config.nzGutter : settings.nzGutter"\n  nzFlex\n>\n  <nz-form-label\n    nz-col\n    [nzSpan]="config.nzSpanLabel ? config.nzSpanLabel : settings.nzSpanLabel"\n    [nzRequired]="config.required"\n    [nzFor]="config.key"\n    [ngClass]="config.labelClass ? config.labelClass : settings.labelClass"\n  >\n    {{ config.label }}\n  </nz-form-label>\n  <nz-form-control nz-col [nzSpan]="config.nzSpanControl ? config.nzSpanControl : settings.nzSpanControl">\n    <label\n      nz-checkbox\n      [formControlName]="config.key"\n      [ngModel]="config.value"\n      [ngClass]="config.fieldClass ? config.fieldClass : settings.fieldClass"\n    >\n    </label>\n  </nz-form-control>\n</nz-form-item>\n',styles:[".json-form-schema-field.ant-form-item{padding-bottom:0;margin-bottom:0}"]}]}],n}(),b=function(){function n(){}return n.decorators=[{type:c.Component,args:[{selector:"json-schema-form-select",template:'<nz-form-item\n  *ngIf="!config.hidden"\n  class="json-form-schema-field {{ config.itemClass ? config.itemClass : settings.itemClass }}"\n  [formGroup]="group"\n  nz-row\n  [nzGutter]="config.nzGutter ? config.nzGutter : settings.nzGutter"\n  nzFlex\n>\n  <nz-form-label\n    nz-col\n    [nzSpan]="config.nzSpanLabel ? config.nzSpanLabel : settings.nzSpanLabel"\n    [nzRequired]="config.required"\n    [nzFor]="config.key"\n    [ngClass]="config.labelClass ? config.labelClass : settings.labelClass"\n  >\n    <span [innerHTML]="config.label"></span>\n  </nz-form-label>\n  <nz-form-control nz-col [nzSpan]="config.nzSpanControl ? config.nzSpanControl : settings.nzSpanControl">\n    <nz-select\n      [formControlName]="config.key"\n      [(ngModel)]="config.value"\n      nzAllowClear\n      [nzPlaceHolder]="config.placeholder || config.label"\n      [ngClass]="config.fieldClass ? config.fieldClass : settings.fieldClass"\n    >\n      <nz-option\n        *ngFor="let option of config.options"\n        [nzValue]="option.value"\n        [nzLabel]="option.label"\n        [nzDisabled]="option.disabled"\n      >\n      </nz-option>\n    </nz-select>\n    <nz-form-explain *ngIf="group.get(config.key).dirty && group.get(config.key).errors">\n      Please choose an option\n    </nz-form-explain>\n  </nz-form-control>\n</nz-form-item>\n',styles:[".json-form-schema-field.ant-form-item{padding-bottom:0;margin-bottom:0}"]}]}],n}(),C=function(){function n(){}return n.decorators=[{type:c.Component,args:[{selector:"json-schema-form-textarea",template:'<nz-form-item\n  *ngIf="!config.hidden"\n  class="json-form-schema-field {{ config.itemClass ? config.itemClass : settings.itemClass }}"\n  [formGroup]="group"\n  nz-row\n  [nzGutter]="config.nzGutter ? config.nzGutter : settings.nzGutter"\n  nzFlex\n>\n  <nz-form-label\n    nz-col\n    [nzSpan]="config.nzSpanLabel ? config.nzSpanLabel : settings.nzSpanLabel"\n    [nzRequired]="config.required"\n    [nzFor]="config.key"\n    [ngClass]="config.labelClass ? config.labelClass : settings.labelClass"\n  >\n    {{ config.label }}\n  </nz-form-label>\n  <nz-form-control nz-col [nzSpan]="config.nzSpanControl ? config.nzSpanControl : settings.nzSpanControl">\n    <textarea\n      rows="6"\n      nz-input\n      [readonly]="config.readonly"\n      [formControlName]="config.key"\n      [id]="config.key"\n      [placeholder]="config.placeholder || config.label"\n      [ngClass]="config.fieldClass ? config.fieldClass : settings.fieldClass"\n    ></textarea>\n    <nz-form-explain *ngIf="group.get(config.key).dirty && group.get(config.key).errors">\n      Please enter {{ config.label }}\n    </nz-form-explain>\n  </nz-form-control>\n</nz-form-item>\n',styles:[".json-form-schema-field.ant-form-item{padding-bottom:0;margin-bottom:0}"]}]}],n}(),y=function(){function n(){}return n.prototype.onContentChanged=function(){this.codeViewChild.nativeElement.innerHTML=this.config.value?this.encodeEntities(this.config.value):this.rawViewChild.nativeElement.innerHTML,Prism.highlightElement(this.codeViewChild.nativeElement)},n.prototype.ngAfterViewInit=function(){this.observer.observe(this.rawViewChild.nativeElement,{characterData:!0,childList:!0,subtree:!0}),this.onContentChanged()},n.prototype.ngOnChanges=function(){this.onContentChanged()},n.prototype.ngAfterContentInit=function(){this.observer=new MutationObserver(this.onContentChanged.bind(this))},n.prototype.ngOnDestroy=function(){this.observer&&this.observer.disconnect()},n.prototype.encodeEntities=function(n){return n.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")},n.decorators=[{type:c.Component,args:[{selector:"json-schema-form-prism",template:'<nz-form-item\n  *ngIf="!config.hidden"\n  class="json-form-schema-field {{ config.itemClass ? config.itemClass : settings.itemClass }}"\n  [formGroup]="group"\n  nz-row\n  [nzGutter]="config.nzGutter ? config.nzGutter : settings.nzGutter"\n  nzFlex\n>\n  <nz-form-label\n    nz-col\n    [nzSpan]="config.nzSpanLabel ? config.nzSpanLabel : settings.nzSpanLabel"\n    [nzRequired]="config.required"\n    [nzFor]="config.key"\n    [ngClass]="config.labelClass ? config.labelClass : settings.labelClass"\n  >\n    {{ config.label }}\n  </nz-form-label>\n  <nz-form-control nz-col [nzSpan]="config.nzSpanControl ? config.nzSpanControl : settings.nzSpanControl">\n    <div hidden #raw style="display: none">\n      <ng-content></ng-content>\n    </div>\n    <pre class="prism-pre" [ngClass]="config.fieldClass ? config.fieldClass : settings.fieldClass">\n      <code class="prism-code language-{{config.language}}" #code></code>\n    </pre>\n  </nz-form-control>\n</nz-form-item>\n',styles:[".json-form-schema-field.ant-form-item{padding-bottom:0;margin-bottom:0}pre.prism-pre{white-space:inherit;background:#f5f5f5;border:1px solid #d9d9d9;border-radius:4px}code.prism-code{word-break:break-all;white-space:pre-wrap}"]}]}],n.ctorParameters=function(){return[]},n.propDecorators={rawViewChild:[{type:c.ViewChild,args:["raw"]}],codeViewChild:[{type:c.ViewChild,args:["code"]}]},n}(),S=function(){function n(){}return n.decorators=[{type:c.Component,args:[{selector:"json-schema-form-radio",template:'<nz-form-item\n  *ngIf="!config.hidden"\n  class="json-form-schema-field {{ config.itemClass ? config.itemClass : settings.itemClass }}"\n  [formGroup]="group"\n  nz-row\n  [nzGutter]="config.nzGutter ? config.nzGutter : settings.nzGutter"\n  nzFlex\n>\n  <nz-form-label\n    nz-col\n    [nzSpan]="config.nzSpanLabel ? config.nzSpanLabel : settings.nzSpanLabel"\n    [nzRequired]="config.required"\n    [nzFor]="config.key"\n    [ngClass]="config.labelClass ? config.labelClass : settings.labelClass"\n  >\n    {{ config.label }}\n  </nz-form-label>\n  <nz-form-control nz-col [nzSpan]="config.nzSpanControl ? config.nzSpanControl : settings.nzSpanControl">\n    <nz-radio-group\n      [formControlName]="config.key"\n      [(ngModel)]="config.value"\n      nzName="{{ config.key }}-radio-group"\n      [nzButtonStyle]="\'solid\'"\n    >\n      <label\n        [hidden]="config.type === \'radio-button\'"\n        *ngFor="let option of config.options"\n        nz-radio\n        [nzValue]="option.value"\n        [ngClass]="config.fieldClass ? config.fieldClass : settings.fieldClass"\n      >\n        {{ option.label }}\n      </label>\n      <label\n        [hidden]="config.type === \'radio\'"\n        *ngFor="let option of config.options"\n        nz-radio-button\n        [nzValue]="option.value"\n        [ngClass]="config.fieldClass ? config.fieldClass : settings.fieldClass"\n      >\n        {{ option.label }}\n      </label>\n    </nz-radio-group>\n  </nz-form-control>\n</nz-form-item>\n',styles:[".json-form-schema-field.ant-form-item{padding-bottom:0;margin-bottom:0}"]}]}],n}(),v=function(){function n(n){this.sanitizer=n}return n.prototype.sanitizeStyle=function(n){if(n)return this.sanitizer.bypassSecurityTrustStyle(n)},n.decorators=[{type:c.Component,args:[{selector:"json-schema-form-icon",template:'<nz-form-item\n  *ngIf="!config.hidden"\n  class="json-form-schema-field {{ config.itemClass ? config.itemClass : settings.itemClass }}"\n  [formGroup]="group"\n  nz-row\n  [nzGutter]="config.nzGutter ? config.nzGutter : settings.nzGutter"\n  nzFlex\n>\n  <nz-form-label\n    nz-col\n    [nzSpan]="config.nzSpanLabel ? config.nzSpanLabel : settings.nzSpanLabel"\n    [nzRequired]="config.required"\n    [nzFor]="config.key"\n    [ngClass]="config.labelClass ? config.labelClass : settings.labelClass"\n  >\n    {{ config.label }}\n  </nz-form-label>\n  <nz-form-control nz-col [nzSpan]="config.nzSpanControl ? config.nzSpanControl : settings.nzSpanControl">\n    <i\n      nz-icon\n      [nzType]="config.icon.type"\n      [nzTheme]="config.icon.theme"\n      [nzSpin]="config.icon.spin"\n      [nzTwotoneColor]="config.icon.twotoneColor"\n      [nzIconfont]="config.icon.iconFont"\n      [nzRotate]="config.icon.rotate"\n      [ngClass]="config.icon.class"\n    >\n    </i>\n  </nz-form-control>\n</nz-form-item>\n',styles:[".json-form-schema-field.ant-form-item{padding-bottom:0;margin-bottom:0}"]}]}],n.ctorParameters=function(){return[{type:g.DomSanitizer}]},n}(),w={button:d,input:z,select:b,checkbox:h,radio:S,"radio-button":S,textarea:C,prism:y,icon:v},j=function(){function n(n,o){this.resolver=n,this.container=o}return Object.defineProperty(n.prototype,"isValid",{get:function(){return this.group.controls[this.config.key].valid},enumerable:!0,configurable:!0}),n.prototype.ngOnChanges=function(){this.component&&(this.component.instance.group=this.group,this.component.instance.config=this.config,this.component.instance.settings=this.settings)},n.prototype.ngOnInit=function(){if(!w[this.config.type]){var n=Object.keys(w).join(", ");throw new Error("Trying to use an unsupported type ("+this.config.type+").\n        Supported types: "+n)}var o=this.resolver.resolveComponentFactory(w[this.config.type]);this.component=this.container.createComponent(o),this.component.instance.group=this.group,this.component.instance.config=this.config,this.component.instance.settings=this.settings},n.decorators=[{type:c.Directive,args:[{selector:"[dynamicField]"}]}],n.ctorParameters=function(){return[{type:c.ComponentFactoryResolver},{type:c.ViewContainerRef}]},n.propDecorators={group:[{type:c.Input}],config:[{type:c.Input}],settings:[{type:c.Input}]},n}();t.registerLocaleData(r);var G=[d,z,b,h,S,C,y,v],F=i.en_US,k=function(){function n(){}return n.decorators=[{type:c.NgModule,args:[{declarations:function t(){for(var n=[],o=0;o<arguments.length;o++)n=n.concat(p(arguments[o]));return n}([u,j],G),imports:[g.BrowserModule,i.NgZorroAntdModule,e.FormsModule,e.ReactiveFormsModule,o.BrowserAnimationsModule],providers:[{provide:i.NZ_I18N,useValue:F}],entryComponents:G,exports:[u]}]}],n}();n.NgxAntdJsonSchemaFormComponent=u,n.NgxAntdJsonSchemaFormModule=k,n.ɵb=d,n.ɵe=h,n.ɵi=v,n.ɵc=z,n.ɵh=y,n.ɵf=S,n.ɵd=b,n.ɵg=C,n.ɵa=j,Object.defineProperty(n,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-antd-json-schema-form.umd.min.js.map