@ajsf/material 0.5.1-beta.4 → 0.7.0

package/fesm2020/ajsf-material.mjs

@@ -0,0 +1,2420 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, Inject, Optional, Injectable, NgModule } from '@angular/core';
+import * as i1 from '@ajsf/core';
+import { hasOwn, buildTitleMap, isDefined, isArray, Framework, WidgetLibraryModule, JsonSchemaFormModule, JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService } from '@ajsf/core';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$1 from '@angular/flex-layout/flex';
+import * as i3$2 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i4 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i2 from '@angular/material/form-field';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule } from '@angular/material/form-field';
+import * as i8 from '@angular/flex-layout/extended';
+import * as i2$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3$3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2$2 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i2$3 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i3$4 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i5 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3$5 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i4$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import cloneDeep from 'lodash/cloneDeep';
+import * as i3$6 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i4$2 from '@angular/material/core';
+import { MatNativeDateModule } from '@angular/material/core';
+import * as i2$4 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i3$7 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i2$5 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import * as i2$6 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MediaMarshaller } from '@angular/flex-layout/core';
+
+class FlexLayoutRootComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.isFlexItem = false;
+    }
+    removeItem(item) {
+        this.jsf.removeItem(item);
+    }
+    // Set attributes for flexbox child
+    // (container attributes are set in flex-layout-section.component)
+    getFlexAttribute(node, attribute) {
+        const index = ['flex-grow', 'flex-shrink', 'flex-basis'].indexOf(attribute);
+        return ((node.options || {}).flex || '').split(/\s+/)[index] ||
+            (node.options || {})[attribute] || ['1', '1', 'auto'][index];
+    }
+    showWidget(layoutNode) {
+        return this.jsf.evaluateCondition(layoutNode, this.dataIndex);
+    }
+}
+FlexLayoutRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: FlexLayoutRootComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+FlexLayoutRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: FlexLayoutRootComponent, selector: "flex-layout-root-widget", inputs: { dataIndex: "dataIndex", layoutIndex: "layoutIndex", layout: "layout", isFlexItem: "isFlexItem" }, ngImport: i0, template: `
+    <div *ngFor="let layoutNode of layout; let i = index"
+      [class.form-flex-item]="isFlexItem"
+      [style.flex-grow]="getFlexAttribute(layoutNode, 'flex-grow')"
+      [style.flex-shrink]="getFlexAttribute(layoutNode, 'flex-shrink')"
+      [style.flex-basis]="getFlexAttribute(layoutNode, 'flex-basis')"
+      [style.align-self]="(layoutNode?.options || {})['align-self']"
+      [style.order]="layoutNode?.options?.order"
+      [fxFlex]="layoutNode?.options?.fxFlex"
+      [fxFlexOrder]="layoutNode?.options?.fxFlexOrder"
+      [fxFlexOffset]="layoutNode?.options?.fxFlexOffset"
+      [fxFlexAlign]="layoutNode?.options?.fxFlexAlign">
+      <select-framework-widget *ngIf="showWidget(layoutNode)"
+        [dataIndex]="layoutNode?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
+        [layoutIndex]="(layoutIndex || []).concat(i)"
+        [layoutNode]="layoutNode"></select-framework-widget>
+    <div>`, isInline: true, components: [{ type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i3$1.DefaultFlexOrderDirective, selector: "  [fxFlexOrder], [fxFlexOrder.xs], [fxFlexOrder.sm], [fxFlexOrder.md],  [fxFlexOrder.lg], [fxFlexOrder.xl], [fxFlexOrder.lt-sm], [fxFlexOrder.lt-md],  [fxFlexOrder.lt-lg], [fxFlexOrder.lt-xl], [fxFlexOrder.gt-xs], [fxFlexOrder.gt-sm],  [fxFlexOrder.gt-md], [fxFlexOrder.gt-lg]", inputs: ["fxFlexOrder", "fxFlexOrder.xs", "fxFlexOrder.sm", "fxFlexOrder.md", "fxFlexOrder.lg", "fxFlexOrder.xl", "fxFlexOrder.lt-sm", "fxFlexOrder.lt-md", "fxFlexOrder.lt-lg", "fxFlexOrder.lt-xl", "fxFlexOrder.gt-xs", "fxFlexOrder.gt-sm", "fxFlexOrder.gt-md", "fxFlexOrder.gt-lg"] }, { type: i3$1.DefaultFlexOffsetDirective, selector: "  [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],  [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],  [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],  [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }, { type: i3$1.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: FlexLayoutRootComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'flex-layout-root-widget',
+                    template: `
+    <div *ngFor="let layoutNode of layout; let i = index"
+      [class.form-flex-item]="isFlexItem"
+      [style.flex-grow]="getFlexAttribute(layoutNode, 'flex-grow')"
+      [style.flex-shrink]="getFlexAttribute(layoutNode, 'flex-shrink')"
+      [style.flex-basis]="getFlexAttribute(layoutNode, 'flex-basis')"
+      [style.align-self]="(layoutNode?.options || {})['align-self']"
+      [style.order]="layoutNode?.options?.order"
+      [fxFlex]="layoutNode?.options?.fxFlex"
+      [fxFlexOrder]="layoutNode?.options?.fxFlexOrder"
+      [fxFlexOffset]="layoutNode?.options?.fxFlexOffset"
+      [fxFlexAlign]="layoutNode?.options?.fxFlexAlign">
+      <select-framework-widget *ngIf="showWidget(layoutNode)"
+        [dataIndex]="layoutNode?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
+        [layoutIndex]="(layoutIndex || []).concat(i)"
+        [layoutNode]="layoutNode"></select-framework-widget>
+    <div>`,
+                    changeDetection: ChangeDetectionStrategy.Default,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { dataIndex: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], isFlexItem: [{
+                type: Input
+            }] } });
+
+class FlexLayoutSectionComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.expanded = true;
+        this.containerType = 'div';
+    }
+    get sectionTitle() {
+        return this.options.notitle ? null : this.jsf.setItemTitle(this);
+    }
+    ngOnInit() {
+        this.jsf.initializeControl(this);
+        this.options = this.layoutNode.options || {};
+        this.expanded = typeof this.options.expanded === 'boolean' ?
+            this.options.expanded : !this.options.expandable;
+        switch (this.layoutNode.type) {
+            case 'section':
+            case 'array':
+            case 'fieldset':
+            case 'advancedfieldset':
+            case 'authfieldset':
+            case 'optionfieldset':
+            case 'selectfieldset':
+                this.containerType = 'fieldset';
+                break;
+            case 'card':
+                this.containerType = 'card';
+                break;
+            case 'expansion-panel':
+                this.containerType = 'expansion-panel';
+                break;
+            default: // 'div', 'flex', 'tab', 'conditional', 'actions'
+                this.containerType = 'div';
+        }
+    }
+    toggleExpanded() {
+        if (this.options.expandable) {
+            this.expanded = !this.expanded;
+        }
+    }
+    // Set attributes for flexbox container
+    // (child attributes are set in flex-layout-root.component)
+    getFlexAttribute(attribute) {
+        const flexActive = this.layoutNode.type === 'flex' ||
+            !!this.options.displayFlex ||
+            this.options.display === 'flex';
+        // if (attribute !== 'flex' && !flexActive) { return null; }
+        switch (attribute) {
+            case 'is-flex':
+                return flexActive;
+            case 'display':
+                return flexActive ? 'flex' : 'initial';
+            case 'flex-direction':
+            case 'flex-wrap':
+                const index = ['flex-direction', 'flex-wrap'].indexOf(attribute);
+                return (this.options['flex-flow'] || '').split(/\s+/)[index] ||
+                    this.options[attribute] || ['column', 'nowrap'][index];
+            case 'justify-content':
+            case 'align-items':
+            case 'align-content':
+                return this.options[attribute];
+            case 'layout':
+                return (this.options.fxLayout || 'row') +
+                    this.options.fxLayoutWrap ? ' ' + this.options.fxLayoutWrap : '';
+        }
+    }
+}
+FlexLayoutSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: FlexLayoutSectionComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+FlexLayoutSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: FlexLayoutSectionComponent, selector: "flex-layout-section-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <div *ngIf="containerType === 'div'"
+      [class]="options?.htmlClass || ''"
+      [class.expandable]="options?.expandable && !expanded"
+      [class.expanded]="options?.expandable && expanded">
+      <label *ngIf="sectionTitle"
+        [class]="'legend ' + (options?.labelHtmlClass || '')"
+        [innerHTML]="sectionTitle"
+        (click)="toggleExpanded()"></label>
+      <flex-layout-root-widget *ngIf="expanded"
+        [layout]="layoutNode.items"
+        [dataIndex]="dataIndex"
+        [layoutIndex]="layoutIndex"
+        [isFlexItem]="getFlexAttribute('is-flex')"
+        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+        [style.display]="getFlexAttribute('display')"
+        [style.flex-direction]="getFlexAttribute('flex-direction')"
+        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+        [style.justify-content]="getFlexAttribute('justify-content')"
+        [style.align-items]="getFlexAttribute('align-items')"
+        [style.align-content]="getFlexAttribute('align-content')"
+        [fxLayout]="getFlexAttribute('layout')"
+        [fxLayoutGap]="options?.fxLayoutGap"
+        [fxLayoutAlign]="options?.fxLayoutAlign"
+        [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </div>
+
+    <fieldset *ngIf="containerType === 'fieldset'"
+      [class]="options?.htmlClass || ''"
+      [class.expandable]="options?.expandable && !expanded"
+      [class.expanded]="options?.expandable && expanded"
+      [disabled]="options?.readonly">
+      <legend *ngIf="sectionTitle"
+        [class]="'legend ' + (options?.labelHtmlClass || '')"
+        [innerHTML]="sectionTitle"
+        (click)="toggleExpanded()"></legend>
+      <flex-layout-root-widget *ngIf="expanded"
+        [layout]="layoutNode.items"
+        [dataIndex]="dataIndex"
+        [layoutIndex]="layoutIndex"
+        [isFlexItem]="getFlexAttribute('is-flex')"
+        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+        [style.display]="getFlexAttribute('display')"
+        [style.flex-direction]="getFlexAttribute('flex-direction')"
+        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+        [style.justify-content]="getFlexAttribute('justify-content')"
+        [style.align-items]="getFlexAttribute('align-items')"
+        [style.align-content]="getFlexAttribute('align-content')"
+        [fxLayout]="getFlexAttribute('layout')"
+        [fxLayoutGap]="options?.fxLayoutGap"
+        [fxLayoutAlign]="options?.fxLayoutAlign"
+        [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </fieldset>
+
+    <mat-card *ngIf="containerType === 'card'"
+      [ngClass]="options?.htmlClass || ''"
+      [class.expandable]="options?.expandable && !expanded"
+      [class.expanded]="options?.expandable && expanded">
+      <mat-card-header *ngIf="sectionTitle">
+        <legend
+          [class]="'legend ' + (options?.labelHtmlClass || '')"
+          [innerHTML]="sectionTitle"
+          (click)="toggleExpanded()"></legend>
+      </mat-card-header>
+      <mat-card-content *ngIf="expanded">
+        <fieldset [disabled]="options?.readonly">
+          <flex-layout-root-widget *ngIf="expanded"
+            [layout]="layoutNode.items"
+            [dataIndex]="dataIndex"
+            [layoutIndex]="layoutIndex"
+            [isFlexItem]="getFlexAttribute('is-flex')"
+            [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+            [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+            [style.display]="getFlexAttribute('display')"
+            [style.flex-direction]="getFlexAttribute('flex-direction')"
+            [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+            [style.justify-content]="getFlexAttribute('justify-content')"
+            [style.align-items]="getFlexAttribute('align-items')"
+            [style.align-content]="getFlexAttribute('align-content')"
+            [fxLayout]="getFlexAttribute('layout')"
+            [fxLayoutGap]="options?.fxLayoutGap"
+            [fxLayoutAlign]="options?.fxLayoutAlign"
+            [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
+          </fieldset>
+      </mat-card-content>
+      <mat-card-footer>
+        <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+          [innerHTML]="options?.errorMessage"></mat-error>
+      </mat-card-footer>
+    </mat-card>
+
+    <mat-expansion-panel *ngIf="containerType === 'expansion-panel'"
+      [expanded]="expanded"
+      [hideToggle]="!options?.expandable">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <legend *ngIf="sectionTitle"
+            [class]="options?.labelHtmlClass"
+            [innerHTML]="sectionTitle"
+            (click)="toggleExpanded()"></legend>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <fieldset [disabled]="options?.readonly">
+        <flex-layout-root-widget *ngIf="expanded"
+          [layout]="layoutNode.items"
+          [dataIndex]="dataIndex"
+          [layoutIndex]="layoutIndex"
+          [isFlexItem]="getFlexAttribute('is-flex')"
+          [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+          [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+          [style.display]="getFlexAttribute('display')"
+          [style.flex-direction]="getFlexAttribute('flex-direction')"
+          [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+          [style.justify-content]="getFlexAttribute('justify-content')"
+          [style.align-items]="getFlexAttribute('align-items')"
+          [style.align-content]="getFlexAttribute('align-content')"
+          [fxLayout]="getFlexAttribute('layout')"
+          [fxLayoutGap]="options?.fxLayoutGap"
+          [fxLayoutAlign]="options?.fxLayoutAlign"
+          [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
+      </fieldset>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </mat-expansion-panel>`, isInline: true, styles: ["fieldset{border:0;margin:0;padding:0}.legend{font-weight:700}.expandable>.legend:before{content:\"\\25b6\";padding-right:.3em}.expanded>.legend:before{content:\"\\25bc\";padding-right:.2em}\n"], components: [{ type: FlexLayoutRootComponent, selector: "flex-layout-root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isFlexItem"] }, { type: i3$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3$2.MatCardHeader, selector: "mat-card-header" }, { type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i3$2.MatCardFooter, selector: "mat-card-footer" }, { type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: FlexLayoutSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'flex-layout-section-widget',
+                    template: `
+    <div *ngIf="containerType === 'div'"
+      [class]="options?.htmlClass || ''"
+      [class.expandable]="options?.expandable && !expanded"
+      [class.expanded]="options?.expandable && expanded">
+      <label *ngIf="sectionTitle"
+        [class]="'legend ' + (options?.labelHtmlClass || '')"
+        [innerHTML]="sectionTitle"
+        (click)="toggleExpanded()"></label>
+      <flex-layout-root-widget *ngIf="expanded"
+        [layout]="layoutNode.items"
+        [dataIndex]="dataIndex"
+        [layoutIndex]="layoutIndex"
+        [isFlexItem]="getFlexAttribute('is-flex')"
+        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+        [style.display]="getFlexAttribute('display')"
+        [style.flex-direction]="getFlexAttribute('flex-direction')"
+        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+        [style.justify-content]="getFlexAttribute('justify-content')"
+        [style.align-items]="getFlexAttribute('align-items')"
+        [style.align-content]="getFlexAttribute('align-content')"
+        [fxLayout]="getFlexAttribute('layout')"
+        [fxLayoutGap]="options?.fxLayoutGap"
+        [fxLayoutAlign]="options?.fxLayoutAlign"
+        [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </div>
+
+    <fieldset *ngIf="containerType === 'fieldset'"
+      [class]="options?.htmlClass || ''"
+      [class.expandable]="options?.expandable && !expanded"
+      [class.expanded]="options?.expandable && expanded"
+      [disabled]="options?.readonly">
+      <legend *ngIf="sectionTitle"
+        [class]="'legend ' + (options?.labelHtmlClass || '')"
+        [innerHTML]="sectionTitle"
+        (click)="toggleExpanded()"></legend>
+      <flex-layout-root-widget *ngIf="expanded"
+        [layout]="layoutNode.items"
+        [dataIndex]="dataIndex"
+        [layoutIndex]="layoutIndex"
+        [isFlexItem]="getFlexAttribute('is-flex')"
+        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+        [style.display]="getFlexAttribute('display')"
+        [style.flex-direction]="getFlexAttribute('flex-direction')"
+        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+        [style.justify-content]="getFlexAttribute('justify-content')"
+        [style.align-items]="getFlexAttribute('align-items')"
+        [style.align-content]="getFlexAttribute('align-content')"
+        [fxLayout]="getFlexAttribute('layout')"
+        [fxLayoutGap]="options?.fxLayoutGap"
+        [fxLayoutAlign]="options?.fxLayoutAlign"
+        [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </fieldset>
+
+    <mat-card *ngIf="containerType === 'card'"
+      [ngClass]="options?.htmlClass || ''"
+      [class.expandable]="options?.expandable && !expanded"
+      [class.expanded]="options?.expandable && expanded">
+      <mat-card-header *ngIf="sectionTitle">
+        <legend
+          [class]="'legend ' + (options?.labelHtmlClass || '')"
+          [innerHTML]="sectionTitle"
+          (click)="toggleExpanded()"></legend>
+      </mat-card-header>
+      <mat-card-content *ngIf="expanded">
+        <fieldset [disabled]="options?.readonly">
+          <flex-layout-root-widget *ngIf="expanded"
+            [layout]="layoutNode.items"
+            [dataIndex]="dataIndex"
+            [layoutIndex]="layoutIndex"
+            [isFlexItem]="getFlexAttribute('is-flex')"
+            [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+            [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+            [style.display]="getFlexAttribute('display')"
+            [style.flex-direction]="getFlexAttribute('flex-direction')"
+            [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+            [style.justify-content]="getFlexAttribute('justify-content')"
+            [style.align-items]="getFlexAttribute('align-items')"
+            [style.align-content]="getFlexAttribute('align-content')"
+            [fxLayout]="getFlexAttribute('layout')"
+            [fxLayoutGap]="options?.fxLayoutGap"
+            [fxLayoutAlign]="options?.fxLayoutAlign"
+            [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
+          </fieldset>
+      </mat-card-content>
+      <mat-card-footer>
+        <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+          [innerHTML]="options?.errorMessage"></mat-error>
+      </mat-card-footer>
+    </mat-card>
+
+    <mat-expansion-panel *ngIf="containerType === 'expansion-panel'"
+      [expanded]="expanded"
+      [hideToggle]="!options?.expandable">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <legend *ngIf="sectionTitle"
+            [class]="options?.labelHtmlClass"
+            [innerHTML]="sectionTitle"
+            (click)="toggleExpanded()"></legend>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <fieldset [disabled]="options?.readonly">
+        <flex-layout-root-widget *ngIf="expanded"
+          [layout]="layoutNode.items"
+          [dataIndex]="dataIndex"
+          [layoutIndex]="layoutIndex"
+          [isFlexItem]="getFlexAttribute('is-flex')"
+          [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+          [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+          [style.display]="getFlexAttribute('display')"
+          [style.flex-direction]="getFlexAttribute('flex-direction')"
+          [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+          [style.justify-content]="getFlexAttribute('justify-content')"
+          [style.align-items]="getFlexAttribute('align-items')"
+          [style.align-content]="getFlexAttribute('align-content')"
+          [fxLayout]="getFlexAttribute('layout')"
+          [fxLayoutGap]="options?.fxLayoutGap"
+          [fxLayoutAlign]="options?.fxLayoutAlign"
+          [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
+      </fieldset>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </mat-expansion-panel>`,
+                    styles: [`
+    fieldset { border: 0; margin: 0; padding: 0; }
+    .legend { font-weight: bold; }
+    .expandable > .legend:before { content: '▶'; padding-right: .3em; }
+    .expanded > .legend:before { content: '▼'; padding-right: .2em; }
+  `],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class MaterialAddReferenceComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+    }
+    get showAddButton() {
+        return !this.layoutNode.arrayItem ||
+            this.layoutIndex[this.layoutIndex.length - 1] < this.options.maxItems;
+    }
+    addItem(event) {
+        event.preventDefault();
+        this.jsf.addItem(this);
+    }
+    get buttonText() {
+        const parent = {
+            dataIndex: this.dataIndex.slice(0, -1),
+            layoutIndex: this.layoutIndex.slice(0, -1),
+            layoutNode: this.jsf.getParentNode(this),
+        };
+        return parent.layoutNode.add ||
+            this.jsf.setArrayItemTitle(parent, this.layoutNode, this.itemCount);
+    }
+}
+MaterialAddReferenceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialAddReferenceComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialAddReferenceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialAddReferenceComponent, selector: "material-add-reference-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <section [class]="options?.htmlClass || ''" align="end">
+      <button mat-raised-button *ngIf="showAddButton"
+        [color]="options?.color || 'accent'"
+        [disabled]="options?.readonly"
+        (click)="addItem($event)">
+        <span *ngIf="options?.icon" [class]="options?.icon"></span>
+        <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
+      </button>
+    </section>`, isInline: true, components: [{ type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialAddReferenceComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-add-reference-widget',
+                    template: `
+    <section [class]="options?.htmlClass || ''" align="end">
+      <button mat-raised-button *ngIf="showAddButton"
+        [color]="options?.color || 'accent'"
+        [disabled]="options?.readonly"
+        (click)="addItem($event)">
+        <span *ngIf="options?.icon" [class]="options?.icon"></span>
+        <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
+      </button>
+    </section>`,
+                    changeDetection: ChangeDetectionStrategy.Default,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class MaterialButtonComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this);
+        if (hasOwn(this.options, 'disabled')) {
+            this.controlDisabled = this.options.disabled;
+        }
+        else if (this.jsf.formOptions.disableInvalidSubmit) {
+            this.controlDisabled = !this.jsf.isValid;
+            this.jsf.isValidChanges.subscribe(isValid => this.controlDisabled = !isValid);
+        }
+    }
+    updateValue(event) {
+        if (typeof this.options.onClick === 'function') {
+            this.options.onClick(event);
+        }
+        else {
+            this.jsf.updateValue(this, event.target.value);
+        }
+    }
+}
+MaterialButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialButtonComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialButtonComponent, selector: "material-button-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <div class="button-row" [class]="options?.htmlClass || ''">
+      <button mat-raised-button
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [color]="options?.color || 'primary'"
+        [disabled]="controlDisabled || options?.readonly"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [type]="layoutNode?.type"
+        [value]="controlValue"
+        (click)="updateValue($event)">
+        <mat-icon *ngIf="options?.icon" class="mat-24">{{options?.icon}}</mat-icon>
+        <span *ngIf="options?.title" [innerHTML]="options?.title"></span>
+      </button>
+    </div>`, isInline: true, styles: ["button{margin-top:10px}\n"], components: [{ type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-button-widget',
+                    template: `
+    <div class="button-row" [class]="options?.htmlClass || ''">
+      <button mat-raised-button
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [color]="options?.color || 'primary'"
+        [disabled]="controlDisabled || options?.readonly"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [type]="layoutNode?.type"
+        [value]="controlValue"
+        (click)="updateValue($event)">
+        <mat-icon *ngIf="options?.icon" class="mat-24">{{options?.icon}}</mat-icon>
+        <span *ngIf="options?.title" [innerHTML]="options?.title"></span>
+      </button>
+    </div>`,
+                    styles: [` button { margin-top: 10px; } `],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class MaterialButtonGroupComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.radiosList = [];
+        this.vertical = false;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.radiosList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, true);
+        this.jsf.initializeControl(this);
+    }
+    updateValue(value) {
+        this.options.showErrors = true;
+        this.jsf.updateValue(this, value);
+    }
+}
+MaterialButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialButtonGroupComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialButtonGroupComponent, selector: "material-button-group-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <div>
+      <div *ngIf="options?.title">
+        <label
+          [attr.for]="'control' + layoutNode?._id"
+          [class]="options?.labelHtmlClass || ''"
+          [style.display]="options?.notitle ? 'none' : ''"
+          [innerHTML]="options?.title"></label>
+      </div>
+      <mat-button-toggle-group
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [disabled]="controlDisabled || options?.readonly"
+        [name]="controlName"
+        [value]="controlValue"
+        [vertical]="!!options.vertical">
+        <mat-button-toggle *ngFor="let radioItem of radiosList"
+          [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
+          [value]="radioItem?.value"
+          (click)="updateValue(radioItem?.value)">
+          <span [innerHTML]="radioItem?.name"></span>
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </div>`, isInline: true, styles: ["mat-error{font-size:75%}\n"], components: [{ type: i2$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-button-group-widget',
+                    template: `
+    <div>
+      <div *ngIf="options?.title">
+        <label
+          [attr.for]="'control' + layoutNode?._id"
+          [class]="options?.labelHtmlClass || ''"
+          [style.display]="options?.notitle ? 'none' : ''"
+          [innerHTML]="options?.title"></label>
+      </div>
+      <mat-button-toggle-group
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [disabled]="controlDisabled || options?.readonly"
+        [name]="controlName"
+        [value]="controlValue"
+        [vertical]="!!options.vertical">
+        <mat-button-toggle *ngFor="let radioItem of radiosList"
+          [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
+          [value]="radioItem?.value"
+          (click)="updateValue(radioItem?.value)">
+          <span [innerHTML]="radioItem?.name"></span>
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </div>`,
+                    styles: [` mat-error { font-size: 75%; } `],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class MaterialCheckboxComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.trueValue = true;
+        this.falseValue = false;
+        this.showSlideToggle = false;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this, !this.options.readonly);
+        if (this.controlValue === null || this.controlValue === undefined) {
+            this.controlValue = false;
+            this.jsf.updateValue(this, this.falseValue);
+        }
+        if (this.layoutNode.type === 'slide-toggle' ||
+            this.layoutNode.format === 'slide-toggle') {
+            this.showSlideToggle = true;
+        }
+    }
+    updateValue(event) {
+        this.options.showErrors = true;
+        this.jsf.updateValue(this, event.checked ? this.trueValue : this.falseValue);
+    }
+    get isChecked() {
+        return this.jsf.getFormControlValue(this) === this.trueValue;
+    }
+}
+MaterialCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialCheckboxComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialCheckboxComponent, selector: "material-checkbox-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <mat-checkbox *ngIf="boundControl && !showSlideToggle"
+      [formControl]="formControl"
+      align="left"
+      [color]="options?.color || 'primary'"
+      [id]="'control' + layoutNode?._id"
+      labelPosition="after"
+      [name]="controlName"
+      (blur)="options.showErrors = true">
+      <span *ngIf="options?.title"
+        class="checkbox-name"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+    </mat-checkbox>
+    <mat-checkbox *ngIf="!boundControl && !showSlideToggle"
+      align="left"
+      [color]="options?.color || 'primary'"
+      [disabled]="controlDisabled || options?.readonly"
+      [id]="'control' + layoutNode?._id"
+      labelPosition="after"
+      [name]="controlName"
+      [checked]="isChecked"
+      (blur)="options.showErrors = true"
+      (change)="updateValue($event)">
+      <span *ngIf="options?.title"
+        class="checkbox-name"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+    </mat-checkbox>
+    <mat-slide-toggle *ngIf="boundControl && showSlideToggle"
+      [formControl]="formControl"
+      align="left"
+      [color]="options?.color || 'primary'"
+      [id]="'control' + layoutNode?._id"
+      labelPosition="after"
+      [name]="controlName"
+      (blur)="options.showErrors = true">
+      <span *ngIf="options?.title"
+        class="checkbox-name"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+    </mat-slide-toggle>
+    <mat-slide-toggle *ngIf="!boundControl && showSlideToggle"
+      align="left"
+      [color]="options?.color || 'primary'"
+      [disabled]="controlDisabled || options?.readonly"
+      [id]="'control' + layoutNode?._id"
+      labelPosition="after"
+      [name]="controlName"
+      [checked]="isChecked"
+      (blur)="options.showErrors = true"
+      (change)="updateValue($event)">
+      <span *ngIf="options?.title"
+        class="checkbox-name"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+    </mat-slide-toggle>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`, isInline: true, styles: [".checkbox-name{white-space:nowrap}mat-error{font-size:75%}\n"], components: [{ type: i2$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-checkbox-widget',
+                    template: `
+    <mat-checkbox *ngIf="boundControl && !showSlideToggle"
+      [formControl]="formControl"
+      align="left"
+      [color]="options?.color || 'primary'"
+      [id]="'control' + layoutNode?._id"
+      labelPosition="after"
+      [name]="controlName"
+      (blur)="options.showErrors = true">
+      <span *ngIf="options?.title"
+        class="checkbox-name"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+    </mat-checkbox>
+    <mat-checkbox *ngIf="!boundControl && !showSlideToggle"
+      align="left"
+      [color]="options?.color || 'primary'"
+      [disabled]="controlDisabled || options?.readonly"
+      [id]="'control' + layoutNode?._id"
+      labelPosition="after"
+      [name]="controlName"
+      [checked]="isChecked"
+      (blur)="options.showErrors = true"
+      (change)="updateValue($event)">
+      <span *ngIf="options?.title"
+        class="checkbox-name"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+    </mat-checkbox>
+    <mat-slide-toggle *ngIf="boundControl && showSlideToggle"
+      [formControl]="formControl"
+      align="left"
+      [color]="options?.color || 'primary'"
+      [id]="'control' + layoutNode?._id"
+      labelPosition="after"
+      [name]="controlName"
+      (blur)="options.showErrors = true">
+      <span *ngIf="options?.title"
+        class="checkbox-name"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+    </mat-slide-toggle>
+    <mat-slide-toggle *ngIf="!boundControl && showSlideToggle"
+      align="left"
+      [color]="options?.color || 'primary'"
+      [disabled]="controlDisabled || options?.readonly"
+      [id]="'control' + layoutNode?._id"
+      labelPosition="after"
+      [name]="controlName"
+      [checked]="isChecked"
+      (blur)="options.showErrors = true"
+      (change)="updateValue($event)">
+      <span *ngIf="options?.title"
+        class="checkbox-name"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+    </mat-slide-toggle>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`,
+                    styles: [`
+    .checkbox-name { white-space: nowrap; }
+    mat-error { font-size: 75%; }
+  `],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+// TODO: Change this to use a Selection List instead?
+// https://material.angular.io/components/list/overview
+class MaterialCheckboxesComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.horizontalList = false;
+        this.checkboxList = [];
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.horizontalList = this.layoutNode.type === 'checkboxes-inline' ||
+            this.layoutNode.type === 'checkboxbuttons';
+        this.jsf.initializeControl(this);
+        this.checkboxList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, true);
+        if (this.boundControl) {
+            const formArray = this.jsf.getFormControl(this);
+            for (const checkboxItem of this.checkboxList) {
+                checkboxItem.checked = formArray.value.includes(checkboxItem.value);
+            }
+        }
+    }
+    get allChecked() {
+        return this.checkboxList.filter(t => t.checked).length === this.checkboxList.length;
+    }
+    get someChecked() {
+        const checkedItems = this.checkboxList.filter(t => t.checked).length;
+        return checkedItems > 0 && checkedItems < this.checkboxList.length;
+    }
+    updateValue() {
+        this.options.showErrors = true;
+        if (this.boundControl) {
+            this.jsf.updateArrayCheckboxList(this, this.checkboxList);
+        }
+    }
+    updateAllValues(event) {
+        this.options.showErrors = true;
+        this.checkboxList.forEach(t => t.checked = event.checked);
+        this.updateValue();
+    }
+}
+MaterialCheckboxesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialCheckboxesComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialCheckboxesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialCheckboxesComponent, selector: "material-checkboxes-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <div>
+      <mat-checkbox type="checkbox"
+        [checked]="allChecked"
+        [color]="options?.color || 'primary'"
+        [disabled]="controlDisabled || options?.readonly"
+        [indeterminate]="someChecked"
+        [name]="options?.name"
+        (blur)="options.showErrors = true"
+        (change)="updateAllValues($event)">
+        <span class="checkbox-name" [innerHTML]="options?.name"></span>
+      </mat-checkbox>
+      <label *ngIf="options?.title"
+        class="title"
+        [class]="options?.labelHtmlClass || ''"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+      <ul class="checkbox-list" [class.horizontal-list]="horizontalList">
+        <li *ngFor="let checkboxItem of checkboxList"
+          [class]="options?.htmlClass || ''">
+          <mat-checkbox type="checkbox"
+            [(ngModel)]="checkboxItem.checked"
+            [color]="options?.color || 'primary'"
+            [disabled]="controlDisabled || options?.readonly"
+            [name]="checkboxItem?.name"
+            (blur)="options.showErrors = true"
+            (change)="updateValue()">
+            <span class="checkbox-name" [innerHTML]="checkboxItem?.name"></span>
+          </mat-checkbox>
+        </li>
+      </ul>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </div>`, isInline: true, styles: [".title{font-weight:700}.checkbox-list{list-style-type:none}.horizontal-list>li{display:inline-block;margin-right:10px;zoom:1}.checkbox-name{white-space:nowrap}mat-error{font-size:75%}\n"], components: [{ type: i2$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialCheckboxesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-checkboxes-widget',
+                    template: `
+    <div>
+      <mat-checkbox type="checkbox"
+        [checked]="allChecked"
+        [color]="options?.color || 'primary'"
+        [disabled]="controlDisabled || options?.readonly"
+        [indeterminate]="someChecked"
+        [name]="options?.name"
+        (blur)="options.showErrors = true"
+        (change)="updateAllValues($event)">
+        <span class="checkbox-name" [innerHTML]="options?.name"></span>
+      </mat-checkbox>
+      <label *ngIf="options?.title"
+        class="title"
+        [class]="options?.labelHtmlClass || ''"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+      <ul class="checkbox-list" [class.horizontal-list]="horizontalList">
+        <li *ngFor="let checkboxItem of checkboxList"
+          [class]="options?.htmlClass || ''">
+          <mat-checkbox type="checkbox"
+            [(ngModel)]="checkboxItem.checked"
+            [color]="options?.color || 'primary'"
+            [disabled]="controlDisabled || options?.readonly"
+            [name]="checkboxItem?.name"
+            (blur)="options.showErrors = true"
+            (change)="updateValue()">
+            <span class="checkbox-name" [innerHTML]="checkboxItem?.name"></span>
+          </mat-checkbox>
+        </li>
+      </ul>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </div>`,
+                    styles: [`
+    .title { font-weight: bold; }
+    .checkbox-list { list-style-type: none; }
+    .horizontal-list > li { display: inline-block; margin-right: 10px; zoom: 1; }
+    .checkbox-name { white-space: nowrap; }
+    mat-error { font-size: 75%; }
+  `],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+// TODO: Add this control
+class MaterialChipListComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this);
+    }
+    updateValue(event) {
+        this.jsf.updateValue(this, event.target.value);
+    }
+}
+MaterialChipListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialChipListComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialChipListComponent, selector: "material-chip-list-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialChipListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-chip-list-widget',
+                    template: ``,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class MaterialDatepickerComponent {
+    constructor(matFormFieldDefaultOptions, jsf) {
+        this.matFormFieldDefaultOptions = matFormFieldDefaultOptions;
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.autoCompleteList = [];
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this, !this.options.readonly);
+        if (!this.options.notitle && !this.options.description && this.options.placeholder) {
+            this.options.description = this.options.placeholder;
+        }
+    }
+}
+MaterialDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialDatepickerComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialDatepickerComponent, selector: "material-datepicker-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'"
+                    [class]="options?.htmlClass || ''"
+                    [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
+                    [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
+                    [style.width]="'100%'">
+      <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
+      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
+        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
+      <input matInput *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [id]="'control' + layoutNode?._id"
+        [max]="options?.maximum"
+        [matDatepicker]="picker"
+        [min]="options?.minimum"
+        [name]="controlName"
+        [placeholder]="options?.title"
+        [readonly]="options?.readonly"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        (blur)="options.showErrors = true"
+        >
+      <input matInput *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [disabled]="controlDisabled || options?.readonly"
+        [id]="'control' + layoutNode?._id"
+        [max]="options?.maximum"
+        [matDatepicker]="picker"
+        [min]="options?.minimum"
+        [name]="controlName"
+        [placeholder]="options?.title"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        [readonly]="options?.readonly"
+        (blur)="options.showErrors = true"
+        >
+      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
+        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
+      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
+        align="end" [innerHTML]="options?.description"></mat-hint>
+      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+    </mat-form-field>
+    <mat-datepicker #picker ></mat-datepicker>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:auto;width:initial}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i2.MatPrefix, selector: "[matPrefix]" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-datepicker-widget',
+                    template: `
+    <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'"
+                    [class]="options?.htmlClass || ''"
+                    [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
+                    [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
+                    [style.width]="'100%'">
+      <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
+      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
+        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
+      <input matInput *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [id]="'control' + layoutNode?._id"
+        [max]="options?.maximum"
+        [matDatepicker]="picker"
+        [min]="options?.minimum"
+        [name]="controlName"
+        [placeholder]="options?.title"
+        [readonly]="options?.readonly"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        (blur)="options.showErrors = true"
+        >
+      <input matInput *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [disabled]="controlDisabled || options?.readonly"
+        [id]="'control' + layoutNode?._id"
+        [max]="options?.maximum"
+        [matDatepicker]="picker"
+        [min]="options?.minimum"
+        [name]="controlName"
+        [placeholder]="options?.title"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        [readonly]="options?.readonly"
+        (blur)="options.showErrors = true"
+        >
+      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
+        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
+      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
+        align="end" [innerHTML]="options?.description"></mat-hint>
+      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+    </mat-form-field>
+    <mat-datepicker #picker ></mat-datepicker>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`,
+                    styles: [`
+    mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }
+    ::ng-deep json-schema-form mat-form-field .mat-form-field-wrapper .mat-form-field-flex
+      .mat-form-field-infix { width: initial; }
+  `],
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
+                }, {
+                    type: Optional
+                }] }, { type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class MaterialDesignFrameworkComponent {
+    constructor(changeDetector, jsf) {
+        this.changeDetector = changeDetector;
+        this.jsf = jsf;
+        this.frameworkInitialized = false;
+        this.formControl = null;
+        this.parentArray = null;
+        this.isOrderable = false;
+        this.dynamicTitle = null;
+    }
+    get showRemoveButton() {
+        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);
+    }
+}
+MaterialDesignFrameworkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialDesignFrameworkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialDesignFrameworkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialDesignFrameworkComponent, selector: "material-design-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [class.array-item]=\"widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'\"\n  [orderable]=\"isOrderable\"\n  [dataIndex]=\"dataIndex\"\n  [layoutIndex]=\"layoutIndex\"\n  [layoutNode]=\"widgetLayoutNode\">\n  <svg *ngIf=\"showRemoveButton\"\n       xmlns=\"http://www.w3.org/2000/svg\"\n       height=\"18\" width=\"18\" viewBox=\"0 0 24 24\"\n       class=\"close-button\"\n       (click)=\"removeItem()\">\n    <path\n      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\"/>\n  </svg>\n  <select-widget-widget\n    [dataIndex]=\"dataIndex\"\n    [layoutIndex]=\"layoutIndex\"\n    [layoutNode]=\"widgetLayoutNode\"></select-widget-widget>\n</div>\n<div class=\"spacer\" *ngIf=\"widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'\"></div>\n", styles: [".array-item{border-radius:2px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;padding:6px;position:relative;transition:all .28s cubic-bezier(.4,0,.2,1)}.close-button{cursor:pointer;position:absolute;top:6px;right:6px;fill:#0006;visibility:hidden;z-index:500}.close-button:hover{fill:#000c}.array-item:hover>.close-button{visibility:visible}.spacer{margin:6px 0}[draggable=true]:hover{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:move;z-index:10}[draggable=true].drag-target-top{box-shadow:0 -2px #000;position:relative;z-index:20}[draggable=true].drag-target-bottom{box-shadow:0 2px #000;position:relative;z-index:20}\n"], components: [{ type: i1.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], directives: [{ type: i1.OrderableDirective, selector: "[orderable]", inputs: ["orderable", "layoutNode", "layoutIndex", "dataIndex"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialDesignFrameworkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'material-design-framework', template: "<div\n  [class.array-item]=\"widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'\"\n  [orderable]=\"isOrderable\"\n  [dataIndex]=\"dataIndex\"\n  [layoutIndex]=\"layoutIndex\"\n  [layoutNode]=\"widgetLayoutNode\">\n  <svg *ngIf=\"showRemoveButton\"\n       xmlns=\"http://www.w3.org/2000/svg\"\n       height=\"18\" width=\"18\" viewBox=\"0 0 24 24\"\n       class=\"close-button\"\n       (click)=\"removeItem()\">\n    <path\n      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\"/>\n  </svg>\n  <select-widget-widget\n    [dataIndex]=\"dataIndex\"\n    [layoutIndex]=\"layoutIndex\"\n    [layoutNode]=\"widgetLayoutNode\"></select-widget-widget>\n</div>\n<div class=\"spacer\" *ngIf=\"widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'\"></div>\n", styles: [".array-item{border-radius:2px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;padding:6px;position:relative;transition:all .28s cubic-bezier(.4,0,.2,1)}.close-button{cursor:pointer;position:absolute;top:6px;right:6px;fill:#0006;visibility:hidden;z-index:500}.close-button:hover{fill:#000c}.array-item:hover>.close-button{visibility:visible}.spacer{margin:6px 0}[draggable=true]:hover{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:move;z-index:10}[draggable=true].drag-target-top{box-shadow:0 -2px #000;position:relative;z-index:20}[draggable=true].drag-target-bottom{box-shadow:0 2px #000;position:relative;z-index:20}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+// TODO: Add this control
+class MaterialFileComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this);
+    }
+    updateValue(event) {
+        this.jsf.updateValue(this, event.target.value);
+    }
+}
+MaterialFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialFileComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialFileComponent, selector: "material-file-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialFileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-file-widget',
+                    template: ``,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class MaterialInputComponent {
+    constructor(matFormFieldDefaultOptions, jsf) {
+        this.matFormFieldDefaultOptions = matFormFieldDefaultOptions;
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.autoCompleteList = [];
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this);
+        if (!this.options.notitle && !this.options.description && this.options.placeholder) {
+            this.options.description = this.options.placeholder;
+        }
+    }
+    updateValue(event) {
+        this.jsf.updateValue(this, event.target.value);
+    }
+}
+MaterialInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialInputComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialInputComponent, selector: "material-input-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'"
+      [class]="options?.htmlClass || ''"
+      [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
+      [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
+      [style.width]="'100%'">
+      <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
+      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
+        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
+      <input matInput *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.maxlength]="options?.maxLength"
+        [attr.minlength]="options?.minLength"
+        [attr.pattern]="options?.pattern"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        [type]="layoutNode?.type"
+        (blur)="options.showErrors = true">
+      <input matInput *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.maxlength]="options?.maxLength"
+        [attr.minlength]="options?.minLength"
+        [attr.pattern]="options?.pattern"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        [type]="layoutNode?.type"
+        [value]="controlValue"
+        (input)="updateValue($event)"
+        (blur)="options.showErrors = true">
+      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
+        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
+      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
+        align="end" [innerHTML]="options?.description"></mat-hint>
+      <mat-autocomplete *ngIf="options?.typeahead?.source">
+        <mat-option *ngFor="let word of options?.typeahead?.source"
+          [value]="word">{{word}}</mat-option>
+      </mat-autocomplete>
+    </mat-form-field>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:auto;width:initial}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i2.MatPrefix, selector: "[matPrefix]" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i5.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-input-widget',
+                    template: `
+    <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'"
+      [class]="options?.htmlClass || ''"
+      [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
+      [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
+      [style.width]="'100%'">
+      <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
+      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
+        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
+      <input matInput *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.maxlength]="options?.maxLength"
+        [attr.minlength]="options?.minLength"
+        [attr.pattern]="options?.pattern"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        [type]="layoutNode?.type"
+        (blur)="options.showErrors = true">
+      <input matInput *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.maxlength]="options?.maxLength"
+        [attr.minlength]="options?.minLength"
+        [attr.pattern]="options?.pattern"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        [type]="layoutNode?.type"
+        [value]="controlValue"
+        (input)="updateValue($event)"
+        (blur)="options.showErrors = true">
+      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
+        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
+      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
+        align="end" [innerHTML]="options?.description"></mat-hint>
+      <mat-autocomplete *ngIf="options?.typeahead?.source">
+        <mat-option *ngFor="let word of options?.typeahead?.source"
+          [value]="word">{{word}}</mat-option>
+      </mat-autocomplete>
+    </mat-form-field>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`,
+                    styles: [`
+    mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }
+    ::ng-deep json-schema-form mat-form-field .mat-form-field-wrapper .mat-form-field-flex
+      .mat-form-field-infix { width: initial; }
+  `],
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
+                }, {
+                    type: Optional
+                }] }, { type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class MaterialNumberComponent {
+    constructor(matFormFieldDefaultOptions, jsf) {
+        this.matFormFieldDefaultOptions = matFormFieldDefaultOptions;
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.allowNegative = true;
+        this.allowDecimal = true;
+        this.allowExponents = false;
+        this.lastValidNumber = '';
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this);
+        if (this.layoutNode.dataType === 'integer') {
+            this.allowDecimal = false;
+        }
+        if (!this.options.notitle && !this.options.description && this.options.placeholder) {
+            this.options.description = this.options.placeholder;
+        }
+    }
+    updateValue(event) {
+        this.jsf.updateValue(this, event.target.value);
+    }
+}
+MaterialNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialNumberComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialNumberComponent, selector: "material-number-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'"
+    [class]="options?.htmlClass || ''"
+    [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
+    [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
+    [style.width]="'100%'">
+    <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
+      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
+        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
+      <input matInput *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.max]="options?.maximum"
+        [attr.min]="options?.minimum"
+        [attr.step]="options?.multipleOf || options?.step || 'any'"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        [type]="'number'"
+        (blur)="options.showErrors = true">
+      <input matInput *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.max]="options?.maximum"
+        [attr.min]="options?.minimum"
+        [attr.step]="options?.multipleOf || options?.step || 'any'"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        [type]="'number'"
+        [value]="controlValue"
+        (input)="updateValue($event)"
+        (blur)="options.showErrors = true">
+      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
+        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
+      <mat-hint *ngIf="layoutNode?.type === 'range'" align="start"
+        [innerHTML]="controlValue"></mat-hint>
+      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
+        align="end" [innerHTML]="options?.description"></mat-hint>
+    </mat-form-field>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:auto;width:initial}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i2.MatPrefix, selector: "[matPrefix]" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialNumberComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-number-widget',
+                    template: `
+    <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'"
+    [class]="options?.htmlClass || ''"
+    [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
+    [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
+    [style.width]="'100%'">
+    <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
+      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
+        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
+      <input matInput *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.max]="options?.maximum"
+        [attr.min]="options?.minimum"
+        [attr.step]="options?.multipleOf || options?.step || 'any'"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        [type]="'number'"
+        (blur)="options.showErrors = true">
+      <input matInput *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.max]="options?.maximum"
+        [attr.min]="options?.minimum"
+        [attr.step]="options?.multipleOf || options?.step || 'any'"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        [type]="'number'"
+        [value]="controlValue"
+        (input)="updateValue($event)"
+        (blur)="options.showErrors = true">
+      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
+        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
+      <mat-hint *ngIf="layoutNode?.type === 'range'" align="start"
+        [innerHTML]="controlValue"></mat-hint>
+      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
+        align="end" [innerHTML]="options?.description"></mat-hint>
+    </mat-form-field>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`,
+                    styles: [`
+    mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }
+    ::ng-deep json-schema-form mat-form-field .mat-form-field-wrapper .mat-form-field-flex
+      .mat-form-field-infix { width: initial; }
+  `],
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
+                }, {
+                    type: Optional
+                }] }, { type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+// TODO: Add this control
+class MaterialOneOfComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this);
+    }
+    updateValue(event) {
+        this.jsf.updateValue(this, event.target.value);
+    }
+}
+MaterialOneOfComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialOneOfComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialOneOfComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialOneOfComponent, selector: "material-one-of-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialOneOfComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-one-of-widget',
+                    template: ``,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class MaterialRadiosComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.flexDirection = 'column';
+        this.radiosList = [];
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        if (this.layoutNode.type === 'radios-inline') {
+            this.flexDirection = 'row';
+        }
+        this.radiosList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, true);
+        this.jsf.initializeControl(this, !this.options.readonly);
+    }
+    updateValue(value) {
+        this.options.showErrors = true;
+        this.jsf.updateValue(this, value);
+    }
+}
+MaterialRadiosComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialRadiosComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialRadiosComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialRadiosComponent, selector: "material-radios-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <div>
+      <div *ngIf="options?.title">
+        <label
+          [attr.for]="'control' + layoutNode?._id"
+          [class]="options?.labelHtmlClass || ''"
+          [style.display]="options?.notitle ? 'none' : ''"
+          [innerHTML]="options?.title"></label>
+      </div>
+      <mat-radio-group *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [style.flex-direction]="flexDirection"
+        [name]="controlName"
+        (blur)="options.showErrors = true">
+        <mat-radio-button *ngFor="let radioItem of radiosList"
+          [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
+          [value]="radioItem?.value">
+          <span [innerHTML]="radioItem?.name"></span>
+        </mat-radio-button>
+      </mat-radio-group>
+      <mat-radio-group *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [style.flex-direction]="flexDirection"
+        [disabled]="controlDisabled || options?.readonly"
+        [name]="controlName"
+        [value]="controlValue">
+        <mat-radio-button *ngFor="let radioItem of radiosList"
+          [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
+          [value]="radioItem?.value"
+          (click)="updateValue(radioItem?.value)">
+          <span [innerHTML]="radioItem?.name"></span>
+        </mat-radio-button>
+      </mat-radio-group>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </div>`, isInline: true, styles: ["mat-radio-group{display:inline-flex}mat-radio-button{margin:2px}mat-error{font-size:75%}\n"], components: [{ type: i2$4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialRadiosComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-radios-widget',
+                    template: `
+    <div>
+      <div *ngIf="options?.title">
+        <label
+          [attr.for]="'control' + layoutNode?._id"
+          [class]="options?.labelHtmlClass || ''"
+          [style.display]="options?.notitle ? 'none' : ''"
+          [innerHTML]="options?.title"></label>
+      </div>
+      <mat-radio-group *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [style.flex-direction]="flexDirection"
+        [name]="controlName"
+        (blur)="options.showErrors = true">
+        <mat-radio-button *ngFor="let radioItem of radiosList"
+          [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
+          [value]="radioItem?.value">
+          <span [innerHTML]="radioItem?.name"></span>
+        </mat-radio-button>
+      </mat-radio-group>
+      <mat-radio-group *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [style.flex-direction]="flexDirection"
+        [disabled]="controlDisabled || options?.readonly"
+        [name]="controlName"
+        [value]="controlValue">
+        <mat-radio-button *ngFor="let radioItem of radiosList"
+          [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
+          [value]="radioItem?.value"
+          (click)="updateValue(radioItem?.value)">
+          <span [innerHTML]="radioItem?.name"></span>
+        </mat-radio-button>
+      </mat-radio-group>
+      <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+        [innerHTML]="options?.errorMessage"></mat-error>
+    </div>`,
+                    styles: [`
+    mat-radio-group { display: inline-flex; }
+    mat-radio-button { margin: 2px; }
+    mat-error { font-size: 75%; }
+  `]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class MaterialSelectComponent {
+    constructor(matFormFieldDefaultOptions, jsf) {
+        this.matFormFieldDefaultOptions = matFormFieldDefaultOptions;
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.selectList = [];
+        this.isArray = isArray;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.selectList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, !!this.options.required, !!this.options.flatList);
+        this.jsf.initializeControl(this, !this.options.readonly);
+        if (!this.options.notitle && !this.options.description && this.options.placeholder) {
+            this.options.description = this.options.placeholder;
+        }
+    }
+    updateValue(event) {
+        this.options.showErrors = true;
+        this.jsf.updateValue(this, event.value);
+    }
+}
+MaterialSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialSelectComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialSelectComponent, selector: "material-select-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <mat-form-field
+      [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'"
+      [class]="options?.htmlClass || ''"
+      [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
+      [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
+      [style.width]="'100%'">
+      <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
+      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
+        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
+      <mat-select *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.name]="controlName"
+        [id]="'control' + layoutNode?._id"
+        [multiple]="options?.multiple"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        (blur)="options.showErrors = true">
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <mat-option *ngIf="!isArray(selectItem?.items)"
+            [value]="selectItem?.value">
+            <span [innerHTML]="selectItem?.name"></span>
+          </mat-option>
+          <mat-optgroup *ngIf="isArray(selectItem?.items)"
+            [label]="selectItem?.group">
+            <mat-option *ngFor="let subItem of selectItem.items"
+              [value]="subItem?.value">
+              <span [innerHTML]="subItem?.name"></span>
+            </mat-option>
+          </mat-optgroup>
+        </ng-template>
+      </mat-select>
+      <mat-select *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.name]="controlName"
+        [disabled]="controlDisabled || options?.readonly"
+        [id]="'control' + layoutNode?._id"
+        [multiple]="options?.multiple"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        [value]="controlValue"
+        (blur)="options.showErrors = true"
+        (change)="updateValue($event)">
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <mat-option *ngIf="!isArray(selectItem?.items)"
+            [attr.selected]="selectItem?.value === controlValue"
+            [value]="selectItem?.value">
+            <span [innerHTML]="selectItem?.name"></span>
+          </mat-option>
+          <mat-optgroup *ngIf="isArray(selectItem?.items)"
+            [label]="selectItem?.group">
+            <mat-option *ngFor="let subItem of selectItem.items"
+              [attr.selected]="subItem?.value === controlValue"
+              [value]="subItem?.value">
+              <span [innerHTML]="subItem?.name"></span>
+            </mat-option>
+          </mat-optgroup>
+        </ng-template>
+      </mat-select>
+      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
+        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
+      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
+        align="end" [innerHTML]="options?.description"></mat-hint>
+    </mat-form-field>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:auto;width:initial}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3$7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i2.MatPrefix, selector: "[matPrefix]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-select-widget',
+                    template: `
+    <mat-form-field
+      [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'"
+      [class]="options?.htmlClass || ''"
+      [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
+      [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
+      [style.width]="'100%'">
+      <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
+      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
+        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
+      <mat-select *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.name]="controlName"
+        [id]="'control' + layoutNode?._id"
+        [multiple]="options?.multiple"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        (blur)="options.showErrors = true">
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <mat-option *ngIf="!isArray(selectItem?.items)"
+            [value]="selectItem?.value">
+            <span [innerHTML]="selectItem?.name"></span>
+          </mat-option>
+          <mat-optgroup *ngIf="isArray(selectItem?.items)"
+            [label]="selectItem?.group">
+            <mat-option *ngFor="let subItem of selectItem.items"
+              [value]="subItem?.value">
+              <span [innerHTML]="subItem?.name"></span>
+            </mat-option>
+          </mat-optgroup>
+        </ng-template>
+      </mat-select>
+      <mat-select *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.name]="controlName"
+        [disabled]="controlDisabled || options?.readonly"
+        [id]="'control' + layoutNode?._id"
+        [multiple]="options?.multiple"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [required]="options?.required"
+        [style.width]="'100%'"
+        [value]="controlValue"
+        (blur)="options.showErrors = true"
+        (change)="updateValue($event)">
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <mat-option *ngIf="!isArray(selectItem?.items)"
+            [attr.selected]="selectItem?.value === controlValue"
+            [value]="selectItem?.value">
+            <span [innerHTML]="selectItem?.name"></span>
+          </mat-option>
+          <mat-optgroup *ngIf="isArray(selectItem?.items)"
+            [label]="selectItem?.group">
+            <mat-option *ngFor="let subItem of selectItem.items"
+              [attr.selected]="subItem?.value === controlValue"
+              [value]="subItem?.value">
+              <span [innerHTML]="subItem?.name"></span>
+            </mat-option>
+          </mat-optgroup>
+        </ng-template>
+      </mat-select>
+      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
+        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
+      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
+        align="end" [innerHTML]="options?.description"></mat-hint>
+    </mat-form-field>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`,
+                    styles: [`
+    mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }
+    ::ng-deep json-schema-form mat-form-field .mat-form-field-wrapper .mat-form-field-flex
+      .mat-form-field-infix { width: initial; }
+  `],
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
+                }, {
+                    type: Optional
+                }] }, { type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class MaterialSliderComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.allowNegative = true;
+        this.allowDecimal = true;
+        this.allowExponents = false;
+        this.lastValidNumber = '';
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this, !this.options.readonly);
+    }
+    updateValue(event) {
+        this.options.showErrors = true;
+        this.jsf.updateValue(this, event.value);
+    }
+}
+MaterialSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialSliderComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialSliderComponent, selector: "material-slider-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <mat-slider thumbLabel *ngIf="boundControl"
+      [formControl]="formControl"
+      [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+      [id]="'control' + layoutNode?._id"
+      [max]="options?.maximum"
+      [min]="options?.minimum"
+      [step]="options?.multipleOf || options?.step || 'any'"
+      [style.width]="'100%'"
+      (blur)="options.showErrors = true"></mat-slider>
+    <mat-slider thumbLabel *ngIf="!boundControl"
+      [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+      [disabled]="controlDisabled || options?.readonly"
+      [id]="'control' + layoutNode?._id"
+      [max]="options?.maximum"
+      [min]="options?.minimum"
+      [step]="options?.multipleOf || options?.step || 'any'"
+      [style.width]="'100%'"
+      [value]="controlValue"
+      (blur)="options.showErrors = true"
+      (change)="updateValue($event)"></mat-slider>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`, isInline: true, styles: ["mat-error{font-size:75%}\n"], components: [{ type: i2$5.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialSliderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-slider-widget',
+                    template: `
+    <mat-slider thumbLabel *ngIf="boundControl"
+      [formControl]="formControl"
+      [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+      [id]="'control' + layoutNode?._id"
+      [max]="options?.maximum"
+      [min]="options?.minimum"
+      [step]="options?.multipleOf || options?.step || 'any'"
+      [style.width]="'100%'"
+      (blur)="options.showErrors = true"></mat-slider>
+    <mat-slider thumbLabel *ngIf="!boundControl"
+      [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+      [disabled]="controlDisabled || options?.readonly"
+      [id]="'control' + layoutNode?._id"
+      [max]="options?.maximum"
+      [min]="options?.minimum"
+      [step]="options?.multipleOf || options?.step || 'any'"
+      [style.width]="'100%'"
+      [value]="controlValue"
+      (blur)="options.showErrors = true"
+      (change)="updateValue($event)"></mat-slider>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`,
+                    styles: [` mat-error { font-size: 75%; } `],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+// TODO: Add this control
+class MaterialStepperComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this);
+    }
+    updateValue(event) {
+        this.jsf.updateValue(this, event.target.value);
+    }
+}
+MaterialStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialStepperComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialStepperComponent, selector: "material-stepper-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialStepperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-stepper-widget',
+                    template: ``,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class MaterialTabsComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.selectedItem = 0;
+        this.showAddTab = true;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.itemCount = this.layoutNode.items.length - 1;
+        this.updateControl();
+    }
+    select(index) {
+        if (this.layoutNode.items[index].type === '$ref') {
+            this.jsf.addItem({
+                layoutNode: this.layoutNode.items[index],
+                layoutIndex: this.layoutIndex.concat(index),
+                dataIndex: this.dataIndex.concat(index)
+            });
+            this.updateControl();
+        }
+        this.selectedItem = index;
+    }
+    updateControl() {
+        this.itemCount = this.layoutNode.items.length - 1;
+        const lastItem = this.layoutNode.items[this.layoutNode.items.length - 1];
+        this.showAddTab = lastItem.type === '$ref' &&
+            this.itemCount < (lastItem.options.maxItems || 1000);
+    }
+    setTabTitle(item, index) {
+        return this.jsf.setArrayItemTitle(this, item, index);
+    }
+}
+MaterialTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialTabsComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialTabsComponent, selector: "material-tabs-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <nav mat-tab-nav-bar
+      [attr.aria-label]="options?.label || options?.title || ''"
+      [style.width]="'100%'">
+        <a mat-tab-link *ngFor="let item of layoutNode?.items; let i = index"
+          [active]="selectedItem === i"
+          (click)="select(i)">
+          <span *ngIf="showAddTab || item.type !== '$ref'"
+            [innerHTML]="setTabTitle(item, i)"></span>
+        </a>
+    </nav>
+    <div *ngFor="let layoutItem of layoutNode?.items; let i = index"
+      [class]="options?.htmlClass || ''">
+      <select-framework-widget *ngIf="selectedItem === i"
+        [class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')"
+        [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
+        [layoutIndex]="(layoutIndex || []).concat(i)"
+        [layoutNode]="layoutItem"></select-framework-widget>
+    </div>`, isInline: true, styles: ["a{cursor:pointer}\n"], components: [{ type: i2$6.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }, { type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialTabsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-tabs-widget',
+                    template: `
+    <nav mat-tab-nav-bar
+      [attr.aria-label]="options?.label || options?.title || ''"
+      [style.width]="'100%'">
+        <a mat-tab-link *ngFor="let item of layoutNode?.items; let i = index"
+          [active]="selectedItem === i"
+          (click)="select(i)">
+          <span *ngIf="showAddTab || item.type !== '$ref'"
+            [innerHTML]="setTabTitle(item, i)"></span>
+        </a>
+    </nav>
+    <div *ngFor="let layoutItem of layoutNode?.items; let i = index"
+      [class]="options?.htmlClass || ''">
+      <select-framework-widget *ngIf="selectedItem === i"
+        [class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')"
+        [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
+        [layoutIndex]="(layoutIndex || []).concat(i)"
+        [layoutNode]="layoutItem"></select-framework-widget>
+    </div>`,
+                    styles: [` a { cursor: pointer; } `],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+class MaterialTextareaComponent {
+    constructor(matFormFieldDefaultOptions, jsf) {
+        this.matFormFieldDefaultOptions = matFormFieldDefaultOptions;
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+        this.jsf.initializeControl(this);
+        if (!this.options.notitle && !this.options.description && this.options.placeholder) {
+            this.options.description = this.options.placeholder;
+        }
+    }
+    updateValue(event) {
+        this.jsf.updateValue(this, event.target.value);
+    }
+}
+MaterialTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialTextareaComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
+MaterialTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: MaterialTextareaComponent, selector: "material-textarea-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'"
+      [class]="options?.htmlClass || ''"
+      [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
+      [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
+      [style.width]="'100%'">
+      <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
+      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
+        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
+      <textarea matInput *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.maxlength]="options?.maxLength"
+        [attr.minlength]="options?.minLength"
+        [attr.pattern]="options?.pattern"
+        [required]="options?.required"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [style.width]="'100%'"
+        (blur)="options.showErrors = true"></textarea>
+      <textarea matInput *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.maxlength]="options?.maxLength"
+        [attr.minlength]="options?.minLength"
+        [attr.pattern]="options?.pattern"
+        [required]="options?.required"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [style.width]="'100%'"
+        [value]="controlValue"
+        (input)="updateValue($event)"
+        (blur)="options.showErrors = true"></textarea>
+      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
+        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
+      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
+        align="end" [innerHTML]="options?.description"></mat-hint>
+    </mat-form-field>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:auto;width:initial}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i2.MatPrefix, selector: "[matPrefix]" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i5.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialTextareaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'material-textarea-widget',
+                    template: `
+    <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'"
+      [class]="options?.htmlClass || ''"
+      [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')"
+      [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
+      [style.width]="'100%'">
+      <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
+      <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
+        [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
+      <textarea matInput *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.maxlength]="options?.maxLength"
+        [attr.minlength]="options?.minLength"
+        [attr.pattern]="options?.pattern"
+        [required]="options?.required"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [style.width]="'100%'"
+        (blur)="options.showErrors = true"></textarea>
+      <textarea matInput *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.maxlength]="options?.maxLength"
+        [attr.minlength]="options?.minLength"
+        [attr.pattern]="options?.pattern"
+        [required]="options?.required"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [style.width]="'100%'"
+        [value]="controlValue"
+        (input)="updateValue($event)"
+        (blur)="options.showErrors = true"></textarea>
+      <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
+        [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
+      <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
+        align="end" [innerHTML]="options?.description"></mat-hint>
+    </mat-form-field>
+    <mat-error *ngIf="options?.showErrors && options?.errorMessage"
+      [innerHTML]="options?.errorMessage"></mat-error>`,
+                    styles: [`
+    mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }
+    ::ng-deep json-schema-form mat-form-field .mat-form-field-wrapper .mat-form-field-flex
+      .mat-form-field-infix { width: initial; }
+  `],
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
+                }, {
+                    type: Optional
+                }] }, { type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+const MATERIAL_FRAMEWORK_COMPONENTS = [
+    FlexLayoutRootComponent, FlexLayoutSectionComponent,
+    MaterialAddReferenceComponent, MaterialOneOfComponent,
+    MaterialButtonComponent, MaterialButtonGroupComponent,
+    MaterialCheckboxComponent, MaterialCheckboxesComponent,
+    MaterialChipListComponent, MaterialDatepickerComponent,
+    MaterialFileComponent, MaterialInputComponent, MaterialNumberComponent,
+    MaterialRadiosComponent, MaterialSelectComponent, MaterialSliderComponent,
+    MaterialStepperComponent, MaterialTabsComponent, MaterialTextareaComponent,
+    MaterialDesignFrameworkComponent
+];
+
+// Material Design Framework
+// https://github.com/angular/material2
+class MaterialDesignFramework extends Framework {
+    constructor() {
+        super(...arguments);
+        this.name = 'material-design';
+        this.framework = MaterialDesignFrameworkComponent;
+        this.stylesheets = [
+            '//fonts.googleapis.com/icon?family=Material+Icons',
+            '//fonts.googleapis.com/css?family=Roboto:300,400,500,700',
+        ];
+        this.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',
+        };
+    }
+}
+MaterialDesignFramework.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialDesignFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+MaterialDesignFramework.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialDesignFramework });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialDesignFramework, decorators: [{
+            type: Injectable
+        }] });
+
+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, key, value) {
+        if (key === 'layout-gap' && (value === null || value === undefined)) {
+            value = '0px';
+        }
+        MediaMarshallerUpdateElement.apply(this, [element, key, value]);
+    };
+}
+
+/**
+ * unused @angular/material modules:
+ * MatDialogModule, MatGridListModule, MatListModule, MatMenuModule,
+ * MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule,
+ * MatSidenavModule, MatSnackBarModule, MatSortModule, MatTableModule,
+ * ,
+ */
+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,
+];
+class MaterialDesignFrameworkModule {
+    constructor() {
+        fixAngularFlex();
+    }
+}
+MaterialDesignFrameworkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialDesignFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MaterialDesignFrameworkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialDesignFrameworkModule, declarations: [FlexLayoutRootComponent, FlexLayoutSectionComponent, MaterialAddReferenceComponent, MaterialOneOfComponent, MaterialButtonComponent, MaterialButtonGroupComponent, MaterialCheckboxComponent, MaterialCheckboxesComponent, MaterialChipListComponent, MaterialDatepickerComponent, MaterialFileComponent, MaterialInputComponent, MaterialNumberComponent, MaterialRadiosComponent, MaterialSelectComponent, MaterialSliderComponent, MaterialStepperComponent, MaterialTabsComponent, MaterialTextareaComponent, MaterialDesignFrameworkComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FlexLayoutModule, MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule,
+        MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatExpansionModule,
+        MatFormFieldModule, MatIconModule, MatInputModule, MatNativeDateModule,
+        MatRadioModule, MatSelectModule, MatSliderModule, MatSlideToggleModule,
+        MatStepperModule, MatTabsModule, MatTooltipModule,
+        MatToolbarModule, MatMenuModule, MatToolbarModule, WidgetLibraryModule,
+        JsonSchemaFormModule], exports: [JsonSchemaFormModule, FlexLayoutRootComponent, FlexLayoutSectionComponent, MaterialAddReferenceComponent, MaterialOneOfComponent, MaterialButtonComponent, MaterialButtonGroupComponent, MaterialCheckboxComponent, MaterialCheckboxesComponent, MaterialChipListComponent, MaterialDatepickerComponent, MaterialFileComponent, MaterialInputComponent, MaterialNumberComponent, MaterialRadiosComponent, MaterialSelectComponent, MaterialSliderComponent, MaterialStepperComponent, MaterialTabsComponent, MaterialTextareaComponent, MaterialDesignFrameworkComponent] });
+MaterialDesignFrameworkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialDesignFrameworkModule, providers: [
+        JsonSchemaFormService,
+        FrameworkLibraryService,
+        WidgetLibraryService,
+        { provide: Framework, useClass: MaterialDesignFramework, multi: true },
+    ], imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            FlexLayoutModule,
+            ...ANGULAR_MATERIAL_MODULES,
+            WidgetLibraryModule,
+            JsonSchemaFormModule,
+        ], JsonSchemaFormModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: MaterialDesignFrameworkModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    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 },
+                    ]
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/*
+ * Public API Surface of @ajsf/material-framework
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ANGULAR_MATERIAL_MODULES, FlexLayoutRootComponent, FlexLayoutSectionComponent, MATERIAL_FRAMEWORK_COMPONENTS, MaterialAddReferenceComponent, MaterialButtonComponent, MaterialButtonGroupComponent, MaterialCheckboxComponent, MaterialCheckboxesComponent, MaterialChipListComponent, MaterialDatepickerComponent, MaterialDesignFramework, MaterialDesignFrameworkComponent, MaterialDesignFrameworkModule, MaterialFileComponent, MaterialInputComponent, MaterialNumberComponent, MaterialOneOfComponent, MaterialRadiosComponent, MaterialSelectComponent, MaterialSliderComponent, MaterialStepperComponent, MaterialTabsComponent, MaterialTextareaComponent };
+//# sourceMappingURL=ajsf-material.mjs.map