@ajsf/material 0.2.0-beta.1 → 0.4.0-beta.1

package/lib/widgets/material-radios.component.d.ts

@@ -0,0 +1,20 @@
+import { AbstractControl } from '@angular/forms';
+import { OnInit } from '@angular/core';
+import { JsonSchemaFormService } from '@ajsf/core';
+export declare class MaterialRadiosComponent implements OnInit {
+    private jsf;
+    formControl: AbstractControl;
+    controlName: string;
+    controlValue: any;
+    controlDisabled: boolean;
+    boundControl: boolean;
+    options: any;
+    flexDirection: string;
+    radiosList: any[];
+    layoutNode: any;
+    layoutIndex: number[];
+    dataIndex: number[];
+    constructor(jsf: JsonSchemaFormService);
+    ngOnInit(): void;
+    updateValue(value: any): void;
+}

package/lib/widgets/material-select.component.d.ts

@@ -0,0 +1,21 @@
+import { AbstractControl } from '@angular/forms';
+import { OnInit } from '@angular/core';
+import { JsonSchemaFormService, isArray } from '@ajsf/core';
+export declare class MaterialSelectComponent implements OnInit {
+    matFormFieldDefaultOptions: any;
+    private jsf;
+    formControl: AbstractControl;
+    controlName: string;
+    controlValue: any;
+    controlDisabled: boolean;
+    boundControl: boolean;
+    options: any;
+    selectList: any[];
+    isArray: typeof isArray;
+    layoutNode: any;
+    layoutIndex: number[];
+    dataIndex: number[];
+    constructor(matFormFieldDefaultOptions: any, jsf: JsonSchemaFormService);
+    ngOnInit(): void;
+    updateValue(event: any): void;
+}

package/lib/widgets/material-slider.component.d.ts

@@ -0,0 +1,22 @@
+import { AbstractControl } from '@angular/forms';
+import { OnInit } from '@angular/core';
+import { JsonSchemaFormService } from '@ajsf/core';
+export declare class MaterialSliderComponent implements OnInit {
+    private jsf;
+    formControl: AbstractControl;
+    controlName: string;
+    controlValue: any;
+    controlDisabled: boolean;
+    boundControl: boolean;
+    options: any;
+    allowNegative: boolean;
+    allowDecimal: boolean;
+    allowExponents: boolean;
+    lastValidNumber: string;
+    layoutNode: any;
+    layoutIndex: number[];
+    dataIndex: number[];
+    constructor(jsf: JsonSchemaFormService);
+    ngOnInit(): void;
+    updateValue(event: any): void;
+}

package/lib/widgets/material-stepper.component.d.ts

@@ -0,0 +1,18 @@
+import { AbstractControl } from '@angular/forms';
+import { OnInit } from '@angular/core';
+import { JsonSchemaFormService } from '@ajsf/core';
+export declare class MaterialStepperComponent implements OnInit {
+    private jsf;
+    formControl: AbstractControl;
+    controlName: string;
+    controlValue: any;
+    controlDisabled: boolean;
+    boundControl: boolean;
+    options: any;
+    layoutNode: any;
+    layoutIndex: number[];
+    dataIndex: number[];
+    constructor(jsf: JsonSchemaFormService);
+    ngOnInit(): void;
+    updateValue(event: any): void;
+}

package/lib/widgets/material-tabs.component.d.ts

@@ -0,0 +1,17 @@
+import { OnInit } from '@angular/core';
+import { JsonSchemaFormService } from '@ajsf/core';
+export declare class MaterialTabsComponent implements OnInit {
+    private jsf;
+    options: any;
+    itemCount: number;
+    selectedItem: number;
+    showAddTab: boolean;
+    layoutNode: any;
+    layoutIndex: number[];
+    dataIndex: number[];
+    constructor(jsf: JsonSchemaFormService);
+    ngOnInit(): void;
+    select(index: any): void;
+    updateControl(): void;
+    setTabTitle(item: any, index: number): string;
+}

package/lib/widgets/material-textarea.component.d.ts

@@ -0,0 +1,19 @@
+import { AbstractControl } from '@angular/forms';
+import { OnInit } from '@angular/core';
+import { JsonSchemaFormService } from '@ajsf/core';
+export declare class MaterialTextareaComponent implements OnInit {
+    matFormFieldDefaultOptions: any;
+    private jsf;
+    formControl: AbstractControl;
+    controlName: string;
+    controlValue: any;
+    controlDisabled: boolean;
+    boundControl: boolean;
+    options: any;
+    layoutNode: any;
+    layoutIndex: number[];
+    dataIndex: number[];
+    constructor(matFormFieldDefaultOptions: any, jsf: JsonSchemaFormService);
+    ngOnInit(): void;
+    updateValue(event: any): void;
+}

package/{src/lib/widgets/public_api.ts → lib/widgets/public_api.d.ts}

@@ -18,20 +18,7 @@ import { MaterialSliderComponent } from './material-slider.component';
 import { MaterialStepperComponent } from './material-stepper.component';
 import { MaterialTabsComponent } from './material-tabs.component';
 import { MaterialTextareaComponent } from './material-textarea.component';
-
-
-export const MATERIAL_FRAMEWORK_COMPONENTS = [
-  FlexLayoutRootComponent, FlexLayoutSectionComponent,
-  MaterialAddReferenceComponent, MaterialOneOfComponent,
-  MaterialButtonComponent, MaterialButtonGroupComponent,
-  MaterialCheckboxComponent, MaterialCheckboxesComponent,
-  MaterialChipListComponent, MaterialDatepickerComponent,
-  MaterialFileComponent, MaterialInputComponent, MaterialNumberComponent,
-  MaterialRadiosComponent, MaterialSelectComponent, MaterialSliderComponent,
-  MaterialStepperComponent, MaterialTabsComponent, MaterialTextareaComponent,
-  MaterialDesignFrameworkComponent
-];
-
+export declare const MATERIAL_FRAMEWORK_COMPONENTS: (typeof FlexLayoutRootComponent | typeof FlexLayoutSectionComponent | typeof MaterialAddReferenceComponent | typeof MaterialButtonComponent | typeof MaterialButtonGroupComponent | typeof MaterialCheckboxComponent | typeof MaterialCheckboxesComponent | typeof MaterialChipListComponent | typeof MaterialDatepickerComponent | typeof MaterialDesignFrameworkComponent | typeof MaterialFileComponent | typeof MaterialInputComponent | typeof MaterialNumberComponent | typeof MaterialOneOfComponent | typeof MaterialRadiosComponent | typeof MaterialSelectComponent | typeof MaterialSliderComponent | typeof MaterialStepperComponent | typeof MaterialTabsComponent | typeof MaterialTextareaComponent)[];
 export { FlexLayoutRootComponent } from './flex-layout-root.component';
 export { FlexLayoutSectionComponent } from './flex-layout-section.component';
 export { MaterialAddReferenceComponent } from './material-add-reference.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ajsf/material",
-  "version": "0.2.0-beta.1",
+  "version": "0.4.0-beta.1",
   "description": "Angular JSON Schema Form builder using Angular Material UI",
   "author": "https://github.com/hamzahamidi/ajsf/graphs/contributors",
   "keywords": [
@@ -15,6 +15,15 @@
     "Angular8",
     "Angular 8",
     "ng8",
+    "Angular9",
+    "Angular 9",
+    "ng9",
+    "Angular10",
+    "Angular 10",
+    "ng10",
+    "Angular11",
+    "Angular 11",
+    "ng11",
     "JSON Schema",
     "form",
     "forms",
@@ -35,11 +44,20 @@
   "private": false,
   "dependencies": {
     "lodash-es": "^4.17.15",
-    "@ajsf/core": "~0.2.0-beta.1"
+    "@ajsf/core": "~0.4.0-beta.1",
+    "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/flex-layout": ">=9.0.0-beta.28",
-    "@angular/material": ">=9.0.0",
-    "@angular/cdk": ">=9.0.0"
-  }
-}
+    "@angular/flex-layout": ">=11.0.0-beta.33",
+    "@angular/material": ">=11.0.0",
+    "@angular/cdk": ">=11.0.0"
+  },
+  "main": "bundles/ajsf-material.umd.js",
+  "module": "fesm2015/ajsf-material.js",
+  "es2015": "fesm2015/ajsf-material.js",
+  "esm2015": "esm2015/ajsf-material.js",
+  "fesm2015": "fesm2015/ajsf-material.js",
+  "typings": "ajsf-material.d.ts",
+  "metadata": "ajsf-material.metadata.json",
+  "sideEffects": false
+}

package/{src/public_api.ts → public_api.d.ts}

@@ -1,7 +1,3 @@
-/*
- * Public API Surface of @ajsf/material-framework
- */
-
 export * from './lib/material-design.framework';
 export * from './lib/material-design-framework.module';
 export * from './lib/material-design-framework.component';

package/karma.conf.js

@@ -1,37 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../../coverage/ajsf-material'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome', 'ChromeHeadlessNoSandbox'],
-    singleRun: false,
-    customLaunchers: {
-      ChromeHeadlessNoSandbox: {
-        base: 'ChromeHeadless',
-        flags: ['--no-sandbox']
-      }
-    }
-  });
-};

package/ng-package.json

@@ -1,16 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/@ajsf/material",
-  "lib": {
-    "entryFile": "src/public_api.ts",
-    "umdModuleIds": {
-      "lodash/cloneDeep": "lodash-es",
-      "lodash/map": "lodash-es",
-      "@ajsf/core": "@ajsf/core"
-    }
-  },
-  "whitelistedNonPeerDependencies": [
-    "lodash-es",
-    "@ajsf/core"
-  ]
-}

package/src/lib/angular-flex-monkey-patch.ts

@@ -1,13 +0,0 @@
-import { MediaMarshaller } from '@angular/flex-layout/core';
-
-export function fixAngularFlex() {
-  // monkey patch based on errors in console  - https://github.com/angular/flex-layout/issues/1011
-  const MediaMarshallerUpdateElement = MediaMarshaller.prototype.updateElement;
-
-  MediaMarshaller.prototype.updateElement = function (element: HTMLElement, key: string, value: any) {
-    if (key === 'layout-gap' && (value === null || value === undefined)) {
-      value = '0px';
-    }
-    MediaMarshallerUpdateElement.apply(this, [element, key, value]);
-  };
-}

package/src/lib/material-design-framework.component.html

@@ -1,20 +0,0 @@
-<div
-  [class.array-item]="widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'"
-  [orderable]="isOrderable"
-  [dataIndex]="dataIndex"
-  [layoutIndex]="layoutIndex"
-  [layoutNode]="widgetLayoutNode">
-  <svg *ngIf="showRemoveButton"
-       xmlns="http://www.w3.org/2000/svg"
-       height="18" width="18" viewBox="0 0 24 24"
-       class="close-button"
-       (click)="removeItem()">
-    <path
-      d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
-  </svg>
-  <select-widget-widget
-    [dataIndex]="dataIndex"
-    [layoutIndex]="layoutIndex"
-    [layoutNode]="widgetLayoutNode"></select-widget-widget>
-</div>
-<div class="spacer" *ngIf="widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'"></div>

package/src/lib/material-design-framework.component.scss

@@ -1,51 +0,0 @@
-.array-item {
-  border-radius: 2px;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2),
-  0 2px 2px 0 rgba(0, 0, 0, .14),
-  0 1px 5px 0 rgba(0, 0, 0, .12);
-  padding: 6px;
-  position: relative;
-  transition: all 280ms cubic-bezier(.4, 0, .2, 1);
-}
-
-.close-button {
-  cursor: pointer;
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  fill: rgba(0, 0, 0, .4);
-  visibility: hidden;
-  z-index: 500;
-}
-
-.close-button:hover {
-  fill: rgba(0, 0, 0, .8);
-}
-
-.array-item:hover > .close-button {
-  visibility: visible;
-}
-
-.spacer {
-  margin: 6px 0;
-}
-
-[draggable=true]:hover {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2),
-  0 8px 10px 1px rgba(0, 0, 0, .14),
-  0 3px 14px 2px rgba(0, 0, 0, .12);
-  cursor: move;
-  z-index: 10;
-}
-
-[draggable=true].drag-target-top {
-  box-shadow: 0 -2px 0 #000;
-  position: relative;
-  z-index: 20;
-}
-
-[draggable=true].drag-target-bottom {
-  box-shadow: 0 2px 0 #000;
-  position: relative;
-  z-index: 20;
-}

package/src/lib/material-design-framework.component.spec.ts

@@ -1,37 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { CommonModule } from '@angular/common';
-import {
-  JsonSchemaFormModule,
-  WidgetLibraryModule
-} from '@ajsf/core';
-import { MaterialDesignFrameworkComponent } from './material-design-framework.component';
-
-describe('FwBootstrap4Component', () => {
-  let component: MaterialDesignFrameworkComponent;
-  let fixture: ComponentFixture<MaterialDesignFrameworkComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        JsonSchemaFormModule,
-        CommonModule,
-        WidgetLibraryModule,
-      ],
-      declarations: [MaterialDesignFrameworkComponent]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MaterialDesignFrameworkComponent);
-    component = fixture.componentInstance;
-    component.layoutNode = { options: {} };
-    component.layoutIndex = [];
-    component.dataIndex = [];
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/material-design-framework.component.ts

@@ -1,121 +0,0 @@
-import {ChangeDetectorRef, Component, Input, OnChanges, OnInit} from '@angular/core';
-import {isDefined, JsonSchemaFormService} from '@ajsf/core';
-import cloneDeep from 'lodash/cloneDeep';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'material-design-framework',
-  templateUrl: './material-design-framework.component.html',
-  styleUrls: ['./material-design-framework.component.scss'],
-})
-export class MaterialDesignFrameworkComponent implements OnInit, OnChanges {
-  frameworkInitialized = false;
-  inputType: string;
-  options: any; // Options used in this framework
-  widgetLayoutNode: any; // layoutNode passed to child widget
-  widgetOptions: any; // Options passed to child widget
-  formControl: any = null;
-  parentArray: any = null;
-  isOrderable = false;
-  dynamicTitle: string = null;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private changeDetector: ChangeDetectorRef,
-    private jsf: JsonSchemaFormService
-  ) {
-  }
-
-  get showRemoveButton(): boolean {
-    if (!this.layoutNode || !this.widgetOptions.removable ||
-      this.widgetOptions.readonly || this.layoutNode.type === '$ref'
-    ) {
-      return false;
-    }
-    if (this.layoutNode.recursiveReference) {
-      return true;
-    }
-    if (!this.layoutNode.arrayItem || !this.parentArray) {
-      return false;
-    }
-    // If array length <= minItems, don't allow removing any items
-    return this.parentArray.items.length - 1 <= this.parentArray.options.minItems ? false :
-      // For removable list items, allow removing any item
-      this.layoutNode.arrayItemType === 'list' ? true :
-        // For removable tuple items, only allow removing last item in list
-        this.layoutIndex[this.layoutIndex.length - 1] === this.parentArray.items.length - 2;
-  }
-
-  ngOnInit() {
-    this.initializeFramework();
-  }
-
-  ngOnChanges() {
-    if (!this.frameworkInitialized) {
-      this.initializeFramework();
-    }
-    if (this.dynamicTitle) {
-      this.updateTitle();
-    }
-  }
-
-  initializeFramework() {
-    if (this.layoutNode) {
-      this.options = cloneDeep(this.layoutNode.options || {});
-      this.widgetLayoutNode = {
-        ...this.layoutNode,
-        options: cloneDeep(this.layoutNode.options || {})
-      };
-      this.widgetOptions = this.widgetLayoutNode.options;
-      this.formControl = this.jsf.getFormControl(this);
-
-      if (
-        isDefined(this.widgetOptions.minimum) &&
-        isDefined(this.widgetOptions.maximum) &&
-        this.widgetOptions.multipleOf >= 1
-      ) {
-        this.layoutNode.type = 'range';
-      }
-
-      if (
-        !['$ref', 'advancedfieldset', 'authfieldset', 'button', 'card',
-          'checkbox', 'expansion-panel', 'help', 'message', 'msg', 'section',
-          'submit', 'tabarray', 'tabs'].includes(this.layoutNode.type) &&
-        /{{.+?}}/.test(this.widgetOptions.title || '')
-      ) {
-        this.dynamicTitle = this.widgetOptions.title;
-        this.updateTitle();
-      }
-
-      if (this.layoutNode.arrayItem && this.layoutNode.type !== '$ref') {
-        this.parentArray = this.jsf.getParentNode(this);
-        if (this.parentArray) {
-          this.isOrderable =
-            this.parentArray.type.slice(0, 3) !== 'tab' &&
-            this.layoutNode.arrayItemType === 'list' &&
-            !this.widgetOptions.readonly &&
-            this.parentArray.options.orderable;
-        }
-      }
-
-      this.frameworkInitialized = true;
-    } else {
-      this.options = {};
-    }
-  }
-
-  updateTitle() {
-    this.widgetLayoutNode.options.title = this.jsf.parseText(
-      this.dynamicTitle,
-      this.jsf.getFormControlValue(this),
-      this.jsf.getFormControlGroup(this).value,
-      this.dataIndex[this.dataIndex.length - 1]
-    );
-  }
-
-  removeItem() {
-    this.jsf.removeItem(this);
-  }
-}

package/src/lib/material-design-framework.module.ts

@@ -1,84 +0,0 @@
-import {
-  Framework,
-  FrameworkLibraryService,
-  JsonSchemaFormModule,
-  JsonSchemaFormService,
-  WidgetLibraryModule, WidgetLibraryService
-} from '@ajsf/core';
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {FlexLayoutModule} from '@angular/flex-layout';
-import {MatAutocompleteModule} from '@angular/material/autocomplete';
-import {MatButtonModule} from '@angular/material/button';
-import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatCardModule} from '@angular/material/card';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatNativeDateModule} from '@angular/material/core';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatExpansionModule} from '@angular/material/expansion';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatIconModule} from '@angular/material/icon';
-import {MatInputModule} from '@angular/material/input';
-import {MatRadioModule} from '@angular/material/radio';
-import {MatSelectModule} from '@angular/material/select';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {MatSliderModule} from '@angular/material/slider';
-import {MatStepperModule} from '@angular/material/stepper';
-import {MatTabsModule} from '@angular/material/tabs';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {MatMenuModule} from '@angular/material/menu';
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MaterialDesignFramework} from './material-design.framework';
-import {MATERIAL_FRAMEWORK_COMPONENTS} from './widgets/public_api';
-import {fixAngularFlex} from './angular-flex-monkey-patch';
-
-/**
- * unused @angular/material modules:
- * MatDialogModule, MatGridListModule, MatListModule, MatMenuModule,
- * MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule,
- * MatSidenavModule, MatSnackBarModule, MatSortModule, MatTableModule,
- * ,
- */
-export const ANGULAR_MATERIAL_MODULES = [
-  MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule,
-  MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatExpansionModule,
-  MatFormFieldModule, MatIconModule, MatInputModule, MatNativeDateModule,
-  MatRadioModule, MatSelectModule, MatSliderModule, MatSlideToggleModule,
-  MatStepperModule, MatTabsModule, MatTooltipModule,
-  MatToolbarModule, MatMenuModule, MatToolbarModule,
-];
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    FlexLayoutModule,
-    ...ANGULAR_MATERIAL_MODULES,
-    WidgetLibraryModule,
-    JsonSchemaFormModule,
-  ],
-  declarations: [
-    ...MATERIAL_FRAMEWORK_COMPONENTS,
-  ],
-  exports: [
-    JsonSchemaFormModule,
-    ...MATERIAL_FRAMEWORK_COMPONENTS,
-  ],
-  providers: [
-    JsonSchemaFormService,
-    FrameworkLibraryService,
-    WidgetLibraryService,
-    {provide: Framework, useClass: MaterialDesignFramework, multi: true},
-  ],
-  entryComponents: [
-    ...MATERIAL_FRAMEWORK_COMPONENTS,
-  ]
-})
-export class MaterialDesignFrameworkModule {
-  constructor() {
-    fixAngularFlex();
-  }
-}

package/src/lib/material-design.framework.ts

@@ -1,75 +0,0 @@
-import {Injectable} from '@angular/core';
-import {Framework} from '@ajsf/core';
-import {
-  FlexLayoutRootComponent,
-  FlexLayoutSectionComponent,
-  MaterialAddReferenceComponent,
-  MaterialButtonComponent,
-  MaterialButtonGroupComponent,
-  MaterialCheckboxComponent,
-  MaterialCheckboxesComponent,
-  MaterialChipListComponent,
-  MaterialDatepickerComponent,
-  MaterialDesignFrameworkComponent,
-  MaterialFileComponent,
-  MaterialInputComponent,
-  MaterialNumberComponent,
-  MaterialOneOfComponent,
-  MaterialRadiosComponent,
-  MaterialSelectComponent,
-  MaterialSliderComponent,
-  MaterialStepperComponent,
-  MaterialTabsComponent,
-  MaterialTextareaComponent
-} from './widgets/public_api';
-
-
-// Material Design Framework
-// https://github.com/angular/material2
-
-@Injectable()
-export class MaterialDesignFramework extends Framework {
-  name = 'material-design';
-
-  framework = MaterialDesignFrameworkComponent;
-
-  stylesheets = [
-    '//fonts.googleapis.com/icon?family=Material+Icons',
-    '//fonts.googleapis.com/css?family=Roboto:300,400,500,700',
-  ];
-
-  widgets = {
-    'root': FlexLayoutRootComponent,
-    'section': FlexLayoutSectionComponent,
-    '$ref': MaterialAddReferenceComponent,
-    'button': MaterialButtonComponent,
-    'button-group': MaterialButtonGroupComponent,
-    'checkbox': MaterialCheckboxComponent,
-    'checkboxes': MaterialCheckboxesComponent,
-    'chip-list': MaterialChipListComponent,
-    'date': MaterialDatepickerComponent,
-    'file': MaterialFileComponent,
-    'number': MaterialNumberComponent,
-    'one-of': MaterialOneOfComponent,
-    'radios': MaterialRadiosComponent,
-    'select': MaterialSelectComponent,
-    'slider': MaterialSliderComponent,
-    'stepper': MaterialStepperComponent,
-    'tabs': MaterialTabsComponent,
-    'text': MaterialInputComponent,
-    'textarea': MaterialTextareaComponent,
-    'alt-date': 'date',
-    'any-of': 'one-of',
-    'card': 'section',
-    'color': 'text',
-    'expansion-panel': 'section',
-    'hidden': 'none',
-    'image': 'none',
-    'integer': 'number',
-    'radiobuttons': 'button-group',
-    'range': 'slider',
-    'submit': 'button',
-    'tagsinput': 'chip-list',
-    'wizard': 'stepper',
-  };
-}