@one-paragon/angular-utilities 0.1.20 → 0.1.21

package/src/table-builder/interfaces/report-def.ts

@@ -0,0 +1,131 @@
+import { Dictionary } from './dictionary';
+import { PipeTransform, Predicate, TemplateRef } from '@angular/core';
+import { TableBuilderExport } from '../classes/TableBuilderConfig';
+import { QueryParamsHandling } from '@angular/router';
+
+
+export enum FieldType {
+    Unknown = 0,
+    Date = 1,
+    Link = 2,
+    ImageUrl = 3,
+    Currency = 4,
+    Array = 5,
+    Hidden = 6,
+    Number = 7,
+    String = 8,
+    Boolean = 9,
+    PhoneNumber = 10,
+    Expression = 11,
+    Enum = 12,
+}
+
+export enum SortDirection {
+    asc= 'asc',
+    desc= 'desc'
+}
+
+export enum Target {
+  Blank = '_blank',
+  Self = '_self',
+  Parent = '_parent',
+  Top = '_top'
+}
+
+export interface MetaData<T = any, AdditionalFields extends string[] = []> {
+  key: (keyof T | AdditionalFields[number]) & string;
+  displayName?: string;
+  fieldType: FieldType;
+  additional?: Additional<T>;
+  order?: number;
+  preSort?: SortDef;
+  _internalNotUserDefined?: boolean;
+  width?: string;
+  noExport?: boolean;
+  noFilter?: boolean;
+  customCell?: boolean;
+  transform?: ((o: T, ...args: any[])=> any) | ((o: string, ...args: any[])=> any) | PipeTransform;
+  click?: (element: T, key: string ) => void;
+  template?: TemplateRef<any>;
+  classes?: Dictionary<Predicate<T>>;
+  toolTip?: string;
+  useIcon?: boolean;
+}
+export interface  ReportDef<DataType = any> {
+    data: DataType[];
+    metaData: MetaData [];
+    totalRecords?: number;
+    count: number;
+}
+
+export interface SortDef {
+    direction: SortDirection;
+    precedence?: number;
+}
+
+export interface FilterOptions {
+  filterableValues : string[]
+}
+type interpolatedRoute = string;
+export interface Additional<T = any> {
+  link? : {
+    base?: string;
+    urlKey?: string;
+    target?: Target;
+    useRouterLink?: boolean;
+    /**
+     * If you want to use a route with interpolated params, you can use this. Wrap the property name in curly braces.
+     * For example, if interpolatedRoute = /users/{id}/edit, {id} will be replaced with the value of the element's id property.
+     */
+    interpolatedRoute?: interpolatedRoute;
+    routerLinkOptions?:{
+      queryParams?: [string, interpolatedRoute][];
+      fragment?: string;
+      preserveFragment?: boolean;
+      queryParamsHandling?: QueryParamsHandling;
+    }
+  }
+  /**
+   * @deprecated Please use link.base
+   */
+  base?: string;
+  /**
+   * @deprecated Please use link.urlKey
+   */
+  urlKey?: string;
+  /**
+   * @deprecated Please use link.target
+   */
+  target?: Target;
+  /**
+   * @deprecated Please use link.useRouterLink
+   */
+  useRouterLink?: boolean;
+  footer?: { type: 'sum' };
+  grouping?: { groupBy?: boolean, sum?: boolean; groupTitleFn?: (val: any) => string }
+  export?: TableBuilderExport;
+  dateFormat?: string;
+  filterOptions?: FilterOptions;
+  styles?: Dictionary<string>;
+  columnPartStyles?: {
+    header?: Dictionary<string>,
+    body?: Dictionary<string>,
+    footer?: Dictionary<string>,
+  }
+  enumMap?: {[key:number]:string};
+  boolean? : {
+    showForFalse? : true | { icon : string },
+    forTrue? : { icon : string }
+  }
+}
+
+export enum ArrayStyle {
+  CommaDelimited,
+  NewLine
+}
+
+export interface ArrayAdditional extends Additional {
+    metaData?: MetaData;
+    limit?: number;
+    arrayStyle?: ArrayStyle;
+}

package/src/table-builder/material.module.ts

@@ -0,0 +1,95 @@
+
+import { NgModule } from '@angular/core';
+
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSortModule } from '@angular/material/sort';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatChipsModule } from '@angular/material/chips';
+
+
+@NgModule({
+  imports: [
+    MatSlideToggleModule,
+    MatTableModule,
+    MatSelectModule,
+    MatDialogModule,
+    MatDatepickerModule,
+    MatRadioModule,
+    MatButtonModule,
+    MatExpansionModule,
+    MatStepperModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatNativeDateModule,
+    MatProgressSpinnerModule,
+    MatGridListModule,
+    MatCardModule,
+    MatSidenavModule,
+    MatTabsModule,
+    MatInputModule,
+    MatTabsModule,
+    MatCheckboxModule,
+    MatMenuModule,
+    MatIconModule,
+    MatBadgeModule,
+    MatSortModule,
+    MatAutocompleteModule,
+    MatPaginatorModule,
+    MatChipsModule,
+    MatDialogModule,
+  ],
+    exports: [
+      MatSlideToggleModule,
+      MatTableModule,
+      MatSelectModule,
+      MatDialogModule,
+      MatDatepickerModule,
+      MatRadioModule,
+      MatButtonModule,
+      MatExpansionModule,
+      MatStepperModule,
+      MatToolbarModule,
+      MatTooltipModule,
+      MatNativeDateModule,
+      MatProgressSpinnerModule,
+      MatGridListModule,
+      MatCardModule,
+      MatSidenavModule,
+      MatTabsModule,
+      MatInputModule,
+      MatTabsModule,
+      MatCheckboxModule,
+      MatMenuModule,
+      MatIconModule,
+      MatBadgeModule,
+      MatSortModule,
+      MatAutocompleteModule,
+      MatPaginatorModule,
+      MatChipsModule,
+      MatDialogModule,
+    ]
+
+})
+export class MaterialModule { }

package/src/table-builder/ngrx/actions.ts

@@ -0,0 +1,7 @@
+import { createAction, props } from '@ngrx/store';
+
+export const setLocalProfile = createAction('[State Storage] Set Local Profile', props<{key: string, value: any, persist?: boolean}>());
+
+export const setLocalProfilesState = createAction('[State Storage] Set Local Profiles Current', props<{key: string, current: string}>());
+
+export const deleteLocalProfilesState = createAction('[State Storage] Delete Local Profiles Current', props<{key: string, stateKey: string}>());

package/src/table-builder/ngrx/effects.ts

@@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+import { Actions, concatLatestFrom, createEffect, ofType } from '@ngrx/effects';
+import { defaultStorageState, GlobalStorageState} from './reducer';
+import { tap, filter, mergeMap, first, map } from 'rxjs/operators';
+import * as tableActions from './actions';
+import { select, Store } from '@ngrx/store';
+import { selectLocalProfile } from './selectors';
+
+
+@Injectable()
+export class SaveTableEffects {
+
+  saveLocalProfile$ = createEffect(
+    () => this.actions$.pipe(
+      ofType(tableActions.setLocalProfile),
+      filter( action => !!action.persist),
+      concatLatestFrom( (action) =>  this.store.pipe(
+        select(selectLocalProfile(action.key))
+      )),
+      tap( ([action,profile]) => {
+        const globalSavedState: GlobalStorageState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState) );
+        if(!profile) {
+          profile =  {default: 'default', current: 'default', states : {default: action.value}};
+          globalSavedState.localProfiles[action.key] = profile;
+        } {
+          if(!globalSavedState.localProfiles[action.key]) {
+            globalSavedState.localProfiles[action.key] = {...profile,states: {[profile.current ?? profile.default]: action.value}};
+          } else {
+            globalSavedState.localProfiles[action.key].states[profile.current ?? profile.default] = action.value;
+          }
+
+        }
+        localStorage.setItem('global-state-storage', JSON.stringify( globalSavedState));
+      }),
+    ), { dispatch: false }
+  );
+
+  deleteLocalProfile$ = createEffect(
+    () => this.actions$.pipe(
+      ofType(tableActions.deleteLocalProfilesState),
+      tap( (a) => {
+        const globalSavedState: GlobalStorageState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState) );
+          if(!globalSavedState.localProfiles[a.key]) {
+            return;
+          } else {
+            delete globalSavedState.localProfiles[a.key].states[a.stateKey];
+          }
+        localStorage.setItem('global-state-storage', JSON.stringify( globalSavedState));
+      }),
+    ), { dispatch: false }
+  );
+
+  constructor( private actions$: Actions, private store: Store<any> ) {}
+}

package/src/table-builder/ngrx/reducer.ts

@@ -0,0 +1,72 @@
+import { createReducer, Action, on } from '@ngrx/store';
+import * as tableActions from './actions';
+import { Dictionary } from '../interfaces/dictionary';
+
+export interface Profile<T = any> {
+  default: string;
+  current: string;
+  states: Dictionary<T>;
+}
+
+export interface GlobalStorageState {
+  globalProfileKeys : string [];
+  currentGlobalProfile: string;
+  globalProfiles: Dictionary<Profile>;
+  localProfiles: Dictionary<Profile>;
+}
+
+export const defaultStorageState: GlobalStorageState = {
+  globalProfileKeys: ['Default'],
+  currentGlobalProfile: 'Default',
+  globalProfiles: {},
+  localProfiles: {}
+}
+
+
+function loadGlobalStorageState() : GlobalStorageState {
+  const storage = localStorage.getItem('global-state-storage');
+  if(storage) {
+    return {...defaultStorageState, ...JSON.parse(storage)};
+  }
+  return defaultStorageState;
+}
+
+const reducer = createReducer(
+  loadGlobalStorageState(),
+  on(tableActions.setLocalProfile, (state,{key,value})=> {
+    let profile = state.localProfiles[key];
+    if(!profile) {
+      profile =  {default: 'default', current: 'default', states : {
+        default: value
+      }};
+    } else {
+      profile = {...profile, states: {...profile.states, [profile.current ?? profile.default] : value} };
+    }
+    return {...state, localProfiles: {...state.localProfiles, [key]: profile} }
+  }),
+  on(tableActions.setLocalProfilesState, (state, {key,current}) => {
+    let profile = state.localProfiles[key];
+    if(!profile) {
+      profile =  {default: current, current , states : {[current]: null }};
+    } else {
+      const state = profile.states[current] ?? profile.states[profile.current ?? profile.default];
+      profile = {...profile, current, states: {...profile.states, [current] : state }};
+    }
+    return {...state, localProfiles: {...state.localProfiles, [key]: profile}};
+  }),
+  on(tableActions.deleteLocalProfilesState, (state, {key,stateKey}) => {
+    let profile = state.localProfiles[key];
+    if(profile) {
+      const current = profile.current === stateKey ? profile.default : profile.current;
+      profile = {...profile,current, states: { ...profile.states}};
+      delete profile.states[stateKey];
+      return {...state, localProfiles: {...state.localProfiles, [key]: profile} };
+    } else {
+      return state;
+    }
+  })
+);
+
+export function storageStateReducer(state: GlobalStorageState | undefined, action: Action) {
+  return reducer(state, action);
+}

package/src/table-builder/ngrx/selectors.ts

@@ -0,0 +1,37 @@
+import { createSelector } from '@ngrx/store';
+import { GlobalStorageState, Profile } from './reducer';
+
+export const selectGlobalStorageState = (state: {globalStorageState: GlobalStorageState}) => state.globalStorageState;
+
+export const selectGlobalProfileKeys = createSelector(selectGlobalStorageState, state => state.globalProfileKeys )
+
+export const selectCurrentGlobalProfile = createSelector(selectGlobalStorageState, state => state.globalProfiles[state.currentGlobalProfile]);
+
+export const selectLocalProfile = <T>(key:string) =>  createSelector(selectGlobalStorageState, state => state.localProfiles[key]);
+
+export const selectLocalProfileState = <T>(key:string) =>  createSelector(
+  selectLocalProfile(key),
+  (profile: Profile<T>) => {
+    if(profile) {
+      return  profile.states[profile.current ?? profile.default];
+    }
+    return null;
+});
+
+export const selectLocalProfileCurrentKey = <T>(key:string) =>  createSelector(
+  selectLocalProfile(key),
+  (profile: Profile<T>) => {
+    if(profile) {
+      return  profile.current ?? profile.default;
+    }
+    return 'default';
+});
+
+export const selectLocalProfileKeys = <T>(key:string) =>  createSelector(
+  selectLocalProfile(key),
+  (profile: Profile<T>) => {
+    if(profile) {
+      return  Object.keys(profile.states).filter( key => key);
+    }
+    return null;
+});

package/src/table-builder/pipes/column-total.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { MetaData } from '../interfaces/report-def';
+import {sumBy} from 'lodash';
+
+@Pipe({ name: 'columnTotal' })
+export class ColumnTotalPipe implements PipeTransform {
+  transform(data: any[], metaData: MetaData) {
+    const dataToCalculate = data.filter(d => !d.isGroupHeader && !d.isGroupFooter)
+    switch (metaData.additional!.footer!.type) {
+      case 'sum':
+      return sumBy(dataToCalculate, metaData.key);
+    }
+    return null;
+  }
+}

package/src/table-builder/pipes/format-filter-type.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { FilterType } from '../enums/filterTypes';
+
+@Pipe({name: 'formatFilterType'})
+export class FormatFilterTypePipe implements PipeTransform {
+  transform(filterType: FilterType, value: any){
+    if(filterType === FilterType.IsNull){
+      return value ? filterType : 'Is Not Blank'
+    }
+    return filterType;
+  }
+}

package/src/table-builder/pipes/format-filter-value.pipe.ts

@@ -0,0 +1,40 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TableStore } from '../classes/table-store';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { FieldType } from '../interfaces/report-def';
+import { DatePipe } from '@angular/common';
+import { FilterType } from '../enums/filterTypes';
+import { spaceCase } from '../../utilities/pipes/space-case.pipes';
+
+
+@Pipe({name: 'formatFilterValue'})
+export class FormatFilterValuePipe implements PipeTransform {
+  constructor( public tableState: TableStore , private datePipe: DatePipe) {
+  }
+  transform(value: any, key: string, filterType: FilterType): Observable<string> {
+    return this.tableState.getMetaData$(key).pipe(
+      map( md => {
+        if(filterType === FilterType.IsNull) {
+          return '';
+        }
+        if(value && (filterType === FilterType.In )){
+          if(md.fieldType === FieldType.Enum) {
+            return value.map( (v: any) => spaceCase(md.additional!.enumMap![v])).join(', ') ?? value;
+          }
+          return value.join(', ') ?? value;
+        }
+        if(filterType === FilterType.NumberBetween){
+          if(md.fieldType === FieldType.Date){
+            value = this.datePipe.transform(value.Start, 'MM/dd/yy')+ ' - ' + this.datePipe.transform(value.End, 'MM/dd/yy');
+          }else{
+            value = value.Start + ' - ' + value.End;
+          }
+        } else if(md.fieldType === FieldType.Date){
+          value = this.datePipe.transform(value, 'MM/dd/yy');
+        }
+        return value
+      })
+    );
+  }
+}

package/src/table-builder/pipes/key-display.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TableStore } from '../classes/table-store';
+import { spaceCase } from '../../utilities/pipes/space-case.pipes';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Pipe({name: 'keyDisplay'})
+export class KeyDisplayPipe implements PipeTransform {
+  constructor( public tableState: TableStore) {
+  }
+  transform(key: string): Observable<string> {
+    return this.tableState.getMetaData$(key).pipe(
+      map( metaData => metaData.displayName || spaceCase(key))
+    );
+  }
+}

package/src/table-builder/services/export-to-csv.service.ts

@@ -0,0 +1,92 @@
+import { DatePipe } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { first, map  } from 'rxjs/operators';
+import { combineLatest} from 'rxjs';
+import { orderMetaData, TableStore } from '../classes/table-store';
+import { TableBuilderConfig, TableBuilderConfigToken } from '../classes/TableBuilderConfig';
+import { downloadData } from '../functions/download-data';
+import { ArrayAdditional, ArrayStyle, FieldType, MetaData } from '../interfaces/report-def';
+import { TableState } from '../classes/TableState';
+import { isPipe } from './transform-creator';
+import { get } from 'lodash';
+
+@Injectable()
+export class ExportToCsvService<T> {
+  constructor(
+    public state: TableStore,
+    @Inject(TableBuilderConfigToken) private config: TableBuilderConfig,
+    private datePipe: DatePipe,
+  ){}
+
+  exportToCsv = (data: Observable<T[]>) => {
+    const exportableFields$ = this.state.state$.pipe(
+      map(mapExportableFields)
+    );
+
+    combineLatest([data,exportableFields$]).pipe(
+      first(),
+      map(([data,fields]) => this.csvData(data,fields)),
+    ).subscribe(csv => downloadData(csv,'export.csv','text/csv') );
+  }
+
+  csvData = (data:Array<T>, metaData: MetaData<T>[]) => {
+    const res = data.map(row => metaData.map(meta => this.metaToField(meta, row)).join(','));
+    res.unshift(metaData.map(meta => meta.displayName || meta.key).join(','));
+    return res.join('\n');
+  }
+
+  metaToField = (meta: MetaData<T>, row: T) => {
+    let val: any = get( row,meta.key);
+    if (val == null && !meta.transform) return val
+    if(meta.transform && meta.fieldType !== FieldType.Expression){
+      const transform = meta.transform as any;
+      return  isPipe(transform) ? transform.transform(val) : transform(val);
+    }
+    switch (meta.fieldType) {
+      case FieldType.Date:
+        const dateFormat = meta.additional?.export?.dateFormat || this.config?.export?.dateFormat || meta.additional?.dateFormat;
+        val = this.transform(val, dateFormat);
+        break;
+      case FieldType.String:
+        const prepend: string = meta.additional?.export?.prepend || this.config?.export?.prepend || '';
+        val = prepend + val;
+        break;
+      case FieldType.Array:
+        const additional = meta.additional as ArrayAdditional;
+        val = (val as Array<string>).slice(0,additional.limit).join(additional.arrayStyle === ArrayStyle.NewLine ? '\n' : ', ');
+        break;
+      case FieldType.Expression:
+        val = (meta.transform as any)(row);
+        break;
+    }
+    if (typeof val === 'string' && (val.includes(',') || val.includes('"') || val.includes('\n'))) {
+      val = val.replaceAll('"', '""');
+      val = '"' + val + '"';
+    }
+    return val;
+  }
+
+  private transform(val: any, dateFormat: any) {
+    if (this.config.transformers && this.config.transformers[FieldType.Date]) {
+      return this.config.transformers[FieldType.Date]!(val);
+    }
+    return this.datePipe.transform(val, dateFormat);
+  }
+}
+
+export const removeFromMetaData = (state: TableState, keysToRemove: string[]) =>
+
+  orderMetaData(state)
+  .filter( meta => !keysToRemove.includes(meta.key));
+
+
+export const nonExportableFields = (state: TableState) => Object.values( state.metaData)
+  .filter(md => md.noExport )
+  .map( md => md.key );
+
+export const mapExportableFields = (state: TableState) => {
+  const fieldsToRemove = nonExportableFields(state)
+    .concat(state.hiddenKeys);
+   return removeFromMetaData(state, fieldsToRemove);
+}

package/src/table-builder/services/link-creator.service.ts

@@ -0,0 +1,48 @@
+import { get } from "lodash";
+import { MetaData } from "../interfaces/report-def";
+
+export function createLinkCreator<T>(metaData: MetaData<T>){
+  const target = metaData.additional?.link?.target || metaData.additional?.target || '_blank';
+  const useRouterLink = metaData.additional?.link?.useRouterLink || metaData.additional?.useRouterLink;
+  const hasRoute = !!metaData.additional?.link?.interpolatedRoute;
+  const routerLinkOptions = useRouterLink ? {
+    queryParams: (element) => metaData.additional!.link!.routerLinkOptions?.queryParams?.reduce((map, [key, value]) => {
+      map[key] = parseInterpolated(value, element);
+      return map;
+    }, {}) ?? null,
+    fragment: metaData.additional!.link?.routerLinkOptions?.fragment,
+    preserveFragment: metaData.additional!.link!.routerLinkOptions?.preserveFragment ?? false,
+    queryParamsHandling: metaData.additional!.link!.routerLinkOptions?.queryParamsHandling ?? '',
+  }
+  : undefined;
+
+
+
+  if (hasRoute) {
+    return ({
+      link: (element: T) => parseInterpolated(metaData.additional!.link!.interpolatedRoute!, element),
+      target,
+      useRouterLink,
+      routerLinkOptions,
+    });
+  } else {
+    const slashIfNeeded = !metaData.additional?.link?.base?.endsWith('/') ? '/' : '';
+    const base = metaData.additional!.link?.base || metaData.additional!.base;
+    const getKey = key(metaData);
+    return ({
+      link: (element: T) => `${base}${slashIfNeeded}${getKey(element)}`,
+      target,
+      useRouterLink,
+      routerLinkOptions,
+    });
+  }
+}
+
+const key = (metaData : MetaData) => metaData.additional!.link?.urlKey ? 
+  (element:any) => get(element, (metaData.additional!.link!.urlKey as string)) :
+    metaData.additional!.urlKey ?
+  (element:any) => get(element, (metaData.additional!.urlKey as string)) :
+  (element:any) => get(element, metaData.key);
+
+const parseInterpolated = ( interpolatedString: string, element: any ) =>
+  interpolatedString.replace(/{([^}]+)}/g, (_, key) => get(element ,key));

package/src/table-builder/services/table-template-service.ts

@@ -0,0 +1,44 @@
+import { ComponentFactoryResolver, Injector } from "@angular/core";
+import { Injectable, TemplateRef } from "@angular/core";
+import { TableStore } from "../classes/table-store";
+import { InitializationComponent } from "../components/initialization-component/initialization-component";
+import { FieldType, MetaData } from "../interfaces/report-def";
+
+@Injectable({providedIn: 'root'})
+export class TableTemplateService {
+  instance!: InitializationComponent;
+  templates;
+
+  initTemplates() {
+    this.templates = { };
+    this.templates[FieldType.Array] = this.instance.arrayTemplate;
+    this.templates[FieldType.Boolean] = this.instance.defaultWithIcon;
+    this.templates[FieldType.Currency] = this.instance.defaultTemplate;
+    this.templates[FieldType.Date] = this.instance.defaultTemplate;
+    this.templates[FieldType.Expression] = this.instance.defaultTemplate;
+    this.templates[FieldType.ImageUrl] = this.instance.imageUrlTemplate;
+    this.templates[FieldType.Link] = this.instance.linkTemplate;
+    this.templates[FieldType.Number] = this.instance.defaultTemplate;
+    this.templates[FieldType.PhoneNumber] = this.instance.defaultTemplate;
+    this.templates[FieldType.String] = this.instance.defaultTemplate;
+    this.templates[FieldType.Unknown] = this.instance.defaultTemplate;
+    this.templates[FieldType.Enum] = this.instance.defaultTemplate;
+  }
+  getTemplate(metaData: MetaData) : TemplateRef<any> {
+
+    let tmp =  this.templates[metaData.fieldType];
+    if(metaData.useIcon) {
+      if(tmp === this.instance.defaultTemplate) {
+        tmp = this.instance.defaultWithIcon;
+      }
+    }
+    return tmp;
+  }
+
+  constructor(resolver: ComponentFactoryResolver, i: Injector,  ) {
+        const factory = resolver.resolveComponentFactory(InitializationComponent);
+        const c = factory.create(i);
+        this.instance = c.instance;
+        this.initTemplates();
+  }
+}