tibas-form-json-generator/bundles/tibas-form-json-generator.umd.min.js

Fully configured form generator via JSON data with a custom template for each attribute + onChange events.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("sweetalert2"),require("@ngx-translate/core"),require("@angular/common"),require("@angular/forms"),require("@angular/common/http"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("tibas-form-json-generator",["exports","@angular/core","sweetalert2","@ngx-translate/core","@angular/common","@angular/forms","@angular/common/http","@angular/platform-browser"],t):t((e=e||self)["tibas-form-json-generator"]={},e.ng.core,e.swal,e.core$1,e.ng.common,e.ng.forms,e.ng.common.http,e.ng.platformBrowser)}(this,(function(e,t,n,i,a,r,o,l){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;var s=function(){this.children=[],this.attrValues=[]};var d=function(){};var c=function(){function n(n){this.injector=n,this.mode="VIEW",this.tibasFormIsValidated=new t.EventEmitter,this.listSourceTypes=[],e.InjectorInstance=this.injector,this.listSourceTypes.push({id:1,name:"OK"}),this.listSourceTypes.push({id:2,name:"KO"})}return n.prototype.ngOnInit=function(){},n.prototype.ngOnChanges=function(e){},n.prototype.formChanged=function(){null==document.querySelector("#generatedForm .ng-invalid")?this.tibasFormIsValidated.emit(!0):this.tibasFormIsValidated.emit(!1)},n.prototype.addItem=function(e){var t=this;this.item=new s;var n=Math.floor(100*Math.random())+1;this.item.code="item_"+(e.items.length+1)+"_R"+n,e.attributes.forEach((function(e){var n=new d;(n=Object.assign({},e)).template=e.templateAtt,n.value="",n.required=!1,t.item.attrValues.push(n)})),e.items.push(this.item)},n.prototype.changedtrigger=function(e){this.formChanged()},n.decorators=[{type:t.Component,args:[{selector:"tibas-form-json-generator",template:'<form #generatedForm="ngForm" name="generatedForm" id="generatedForm" (change)="formChanged()"\n      (keyup)="formChanged()">\n  <div class="card">\n    <div class="card-header border-0" *ngIf="formModel?.header">\n      <section>\n        <div class="row">\n          \x3c!--<label class="control-label">{{headerAtt?.label}} :</label>\n          <input [disabled]="headerAtt.disable" [hidden]="headerAtt.hidden" [required]="headerAtt.required && !headerAtt.hidden" *ngIf="headerAtt.typeSource==\'FREE_ENTRY\'" type="{{headerAtt.typeSourceFreeEntry}}" class=\'\' [(ngModel)]="headerAtt.value" name="{{headerAtt?.code}}" maxlength="{{headerAtt?.maxlength?headerAtt?.maxlength:255}}"/>\n          <select [disabled]="headerAtt.disable" [hidden]="headerAtt.hidden" [required]="headerAtt.required" *ngIf="headerAtt.typeSource==\'REF\'"  class=\'\' [(ngModel)]="headerAtt.value">\n            <option *ngFor="let ref of headerAtt?.refValues" value="{{ref}}" >{{ref}}</option>\n          </select>--\x3e\n          <div [ngClass]="attribute.cssClass" [position]="\'HEADER\'" [mode]="mode" dynamic-template *ngFor="let attribute of formModel?.header"\n               [template]="attribute.template" (changedtrigger)="changedtrigger($event)"\n               [attribute]="attribute" [headerOrFooter]="formModel"></div>\n        </div>\n      </section>\n    </div>\n    <div class="card-body border-0 content table-responsive" *ngIf="formModel?.body && formModel?.body?.length>0">\n\n      <div class="tabset" *ngIf="mode==\'VIEW\' || mode==\'READWITHTAB\'">\n        \x3c!-- Tabs --\x3e\n        <ng-container  *ngFor="let tab of formModel?.body">\n          <input class="tabInput" type="radio" name="tabset" id="{{tab.id}}" [attr.aria-controls]="tab.id">\n          <label class="labelInput" for="{{tab.id}}">{{tab.label}}</label>\n        </ng-container>\n\n\n        <div class="tab-panels">\n          <section *ngFor="let checklist of formModel?.body;" id="{{checklist.id}}" class="tab-panel table-responsive">\n\n            <div class="tbl-header">\n              <div class="row">\n                <div class="col-5"></div>\n                <div class="col" [mode]="mode" dynamic-template *ngFor="let attribute of checklist?.attributes" (changedtrigger)="changedtrigger($event)"\n                     [template]="attribute.template" [attribute]="attribute"></div>\n\n              </div>\n            </div>\n            <div class="tbl-content">\n\n              <div app-item-form *ngFor="let item of checklist?.items" [level]="1" [mode]="mode" [child]="item" (changedtrigger)="changedtrigger($event)"></div>\n\n            </div>\n\n          </section>\n\n        </div>\n\n      </div>\n\n      <div *ngIf="mode==\'READ\'">\n\n          <section *ngFor="let checklist of formModel?.body;" class="tab-panel table-responsive">\n\n            <div class="tbl-header">\n              <div class="row">\n                <div class="col-5"></div>\n                <div class="col" [mode]="mode" dynamic-template *ngFor="let attribute of checklist?.attributes" (changedtrigger)="changedtrigger($event)"\n                     [template]="attribute.template" [attribute]="attribute"></div>\n\n              </div>\n            </div>\n            <div class="tbl-content">\n\n              <div app-item-form *ngFor="let item of checklist?.items" [level]="1" [mode]="mode" [child]="item" (changedtrigger)="changedtrigger($event)"></div>\n\n            </div>\n\n          </section>\n\n      </div>\n\n      <div *ngIf="mode==\'EDIT\'">\n          <section *ngFor="let checklist of formModel?.body;" class="tab-panel table-responsive">\n\n            <div class="tbl-header">\n              <div class="row">\n                <div class="col-5"></div>\n                <div class="col" [position]="\'BODYTH\'" [mode]="mode" dynamic-template *ngFor="let attribute of checklist?.attributes" (changedtrigger)="changedtrigger($event)"\n                     [template]="attribute.template" [attribute]="attribute"></div>\n\n              </div>\n            </div>\n            <div class="tbl-content">\n\n              <div class="row" style="height: 1.5rem;padding-left: 8px; " *ngIf="mode==\'EDIT\'">\n                <i class="fa fa-plus faplusitem" style="color: #616a71"  (click)="addItem(checklist);formChanged()"></i>\n              </div>\n\n              <div app-item-form *ngFor="let item of checklist?.items" [parentList]="checklist.items" [level]="1" [mode]="mode" (changedtrigger)="changedtrigger($event)" [listSourceTypes]="listSourceTypes" [child]="item"></div>\n\n\n            </div>\n\n          </section>\n      </div>\n\n    </div>\n    <div class="card-footer border-0" *ngIf="formModel?.footer">\n      <section>\n        \x3c!--<label class=\'control-label\'>{{attribute?.label}} :</label>\n        <input [disabled]=\'attribute.disable\' [hidden]=\'attribute.hidden\' [required]=\'attribute.required && !attribute.hidden\' [(ngModel)]=\'attribute.value\' name=\'{{attribute?.code}}\' maxlength=\'{{attribute?.maxlength?attribute?.maxlength:255}}\'/>\n        <select [disabled]=\'attribute.disable\' [hidden]=\'attribute.hidden\' [required]=\'attribute.required && !attribute.hidden\' name=\'{{attribute?.code}}\' [(ngModel)]=\'attribute.value\'>\n          <option *ngFor=\'let ref of attribute?.refValues\' value=\'{{ref}}\' >{{ref}}</option>\n        </select>--\x3e\n        <div [ngClass]="attribute.cssClass"  [position]="\'FOOTER\'" [mode]="mode" dynamic-template *ngFor="let attribute of formModel?.footer"\n             [template]="attribute.template" (changedtrigger)="changedtrigger($event)"\n             [attribute]="attribute" [headerOrFooter]="formModel"></div>\n      </section>\n    </div>\n  </div>\n\n</form>\n\n\n\n',encapsulation:t.ViewEncapsulation.Emulated,styles:['h1{font-size:30px;color:#000;text-transform:uppercase;font-weight:300;text-align:center;margin-bottom:15px}table{width:100%;table-layout:fixed}.tbl-header{padding:.4rem;background:#f6f9fc;border-bottom:1px solid #ccc}.tbl-content{height:auto;overflow-x:auto;margin-top:0;border:1px solid rgba(255,255,255,.3)}.col-5,.tbl-header .row .col{text-align:left;font-weight:500;font-size:12px;color:#414950;text-transform:uppercase}.tbl-header .row{color:#23272c;font-size:.4rem;height:31px;text-transform:uppercase;letter-spacing:1px}.col,.col-5{font-size:12px;color:#666;padding-top:10px}.col-5,.tbl-content .row .col{margin:10px!important;padding:15px;text-align:left;vertical-align:middle;font-weight:300;font-size:12px;color:#000;border-bottom:1px solid rgba(255,255,255,.1)}.tbl-content .col{padding-bottom:5px}.tbl-content .row{border-bottom:1px solid #f3f3f3}.item-label{display:inline-block;white-space:nowrap!important;overflow:scroll}section{margin:-7px 5px 10px 10px}button,input,select{overflow:visible;border:1px solid gray;text-align:center;border-radius:6px;height:25px;width:130px;margin-bottom:10px;font-size:small}.nav-pills{width:450px}.nav-item{width:50%}.nav-pills .nav-link{font-weight:700;padding-top:13px;text-align:center;background:#343436;color:#fff;border-radius:30px;height:100px}.nav-pills .nav-link.active{background:#fff;color:#000}.tab-content{position:absolute;width:450px;height:auto;margin-top:-50px;background:#fff;color:#000;border-radius:30px;z-index:1000;box-shadow:0 10px 10px rgba(0,0,0,.4);padding:30px;margin-bottom:50px}.tabset>input[type=radio]{position:absolute;left:-200vw}.tabset .tab-panel{display:none}.tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,.tabset>input:nth-child(11):checked~.tab-panels>.tab-panel:nth-child(6),.tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),.tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),.tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),.tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5){display:block}body{font:300 16px/1.5em Overpass,"Open Sans",Helvetica,sans-serif;color:#333;padding:30px}.tabset>label{position:relative;display:inline-block;padding:15px 15px 25px;border:1px solid transparent;border-bottom:0;cursor:pointer;font-weight:600}.tabset>label::after{content:"";position:absolute;left:15px;bottom:10px;width:22px;height:4px;background:#8d8d8d}.tabset>input:focus+label,.tabset>label:hover{color:#06c}.tabset>input:checked+label::after,.tabset>input:focus+label::after,.tabset>label:hover::after{background:#06c}.tabset>input:checked+label{border-color:#ccc;border-bottom:1px solid #fff;margin-bottom:5px;border-radius:20px 20px 0 0}.tab-panel{border-top:1px solid #ccc;margin-left:0}*,:after,:before{box-sizing:border-box}.tabset{margin-left:20px}.tbl-content{padding-left:10px}.card-footer,.card-header{background-color:unset}.faplusitem{margin-right:1rem;cursor:pointer}.additeminput{width:60%!important;margin-right:1rem}.labeleditable{display:inline-block;white-space:nowrap!important;overflow:scroll}']}]}],n.ctorParameters=function(){return[{type:t.Injector}]},n.propDecorators={formModel:[{type:t.Input}],mode:[{type:t.Input}],tibasFormIsValidated:[{type:t.Output}]},n}();var p=function(){function e(e){this.translateService=e,this.changedtrigger=new t.EventEmitter,this.listSourceTypes=[]}return e.prototype.ngOnInit=function(){},e.prototype.additem=function(e){var t=this;this.item=new s;var n=Math.floor(100*Math.random())+1;this.item.code=e.code+"_"+(e.children.length+1)+"_R"+n,e.attrValues.forEach((function(e){var n=new d;(n=Object.assign({},e)).required=!1,n.value="",t.item.attrValues.push(n)})),e.children.push(this.item)},e.prototype.remove=function(e){var t=this,i=this.parentList.indexOf(e);-1!==i&&n({title:this.translateService.instant("toast.success.message.ARE_YOU_SURE"),text:this.translateService.instant("toast.success.message.DELETE_ITEM"),type:"warning",showCancelButton:!0,confirmButtonColor:"rgba(249,58,58,0.84)",cancelButtonColor:"rgba(48,133,214,0.88)",cancelButtonText:this.translateService.instant("toast.success.message.CANCEL"),confirmButtonText:this.translateService.instant("toast.success.message.YES_DELETE")}).then((function(e){e.value&&(t.parentList.splice(i,1),t.triggerchange())}))},e.prototype.triggerchange=function(){this.changedtrigger.emit(!0)},e.prototype.moveup=function(e){var t=this.parentList.indexOf(e,0)-1,n=this.parentList.indexOf(e,0);if(t>=this.parentList.length)for(var i=t-this.parentList.length+1;i--;)this.parentList.push(void 0);this.parentList.splice(t,0,this.parentList.splice(n,1)[0])},e.prototype.movedown=function(e){var t=this.parentList.indexOf(e,0)+1,n=this.parentList.indexOf(e,0);if(t>=this.parentList.length)for(var i=t-this.parentList.length+1;i--;)this.parentList.push(void 0);this.parentList.splice(t,0,this.parentList.splice(n,1)[0])},e.decorators=[{type:t.Component,args:[{selector:"app-item-form,[app-item-form]",template:'<div class="row">\n  <div [ngStyle]="{\'padding-left\':\'calc(\'+level+\'% + 1%)\'}" class="col-5 item-label">\n    <div style="display: inline-block;\n  width: 100%;\n    white-space: nowrap!important;\n    overflow: scroll;">\n\n      <i class="fa fa-plus faplusitem" style="margin-right: 0.5rem;\n    position: relative;\n    top: -15px;color: #8897aa;\n    cursor: pointer;" *ngIf="mode==\'EDIT\'" (click)="additem(child)"></i>\n      <i class="fa fa-minus faplusitem" style="margin-right: 0.5rem;\n    position: relative;\n    top: -15px;color: #8897aa;\n    cursor: pointer;" *ngIf="mode==\'EDIT\'" (click)="remove(child)"></i>\n\n      <div style="\n    width: 7px;\n    position: relative;\n    top: -5px;\n    display: inline-block;\n    margin-right: 0.5rem;"\n           *ngIf="mode==\'EDIT\' && (parentList.indexOf(child,0)>0 || parentList.indexOf(child,0)<parentList.length-1)"\n      >\n        <div>\n          <i style="cursor: pointer;color: #8897aa;" *ngIf="parentList.indexOf(child,0)>0" (click)="moveup(child)"\n             class="fa fa-caret-up"></i>\n        </div>\n        <div>\n          <i style="cursor: pointer;color: #8897aa;" *ngIf="parentList.indexOf(child,0)<parentList.length-1"\n             (click)="movedown(child)" class="fa fa-caret-down"></i>\n          <i *ngIf="!(parentList.indexOf(child,0)<parentList.length-1)" class="fa "></i>\n        </div>\n      </div>\n\n      <span style="display: inline-block;white-space: nowrap!important;width: 100%;margin-right: 1rem;padding: 1px;"\n            *ngIf="mode==\'VIEW\' || mode==\'READ\' || mode==\'READWITHTAB\'">{{child.label}}</span>\n      <app-label-edit *ngIf="mode==\'EDIT\'" [label]="\'Nom item\'" [(ngModel)]="child.label"></app-label-edit>\n      <select *ngIf="mode==\'EDIT\'" class="additemselect attInput" style="display: inline-block;width: 80px;position: relative;\n    top: -17px;" [(ngModel)]="child.categoryId" [required]="true"\n      >\n        <option value="" selected disabled>Type</option>\n        <option *ngFor="let type of listSourceTypes"\n                value="{{type.id}}">{{type.name}}</option>\n      </select>\n    </div>\n  </div>\n  \x3c!--<div class="col" *ngFor="let attribute of child?.attrValues">\n    <input [disabled]="attribute.disable" [hidden]="attribute.hidden" [required]="attribute.required && !attribute.hidden" *ngIf="attribute.typeSource==\'FREE_ENTRY\'"  [(ngModel)]="attribute.value">\n    <select [disabled]="attribute.disable" [hidden]="attribute.hidden" [required]="attribute.required" [(ngModel)]="attribute.value">\n      <option *ngFor="let ref of attribute.refValues" value="{{ref}}" >{{ref}}</option>\n    </select>\n  </div>--\x3e\n\n  <div class="col" [position]="\'BODY\'" [mode]="mode" dynamic-template [level]="level"\n       *ngFor="let attribute of child?.attrValues" [template]="attribute.template" (changedtrigger)="triggerchange()"\n       [attribute]="attribute" [item]="child"></div>\n</div>\n<div app-item-form *ngFor="let c of child?.children" [parentList]="child.children" (changedtrigger)="triggerchange()"\n     [listSourceTypes]="listSourceTypes"\n     [level]="level+1" [mode]="mode" [child]="c"></div>\n\n',styles:[""]}]}],e.ctorParameters=function(){return[{type:i.TranslateService}]},e.propDecorators={child:[{type:t.Input}],level:[{type:t.Input}],mode:[{type:t.Input}],changedtrigger:[{type:t.Output}],parentList:[{type:t.Input}],listSourceTypes:[{type:t.Input}]},e}();var u="SUM",h="AVG",m="MULTIP",f=function(){function n(){}return n.getData=function(t){return e.InjectorInstance.get(o.HttpClient).get(t)},n.decorators=[{type:t.Injectable}],n.ctorParameters=function(){return[]},n}(),g="CALCULATED_ENTRY",b=function(){function e(e,n,i,a){this.compiler=e,this.injector=n,this.moduleRef=i,this.referencesService=a,this.changedtrigger=new t.EventEmitter,this.script=""}return e.prototype.ngAfterViewInit=function(){this.createComponentFromRaw(this.template,this.attribute,this.item,this.headerOrFooter,this.position)},e.prototype.createComponentFromRaw=function(e,n,i,o,l){var s=this;if(e){e=n.onChange?e.split("onChange-Function").join(n.onChange):e.split('(change)="onChange-Function"').join(""),n.hiddenlevels&&this.level&&n.hiddenlevels.length>0&&(n.hidden=n.hiddenlevels.indexOf(this.level)>-1,n.hidden&&(n.required=!1)),n&&"EDIT"===this.mode&&(n.required=!1),(n.typeSource===g&&i||"READ"===this.mode||"READWITHTAB"===this.mode)&&(n.disable=!0,n.required=!1);var d=t.Component({template:e,styles:[]})((new function(){this.attribute=n,this.item=i,this.reloadData=function(e,t){var i;"BODY"!==l&&null!=o&&(o.header.length>0||o.footer.length>0)&&n.value&&e&&t&&(n.refValues.forEach((function(e){e.label===n.value&&(i=e.id)})),i&&f.getData(t+"/"+i).subscribe((function(t){var n=[];o.header.forEach((function(t){t.refTable===e&&n.push(t)})),o.footer.forEach((function(t){t.refTable===e&&n.push(t)})),n.length>0&&n.forEach((function(e){e.refValues=[],e.value="",t.data&&t.data.length>0&&(e.refValues=t.data)}))})))}}).constructor),c=t.NgModule({imports:[a.CommonModule,r.FormsModule,r.ReactiveFormsModule],declarations:[d],providers:[f]})((function(){}));this.compiler.compileModuleAndAllComponentsAsync(c).then((function(e){var t=e.componentFactories[0];if(s.cmpRef=t.create(s.injector,[],null,s.moduleRef),s.cmpRef.instance.name="tibas-dynamic-component",s.valueITtempl.insert(s.cmpRef.hostView),s.changedtrigger.emit(!0),n.typeSource===g&&i){if(s.script=" $(document).ready(function(){  \n",n.forumlaItems&&n.forumlaItems.function&&i.children&&i.children.length>0){var a=" \n";i.children.forEach((function(e){s.script+='$("#'+e.code+"_"+n.code+'").change('+i.code+"_"+n.code+"); \n",n.forumlaItems.function===u&&(a+='if ($("#'+e.code+"_"+n.code+'").val()) {\nvar val = parseInt($("#'+e.code+"_"+n.code+'").val(),10);\nfinalValue += (!isNaN(val) ? val : 0);\n}\n'),n.forumlaItems.function===h&&(a+='if ($("#'+e.code+"_"+n.code+'").val()) {\nvar val = parseInt($("#'+e.code+"_"+n.code+'").val(),10);\nfinalValue += (!isNaN(val) ? val : 0);\n}\n'),n.forumlaItems.function===m&&(a+='if ($("#'+e.code+"_"+n.code+'").val()) {\nvar val = parseInt($("#'+e.code+"_"+n.code+'").val(),10);\nfinalValue = finalValue * (!isNaN(val) ? val : 0);\n}\n')}));var r="",o="";n.forumlaItems.function===u&&(r="var finalValue = 0;"),n.forumlaItems.function===h&&(r="var finalValue = 0;",o=" finalValue = finalValue/"+i.children.length+"\n"),n.forumlaItems.function===m&&(r="var finalValue = 1;");var l=" function "+i.code+"_"+n.code+"(){ \n "+r+" \n "+a+" \n "+o+' \n  $("#'+i.code+"_"+n.code+'").val(finalValue);\n  $("#'+i.code+"_"+n.code+'").trigger("change");\n }';s.script+=" \n "+l+" \n "}else if(n.forumlaAttribute&&n.forumlaAttribute.depends.length>0&&n.forumlaAttribute.function){var d=n.forumlaAttribute.function;n.forumlaAttribute.depends.forEach((function(e){s.script+='$("#'+i.code+"_"+e+'").change(function(){ \n',d=d.split(e).join(i.code+"_"+e)})),d=d.split(n.code).join(i.code+"_"+n.code),s.script+=d+"\n ",s.script+='$("#'+i.code+"_"+n.code+'").trigger("change");\n }); \n'}s.script+=" }); ";var c=document.createElement("script");c.innerHTML=s.script,s.valueITtempl.element.nativeElement.appendChild(c)}if(n.mandatory&&"VIEW"===s.mode&&n.mandatory.depends.length>0&&n.mandatory.function){s.script=" $(document).ready(function(){  \n";var p=n.mandatory.function,f="";"BODY"===s.position&&(f=i.code+"_"+n.code,n.mandatory.depends.forEach((function(e){s.script+='$("#'+i.code+"_"+e+'").change(RequiredFunc_'+f+"); \n",p=p.split(e).join(i.code+"_"+e)})),p=p.split(n.code).join(i.code+"_"+n.code)),"HEADER"!==s.position&&"FOOTER"!==s.position||(f=n.code,n.mandatory.depends.forEach((function(e){s.script+='$("#'+e+'").change(RequiredFunc_'+f+"); \n"}))),s.script+=" function RequiredFunc_"+f+"(){ \n",s.script+="if("+p+"){ \n",s.script+='$("#'+f+'").prop("required",true); \n',s.script+=" } else {\n",s.script+='$("#'+f+'").prop("required",false); \n',s.script+=' } \n  $("#'+f+'").trigger("change");\n}\n$("#'+f+'").change(function(){ \nif($(this).prop(\'required\')){\n         if ($(this).val()==\'\'){\n         if ($(this).hasClass("ng-valid")){\n           $(this).removeClass("ng-valid");\n        }\n         if (!$(this).hasClass("ng-invalid")){\n           $(this).addClass("ng-invalid");\n        }\n\n  } else {\n        if ($(this).hasClass("ng-invalid")){\n            $(this).removeClass("ng-invalid");\n        }\n       if (!$(this).hasClass("ng-valid")){\n            $(this).addClass("ng-valid");\n        }\n}\n    } else {\n             if ($(this).hasClass("ng-invalid")){\n            $(this).removeClass("ng-invalid");\n        }\n       if (!$(this).hasClass("ng-valid")){\n            $(this).addClass("ng-valid");\n        }\n    }\n});\n',s.script+=" }); \n";var b=document.createElement("script");b.innerHTML=s.script,s.valueITtempl.element.nativeElement.appendChild(b)}}))}},e.prototype.ngOnDestroy=function(){this.changedtrigger.emit(!0),this.cmpRef&&this.cmpRef.destroy()},e.decorators=[{type:t.Component,args:[{selector:"[dynamic-template]",template:"\n    <div #valueITtempl></div>\n  "}]}],e.ctorParameters=function(){return[{type:t.Compiler},{type:t.Injector},{type:t.NgModuleRef},{type:f}]},e.propDecorators={valueITtempl:[{type:t.ViewChild,args:["valueITtempl",{static:!1,read:t.ViewContainerRef}]}],template:[{type:t.Input}],attribute:[{type:t.Input}],item:[{type:t.Input}],headerOrFooter:[{type:t.Input}],position:[{type:t.Input}],level:[{type:t.Input}],mode:[{type:t.Input}],changedtrigger:[{type:t.Output}]},e}();var v={provide:r.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return y})),multi:!0},y=function(){function e(e,t){this._renderer=t,this.label="",this.type="text",this.required=!0,this.disabled=!1,this._value="",this.preValue="",this.editing=!0,this.onChange=Function.prototype,this.onTouched=Function.prototype,this.editing=!0}return Object.defineProperty(e.prototype,"value",{get:function(){return this._value},set:function(e){e!==this._value&&(this._value=e,this.onChange(e))},enumerable:!0,configurable:!0}),e.prototype.writeValue=function(e){this._value=e},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.onBlur=function(e){""!==this._value&&this._value&&(this.editing=!1)},e.prototype.onClose=function(e){""!==this._value&&this._value&&(this.editing=!1)},e.prototype.edit=function(e){var t=this;this.disabled||(this.preValue=e,this.editing=!0,this.labelEditControl&&setTimeout((function(e){return t._renderer.invokeElementMethod(t.labelEditControl,"focus",[])})))},e.prototype.ngOnInit=function(){var e=this;this._renderer.listen("window","click",(function(t){e.labelEditControl&&e.labelEditControl.nativeElement&&t.target!==e.labelEditControl.nativeElement&&""!==e._value&&e._value&&(e.editing=!1)})),this.editing=!0},e.decorators=[{type:t.Component,args:[{selector:"app-label-edit",template:'<div class="labeleditable" style="display: inline-block;white-space: nowrap!important;overflow: scroll;width: 70%;margin-right: 1rem;padding: 2px;height: 43px" [ngStyle]="{\'padding-top\':editing?\'2px\':\'12px\'}">\n  <div *ngIf="editing"  (focusout)="onClose($event)">\n    <input #labelEditControl class="attInput additeminput"\n           type="text" [required]="required" (blur)="onBlur($event)" (keydown.enter)=\'$event.target.blur()\' (focusout)="onClose($event)" [name]="value" [(ngModel)]="value" [type]="type" [placeholder]="label" />\n  </div>\n  <div *ngIf="!editing" >\n    <div title="Modifier" class="cell" (click)="edit(value)" (focus)="edit(value);" tabindex="0" >{{value}}&nbsp;<i class="fa fa-pencil"></i></div>\n  </div>\n</div>\n\n',providers:[v],styles:[".cell{border:1px solid transparent}.cell:hover{cursor:pointer;border:1px dashed #c8c8c8}"]}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer}]},e.propDecorators={labelEditControl:[{type:t.ViewChild,args:["labelEditControl",{static:!1}]}],label:[{type:t.Input}],type:[{type:t.Input}],required:[{type:t.Input}],disabled:[{type:t.Input}]},e}();var x=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[c,p,b,y],imports:[l.BrowserModule,r.FormsModule,i.TranslateModule],exports:[c],providers:[f]}]}],e}();e.TibasFormJsonGeneratorComponent=c,e.TibasFormJsonGeneratorModule=x,e.ɵa=p,e.ɵb=b,e.ɵc=f,e.ɵd=y,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=tibas-form-json-generator.umd.min.js.map