@ajsf/material 14.0.0 → 16.0.0

package/fesm2015/ajsf-material.mjs

@@ -1,2332 +0,0 @@
-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 i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3 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 i5 from '@angular/material/form-field';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i4$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i3$2 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i3$3 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i4$2 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i6 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i4$3 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i5$1 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import cloneDeep from 'lodash/cloneDeep';
-import * as i4$4 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i4$5 from '@angular/material/core';
-import { MatNativeDateModule } from '@angular/material/core';
-import * as i5$2 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
-import * as i6$1 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i5$3 from '@angular/material/slider';
-import { MatSliderModule } from '@angular/material/slider';
-import * as i3$4 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
-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';
-
-class FlexLayoutRootComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
-        this.isFlexItem = false;
-    }
-    removeItem(item) {
-        this.jsf.removeItem(item);
-    }
-    getFlexBasis(node) {
-        return ((node === null || node === void 0 ? void 0 : node.options) || {}).fxFlex || this.getFlexAttribute(node, 'flex-basis');
-    }
-    getMaxWidth(node) {
-        const fxFlex = ((node === null || node === void 0 ? void 0 : node.options) || {}).fxFlex;
-        return fxFlex && `${fxFlex}`.trim().endsWith('%') ? fxFlex : null;
-    }
-    getAlignSelf(node) {
-        const options = (node === null || node === void 0 ? void 0 : node.options) || {};
-        return options['align-self'] ||
-            FlexLayoutRootComponent.SELF_ALIGN[options.fxFlexAlign] || null;
-    }
-    getOrder(node) {
-        const options = (node === null || node === void 0 ? void 0 : node.options) || {};
-        return options.order || options.fxFlexOrder || null;
-    }
-    getOffset(node) {
-        return ((node === null || node === void 0 ? void 0 : node.options) || {}).fxFlexOffset || null;
-    }
-    // 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);
-    }
-}
-// fxFlex="30%" and friends used to come from @angular/flex-layout, which is
-// deprecated and has no Angular 16+ release. These translate the same option
-// values to the CSS the directives were compiling to, so schemas that set
-// fxFlex, fxFlexOrder, fxFlexOffset or fxFlexAlign keep working unchanged.
-FlexLayoutRootComponent.SELF_ALIGN = {
-    start: 'flex-start', end: 'flex-end', center: 'center',
-    baseline: 'baseline', stretch: 'stretch',
-};
-FlexLayoutRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FlexLayoutRootComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-FlexLayoutRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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]="getFlexBasis(layoutNode)"
-      [style.align-self]="getAlignSelf(layoutNode)"
-      [style.order]="getOrder(layoutNode)"
-      [style.max-width]="getMaxWidth(layoutNode)"
-      [style.margin-left]="getOffset(layoutNode)">
-      <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, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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]="getFlexBasis(layoutNode)"
-      [style.align-self]="getAlignSelf(layoutNode)"
-      [style.order]="getOrder(layoutNode)"
-      [style.max-width]="getMaxWidth(layoutNode)"
-      [style.margin-left]="getOffset(layoutNode)">
-      <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;
-        }
-    }
-    fxAlign(position) {
-        const value = `${(this.options || {}).fxLayoutAlign || ''}`.trim().split(/\s+/)[position];
-        return FlexLayoutSectionComponent.ALIGN[value] || null;
-    }
-    getJustifyContent() {
-        return this.getFlexAttribute('justify-content') || this.fxAlign(0);
-    }
-    getAlignItems() {
-        return this.getFlexAttribute('align-items') || this.fxAlign(1);
-    }
-    // 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];
-        }
-    }
-}
-// fxLayoutAlign="start center" used to come from @angular/flex-layout, which
-// is deprecated and has no Angular 16+ release. These map the same option
-// values onto justify-content and align-items, so schemas setting
-// fxLayoutAlign or fxLayoutGap keep working unchanged. The existing
-// [style.display], [style.flex-direction] and [style.flex-wrap] bindings
-// already cover what fxLayout did.
-FlexLayoutSectionComponent.ALIGN = {
-    start: 'flex-start', end: 'flex-end', center: 'center',
-    'space-between': 'space-between', 'space-around': 'space-around',
-    'space-evenly': 'space-evenly', stretch: 'stretch', baseline: 'baseline',
-};
-FlexLayoutSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FlexLayoutSectionComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-FlexLayoutSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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')"
-        [style.gap]="options?.fxLayoutGap"
-        [style.justify-content]="getJustifyContent()"
-        [style.align-items]="getAlignItems()"></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')"
-        [style.gap]="options?.fxLayoutGap"
-        [style.justify-content]="getJustifyContent()"
-        [style.align-items]="getAlignItems()"></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')"
-            [style.gap]="options?.fxLayoutGap"
-            [style.justify-content]="getJustifyContent()"
-            [style.align-items]="getAlignItems()"></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')"
-          [style.gap]="options?.fxLayoutGap"
-          [style.justify-content]="getJustifyContent()"
-          [style.align-items]="getAlignItems()"></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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i3.MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: FlexLayoutRootComponent, selector: "flex-layout-root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isFlexItem"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FlexLayoutSectionComponent, decorators: [{
-            type: Component,
-            args: [{ 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')"
-        [style.gap]="options?.fxLayoutGap"
-        [style.justify-content]="getJustifyContent()"
-        [style.align-items]="getAlignItems()"></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')"
-        [style.gap]="options?.fxLayoutGap"
-        [style.justify-content]="getJustifyContent()"
-        [style.align-items]="getAlignItems()"></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')"
-            [style.gap]="options?.fxLayoutGap"
-            [style.justify-content]="getJustifyContent()"
-            [style.align-items]="getAlignItems()"></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')"
-          [style.gap]="options?.fxLayoutGap"
-          [style.justify-content]="getJustifyContent()"
-          [style.align-items]="getAlignItems()"></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:700}.expandable>.legend:before{content:\"\\25b6\";padding-right:.3em}.expanded>.legend:before{content:\"\\25bc\";padding-right:.2em}\n"] }]
-        }], 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: "14.2.0", ngImport: i0, type: MaterialAddReferenceComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialAddReferenceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$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"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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: "14.2.0", ngImport: i0, type: MaterialButtonComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$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"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialButtonComponent, decorators: [{
-            type: Component,
-            args: [{ 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}\n"] }]
-        }], 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: "14.2.0", ngImport: i0, type: MaterialButtonGroupComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialButtonGroupComponent, decorators: [{
-            type: Component,
-            args: [{ 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%}\n"] }]
-        }], 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: "14.2.0", ngImport: i0, type: MaterialCheckboxComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ 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%}\n"] }]
-        }], 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: "14.2.0", ngImport: i0, type: MaterialCheckboxesComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialCheckboxesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialCheckboxesComponent, decorators: [{
-            type: Component,
-            args: [{ 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: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"] }]
-        }], 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: "14.2.0", ngImport: i0, type: MaterialChipListComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", 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: "14.2.0", 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: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialDatepickerComponent, decorators: [{
-            type: Component,
-            args: [{ 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:.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"] }]
-        }], 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 = Object.assign(Object.assign({}, 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: "14.2.0", ngImport: i0, type: MaterialDesignFrameworkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialDesignFrameworkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }, { kind: "directive", type: i1.OrderableDirective, selector: "[orderable]", inputs: ["orderable", "layoutNode", "layoutIndex", "dataIndex"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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: "14.2.0", ngImport: i0, type: MaterialFileComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", 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: "14.2.0", 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: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialInputComponent, decorators: [{
-            type: Component,
-            args: [{ 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:.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"] }]
-        }], 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: "14.2.0", 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: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialNumberComponent, decorators: [{
-            type: Component,
-            args: [{ 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:.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"] }]
-        }], 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: "14.2.0", ngImport: i0, type: MaterialOneOfComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialOneOfComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", 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: "14.2.0", ngImport: i0, type: MaterialRadiosComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialRadiosComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i5$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i5$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialRadiosComponent, decorators: [{
-            type: Component,
-            args: [{ 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%}\n"] }]
-        }], 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: "14.2.0", 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: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$5.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialSelectComponent, decorators: [{
-            type: Component,
-            args: [{ 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:.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"] }]
-        }], 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: "14.2.0", ngImport: i0, type: MaterialSliderComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialSliderComponent, decorators: [{
-            type: Component,
-            args: [{ 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%}\n"] }]
-        }], 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: "14.2.0", ngImport: i0, type: MaterialStepperComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", 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: "14.2.0", ngImport: i0, type: MaterialTabsComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "directive", type: i3$4.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { kind: "component", type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialTabsComponent, decorators: [{
-            type: Component,
-            args: [{ 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}\n"] }]
-        }], 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: "14.2.0", 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: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialTextareaComponent, decorators: [{
-            type: Component,
-            args: [{ 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:.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"] }]
-        }], 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: "14.2.0", ngImport: i0, type: MaterialDesignFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-MaterialDesignFramework.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialDesignFramework });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialDesignFramework, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * 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 {
-}
-MaterialDesignFrameworkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialDesignFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MaterialDesignFrameworkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", 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, 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: "14.2.0", ngImport: i0, type: MaterialDesignFrameworkModule, providers: [
-        JsonSchemaFormService,
-        FrameworkLibraryService,
-        WidgetLibraryService,
-        { provide: Framework, useClass: MaterialDesignFramework, multi: true },
-    ], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule, ANGULAR_MATERIAL_MODULES, WidgetLibraryModule,
-        JsonSchemaFormModule, JsonSchemaFormModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MaterialDesignFrameworkModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        ...ANGULAR_MATERIAL_MODULES,
-                        WidgetLibraryModule,
-                        JsonSchemaFormModule,
-                    ],
-                    declarations: [
-                        ...MATERIAL_FRAMEWORK_COMPONENTS,
-                    ],
-                    exports: [
-                        JsonSchemaFormModule,
-                        ...MATERIAL_FRAMEWORK_COMPONENTS,
-                    ],
-                    providers: [
-                        JsonSchemaFormService,
-                        FrameworkLibraryService,
-                        WidgetLibraryService,
-                        { provide: Framework, useClass: MaterialDesignFramework, multi: true },
-                    ]
-                }]
-        }] });
-
-/*
- * 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