@farris/jit-engine 1.3.293 → 1.3.294

package/lib/template/devkit/component.pug

@@ -1,659 +1,659 @@
-//- -var variable = {isQdpForm:true, id: 'salesorder-component', appearance: "mb-2", onInit: "viewModel.loadList", name: 'SalesOrder', repositoryName: "repositoryName", viewModelName: 'SaleOrderListViewModel',form: 'form',stateMachine:'stateMachine',template: 'SaleOrder', handlers: ['a']}
-
-| import { Component, OnInit, Injector,  AfterViewInit,ViewChild,HostBinding,TemplateRef } from '@angular/core';
-| import { BehaviorSubject } from 'rxjs';
-| import { of } from 'rxjs/observable/of';
-| import { Form, FrameEvent, FrameEventBus, FrameComponent, FARRIS_DEVKIT_FRAME_PROVIDERS, ViewModel, COMMAND_HANDLERS_TOKEN, FRAME_ID, StateMachine, BindingData, Repository, UIState,NgSubscription,Declaration,EXCEPTION_HANDLER } from '@farris/devkit';
-| import { FARRIS_COMMAND_SERVICE_FRAME_PROVIDERS,ComponentManagerService } from '@farris/command-services';
-| import { KeybindingService  } from '@farris/command-services';
-| import { EditorTypes} from '@farris/ui-datagrid-editors';
-= '\n'
-if (variable.componentType == 'Frame')
-  | import { ExceptionHandler } from '@farris/command-services';
-  | import { FrameworkSessionService,UriService } from '@farris/bef';
-  | import { WFSubmiteService } from '@gsp-wf/rtdevkit';
-  | import { ActivatedRoute, ParamMap } from '@angular/router';
-  | import { FrameworkService } from '@gsp-sys/rtf-common';
-  | import { ApplicationParamService } from '@farris/command-services';
-  | import { #{variable.externalPrefix}EventDeclaration } from '../../events/event';
-  | import { FARRIS_FORM_COMPONENTS } from '@farris/command-services';
-  | import { CloudprintService } from '@gsp-svc/cloudprint';
-  | import { WFFlowchartService } from '@gsp-wf/ui-flowchart';
-  if(variable.isGroupForm==false)
-    = '\n'
-    | import { AppContext } from '@farris/devkit';
-  = '\n'
-| import { BefLookupRestService,DefaultComboHttpService } from '@farris/bef';
-| import { #{variable.externalPrefix}#{variable.viewModelName} } from '../../viewmodels/#{variable.viewModelName.toLowerCase()}';
-| import { #{variable.externalPrefix}#{variable.repositoryName} } from '../../models/#{variable.repositoryName.toLowerCase()}';
-| import { ServerSideToken,LookupGridComponent } from '@farris/ui-lookup';
-| import { ComboServerSideToken } from '@farris/ui-combo-list';
-= '\n'
-if (variable.isQdpForm)
-  | import { QDP_COMMAND_SERVICE_PROVIDERS } from '@qdp/command-services';
-= '\n'
-if (variable.isJointSearch)
-  | import { ElementRef } from '@angular/core';
-  | import { QdpViewComponent } from '@qdp/spread';
-  | import { MenuControllerService} from '@qdp/search-join';
-= '\n'
-| import { WizardService, FarrisPageDetailComponent } from '@farris/ui-wizard';
-| import { #{variable.externalPrefix}LangService } from '../../lang/lang-pipe';
-if (variable.form)
-  | import { #{variable.externalPrefix}#{variable.form} } from '../../viewmodels/form/#{variable.form.toLowerCase()}';
-= '\n'
-if (variable.stateMachine)
-  | import { #{variable.externalPrefix}#{variable.stateMachine} } from '../../viewmodels/statemachine/#{variable.stateMachine.toLowerCase()}';
-= '\n'
-if (variable.states)
-  | import { #{variable.externalPrefix}#{variable.states} } from '../../viewmodels/uistate/#{variable.states.toLowerCase()}';
-= '\n'
-if (variable.handlers && variable.handlers.length)
-  each p in variable.handlers
-    | import { #{variable.externalPrefix}#{p} } from '../../viewmodels/handlers/#{p.toLowerCase()}';
-    = '\n'
-if (variable.services && variable.services.length)
-  each service in variable.services
-    | import { #{service.name} as #{service.alias} } from '../../services/#{service.fileName.toLowerCase()}';
-    = '\n'
-if (variable.dependencies && variable.dependencies.length)
-  each dependent in variable.dependencies
-    if(dependent.usePrefix == null || dependent.usePrefix == undefined || dependent.usePrefix == true)
-      | import { #{variable.externalPrefix}#{dependent.name} } from '#{dependent.path}';
-    else
-      | import { #{dependent.name} } from '#{dependent.path}';
-    = '\n'
-= '\n'
-if (variable.componentType == 'Frame')
-  | const FORM_CONTROLS = {
-  = '\n'
-  if (variable.modalFormControls && variable.modalFormControls.length)
-    each modalFormControl,index in variable.modalFormControls
-      if(modalFormControl.modalFormType && modalFormControl.modalFormType == "url")
-        |      '#{modalFormControl.name}' : '#{modalFormControl.url}'
-      else
-        |      '#{modalFormControl.name}' : #{modalFormControl.className}
-      if (index<variable.modalFormControls.length-1)
-        | ,
-      = '\n'
-  |}
-  = '\n'
-| @Component({
-= '\n'
-if (variable.componentSelector)
-  |  selector: 'app-#{variable.componentSelector.toLowerCase()}',
-else
-  |  selector: 'app-#{variable.name.toLowerCase()}',
-= '\n'
-|   templateUrl: './#{variable.name.toLowerCase()}.html',
-if(variable.createEmptyScssFile)
-  = '\n'
-  |   styleUrls: ['./#{variable.name.toLowerCase()}.scss'],
-  = '\n'
-= '\n'
-if (variable.handlers && variable.handlers.length)
-  |   providers: [
-  = '\n'
-  if (variable.componentType == 'Frame')
-    |    { provide: Declaration,   useClass: #{variable.externalPrefix}EventDeclaration },
-    |    { provide: WFSubmiteService, useClass: WFSubmiteService },
-    |    { provide: CloudprintService, useClass: CloudprintService},
-    |    { provide: WFFlowchartService, useClass: WFFlowchartService},
-    if(variable.isGroupForm==false)
-      |    AppContext,
-      = '\n'
-    if (variable.componentSelector)
-      = '\n'
-      |    { provide: EXCEPTION_HANDLER, useValue: null},
-      = '\n'
-    else
-      = '\n'
-      | { provide: EXCEPTION_HANDLER, useClass: ExceptionHandler},
-      = '\n'
-    |    { provide: FARRIS_FORM_COMPONENTS, useValue: FORM_CONTROLS},
-    = '\n'
-  else
-    |    { provide: EXCEPTION_HANDLER, useValue: null},
-    = '\n'
-  each p in variable.handlers
-    |     { provide: COMMAND_HANDLERS_TOKEN, useClass: #{variable.externalPrefix}#{p}, multi: true },
-    = '\n'
-  |     FARRIS_DEVKIT_FRAME_PROVIDERS,
-  |     FARRIS_COMMAND_SERVICE_FRAME_PROVIDERS,
-  = '\n'
-  if (variable.isQdpForm)
-    |     QDP_COMMAND_SERVICE_PROVIDERS,
-  = '\n'
-  |     { provide: FRAME_ID, useValue: '#{variable.componentFrameID ? variable.componentFrameID : variable.replacedId}' },
-  |     { provide: BindingData, useClass: BindingData },
-  |     { provide: Repository,   useExisting: #{variable.externalPrefix}#{variable.repositoryName} },
-  |     { provide: ServerSideToken,   useClass: BefLookupRestService },
-  |     { provide: ComboServerSideToken,   useClass: DefaultComboHttpService },
-  |     #{variable.externalPrefix}LangService,
-  = '\n'
-  if (variable.form)
-    |     { provide: Form, useClass: #{variable.externalPrefix}#{variable.form} },
-    = '\n'
-  if (variable.stateMachine)
-    |     { provide: StateMachine, useClass: #{variable.externalPrefix}#{variable.stateMachine} },
-    = '\n'
-  if (variable.states)
-    |     { provide: UIState, useClass: #{variable.externalPrefix}#{variable.states} },
-    = '\n'
-  if (variable.services && variable.services.length)
-    each service in variable.services
-      |     #{service.alias},
-      = '\n'
-  if (variable.providers && variable.providers.length)
-    each provider, index in variable.providers
-      if(provider.usePrefix || provider.usePrefix==true)
-        |    #{variable.externalPrefix}#{provider.name},
-      else
-        |    #{provider.name},
-      = '\n'
-  |     { provide: ViewModel, useClass: #{variable.externalPrefix}#{variable.viewModelName} }
-  |   ]
-  = '\n'
-else
-  |   providers: [
-  |     FARRIS_DEVKIT_FRAME_PROVIDERS,
-  |     FARRIS_COMMAND_SERVICE_FRAME_PROVIDERS,
-  = '\n'
-  if (variable.isQdpForm)
-    |     QDP_COMMAND_SERVICE_PROVIDERS,
-    = '\n'
-  |     { provide: FRAME_ID, useValue: '#{variable.componentFrameID ? variable.componentFrameID : variable.replacedId}' },
-  |     { provide: BindingData, useClass: BindingData },
-  |     { provide: Repository,   useExisting: #{variable.externalPrefix}#{variable.repositoryName} },
-  |     { provide: ServerSideToken,   useClass: BefLookupRestService },
-  |     { provide: ComboServerSideToken,   useClass: DefaultComboHttpService },
-  |     #{variable.externalPrefix}LangService,
-  = '\n'
-  if (variable.componentType == 'Frame')
-    |    { provide: Declaration,   useClass: #{variable.externalPrefix}EventDeclaration },
-    |    { provide: WFSubmiteService, useClass: WFSubmiteService },
-    |    { provide: WFFlowchartService, useClass: WFFlowchartService},
-    if(variable.isGroupForm==false)
-      |    AppContext,
-      = '\n'
-    if (variable.componentSelector)
-      |    { provide: EXCEPTION_HANDLER,useValue: null},
-      = '\n'
-    else
-      | { provide: EXCEPTION_HANDLER,  useClass: ExceptionHandler},
-      = '\n'
-    |    { provide: FARRIS_FORM_COMPONENTS, useValue: FORM_CONTROLS},
-    = '\n'
-  else
-    |   { provide: EXCEPTION_HANDLER, useValue: null},
-    = '\n'
-  if (variable.form)
-    |     { provide: Form, useClass: #{variable.externalPrefix}#{variable.form} },
-    = '\n'
-  if (variable.stateMachine)
-    |     { provide: StateMachine, useClass: #{variable.externalPrefix}#{variable.stateMachine} },
-    = '\n'
-  if (variable.states)
-    |     { provide: UIState, useClass: #{variable.externalPrefix}#{variable.states} },
-    = '\n'
-  if (variable.services && variable.services.length)
-    each service in variable.services
-      |     #{service.alias},
-      = '\n'
-  if (variable.providers && variable.providers.length)
-    each provider, index in variable.providers
-      if(provider.usePrefix || provider.usePrefix==true)
-        |    #{variable.externalPrefix}#{provider.name},
-      else
-        |    #{provider.name},
-      = '\n'
-  |     { provide: ViewModel, useClass: #{variable.externalPrefix}#{variable.viewModelName} }
-  |   ]
-  = '\n'
-| })
-| export class #{variable.externalPrefix}#{variable.name} extends FrameComponent implements OnInit, AfterViewInit {
-if(variable.componentFarrisLookups && variable.componentFarrisLookups.length)
-  each farrisLookup,lookupIndex in variable.componentFarrisLookups
-    | @ViewChild('#{farrisLookup.id}')
-    | #{farrisLookup.id}:LookupGridComponent;
-    = '\n'
-if(variable.farrisDataGridParameter && variable.farrisDataGridParameter.length)
-  each dataGridParameter in variable.farrisDataGridParameter
-    = '\n'
-    |   #{dataGridParameter.columnsName}=[];
-    = '\n'
-    if(dataGridParameter.groupFormatter)
-      | #{dataGridParameter.groupFormatterName}= (row) => {
-      | !{dataGridParameter.groupFormatter}
-      |}
-      = '\n'
-    if(dataGridParameter.groupStyler)
-      | #{dataGridParameter.groupStylerName}= (row) => {
-      | !{dataGridParameter.groupStyler}
-      |}
-      = '\n'
-    if(dataGridParameter.rowStyler)
-      | #{dataGridParameter.rowStylerName}= (rowData) => {
-      | !{dataGridParameter.rowStyler}
-      |}
-      = '\n'      
-    if(dataGridParameter.footerTemplateName)
-      | @ViewChild('#{dataGridParameter.footerTemplateName}') #{dataGridParameter.footerTemplateName}:TemplateRef<any>;
-      = '\n'    
-    if(dataGridParameter.columns && dataGridParameter.columns.length)
-      = '\n'
-      each dataGridColumn,dataGridColumnIndex in dataGridParameter.columns
-        if(dataGridColumn && dataGridColumn.length)
-          each dataGridInnerColumn,dataGridInnerColumnIndex in dataGridColumn
-            if(dataGridInnerColumn.template)
-              | @ViewChild('#{dataGridInnerColumn.template}') #{dataGridInnerColumn.template}:TemplateRef<any>;            
-              = '\n'
-if(variable.farrisDataGridParameter && variable.farrisDataGridParameter.length)
-  each dataGridParameter in variable.farrisDataGridParameter
-    = '\n'    
-    if(dataGridParameter.columns && dataGridParameter.columns.length)      
-      each dataGridColumn,dataGridColumnIndex in dataGridParameter.columns
-        if(dataGridColumn && dataGridColumn.length)
-          each dataGridInnerColumn,dataGridInnerColumnIndex in dataGridColumn
-            if(dataGridInnerColumn.cellStyler)
-              | #{dataGridInnerColumn.cellStylerName}=(val, data, index) =>{
-              | #{dataGridInnerColumn.cellStyler}
-              |}
-              = '\n'    
-if (variable.componentType == "Frame")
-  = '\n'
-  |   @HostBinding('class')
-  |   cls = 'f-page-root #{variable.appearance} ';
-else
-  |   @HostBinding('class')
-  |   cls = '#{variable.appearance}';
-  = '\n'
-if (variable.isJointSearch)
-  | @ViewChild('menu', { read: ElementRef }) public menuElement: ElementRef;
-  | @ViewChild(QdpViewComponent, { read: ElementRef }) public qdpViewElementRef: ElementRef;
-  | @ViewChild(QdpViewComponent) public qdpView: any;
-= '\n'
-|   public viewModel: #{variable.externalPrefix}#{variable.viewModelName};
-|   lang: string;
-|   size: any = {};
-= '\n'
-= '\n'
-|   constructor(
-= '\n'
-| private wizardSer: WizardService,
-| private keybindingService: KeybindingService,
-| private langService: #{variable.externalPrefix}LangService,
-= '\n'
-if (variable.isJointSearch)
-  |   public menuController: MenuControllerService,
-  = '\n'
-if(variable.componentFarrisLookups&& variable.componentFarrisLookups.length)
-  |private componentManagerService:ComponentManagerService,
-if(variable.injectors&&variable.injectors.length)
-  each injector in variable.injectors
-    if(injector.usePrefix)
-      |   private #{injector.name}: #{injector.className},
-    else
-      |   private #{variable.externalPrefix}#{injector.name}: #{injector.className},
-    = '\n'
-if (variable.componentType == 'Frame')
-  |     private route: ActivatedRoute,
-  |     private frameworkService: FrameworkService,
-  |     private applicationParamsService: ApplicationParamService,
-  = '\n'
-  if (variable.stateMachine)
-    |     private stateMachine: StateMachine,
-  = '\n'
-|     public injector: Injector
-|   ) {
-|     super(injector);
-|     this.lang = localStorage.getItem('languageCode');
-|   }
-= '\n'
-= '\n'
-|   ngOnInit() {
-|   if (this.keybindingService) {
-|           this.viewModel.keybindingMap.forEach((keyBinding, method) => {
-|               this.keybindingService.register(keyBinding, () => {
-|                return this.viewModel[method]();
-|              });
-|          });
-|      }
-= '\n'
-if(variable.farrisDataGridParameter && variable.farrisDataGridParameter.length)
-  each dataGridParameter in variable.farrisDataGridParameter
-    |     this.#{dataGridParameter.columnsName}=[
-    = '\n'
-    if (dataGridParameter.columns && dataGridParameter.columns.length)
-      each dataGridParameterColumn,columnIndex in dataGridParameter.columns        
-        if(dataGridParameterColumn && dataGridParameterColumn.length)
-          | [
-          each dataGridParameterInnerColumn,innerColumnIndex in dataGridParameterColumn
-            if(!dataGridParameterInnerColumn.template)
-              |        {field:'#{dataGridParameterInnerColumn.field}'#{dataGridParameterInnerColumn.width?',width:'+dataGridParameterInnerColumn.width:',width:100'},title: this.langService.transform('#{dataGridParameterInnerColumn.id}',this.lang) || '#{dataGridParameterInnerColumn.title}',dataType:'#{dataGridParameterInnerColumn.dataType}'
-              if(dataGridParameterInnerColumn.editor)
-                | ,
-                |         editor:{type:#{dataGridParameterInnerColumn.editorType},options:!{dataGridParameterInnerColumn.editor}}
-              if(dataGridParameterInnerColumn.fixed)
-                | ,
-                |         fixed:'#{dataGridParameterInnerColumn.fixed}'
-              if(dataGridParameterInnerColumn.cellStyler)
-                | ,
-                | styler:this.#{dataGridParameterInnerColumn.cellStylerName}
-              if(dataGridParameterInnerColumn.colspan && !dataGridParameterInnerColumn.field)  
-                | ,
-                | colspan:#{dataGridParameterInnerColumn.colspan}
-              if(dataGridParameterInnerColumn.rowspan)  
-                | ,
-                | rowspan:#{dataGridParameterInnerColumn.rowspan}            
-              if(dataGridParameterInnerColumn.sortable)
-                | ,
-                | sortable:#{dataGridParameterInnerColumn.sortable}
-              if(dataGridParameterInnerColumn.sortOrder)
-                | ,
-                | order:'#{dataGridParameterInnerColumn.sortOrder}'
-              if(dataGridParameterInnerColumn.noSearch)
-                | ,
-                | nosearch:'#{dataGridParameterInnerColumn.noSearch}'
-              if(dataGridParameterInnerColumn.formatterString)
-                | ,
-                |         formatter:!{dataGridParameterInnerColumn.formatterString}
-              |}
-            else
-              |        {field:'#{dataGridParameterInnerColumn.field}'#{dataGridParameterInnerColumn.width?',width:'+dataGridParameterInnerColumn.width:',width:100'},title:this.langService.transform('#{dataGridParameterInnerColumn.id}',this.lang) || '#{dataGridParameterInnerColumn.title}',dataType:'#{dataGridParameterInnerColumn.dataType}',
-              |         template:this.#{dataGridParameterInnerColumn.template}
-              if(dataGridParameterInnerColumn.editor)
-                | ,
-                |       editor:{type:#{dataGridParameterInnerColumn.editorType},options:!{dataGridParameterInnerColumn.editor}}
-              if(dataGridParameterInnerColumn.fixed)
-                | ,
-                |         fixed:'#{dataGridParameterInnerColumn.fixed}'
-              if(dataGridParameterInnerColumn.cellStyler)
-                | ,
-                | styler:this.#{dataGridParameterInnerColumn.cellStylerName} 
-              if(dataGridParameterInnerColumn.colspan && !dataGridParameterInnerColumn.field)  
-                | ,
-                | colspan:#{dataGridParameterInnerColumn.colspan}
-              if(dataGridParameterInnerColumn.rowspan)  
-                | ,
-                | rowspan:#{dataGridParameterInnerColumn.rowspan}                                   
-              if(dataGridParameterInnerColumn.sortable)
-                | ,
-                | sortable:#{dataGridParameterInnerColumn.sortable}
-              if(dataGridParameterInnerColumn.sortOrder)
-                | ,
-                | order:'#{dataGridParameterInnerColumn.sortOrder}'
-              if(dataGridParameterInnerColumn.noSearch)
-                | ,
-                | nosearch:'#{dataGridParameterInnerColumn.noSearch}'
-              if(dataGridParameterInnerColumn.formatterString)
-                | ,
-                |         formatter:!{dataGridParameterInnerColumn.formatterString}
-              | }
-            if(innerColumnIndex < dataGridParameterColumn.length-1)
-              |,
-              = '\n'
-          = '\n'
-          | ]     
-          if(columnIndex < dataGridParameter.columns.length -1  )
-            | ,
-            = '\n'
-    |      ]; 
-if (variable.componentType == 'Frame')
-  |     this.applicationParamsService.parseParams(this.route, this.frameworkService, this.viewModel, () => {
-  |       this.onFormLoad();
-  |     })
-  if (variable.stateMachine && variable.toolbars && variable.toolbars.length)
-    each toolbar in variable.toolbars
-      = '\n'
-      |     this.stateMachine.stateChange.subscribe(() => {
-      |       const #{toolbar.id}states = {
-      = '\n'
-      if (toolbar.states)
-        each state, buttonId in toolbar.states
-          |         '#{buttonId}': #{state.replace('viewModel','this.viewModel')},
-          = '\n'
-      |       }
-      |       this.#{toolbar.id}States.next(#{toolbar.id}states);
-      |     });
-      = '\n'
-      = '\n'
-  if (variable.stateMachine && variable.toolbars && variable.toolbars.length)
-    each toolbar in variable.toolbars
-      = '\n'
-      |     this.stateMachine.stateChange.subscribe(() => {
-      |       const #{toolbar.id}visibleStates = {
-      = '\n'
-      if(toolbar.visibleStates)
-        each state, buttonId in toolbar.visibleStates
-          |         '#{buttonId}': #{((state==true || state==false)?state:state.replace('viewModel','this.viewModel'))},
-          = '\n'
-      |       }
-      |       this.#{toolbar.id}VisibleStates.next(#{toolbar.id}visibleStates);
-      |     });
-      = '\n'
-      = '\n'
-  if (variable.stateMachine && variable.toolbars && variable.toolbars.length)
-    each toolbar in variable.toolbars
-      = '\n'
-      | this.#{toolbar.id}.forEach((toolbarItem)=>{
-      | const transformText =this.langService.transform(toolbarItem.id,this.lang);
-      | if(transformText)
-      | {
-      |   toolbarItem.text=transformText;
-      | }
-      |});
-  if (variable.stateMachine && variable.farristabtoolbars && variable.farristabtoolbars.length)
-    = '\n'
-    |       this.stateMachine.stateChange.subscribe(() => {
-    |         const states={
-    = '\n'
-    each farristabtoolbar,toolbarIndex in variable.farristabtoolbars
-      if (farristabtoolbar.contents && farristabtoolbar.contents.length > 0)
-        if (toolbarIndex>0)
-          | ,
-          = '\n'
-        each farristabtoolbaritem,index in farristabtoolbar.contents
-          |       '#{farristabtoolbaritem.id}':#{(farristabtoolbaritem.disable==true || farristabtoolbaritem.disable==false)?farristabtoolbaritem.disable:farristabtoolbaritem.disable}
-          if (index < farristabtoolbar.contents.length-1)
-            | ,
-            = '\n'
-    = '\n'
-    | };
-    = '\n'
-    | this.tabsToolbarStates.next(states);
-    |  });
-  if (variable.stateMachine && variable.farristabtoolbars && variable.farristabtoolbars.length)
-    = '\n'
-    |       this.stateMachine.stateChange.subscribe(() => {
-    |         const visibleStates={
-    = '\n'
-    each farristabtoolbar,toolbarIndex in variable.farristabtoolbars
-      if (farristabtoolbar.contents && farristabtoolbar.contents.length > 0)
-        if (toolbarIndex>0)
-          | ,
-          = '\n'
-        each farristabtoolbaritem,index in farristabtoolbar.contents
-          |       '#{farristabtoolbaritem.id}':#{((farristabtoolbaritem.visible==true || farristabtoolbaritem.visible==false)?farristabtoolbaritem.visible:farristabtoolbaritem.visible.replace('viewModel','this.viewModel'))}
-          if (index < farristabtoolbar.contents.length-1)
-            | ,
-            = '\n'
-    = '\n'
-    | };
-    = '\n'
-    | this.tabsToolbarVisibleStates.next(visibleStates);
-    |  });
-else
-  = '\n'
-  |    this.onFormLoad();
-  = '\n'
-= '\n'
-= '\n'
-|   }
-= '\n'
-= '\n'
-|   ngAfterViewInit(): void {
-if(variable.afterViewInit)
-  = '\n'
-  | #{variable.afterViewInit}
-if(variable.componentFarrisLookups && variable.componentFarrisLookups.length)
-  = '\n'
-  each   farrisLookup,lookupIndex in variable.componentFarrisLookups
-    | this.componentManagerService.appendControl('#{farrisLookup.id}',this.#{farrisLookup.id});
-    = '\n'
-if (variable.afterViewInitDeclarationEvents)
-  each afterViewInitDeclarationEvent in variable.afterViewInitDeclarationEvents
-    = '\n'
-    |     #{afterViewInitDeclarationEvent}
-    = '\n'
-= '\n'
-|   }
-= '\n'
-= '\n'
-|   handleSizeChange(size: any) {
-|     this.size = size;
-|   }
-= '\n'
-= '\n'
-|   public onFormLoad() {
-= '\n'
-if (variable.onInit)
-  |     #{variable.onInit}
-  = '\n'
-if (variable.onInitDeclarationEvents)
-  each onInitDeclarationEvent in variable.onInitDeclarationEvents
-    = '\n'
-    | #{onInitDeclarationEvent}
-    = '\n'
-|   }
-= '\n'
-= '\n'
-if (variable.componentEvents && variable.componentEvents.length)
-  each event in variable.componentEvents
-    |   #{event.name} = (data) => {
-    if (event.declarationEvents && event.declarationEvents.length)
-      = '\n'
-      each declarationEvent in event.declarationEvents
-        |    #{declarationEvent}
-        = '\n'
-    if (event.eventHandler)
-      = '\n'
-      |     return #{event.eventHandler}.call(this,data);
-      = '\n'
-    else
-      = '\n'
-      |     return  of(true);
-      = '\n'
-    |   };
-    = '\n'
-    = '\n'
-= '\n'
-= '\n'
-if (variable.toolbars && variable.toolbars.length)
-  each toolbar in variable.toolbars
-    |   #{toolbar.id} = !{JSON.stringify(toolbar.items, null, 2)};
-    = '\n'
-    = '\n'
-    |   #{toolbar.id}States = new BehaviorSubject({});
-    |   #{toolbar.id}VisibleStates = new BehaviorSubject({});
-    = '\n'
-    = '\n'
-    if(toolbar.eventHandler)
-      |   #{toolbar.eventHandler}(args) {
-      if (toolbar.events && toolbar.events.length)
-        = '\n'
-        |     switch (args.id) {
-        = '\n'
-        each event in toolbar.events
-          |       case '#{event.name}':
-          if (event.eventHandler)
-            = '\n'
-            |         #{event.eventHandler};
-            = '\n'
-          if (event.declarationEvents && event.declarationEvents.length)
-            each eventDeclaration in event.declarationEvents
-              = '\n'
-              |         #{eventDeclaration}
-              = '\n'
-          |         break;
-          = '\n'
-        |     }
-        = '\n'
-      |   }
-      = '\n'
-if (variable.farristabtoolbars && variable.farristabtoolbars.length)
-  |   tabsToolbarStates = new BehaviorSubject({});
-  |   tabsToolbarVisibleStates = new BehaviorSubject({});
-  = '\n'
-  each farristabtoolbar in variable.farristabtoolbars
-    |   #{farristabtoolbar.generatedID} = {
-    = '\n'
-    if(farristabtoolbar.position)
-      |       position:'#{farristabtoolbar.position}',
-      = '\n'
-    if (farristabtoolbar.contents && farristabtoolbar.contents.length > 0)
-      |     contents:[
-      = '\n'
-      each farristabtoolbaritem,index in farristabtoolbar.contents
-        |    {
-        |       id:'#{farristabtoolbaritem.id}',
-        = '\n'
-        |       disable:#{(farristabtoolbaritem.disable==true || farristabtoolbaritem.disable==false)?farristabtoolbaritem.disable:farristabtoolbaritem.disable},
-        = '\n'
-        |       visible:#{(farristabtoolbaritem.visible==true || farristabtoolbaritem.visible==false)?farristabtoolbaritem.visible:farristabtoolbaritem.visible.replace('viewModel','this.viewModel')},
-        |       title:'#{farristabtoolbaritem.title}',
-        = '\n'
-        if (farristabtoolbaritem.click)
-          |       click:()=>{  #{farristabtoolbaritem.click} },
-          = '\n'
-        |      appearance:{
-        = '\n'
-        if (farristabtoolbaritem.appearance && farristabtoolbaritem.appearance.class)
-          |       "class":"#{farristabtoolbaritem.appearance.class}"
-        = '\n'
-        |       }
-        = '\n'
-        |     }
-        if (index<farristabtoolbar.contents.length-1)
-          | ,
-        = '\n'
-      |       ]
-    = '\n'
-    | }
-    = '\n'
-if (variable.componentSubscriptions && variable.componentSubscriptions.length)
-  each subscriptionItem in variable.componentSubscriptions
-    = '\n'
-    | @NgSubscription({
-    |  name: '#{subscriptionItem.subscribeOn}',
-    |  token: '#{subscriptionItem.token}',
-    |  paramMapCollection:[
-    = '\n'
-    if (subscriptionItem.paramMapCollection && subscriptionItem.paramMapCollection.length)
-      each paramMap,index in subscriptionItem.paramMapCollection
-        | {
-        |       frameId:'#{variable.componentFrameID ? variable.componentFrameID : variable.replacedId}',
-        = '\n'
-        |       from: '#{paramMap.from}',
-        = '\n'
-        |       to : '#{paramMap.to}'
-        |   }
-        if (index < subscriptionItem.paramMapCollection.length-1)
-          | ,
-          = '\n'
-    = '\n'
-    | ]
-    = '\n'
-    | })
-    = '\n'
-    | public #{subscriptionItem.subscribeOn}(currentComponent:#{variable.externalPrefix}RootComponent,eventArgs: any) {
-    if (subscriptionItem.command)
-      = '\n'
-      |    currentComponent.viewModel#{subscriptionItem.command.viewModelCommandPath}.call(this,eventArgs);
-      = '\n'
-    |      }
-    = '\n'
-  = '\n'
-| }
-= '\n'
+//- -var variable = {isQdpForm:true, id: 'salesorder-component', appearance: "mb-2", onInit: "viewModel.loadList", name: 'SalesOrder', repositoryName: "repositoryName", viewModelName: 'SaleOrderListViewModel',form: 'form',stateMachine:'stateMachine',template: 'SaleOrder', handlers: ['a']}
+
+| import { Component, OnInit, Injector,  AfterViewInit,ViewChild,HostBinding,TemplateRef } from '@angular/core';
+| import { BehaviorSubject } from 'rxjs';
+| import { of } from 'rxjs/observable/of';
+| import { Form, FrameEvent, FrameEventBus, FrameComponent, FARRIS_DEVKIT_FRAME_PROVIDERS, ViewModel, COMMAND_HANDLERS_TOKEN, FRAME_ID, StateMachine, BindingData, Repository, UIState,NgSubscription,Declaration,EXCEPTION_HANDLER } from '@farris/devkit';
+| import { FARRIS_COMMAND_SERVICE_FRAME_PROVIDERS,ComponentManagerService } from '@farris/command-services';
+| import { KeybindingService  } from '@farris/command-services';
+| import { EditorTypes} from '@farris/ui-datagrid-editors';
+= '\n'
+if (variable.componentType == 'Frame')
+  | import { ExceptionHandler } from '@farris/command-services';
+  | import { FrameworkSessionService,UriService } from '@farris/bef';
+  | import { WFSubmiteService } from '@gsp-wf/rtdevkit';
+  | import { ActivatedRoute, ParamMap } from '@angular/router';
+  | import { FrameworkService } from '@gsp-sys/rtf-common';
+  | import { ApplicationParamService } from '@farris/command-services';
+  | import { #{variable.externalPrefix}EventDeclaration } from '../../events/event';
+  | import { FARRIS_FORM_COMPONENTS } from '@farris/command-services';
+  | import { CloudprintService } from '@gsp-svc/cloudprint';
+  | import { WFFlowchartService } from '@gsp-wf/ui-flowchart';
+  if(variable.isGroupForm==false)
+    = '\n'
+    | import { AppContext } from '@farris/devkit';
+  = '\n'
+| import { BefLookupRestService,DefaultComboHttpService } from '@farris/bef';
+| import { #{variable.externalPrefix}#{variable.viewModelName} } from '../../viewmodels/#{variable.viewModelName.toLowerCase()}';
+| import { #{variable.externalPrefix}#{variable.repositoryName} } from '../../models/#{variable.repositoryName.toLowerCase()}';
+| import { ServerSideToken,LookupGridComponent } from '@farris/ui-lookup';
+| import { ComboServerSideToken } from '@farris/ui-combo-list';
+= '\n'
+if (variable.isQdpForm)
+  | import { QDP_COMMAND_SERVICE_PROVIDERS } from '@qdp/command-services';
+= '\n'
+if (variable.isJointSearch)
+  | import { ElementRef } from '@angular/core';
+  | import { QdpViewComponent } from '@qdp/spread';
+  | import { MenuControllerService} from '@qdp/search-join';
+= '\n'
+| import { WizardService, FarrisPageDetailComponent } from '@farris/ui-wizard';
+| import { #{variable.externalPrefix}LangService } from '../../lang/lang-pipe';
+if (variable.form)
+  | import { #{variable.externalPrefix}#{variable.form} } from '../../viewmodels/form/#{variable.form.toLowerCase()}';
+= '\n'
+if (variable.stateMachine)
+  | import { #{variable.externalPrefix}#{variable.stateMachine} } from '../../viewmodels/statemachine/#{variable.stateMachine.toLowerCase()}';
+= '\n'
+if (variable.states)
+  | import { #{variable.externalPrefix}#{variable.states} } from '../../viewmodels/uistate/#{variable.states.toLowerCase()}';
+= '\n'
+if (variable.handlers && variable.handlers.length)
+  each p in variable.handlers
+    | import { #{variable.externalPrefix}#{p} } from '../../viewmodels/handlers/#{p.toLowerCase()}';
+    = '\n'
+if (variable.services && variable.services.length)
+  each service in variable.services
+    | import { #{service.name} as #{service.alias} } from '../../services/#{service.fileName.toLowerCase()}';
+    = '\n'
+if (variable.dependencies && variable.dependencies.length)
+  each dependent in variable.dependencies
+    if(dependent.usePrefix == null || dependent.usePrefix == undefined || dependent.usePrefix == true)
+      | import { #{variable.externalPrefix}#{dependent.name} } from '#{dependent.path}';
+    else
+      | import { #{dependent.name} } from '#{dependent.path}';
+    = '\n'
+= '\n'
+if (variable.componentType == 'Frame')
+  | const FORM_CONTROLS = {
+  = '\n'
+  if (variable.modalFormControls && variable.modalFormControls.length)
+    each modalFormControl,index in variable.modalFormControls
+      if(modalFormControl.modalFormType && modalFormControl.modalFormType == "url")
+        |      '#{modalFormControl.name}' : '#{modalFormControl.url}'
+      else
+        |      '#{modalFormControl.name}' : #{modalFormControl.className}
+      if (index<variable.modalFormControls.length-1)
+        | ,
+      = '\n'
+  |}
+  = '\n'
+| @Component({
+= '\n'
+if (variable.componentSelector)
+  |  selector: 'app-#{variable.componentSelector.toLowerCase()}',
+else
+  |  selector: 'app-#{variable.name.toLowerCase()}',
+= '\n'
+|   templateUrl: './#{variable.name.toLowerCase()}.html',
+if(variable.createEmptyScssFile)
+  = '\n'
+  |   styleUrls: ['./#{variable.name.toLowerCase()}.scss'],
+  = '\n'
+= '\n'
+if (variable.handlers && variable.handlers.length)
+  |   providers: [
+  = '\n'
+  if (variable.componentType == 'Frame')
+    |    { provide: Declaration,   useClass: #{variable.externalPrefix}EventDeclaration },
+    |    { provide: WFSubmiteService, useClass: WFSubmiteService },
+    |    { provide: CloudprintService, useClass: CloudprintService},
+    |    { provide: WFFlowchartService, useClass: WFFlowchartService},
+    if(variable.isGroupForm==false)
+      |    AppContext,
+      = '\n'
+    if (variable.componentSelector)
+      = '\n'
+      |    { provide: EXCEPTION_HANDLER, useValue: null},
+      = '\n'
+    else
+      = '\n'
+      | { provide: EXCEPTION_HANDLER, useClass: ExceptionHandler},
+      = '\n'
+    |    { provide: FARRIS_FORM_COMPONENTS, useValue: FORM_CONTROLS},
+    = '\n'
+  else
+    |    { provide: EXCEPTION_HANDLER, useValue: null},
+    = '\n'
+  each p in variable.handlers
+    |     { provide: COMMAND_HANDLERS_TOKEN, useClass: #{variable.externalPrefix}#{p}, multi: true },
+    = '\n'
+  |     FARRIS_DEVKIT_FRAME_PROVIDERS,
+  |     FARRIS_COMMAND_SERVICE_FRAME_PROVIDERS,
+  = '\n'
+  if (variable.isQdpForm)
+    |     QDP_COMMAND_SERVICE_PROVIDERS,
+  = '\n'
+  |     { provide: FRAME_ID, useValue: '#{variable.componentFrameID ? variable.componentFrameID : variable.replacedId}' },
+  |     { provide: BindingData, useClass: BindingData },
+  |     { provide: Repository,   useExisting: #{variable.externalPrefix}#{variable.repositoryName} },
+  |     { provide: ServerSideToken,   useClass: BefLookupRestService },
+  |     { provide: ComboServerSideToken,   useClass: DefaultComboHttpService },
+  |     #{variable.externalPrefix}LangService,
+  = '\n'
+  if (variable.form)
+    |     { provide: Form, useClass: #{variable.externalPrefix}#{variable.form} },
+    = '\n'
+  if (variable.stateMachine)
+    |     { provide: StateMachine, useClass: #{variable.externalPrefix}#{variable.stateMachine} },
+    = '\n'
+  if (variable.states)
+    |     { provide: UIState, useClass: #{variable.externalPrefix}#{variable.states} },
+    = '\n'
+  if (variable.services && variable.services.length)
+    each service in variable.services
+      |     #{service.alias},
+      = '\n'
+  if (variable.providers && variable.providers.length)
+    each provider, index in variable.providers
+      if(provider.usePrefix || provider.usePrefix==true)
+        |    #{variable.externalPrefix}#{provider.name},
+      else
+        |    #{provider.name},
+      = '\n'
+  |     { provide: ViewModel, useClass: #{variable.externalPrefix}#{variable.viewModelName} }
+  |   ]
+  = '\n'
+else
+  |   providers: [
+  |     FARRIS_DEVKIT_FRAME_PROVIDERS,
+  |     FARRIS_COMMAND_SERVICE_FRAME_PROVIDERS,
+  = '\n'
+  if (variable.isQdpForm)
+    |     QDP_COMMAND_SERVICE_PROVIDERS,
+    = '\n'
+  |     { provide: FRAME_ID, useValue: '#{variable.componentFrameID ? variable.componentFrameID : variable.replacedId}' },
+  |     { provide: BindingData, useClass: BindingData },
+  |     { provide: Repository,   useExisting: #{variable.externalPrefix}#{variable.repositoryName} },
+  |     { provide: ServerSideToken,   useClass: BefLookupRestService },
+  |     { provide: ComboServerSideToken,   useClass: DefaultComboHttpService },
+  |     #{variable.externalPrefix}LangService,
+  = '\n'
+  if (variable.componentType == 'Frame')
+    |    { provide: Declaration,   useClass: #{variable.externalPrefix}EventDeclaration },
+    |    { provide: WFSubmiteService, useClass: WFSubmiteService },
+    |    { provide: WFFlowchartService, useClass: WFFlowchartService},
+    if(variable.isGroupForm==false)
+      |    AppContext,
+      = '\n'
+    if (variable.componentSelector)
+      |    { provide: EXCEPTION_HANDLER,useValue: null},
+      = '\n'
+    else
+      | { provide: EXCEPTION_HANDLER,  useClass: ExceptionHandler},
+      = '\n'
+    |    { provide: FARRIS_FORM_COMPONENTS, useValue: FORM_CONTROLS},
+    = '\n'
+  else
+    |   { provide: EXCEPTION_HANDLER, useValue: null},
+    = '\n'
+  if (variable.form)
+    |     { provide: Form, useClass: #{variable.externalPrefix}#{variable.form} },
+    = '\n'
+  if (variable.stateMachine)
+    |     { provide: StateMachine, useClass: #{variable.externalPrefix}#{variable.stateMachine} },
+    = '\n'
+  if (variable.states)
+    |     { provide: UIState, useClass: #{variable.externalPrefix}#{variable.states} },
+    = '\n'
+  if (variable.services && variable.services.length)
+    each service in variable.services
+      |     #{service.alias},
+      = '\n'
+  if (variable.providers && variable.providers.length)
+    each provider, index in variable.providers
+      if(provider.usePrefix || provider.usePrefix==true)
+        |    #{variable.externalPrefix}#{provider.name},
+      else
+        |    #{provider.name},
+      = '\n'
+  |     { provide: ViewModel, useClass: #{variable.externalPrefix}#{variable.viewModelName} }
+  |   ]
+  = '\n'
+| })
+| export class #{variable.externalPrefix}#{variable.name} extends FrameComponent implements OnInit, AfterViewInit {
+if(variable.componentFarrisLookups && variable.componentFarrisLookups.length)
+  each farrisLookup,lookupIndex in variable.componentFarrisLookups
+    | @ViewChild('#{farrisLookup.id}')
+    | #{farrisLookup.id}:LookupGridComponent;
+    = '\n'
+if(variable.farrisDataGridParameter && variable.farrisDataGridParameter.length)
+  each dataGridParameter in variable.farrisDataGridParameter
+    = '\n'
+    |   #{dataGridParameter.columnsName}=[];
+    = '\n'
+    if(dataGridParameter.groupFormatter)
+      | #{dataGridParameter.groupFormatterName}= (row) => {
+      | !{dataGridParameter.groupFormatter}
+      |}
+      = '\n'
+    if(dataGridParameter.groupStyler)
+      | #{dataGridParameter.groupStylerName}= (row) => {
+      | !{dataGridParameter.groupStyler}
+      |}
+      = '\n'
+    if(dataGridParameter.rowStyler)
+      | #{dataGridParameter.rowStylerName}= (rowData) => {
+      | !{dataGridParameter.rowStyler}
+      |}
+      = '\n'      
+    if(dataGridParameter.footerTemplateName)
+      | @ViewChild('#{dataGridParameter.footerTemplateName}') #{dataGridParameter.footerTemplateName}:TemplateRef<any>;
+      = '\n'    
+    if(dataGridParameter.columns && dataGridParameter.columns.length)
+      = '\n'
+      each dataGridColumn,dataGridColumnIndex in dataGridParameter.columns
+        if(dataGridColumn && dataGridColumn.length)
+          each dataGridInnerColumn,dataGridInnerColumnIndex in dataGridColumn
+            if(dataGridInnerColumn.template)
+              | @ViewChild('#{dataGridInnerColumn.template}') #{dataGridInnerColumn.template}:TemplateRef<any>;            
+              = '\n'
+if(variable.farrisDataGridParameter && variable.farrisDataGridParameter.length)
+  each dataGridParameter in variable.farrisDataGridParameter
+    = '\n'    
+    if(dataGridParameter.columns && dataGridParameter.columns.length)      
+      each dataGridColumn,dataGridColumnIndex in dataGridParameter.columns
+        if(dataGridColumn && dataGridColumn.length)
+          each dataGridInnerColumn,dataGridInnerColumnIndex in dataGridColumn
+            if(dataGridInnerColumn.cellStyler)
+              | #{dataGridInnerColumn.cellStylerName}=(val, data, index) =>{
+              | #{dataGridInnerColumn.cellStyler}
+              |}
+              = '\n'    
+if (variable.componentType == "Frame")
+  = '\n'
+  |   @HostBinding('class')
+  |   cls = 'f-page-root #{variable.appearance} ';
+else
+  |   @HostBinding('class')
+  |   cls = '#{variable.appearance}';
+  = '\n'
+if (variable.isJointSearch)
+  | @ViewChild('menu', { read: ElementRef }) public menuElement: ElementRef;
+  | @ViewChild(QdpViewComponent, { read: ElementRef }) public qdpViewElementRef: ElementRef;
+  | @ViewChild(QdpViewComponent) public qdpView: any;
+= '\n'
+|   public viewModel: #{variable.externalPrefix}#{variable.viewModelName};
+|   lang: string;
+|   size: any = {};
+= '\n'
+= '\n'
+|   constructor(
+= '\n'
+| private wizardSer: WizardService,
+| private keybindingService: KeybindingService,
+| private langService: #{variable.externalPrefix}LangService,
+= '\n'
+if (variable.isJointSearch)
+  |   public menuController: MenuControllerService,
+  = '\n'
+if(variable.componentFarrisLookups&& variable.componentFarrisLookups.length)
+  |private componentManagerService:ComponentManagerService,
+if(variable.injectors&&variable.injectors.length)
+  each injector in variable.injectors
+    if(injector.usePrefix)
+      |   private #{injector.name}: #{injector.className},
+    else
+      |   private #{variable.externalPrefix}#{injector.name}: #{injector.className},
+    = '\n'
+if (variable.componentType == 'Frame')
+  |     private route: ActivatedRoute,
+  |     private frameworkService: FrameworkService,
+  |     private applicationParamsService: ApplicationParamService,
+  = '\n'
+  if (variable.stateMachine)
+    |     private stateMachine: StateMachine,
+  = '\n'
+|     public injector: Injector
+|   ) {
+|     super(injector);
+|     this.lang = localStorage.getItem('languageCode');
+|   }
+= '\n'
+= '\n'
+|   ngOnInit() {
+|   if (this.keybindingService) {
+|           this.viewModel.keybindingMap.forEach((keyBinding, method) => {
+|               this.keybindingService.register(keyBinding, () => {
+|                return this.viewModel[method]();
+|              });
+|          });
+|      }
+= '\n'
+if(variable.farrisDataGridParameter && variable.farrisDataGridParameter.length)
+  each dataGridParameter in variable.farrisDataGridParameter
+    |     this.#{dataGridParameter.columnsName}=[
+    = '\n'
+    if (dataGridParameter.columns && dataGridParameter.columns.length)
+      each dataGridParameterColumn,columnIndex in dataGridParameter.columns        
+        if(dataGridParameterColumn && dataGridParameterColumn.length)
+          | [
+          each dataGridParameterInnerColumn,innerColumnIndex in dataGridParameterColumn
+            if(!dataGridParameterInnerColumn.template)
+              |        {field:'#{dataGridParameterInnerColumn.field}'#{dataGridParameterInnerColumn.width?',width:'+dataGridParameterInnerColumn.width:',width:100'},title: this.langService.transform('#{dataGridParameterInnerColumn.id}',this.lang) || '#{dataGridParameterInnerColumn.title}',dataType:'#{dataGridParameterInnerColumn.dataType}'
+              if(dataGridParameterInnerColumn.editor)
+                | ,
+                |         editor:{type:#{dataGridParameterInnerColumn.editorType},options:!{dataGridParameterInnerColumn.editor}}
+              if(dataGridParameterInnerColumn.fixed)
+                | ,
+                |         fixed:'#{dataGridParameterInnerColumn.fixed}'
+              if(dataGridParameterInnerColumn.cellStyler)
+                | ,
+                | styler:this.#{dataGridParameterInnerColumn.cellStylerName}
+              if(dataGridParameterInnerColumn.colspan && !dataGridParameterInnerColumn.field)  
+                | ,
+                | colspan:#{dataGridParameterInnerColumn.colspan}
+              if(dataGridParameterInnerColumn.rowspan)  
+                | ,
+                | rowspan:#{dataGridParameterInnerColumn.rowspan}            
+              if(dataGridParameterInnerColumn.sortable)
+                | ,
+                | sortable:#{dataGridParameterInnerColumn.sortable}
+              if(dataGridParameterInnerColumn.sortOrder)
+                | ,
+                | order:'#{dataGridParameterInnerColumn.sortOrder}'
+              if(dataGridParameterInnerColumn.noSearch)
+                | ,
+                | nosearch:'#{dataGridParameterInnerColumn.noSearch}'
+              if(dataGridParameterInnerColumn.formatterString)
+                | ,
+                |         formatter:!{dataGridParameterInnerColumn.formatterString}
+              |}
+            else
+              |        {field:'#{dataGridParameterInnerColumn.field}'#{dataGridParameterInnerColumn.width?',width:'+dataGridParameterInnerColumn.width:',width:100'},title:this.langService.transform('#{dataGridParameterInnerColumn.id}',this.lang) || '#{dataGridParameterInnerColumn.title}',dataType:'#{dataGridParameterInnerColumn.dataType}',
+              |         template:this.#{dataGridParameterInnerColumn.template}
+              if(dataGridParameterInnerColumn.editor)
+                | ,
+                |       editor:{type:#{dataGridParameterInnerColumn.editorType},options:!{dataGridParameterInnerColumn.editor}}
+              if(dataGridParameterInnerColumn.fixed)
+                | ,
+                |         fixed:'#{dataGridParameterInnerColumn.fixed}'
+              if(dataGridParameterInnerColumn.cellStyler)
+                | ,
+                | styler:this.#{dataGridParameterInnerColumn.cellStylerName} 
+              if(dataGridParameterInnerColumn.colspan && !dataGridParameterInnerColumn.field)  
+                | ,
+                | colspan:#{dataGridParameterInnerColumn.colspan}
+              if(dataGridParameterInnerColumn.rowspan)  
+                | ,
+                | rowspan:#{dataGridParameterInnerColumn.rowspan}                                   
+              if(dataGridParameterInnerColumn.sortable)
+                | ,
+                | sortable:#{dataGridParameterInnerColumn.sortable}
+              if(dataGridParameterInnerColumn.sortOrder)
+                | ,
+                | order:'#{dataGridParameterInnerColumn.sortOrder}'
+              if(dataGridParameterInnerColumn.noSearch)
+                | ,
+                | nosearch:'#{dataGridParameterInnerColumn.noSearch}'
+              if(dataGridParameterInnerColumn.formatterString)
+                | ,
+                |         formatter:!{dataGridParameterInnerColumn.formatterString}
+              | }
+            if(innerColumnIndex < dataGridParameterColumn.length-1)
+              |,
+              = '\n'
+          = '\n'
+          | ]     
+          if(columnIndex < dataGridParameter.columns.length -1  )
+            | ,
+            = '\n'
+    |      ]; 
+if (variable.componentType == 'Frame')
+  |     this.applicationParamsService.parseParams(this.route, this.frameworkService, this.viewModel, () => {
+  |       this.onFormLoad();
+  |     })
+  if (variable.stateMachine && variable.toolbars && variable.toolbars.length)
+    each toolbar in variable.toolbars
+      = '\n'
+      |     this.stateMachine.stateChange.subscribe(() => {
+      |       const #{toolbar.id}states = {
+      = '\n'
+      if (toolbar.states)
+        each state, buttonId in toolbar.states
+          |         '#{buttonId}': #{state.replace('viewModel','this.viewModel')},
+          = '\n'
+      |       }
+      |       this.#{toolbar.id}States.next(#{toolbar.id}states);
+      |     });
+      = '\n'
+      = '\n'
+  if (variable.stateMachine && variable.toolbars && variable.toolbars.length)
+    each toolbar in variable.toolbars
+      = '\n'
+      |     this.stateMachine.stateChange.subscribe(() => {
+      |       const #{toolbar.id}visibleStates = {
+      = '\n'
+      if(toolbar.visibleStates)
+        each state, buttonId in toolbar.visibleStates
+          |         '#{buttonId}': #{((state==true || state==false)?state:state.replace('viewModel','this.viewModel'))},
+          = '\n'
+      |       }
+      |       this.#{toolbar.id}VisibleStates.next(#{toolbar.id}visibleStates);
+      |     });
+      = '\n'
+      = '\n'
+  if (variable.stateMachine && variable.toolbars && variable.toolbars.length)
+    each toolbar in variable.toolbars
+      = '\n'
+      | this.#{toolbar.id}.forEach((toolbarItem)=>{
+      | const transformText =this.langService.transform(toolbarItem.id,this.lang);
+      | if(transformText)
+      | {
+      |   toolbarItem.text=transformText;
+      | }
+      |});
+  if (variable.stateMachine && variable.farristabtoolbars && variable.farristabtoolbars.length)
+    = '\n'
+    |       this.stateMachine.stateChange.subscribe(() => {
+    |         const states={
+    = '\n'
+    each farristabtoolbar,toolbarIndex in variable.farristabtoolbars
+      if (farristabtoolbar.contents && farristabtoolbar.contents.length > 0)
+        if (toolbarIndex>0)
+          | ,
+          = '\n'
+        each farristabtoolbaritem,index in farristabtoolbar.contents
+          |       '#{farristabtoolbaritem.id}':#{(farristabtoolbaritem.disable==true || farristabtoolbaritem.disable==false)?farristabtoolbaritem.disable:farristabtoolbaritem.disable}
+          if (index < farristabtoolbar.contents.length-1)
+            | ,
+            = '\n'
+    = '\n'
+    | };
+    = '\n'
+    | this.tabsToolbarStates.next(states);
+    |  });
+  if (variable.stateMachine && variable.farristabtoolbars && variable.farristabtoolbars.length)
+    = '\n'
+    |       this.stateMachine.stateChange.subscribe(() => {
+    |         const visibleStates={
+    = '\n'
+    each farristabtoolbar,toolbarIndex in variable.farristabtoolbars
+      if (farristabtoolbar.contents && farristabtoolbar.contents.length > 0)
+        if (toolbarIndex>0)
+          | ,
+          = '\n'
+        each farristabtoolbaritem,index in farristabtoolbar.contents
+          |       '#{farristabtoolbaritem.id}':#{((farristabtoolbaritem.visible==true || farristabtoolbaritem.visible==false)?farristabtoolbaritem.visible:farristabtoolbaritem.visible.replace('viewModel','this.viewModel'))}
+          if (index < farristabtoolbar.contents.length-1)
+            | ,
+            = '\n'
+    = '\n'
+    | };
+    = '\n'
+    | this.tabsToolbarVisibleStates.next(visibleStates);
+    |  });
+else
+  = '\n'
+  |    this.onFormLoad();
+  = '\n'
+= '\n'
+= '\n'
+|   }
+= '\n'
+= '\n'
+|   ngAfterViewInit(): void {
+if(variable.afterViewInit)
+  = '\n'
+  | #{variable.afterViewInit}
+if(variable.componentFarrisLookups && variable.componentFarrisLookups.length)
+  = '\n'
+  each   farrisLookup,lookupIndex in variable.componentFarrisLookups
+    | this.componentManagerService.appendControl('#{farrisLookup.id}',this.#{farrisLookup.id});
+    = '\n'
+if (variable.afterViewInitDeclarationEvents)
+  each afterViewInitDeclarationEvent in variable.afterViewInitDeclarationEvents
+    = '\n'
+    |     #{afterViewInitDeclarationEvent}
+    = '\n'
+= '\n'
+|   }
+= '\n'
+= '\n'
+|   handleSizeChange(size: any) {
+|     this.size = size;
+|   }
+= '\n'
+= '\n'
+|   public onFormLoad() {
+= '\n'
+if (variable.onInit)
+  |     #{variable.onInit}
+  = '\n'
+if (variable.onInitDeclarationEvents)
+  each onInitDeclarationEvent in variable.onInitDeclarationEvents
+    = '\n'
+    | #{onInitDeclarationEvent}
+    = '\n'
+|   }
+= '\n'
+= '\n'
+if (variable.componentEvents && variable.componentEvents.length)
+  each event in variable.componentEvents
+    |   #{event.name} = (data) => {
+    if (event.declarationEvents && event.declarationEvents.length)
+      = '\n'
+      each declarationEvent in event.declarationEvents
+        |    #{declarationEvent}
+        = '\n'
+    if (event.eventHandler)
+      = '\n'
+      |     return #{event.eventHandler}.call(this,data);
+      = '\n'
+    else
+      = '\n'
+      |     return  of(true);
+      = '\n'
+    |   };
+    = '\n'
+    = '\n'
+= '\n'
+= '\n'
+if (variable.toolbars && variable.toolbars.length)
+  each toolbar in variable.toolbars
+    |   #{toolbar.id} = !{JSON.stringify(toolbar.items, null, 2)};
+    = '\n'
+    = '\n'
+    |   #{toolbar.id}States = new BehaviorSubject({});
+    |   #{toolbar.id}VisibleStates = new BehaviorSubject({});
+    = '\n'
+    = '\n'
+    if(toolbar.eventHandler)
+      |   #{toolbar.eventHandler}(args) {
+      if (toolbar.events && toolbar.events.length)
+        = '\n'
+        |     switch (args.id) {
+        = '\n'
+        each event in toolbar.events
+          |       case '#{event.name}':
+          if (event.eventHandler)
+            = '\n'
+            |         #{event.eventHandler};
+            = '\n'
+          if (event.declarationEvents && event.declarationEvents.length)
+            each eventDeclaration in event.declarationEvents
+              = '\n'
+              |         #{eventDeclaration}
+              = '\n'
+          |         break;
+          = '\n'
+        |     }
+        = '\n'
+      |   }
+      = '\n'
+if (variable.farristabtoolbars && variable.farristabtoolbars.length)
+  |   tabsToolbarStates = new BehaviorSubject({});
+  |   tabsToolbarVisibleStates = new BehaviorSubject({});
+  = '\n'
+  each farristabtoolbar in variable.farristabtoolbars
+    |   #{farristabtoolbar.generatedID} = {
+    = '\n'
+    if(farristabtoolbar.position)
+      |       position:'#{farristabtoolbar.position}',
+      = '\n'
+    if (farristabtoolbar.contents && farristabtoolbar.contents.length > 0)
+      |     contents:[
+      = '\n'
+      each farristabtoolbaritem,index in farristabtoolbar.contents
+        |    {
+        |       id:'#{farristabtoolbaritem.id}',
+        = '\n'
+        |       disable:#{(farristabtoolbaritem.disable==true || farristabtoolbaritem.disable==false)?farristabtoolbaritem.disable:farristabtoolbaritem.disable},
+        = '\n'
+        |       visible:#{(farristabtoolbaritem.visible==true || farristabtoolbaritem.visible==false)?farristabtoolbaritem.visible:farristabtoolbaritem.visible.replace('viewModel','this.viewModel')},
+        |       title:'#{farristabtoolbaritem.title}',
+        = '\n'
+        if (farristabtoolbaritem.click)
+          |       click:()=>{  #{farristabtoolbaritem.click} },
+          = '\n'
+        |      appearance:{
+        = '\n'
+        if (farristabtoolbaritem.appearance && farristabtoolbaritem.appearance.class)
+          |       "class":"#{farristabtoolbaritem.appearance.class}"
+        = '\n'
+        |       }
+        = '\n'
+        |     }
+        if (index<farristabtoolbar.contents.length-1)
+          | ,
+        = '\n'
+      |       ]
+    = '\n'
+    | }
+    = '\n'
+if (variable.componentSubscriptions && variable.componentSubscriptions.length)
+  each subscriptionItem in variable.componentSubscriptions
+    = '\n'
+    | @NgSubscription({
+    |  name: '#{subscriptionItem.subscribeOn}',
+    |  token: '#{subscriptionItem.token}',
+    |  paramMapCollection:[
+    = '\n'
+    if (subscriptionItem.paramMapCollection && subscriptionItem.paramMapCollection.length)
+      each paramMap,index in subscriptionItem.paramMapCollection
+        | {
+        |       frameId:'#{variable.componentFrameID ? variable.componentFrameID : variable.replacedId}',
+        = '\n'
+        |       from: '#{paramMap.from}',
+        = '\n'
+        |       to : '#{paramMap.to}'
+        |   }
+        if (index < subscriptionItem.paramMapCollection.length-1)
+          | ,
+          = '\n'
+    = '\n'
+    | ]
+    = '\n'
+    | })
+    = '\n'
+    | public #{subscriptionItem.subscribeOn}(currentComponent:#{variable.externalPrefix}RootComponent,eventArgs: any) {
+    if (subscriptionItem.command)
+      = '\n'
+      |    currentComponent.viewModel#{subscriptionItem.command.viewModelCommandPath}.call(this,eventArgs);
+      = '\n'
+    |      }
+    = '\n'
+  = '\n'
+| }
+= '\n'
 = '\n'