@ajsf/material/fesm2020/ajsf-material.mjs.map

Angular JSON Schema Form builder using Angular Material UI

{"version":3,"file":"ajsf-material.mjs","sources":["../../../../projects/ajsf-material/src/lib/widgets/flex-layout-root.component.ts","../../../../projects/ajsf-material/src/lib/widgets/flex-layout-section.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-add-reference.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-button.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-button-group.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-checkbox.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-checkboxes.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-chip-list.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-datepicker.component.ts","../../../../projects/ajsf-material/src/lib/material-design-framework.component.ts","../../../../projects/ajsf-material/src/lib/material-design-framework.component.html","../../../../projects/ajsf-material/src/lib/widgets/material-file.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-input.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-number.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-one-of.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-radios.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-select.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-slider.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-stepper.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-tabs.component.ts","../../../../projects/ajsf-material/src/lib/widgets/material-textarea.component.ts","../../../../projects/ajsf-material/src/lib/widgets/public_api.ts","../../../../projects/ajsf-material/src/lib/material-design.framework.ts","../../../../projects/ajsf-material/src/lib/angular-flex-monkey-patch.ts","../../../../projects/ajsf-material/src/lib/material-design-framework.module.ts","../../../../projects/ajsf-material/src/public_api.ts","../../../../projects/ajsf-material/src/ajsf-material.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { JsonSchemaFormService } from '@ajsf/core';\n\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'flex-layout-root-widget',\n  template: `\n    <div *ngFor=\"let layoutNode of layout; let i = index\"\n      [class.form-flex-item]=\"isFlexItem\"\n      [style.flex-grow]=\"getFlexAttribute(layoutNode, 'flex-grow')\"\n      [style.flex-shrink]=\"getFlexAttribute(layoutNode, 'flex-shrink')\"\n      [style.flex-basis]=\"getFlexAttribute(layoutNode, 'flex-basis')\"\n      [style.align-self]=\"(layoutNode?.options || {})['align-self']\"\n      [style.order]=\"layoutNode?.options?.order\"\n      [fxFlex]=\"layoutNode?.options?.fxFlex\"\n      [fxFlexOrder]=\"layoutNode?.options?.fxFlexOrder\"\n      [fxFlexOffset]=\"layoutNode?.options?.fxFlexOffset\"\n      [fxFlexAlign]=\"layoutNode?.options?.fxFlexAlign\">\n      <select-framework-widget *ngIf=\"showWidget(layoutNode)\"\n        [dataIndex]=\"layoutNode?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])\"\n        [layoutIndex]=\"(layoutIndex || []).concat(i)\"\n        [layoutNode]=\"layoutNode\"></select-framework-widget>\n    <div>`,\n  changeDetection: ChangeDetectionStrategy.Default,\n})\nexport class FlexLayoutRootComponent {\n  @Input() dataIndex: number[];\n  @Input() layoutIndex: number[];\n  @Input() layout: any[];\n  @Input() isFlexItem = false;\n\n  constructor(\n    private jsf: JsonSchemaFormService\n  ) { }\n\n  removeItem(item) {\n    this.jsf.removeItem(item);\n  }\n\n  // Set attributes for flexbox child\n  // (container attributes are set in flex-layout-section.component)\n  getFlexAttribute(node: any, attribute: string) {\n    const index = ['flex-grow', 'flex-shrink', 'flex-basis'].indexOf(attribute);\n    return ((node.options || {}).flex || '').split(/\\s+/)[index] ||\n      (node.options || {})[attribute] || ['1', '1', 'auto'][index];\n  }\n\n  showWidget(layoutNode: any): boolean {\n    return this.jsf.evaluateCondition(layoutNode, this.dataIndex);\n  }\n}\n","import { AbstractControl } from '@angular/forms';\nimport { Component, Input, OnInit } from '@angular/core';\nimport { JsonSchemaFormService } from '@ajsf/core';\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'flex-layout-section-widget',\n  template: `\n    <div *ngIf=\"containerType === 'div'\"\n      [class]=\"options?.htmlClass || ''\"\n      [class.expandable]=\"options?.expandable && !expanded\"\n      [class.expanded]=\"options?.expandable && expanded\">\n      <label *ngIf=\"sectionTitle\"\n        [class]=\"'legend ' + (options?.labelHtmlClass || '')\"\n        [innerHTML]=\"sectionTitle\"\n        (click)=\"toggleExpanded()\"></label>\n      <flex-layout-root-widget *ngIf=\"expanded\"\n        [layout]=\"layoutNode.items\"\n        [dataIndex]=\"dataIndex\"\n        [layoutIndex]=\"layoutIndex\"\n        [isFlexItem]=\"getFlexAttribute('is-flex')\"\n        [class.form-flex-column]=\"getFlexAttribute('flex-direction') === 'column'\"\n        [class.form-flex-row]=\"getFlexAttribute('flex-direction') === 'row'\"\n        [style.display]=\"getFlexAttribute('display')\"\n        [style.flex-direction]=\"getFlexAttribute('flex-direction')\"\n        [style.flex-wrap]=\"getFlexAttribute('flex-wrap')\"\n        [style.justify-content]=\"getFlexAttribute('justify-content')\"\n        [style.align-items]=\"getFlexAttribute('align-items')\"\n        [style.align-content]=\"getFlexAttribute('align-content')\"\n        [fxLayout]=\"getFlexAttribute('layout')\"\n        [fxLayoutGap]=\"options?.fxLayoutGap\"\n        [fxLayoutAlign]=\"options?.fxLayoutAlign\"\n        [attr.fxFlexFill]=\"options?.fxLayoutAlign\"></flex-layout-root-widget>\n      <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\n        [innerHTML]=\"options?.errorMessage\"></mat-error>\n    </div>\n\n    <fieldset *ngIf=\"containerType === 'fieldset'\"\n      [class]=\"options?.htmlClass || ''\"\n      [class.expandable]=\"options?.expandable && !expanded\"\n      [class.expanded]=\"options?.expandable && expanded\"\n      [disabled]=\"options?.readonly\">\n      <legend *ngIf=\"sectionTitle\"\n        [class]=\"'legend ' + (options?.labelHtmlClass || '')\"\n        [innerHTML]=\"sectionTitle\"\n        (click)=\"toggleExpanded()\"></legend>\n      <flex-layout-root-widget *ngIf=\"expanded\"\n        [layout]=\"layoutNode.items\"\n        [dataIndex]=\"dataIndex\"\n        [layoutIndex]=\"layoutIndex\"\n        [isFlexItem]=\"getFlexAttribute('is-flex')\"\n        [class.form-flex-column]=\"getFlexAttribute('flex-direction') === 'column'\"\n        [class.form-flex-row]=\"getFlexAttribute('flex-direction') === 'row'\"\n        [style.display]=\"getFlexAttribute('display')\"\n        [style.flex-direction]=\"getFlexAttribute('flex-direction')\"\n        [style.flex-wrap]=\"getFlexAttribute('flex-wrap')\"\n        [style.justify-content]=\"getFlexAttribute('justify-content')\"\n        [style.align-items]=\"getFlexAttribute('align-items')\"\n        [style.align-content]=\"getFlexAttribute('align-content')\"\n        [fxLayout]=\"getFlexAttribute('layout')\"\n        [fxLayoutGap]=\"options?.fxLayoutGap\"\n        [fxLayoutAlign]=\"options?.fxLayoutAlign\"\n        [attr.fxFlexFill]=\"options?.fxLayoutAlign\"></flex-layout-root-widget>\n      <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\n        [innerHTML]=\"options?.errorMessage\"></mat-error>\n    </fieldset>\n\n    <mat-card *ngIf=\"containerType === 'card'\"\n      [ngClass]=\"options?.htmlClass || ''\"\n      [class.expandable]=\"options?.expandable && !expanded\"\n      [class.expanded]=\"options?.expandable && expanded\">\n      <mat-card-header *ngIf=\"sectionTitle\">\n        <legend\n          [class]=\"'legend ' + (options?.labelHtmlClass || '')\"\n          [innerHTML]=\"sectionTitle\"\n          (click)=\"toggleExpanded()\"></legend>\n      </mat-card-header>\n      <mat-card-content *ngIf=\"expanded\">\n        <fieldset [disabled]=\"options?.readonly\">\n          <flex-layout-root-widget *ngIf=\"expanded\"\n            [layout]=\"layoutNode.items\"\n            [dataIndex]=\"dataIndex\"\n            [layoutIndex]=\"layoutIndex\"\n            [isFlexItem]=\"getFlexAttribute('is-flex')\"\n            [class.form-flex-column]=\"getFlexAttribute('flex-direction') === 'column'\"\n            [class.form-flex-row]=\"getFlexAttribute('flex-direction') === 'row'\"\n            [style.display]=\"getFlexAttribute('display')\"\n            [style.flex-direction]=\"getFlexAttribute('flex-direction')\"\n            [style.flex-wrap]=\"getFlexAttribute('flex-wrap')\"\n            [style.justify-content]=\"getFlexAttribute('justify-content')\"\n            [style.align-items]=\"getFlexAttribute('align-items')\"\n            [style.align-content]=\"getFlexAttribute('align-content')\"\n            [fxLayout]=\"getFlexAttribute('layout')\"\n            [fxLayoutGap]=\"options?.fxLayoutGap\"\n            [fxLayoutAlign]=\"options?.fxLayoutAlign\"\n            [attr.fxFlexFill]=\"options?.fxLayoutAlign\"></flex-layout-root-widget>\n          </fieldset>\n      </mat-card-content>\n      <mat-card-footer>\n        <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\n          [innerHTML]=\"options?.errorMessage\"></mat-error>\n      </mat-card-footer>\n    </mat-card>\n\n    <mat-expansion-panel *ngIf=\"containerType === 'expansion-panel'\"\n      [expanded]=\"expanded\"\n      [hideToggle]=\"!options?.expandable\">\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <legend *ngIf=\"sectionTitle\"\n            [class]=\"options?.labelHtmlClass\"\n            [innerHTML]=\"sectionTitle\"\n            (click)=\"toggleExpanded()\"></legend>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      <fieldset [disabled]=\"options?.readonly\">\n        <flex-layout-root-widget *ngIf=\"expanded\"\n          [layout]=\"layoutNode.items\"\n          [dataIndex]=\"dataIndex\"\n          [layoutIndex]=\"layoutIndex\"\n          [isFlexItem]=\"getFlexAttribute('is-flex')\"\n          [class.form-flex-column]=\"getFlexAttribute('flex-direction') === 'column'\"\n          [class.form-flex-row]=\"getFlexAttribute('flex-direction') === 'row'\"\n          [style.display]=\"getFlexAttribute('display')\"\n          [style.flex-direction]=\"getFlexAttribute('flex-direction')\"\n          [style.flex-wrap]=\"getFlexAttribute('flex-wrap')\"\n          [style.justify-content]=\"getFlexAttribute('justify-content')\"\n          [style.align-items]=\"getFlexAttribute('align-items')\"\n          [style.align-content]=\"getFlexAttribute('align-content')\"\n          [fxLayout]=\"getFlexAttribute('layout')\"\n          [fxLayoutGap]=\"options?.fxLayoutGap\"\n          [fxLayoutAlign]=\"options?.fxLayoutAlign\"\n          [attr.fxFlexFill]=\"options?.fxLayoutAlign\"></flex-layout-root-widget>\n      </fieldset>\n      <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\n        [innerHTML]=\"options?.errorMessage\"></mat-error>\n    </mat-expansion-panel>`,\n  styles: [`\n    fieldset { border: 0; margin: 0; padding: 0; }\n    .legend { font-weight: bold; }\n    .expandable > .legend:before { content: '▶'; padding-right: .3em; }\n    .expanded > .legend:before { content: '▼'; padding-right: .2em; }\n  `],\n})\nexport class FlexLayoutSectionComponent implements OnInit {\n  formControl: AbstractControl;\n  controlName: string;\n  controlValue: any;\n  controlDisabled = false;\n  boundControl = false;\n  options: any;\n  expanded = true;\n  containerType = 'div';\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    private jsf: JsonSchemaFormService\n  ) { }\n\n  get sectionTitle() {\n    return this.options.notitle ? null : this.jsf.setItemTitle(this);\n  }\n\n  ngOnInit() {\n    this.jsf.initializeControl(this);\n    this.options = this.layoutNode.options || {};\n    this.expanded = typeof this.options.expanded === 'boolean' ?\n      this.options.expanded : !this.options.expandable;\n    switch (this.layoutNode.type) {\n      case 'section': case 'array': case 'fieldset': case 'advancedfieldset':\n      case 'authfieldset': case 'optionfieldset': case 'selectfieldset':\n        this.containerType = 'fieldset';\n        break;\n      case 'card':\n        this.containerType = 'card';\n        break;\n      case 'expansion-panel':\n        this.containerType = 'expansion-panel';\n        break;\n      default: // 'div', 'flex', 'tab', 'conditional', 'actions'\n        this.containerType = 'div';\n    }\n  }\n\n  toggleExpanded() {\n    if (this.options.expandable) { this.expanded = !this.expanded; }\n  }\n\n  // Set attributes for flexbox container\n  // (child attributes are set in flex-layout-root.component)\n  getFlexAttribute(attribute: string) {\n    const flexActive: boolean =\n      this.layoutNode.type === 'flex' ||\n      !!this.options.displayFlex ||\n      this.options.display === 'flex';\n    // if (attribute !== 'flex' && !flexActive) { return null; }\n    switch (attribute) {\n      case 'is-flex':\n        return flexActive;\n      case 'display':\n        return flexActive ? 'flex' : 'initial';\n      case 'flex-direction': case 'flex-wrap':\n        const index = ['flex-direction', 'flex-wrap'].indexOf(attribute);\n        return (this.options['flex-flow'] || '').split(/\\s+/)[index] ||\n          this.options[attribute] || ['column', 'nowrap'][index];\n      case 'justify-content': case 'align-items': case 'align-content':\n        return this.options[attribute];\n      case 'layout':\n        return (this.options.fxLayout || 'row') +\n          this.options.fxLayoutWrap ? ' ' + this.options.fxLayoutWrap : '';\n\n    }\n  }\n}\n","import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';\nimport { JsonSchemaFormService } from '@ajsf/core';\n\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'material-add-reference-widget',\n  template: `\n    <section [class]=\"options?.htmlClass || ''\" align=\"end\">\n      <button mat-raised-button *ngIf=\"showAddButton\"\n        [color]=\"options?.color || 'accent'\"\n        [disabled]=\"options?.readonly\"\n        (click)=\"addItem($event)\">\n        <span *ngIf=\"options?.icon\" [class]=\"options?.icon\"></span>\n        <span *ngIf=\"options?.title\" [innerHTML]=\"buttonText\"></span>\n      </button>\n    </section>`,\n  changeDetection: ChangeDetectionStrategy.Default,\n})\nexport class MaterialAddReferenceComponent implements OnInit {\n  options: any;\n  itemCount: number;\n  previousLayoutIndex: number[];\n  previousDataIndex: number[];\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    private jsf: JsonSchemaFormService\n  ) { }\n\n  ngOnInit() {\n    this.options = this.layoutNode.options || {};\n  }\n\n  get showAddButton(): boolean {\n    return !this.layoutNode.arrayItem ||\n      this.layoutIndex[this.layoutIndex.length - 1] < this.options.maxItems;\n  }\n\n  addItem(event) {\n    event.preventDefault();\n    this.jsf.addItem(this);\n  }\n\n  get buttonText(): string {\n    const parent: any = {\n      dataIndex: this.dataIndex.slice(0, -1),\n      layoutIndex: this.layoutIndex.slice(0, -1),\n      layoutNode: this.jsf.getParentNode(this),\n    };\n    return parent.layoutNode.add ||\n      this.jsf.setArrayItemTitle(parent, this.layoutNode, this.itemCount);\n  }\n}\n","import { AbstractControl } from '@angular/forms';\nimport { Component, Input, OnInit } from '@angular/core';\nimport { JsonSchemaFormService, hasOwn } from '@ajsf/core';\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'material-button-widget',\n  template: `\n    <div class=\"button-row\" [class]=\"options?.htmlClass || ''\">\n      <button mat-raised-button\n        [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n        [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n        [color]=\"options?.color || 'primary'\"\n        [disabled]=\"controlDisabled || options?.readonly\"\n        [id]=\"'control' + layoutNode?._id\"\n        [name]=\"controlName\"\n        [type]=\"layoutNode?.type\"\n        [value]=\"controlValue\"\n        (click)=\"updateValue($event)\">\n        <mat-icon *ngIf=\"options?.icon\" class=\"mat-24\">{{options?.icon}}</mat-icon>\n        <span *ngIf=\"options?.title\" [innerHTML]=\"options?.title\"></span>\n      </button>\n    </div>`,\n    styles: [` button { margin-top: 10px; } `],\n})\nexport class MaterialButtonComponent implements OnInit {\n  formControl: AbstractControl;\n  controlName: string;\n  controlValue: any;\n  controlDisabled = false;\n  boundControl = false;\n  options: any;\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    private jsf: JsonSchemaFormService\n  ) { }\n\n  ngOnInit() {\n    this.options = this.layoutNode.options || {};\n    this.jsf.initializeControl(this);\n    if (hasOwn(this.options, 'disabled')) {\n      this.controlDisabled = this.options.disabled;\n    } else if (this.jsf.formOptions.disableInvalidSubmit) {\n      this.controlDisabled = !this.jsf.isValid;\n      this.jsf.isValidChanges.subscribe(isValid => this.controlDisabled = !isValid);\n    }\n  }\n\n  updateValue(event) {\n    if (typeof this.options.onClick === 'function') {\n      this.options.onClick(event);\n    } else {\n      this.jsf.updateValue(this, event.target.value);\n    }\n  }\n}\n","import { AbstractControl } from '@angular/forms';\nimport { Component, Input, OnInit } from '@angular/core';\nimport { JsonSchemaFormService, buildTitleMap } from '@ajsf/core';\n\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'material-button-group-widget',\n  template: `\n    <div>\n      <div *ngIf=\"options?.title\">\n        <label\n          [attr.for]=\"'control' + layoutNode?._id\"\n          [class]=\"options?.labelHtmlClass || ''\"\n          [style.display]=\"options?.notitle ? 'none' : ''\"\n          [innerHTML]=\"options?.title\"></label>\n      </div>\n      <mat-button-toggle-group\n        [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n        [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n        [attr.required]=\"options?.required\"\n        [disabled]=\"controlDisabled || options?.readonly\"\n        [name]=\"controlName\"\n        [value]=\"controlValue\"\n        [vertical]=\"!!options.vertical\">\n        <mat-button-toggle *ngFor=\"let radioItem of radiosList\"\n          [id]=\"'control' + layoutNode?._id + '/' + radioItem?.name\"\n          [value]=\"radioItem?.value\"\n          (click)=\"updateValue(radioItem?.value)\">\n          <span [innerHTML]=\"radioItem?.name\"></span>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n      <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\n        [innerHTML]=\"options?.errorMessage\"></mat-error>\n    </div>`,\n    styles: [` mat-error { font-size: 75%; } `],\n})\nexport class MaterialButtonGroupComponent implements OnInit {\n  formControl: AbstractControl;\n  controlName: string;\n  controlValue: any;\n  controlDisabled = false;\n  boundControl = false;\n  options: any;\n  radiosList: any[] = [];\n  vertical = false;\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    private jsf: JsonSchemaFormService\n  ) { }\n\n  ngOnInit() {\n    this.options = this.layoutNode.options || {};\n    this.radiosList = buildTitleMap(\n      this.options.titleMap || this.options.enumNames,\n      this.options.enum, true\n    );\n    this.jsf.initializeControl(this);\n  }\n\n  updateValue(value) {\n    this.options.showErrors = true;\n    this.jsf.updateValue(this, value);\n  }\n}\n","import { Component, Input, OnInit } from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\nimport { JsonSchemaFormService } from '@ajsf/core';\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'material-checkbox-widget',\n  template: `\n    <mat-checkbox *ngIf=\"boundControl && !showSlideToggle\"\n      [formControl]=\"formControl\"\n      align=\"left\"\n      [color]=\"options?.color || 'primary'\"\n      [id]=\"'control' + layoutNode?._id\"\n      labelPosition=\"after\"\n      [name]=\"controlName\"\n      (blur)=\"options.showErrors = true\">\n      <span *ngIf=\"options?.title\"\n        class=\"checkbox-name\"\n        [style.display]=\"options?.notitle ? 'none' : ''\"\n        [innerHTML]=\"options?.title\"></span>\n    </mat-checkbox>\n    <mat-checkbox *ngIf=\"!boundControl && !showSlideToggle\"\n      align=\"left\"\n      [color]=\"options?.color || 'primary'\"\n      [disabled]=\"controlDisabled || options?.readonly\"\n      [id]=\"'control' + layoutNode?._id\"\n      labelPosition=\"after\"\n      [name]=\"controlName\"\n      [checked]=\"isChecked\"\n      (blur)=\"options.showErrors = true\"\n      (change)=\"updateValue($event)\">\n      <span *ngIf=\"options?.title\"\n        class=\"checkbox-name\"\n        [style.display]=\"options?.notitle ? 'none' : ''\"\n        [innerHTML]=\"options?.title\"></span>\n    </mat-checkbox>\n    <mat-slide-toggle *ngIf=\"boundControl && showSlideToggle\"\n      [formControl]=\"formControl\"\n      align=\"left\"\n      [color]=\"options?.color || 'primary'\"\n      [id]=\"'control' + layoutNode?._id\"\n      labelPosition=\"after\"\n      [name]=\"controlName\"\n      (blur)=\"options.showErrors = true\">\n      <span *ngIf=\"options?.title\"\n        class=\"checkbox-name\"\n        [style.display]=\"options?.notitle ? 'none' : ''\"\n        [innerHTML]=\"options?.title\"></span>\n    </mat-slide-toggle>\n    <mat-slide-toggle *ngIf=\"!boundControl && showSlideToggle\"\n      align=\"left\"\n      [color]=\"options?.color || 'primary'\"\n      [disabled]=\"controlDisabled || options?.readonly\"\n      [id]=\"'control' + layoutNode?._id\"\n      labelPosition=\"after\"\n      [name]=\"controlName\"\n      [checked]=\"isChecked\"\n      (blur)=\"options.showErrors = true\"\n      (change)=\"updateValue($event)\">\n      <span *ngIf=\"options?.title\"\n        class=\"checkbox-name\"\n        [style.display]=\"options?.notitle ? 'none' : ''\"\n        [innerHTML]=\"options?.title\"></span>\n    </mat-slide-toggle>\n    <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\n      [innerHTML]=\"options?.errorMessage\"></mat-error>`,\n  styles: [`\n    .checkbox-name { white-space: nowrap; }\n    mat-error { font-size: 75%; }\n  `],\n})\nexport class MaterialCheckboxComponent implements OnInit {\n  formControl: AbstractControl;\n  controlName: string;\n  controlValue: any;\n  controlDisabled = false;\n  boundControl = false;\n  options: any;\n  trueValue: any = true;\n  falseValue: any = false;\n  showSlideToggle = false;\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    private jsf: JsonSchemaFormService\n  ) { }\n\n  ngOnInit() {\n    this.options = this.layoutNode.options || {};\n    this.jsf.initializeControl(this, !this.options.readonly);\n    if (this.controlValue === null || this.controlValue === undefined) {\n      this.controlValue = false;\n      this.jsf.updateValue(this, this.falseValue);\n    }\n    if (this.layoutNode.type === 'slide-toggle' ||\n      this.layoutNode.format === 'slide-toggle'\n    ) {\n      this.showSlideToggle = true;\n    }\n  }\n\n  updateValue(event) {\n    this.options.showErrors = true;\n    this.jsf.updateValue(this, event.checked ? this.trueValue : this.falseValue);\n  }\n\n  get isChecked() {\n    return this.jsf.getFormControlValue(this) === this.trueValue;\n  }\n}\n","import { AbstractControl } from '@angular/forms';\nimport { buildTitleMap } from '@ajsf/core';\nimport { Component, Input, OnInit } from '@angular/core';\nimport { JsonSchemaFormService, TitleMapItem } from '@ajsf/core';\n\n// TODO: Change this to use a Selection List instead?\n// https://material.angular.io/components/list/overview\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'material-checkboxes-widget',\n  template: `\n    <div>\n      <mat-checkbox type=\"checkbox\"\n        [checked]=\"allChecked\"\n        [color]=\"options?.color || 'primary'\"\n        [disabled]=\"controlDisabled || options?.readonly\"\n        [indeterminate]=\"someChecked\"\n        [name]=\"options?.name\"\n        (blur)=\"options.showErrors = true\"\n        (change)=\"updateAllValues($event)\">\n        <span class=\"checkbox-name\" [innerHTML]=\"options?.name\"></span>\n      </mat-checkbox>\n      <label *ngIf=\"options?.title\"\n        class=\"title\"\n        [class]=\"options?.labelHtmlClass || ''\"\n        [style.display]=\"options?.notitle ? 'none' : ''\"\n        [innerHTML]=\"options?.title\"></label>\n      <ul class=\"checkbox-list\" [class.horizontal-list]=\"horizontalList\">\n        <li *ngFor=\"let checkboxItem of checkboxList\"\n          [class]=\"options?.htmlClass || ''\">\n          <mat-checkbox type=\"checkbox\"\n            [(ngModel)]=\"checkboxItem.checked\"\n            [color]=\"options?.color || 'primary'\"\n            [disabled]=\"controlDisabled || options?.readonly\"\n            [name]=\"checkboxItem?.name\"\n            (blur)=\"options.showErrors = true\"\n            (change)=\"updateValue()\">\n            <span class=\"checkbox-name\" [innerHTML]=\"checkboxItem?.name\"></span>\n          </mat-checkbox>\n        </li>\n      </ul>\n      <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\n        [innerHTML]=\"options?.errorMessage\"></mat-error>\n    </div>`,\n  styles: [`\n    .title { font-weight: bold; }\n    .checkbox-list { list-style-type: none; }\n    .horizontal-list > li { display: inline-block; margin-right: 10px; zoom: 1; }\n    .checkbox-name { white-space: nowrap; }\n    mat-error { font-size: 75%; }\n  `],\n})\nexport class MaterialCheckboxesComponent implements OnInit {\n  formControl: AbstractControl;\n  controlName: string;\n  controlValue: any;\n  controlDisabled = false;\n  boundControl = false;\n  options: any;\n  horizontalList = false;\n  formArray: AbstractControl;\n  checkboxList: TitleMapItem[] = [];\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    private jsf: JsonSchemaFormService\n  ) { }\n\n  ngOnInit() {\n    this.options = this.layoutNode.options || {};\n    this.horizontalList = this.layoutNode.type === 'checkboxes-inline' ||\n      this.layoutNode.type === 'checkboxbuttons';\n    this.jsf.initializeControl(this);\n    this.checkboxList = buildTitleMap(\n      this.options.titleMap || this.options.enumNames, this.options.enum, true\n    );\n    if (this.boundControl) {\n      const formArray = this.jsf.getFormControl(this);\n      for (const checkboxItem of this.checkboxList) {\n        checkboxItem.checked = formArray.value.includes(checkboxItem.value);\n      }\n    }\n  }\n\n  get allChecked(): boolean {\n    return this.checkboxList.filter(t => t.checked).length === this.checkboxList.length;\n  }\n\n  get someChecked(): boolean {\n    const checkedItems = this.checkboxList.filter(t => t.checked).length;\n    return checkedItems > 0 && checkedItems < this.checkboxList.length;\n  }\n\n  updateValue() {\n    this.options.showErrors = true;\n    if (this.boundControl) {\n      this.jsf.updateArrayCheckboxList(this, this.checkboxList);\n    }\n  }\n\n  updateAllValues(event: any) {\n    this.options.showErrors = true;\n    this.checkboxList.forEach(t => t.checked = event.checked);\n    this.updateValue();\n  }\n}\n","import { Component, Input, OnInit } from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\nimport { JsonSchemaFormService } from '@ajsf/core';\n\n// TODO: Add this control\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'material-chip-list-widget',\n  template: ``,\n})\nexport class MaterialChipListComponent implements OnInit {\n  formControl: AbstractControl;\n  controlName: string;\n  controlValue: any;\n  controlDisabled = false;\n  boundControl = false;\n  options: any;\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    private jsf: JsonSchemaFormService\n  ) { }\n\n  ngOnInit() {\n    this.options = this.layoutNode.options || {};\n    this.jsf.initializeControl(this);\n  }\n\n  updateValue(event) {\n    this.jsf.updateValue(this, event.target.value);\n  }\n}\n","import { Component, Inject, Input, OnInit, Optional } from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\nimport { JsonSchemaFormService } from '@ajsf/core';\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'material-datepicker-widget',\n  template: `\n    <mat-form-field [appearance]=\"options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'\"\n                    [class]=\"options?.htmlClass || ''\"\n                    [floatLabel]=\"options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')\"\n                    [hideRequiredMarker]=\"options?.hideRequired ? 'true' : 'false'\"\n                    [style.width]=\"'100%'\">\n      <mat-label *ngIf=\"!options?.notitle\">{{options?.title}}</mat-label>\n      <span matPrefix *ngIf=\"options?.prefix || options?.fieldAddonLeft\"\n        [innerHTML]=\"options?.prefix || options?.fieldAddonLeft\"></span>\n      <input matInput *ngIf=\"boundControl\"\n        [formControl]=\"formControl\"\n        [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n        [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n        [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n        [id]=\"'control' + layoutNode?._id\"\n        [max]=\"options?.maximum\"\n        [matDatepicker]=\"picker\"\n        [min]=\"options?.minimum\"\n        [name]=\"controlName\"\n        [placeholder]=\"options?.title\"\n        [readonly]=\"options?.readonly\"\n        [required]=\"options?.required\"\n        [style.width]=\"'100%'\"\n        (blur)=\"options.showErrors = true\"\n        >\n      <input matInput *ngIf=\"!boundControl\"\n        [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n        [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n        [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n        [disabled]=\"controlDisabled || options?.readonly\"\n        [id]=\"'control' + layoutNode?._id\"\n        [max]=\"options?.maximum\"\n        [matDatepicker]=\"picker\"\n        [min]=\"options?.minimum\"\n        [name]=\"controlName\"\n        [placeholder]=\"options?.title\"\n        [required]=\"options?.required\"\n        [style.width]=\"'100%'\"\n        [readonly]=\"options?.readonly\"\n        (blur)=\"options.showErrors = true\"\n        >\n      <span matSuffix *ngIf=\"options?.suffix || options?.fieldAddonRight\"\n        [innerHTML]=\"options?.suffix || options?.fieldAddonRight\"></span>\n      <mat-hint *ngIf=\"options?.description && (!options?.showErrors || !options?.errorMessage)\"\n        align=\"end\" [innerHTML]=\"options?.description\"></mat-hint>\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    </mat-form-field>\n    <mat-datepicker #picker ></mat-datepicker>\n    <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\n      [innerHTML]=\"options?.errorMessage\"></mat-error>`,\n  styles: [`\n    mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }\n    ::ng-deep json-schema-form mat-form-field .mat-form-field-wrapper .mat-form-field-flex\n      .mat-form-field-infix { width: initial; }\n  `],\n})\nexport class MaterialDatepickerComponent implements OnInit {\n  formControl: AbstractControl;\n  controlName: string;\n  dateValue: any;\n  controlDisabled = false;\n  boundControl = false;\n  options: any;\n  autoCompleteList: string[] = [];\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public matFormFieldDefaultOptions,\n    private jsf: JsonSchemaFormService\n  ) { }\n\n  ngOnInit() {\n    this.options = this.layoutNode.options || {};\n    this.jsf.initializeControl(this, !this.options.readonly);\n    if (!this.options.notitle && !this.options.description && this.options.placeholder) {\n      this.options.description = this.options.placeholder;\n    }\n  }\n}\n","import {ChangeDetectorRef, Component, Input, OnChanges, OnInit} from '@angular/core';\nimport {isDefined, JsonSchemaFormService} from '@ajsf/core';\nimport cloneDeep from 'lodash/cloneDeep';\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'material-design-framework',\n  templateUrl: './material-design-framework.component.html',\n  styleUrls: ['./material-design-framework.component.scss'],\n})\nexport class MaterialDesignFrameworkComponent implements OnInit, OnChanges {\n  frameworkInitialized = false;\n  inputType: string;\n  options: any; // Options used in this framework\n  widgetLayoutNode: any; // layoutNode passed to child widget\n  widgetOptions: any; // Options passed to child widget\n  formControl: any = null;\n  parentArray: any = null;\n  isOrderable = false;\n  dynamicTitle: string = null;\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private jsf: JsonSchemaFormService\n  ) {\n  }\n\n  get showRemoveButton(): boolean {\n    if (!this.layoutNode || !this.widgetOptions.removable ||\n      this.widgetOptions.readonly || this.layoutNode.type === '$ref'\n    ) {\n      return false;\n    }\n    if (this.layoutNode.recursiveReference) {\n      return true;\n    }\n    if (!this.layoutNode.arrayItem || !this.parentArray) {\n      return false;\n    }\n    // If array length <= minItems, don't allow removing any items\n    return this.parentArray.items.length - 1 <= this.parentArray.options.minItems ? false :\n      // For removable list items, allow removing any item\n      this.layoutNode.arrayItemType === 'list' ? true :\n        // For removable tuple items, only allow removing last item in list\n        this.layoutIndex[this.layoutIndex.length - 1] === this.parentArray.items.length - 2;\n  }\n\n  ngOnInit() {\n    this.initializeFramework();\n  }\n\n  ngOnChanges() {\n    if (!this.frameworkInitialized) {\n      this.initializeFramework();\n    }\n    if (this.dynamicTitle) {\n      this.updateTitle();\n    }\n  }\n\n  initializeFramework() {\n    if (this.layoutNode) {\n      this.options = cloneDeep(this.layoutNode.options || {});\n      this.widgetLayoutNode = {\n        ...this.layoutNode,\n        options: cloneDeep(this.layoutNode.options || {})\n      };\n      this.widgetOptions = this.widgetLayoutNode.options;\n      this.formControl = this.jsf.getFormControl(this);\n\n      if (\n        isDefined(this.widgetOptions.minimum) &&\n        isDefined(this.widgetOptions.maximum) &&\n        this.widgetOptions.multipleOf >= 1\n      ) {\n        this.layoutNode.type = 'range';\n      }\n\n      if (\n        !['$ref', 'advancedfieldset', 'authfieldset', 'button', 'card',\n          'checkbox', 'expansion-panel', 'help', 'message', 'msg', 'section',\n          'submit', 'tabarray', 'tabs'].includes(this.layoutNode.type) &&\n        /{{.+?}}/.test(this.widgetOptions.title || '')\n      ) {\n        this.dynamicTitle = this.widgetOptions.title;\n        this.updateTitle();\n      }\n\n      if (this.layoutNode.arrayItem && this.layoutNode.type !== '$ref') {\n        this.parentArray = this.jsf.getParentNode(this);\n        if (this.parentArray) {\n          this.isOrderable =\n            this.parentArray.type.slice(0, 3) !== 'tab' &&\n            this.layoutNode.arrayItemType === 'list' &&\n            !this.widgetOptions.readonly &&\n            this.parentArray.options.orderable;\n        }\n      }\n\n      this.frameworkInitialized = true;\n    } else {\n      this.options = {};\n    }\n  }\n\n  updateTitle() {\n    this.widgetLayoutNode.options.title = this.jsf.parseText(\n      this.dynamicTitle,\n      this.jsf.getFormControlValue(this),\n      this.jsf.getFormControlGroup(this).value,\n      this.dataIndex[this.dataIndex.length - 1]\n    );\n  }\n\n  removeItem() {\n    this.jsf.removeItem(this);\n  }\n}\n","<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","import { AbstractControl } from '@angular/forms';\nimport { Component, Input, OnInit } from '@angular/core';\nimport { JsonSchemaFormService } from '@ajsf/core';\n\n// TODO: Add this control\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'material-file-widget',\n  template: ``,\n})\nexport class MaterialFileComponent implements OnInit {\n  formControl: AbstractControl;\n  controlName: string;\n  controlValue: any;\n  controlDisabled = false;\n  boundControl = false;\n  options: any;\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    private jsf: JsonSchemaFormService\n  ) { }\n\n  ngOnInit() {\n    this.options = this.layoutNode.options || {};\n    this.jsf.initializeControl(this);\n  }\n\n  updateValue(event) {\n    this.jsf.updateValue(this, event.target.value);\n  }\n}\n","import { AbstractControl } from '@angular/forms';\nimport {Component, Inject, Input, OnInit, Optional} from '@angular/core';\nimport { JsonSchemaFormService } from '@ajsf/core';\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'material-input-widget',\n  template: `\n    <mat-form-field [appearance]=\"options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'\"\n      [class]=\"options?.htmlClass || ''\"\n      [floatLabel]=\"options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')\"\n      [hideRequiredMarker]=\"options?.hideRequired ? 'true' : 'false'\"\n      [style.width]=\"'100%'\">\n      <mat-label *ngIf=\"!options?.notitle\">{{options?.title}}</mat-label>\n      <span matPrefix *ngIf=\"options?.prefix || options?.fieldAddonLeft\"\n        [innerHTML]=\"options?.prefix || options?.fieldAddonLeft\"></span>\n      <input matInput *ngIf=\"boundControl\"\n        [formControl]=\"formControl\"\n        [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n        [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n        [attr.maxlength]=\"options?.maxLength\"\n        [attr.minlength]=\"options?.minLength\"\n        [attr.pattern]=\"options?.pattern\"\n        [readonly]=\"options?.readonly ? 'readonly' : null\"\n        [id]=\"'control' + layoutNode?._id\"\n        [name]=\"controlName\"\n        [placeholder]=\"options?.notitle ? options?.placeholder : options?.title\"\n        [required]=\"options?.required\"\n        [style.width]=\"'100%'\"\n        [type]=\"layoutNode?.type\"\n        (blur)=\"options.showErrors = true\">\n      <input matInput *ngIf=\"!boundControl\"\n        [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n        [attr.list]=\"'control' + layoutNode?._id + 'Autocomplete'\"\n        [attr.maxlength]=\"options?.maxLength\"\n        [attr.minlength]=\"options?.minLength\"\n        [attr.pattern]=\"options?.pattern\"\n        [disabled]=\"controlDisabled\"\n        [id]=\"'control' + layoutNode?._id\"\n        [name]=\"controlName\"\n        [placeholder]=\"options?.notitle ? options?.placeholder : options?.title\"\n        [readonly]=\"options?.readonly ? 'readonly' : null\"\n        [required]=\"options?.required\"\n        [style.width]=\"'100%'\"\n        [type]=\"layoutNode?.type\"\n        [value]=\"controlValue\"\n        (input)=\"updateValue($event)\"\n        (blur)=\"options.showErrors = true\">\n      <span matSuffix *ngIf=\"options?.suffix || options?.fieldAddonRight\"\n        [innerHTML]=\"options?.suffix || options?.fieldAddonRight\"></span>\n      <mat-hint *ngIf=\"options?.description && (!options?.showErrors || !options?.errorMessage)\"\n        align=\"end\" [innerHTML]=\"options?.description\"></mat-hint>\n      <mat-autocomplete *ngIf=\"options?.typeahead?.source\">\n        <mat-option *ngFor=\"let word of options?.typeahead?.source\"\n          [value]=\"word\">{{word}}</mat-option>\n      </mat-autocomplete>\n    </mat-form-field>\n    <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\n      [innerHTML]=\"options?.errorMessage\"></mat-error>`,\n  styles: [`\n    mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }\n    ::ng-deep json-schema-form mat-form-field .mat-form-field-wrapper .mat-form-field-flex\n      .mat-form-field-infix { width: initial; }\n  `],\n})\nexport class MaterialInputComponent implements OnInit {\n  formControl: AbstractControl;\n  controlName: string;\n  controlValue: string;\n  controlDisabled = false;\n  boundControl = false;\n  options: any;\n  autoCompleteList: string[] = [];\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n\n  constructor(\n    @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public matFormFieldDefaultOptions,\n    private jsf: JsonSchemaFormService\n  ) {\n  }\n\n  ngOnInit() {\n    this.options = this.layoutNode.options || {};\n    this.jsf.initializeControl(this);\n    if (!this.options.notitle && !this.options.description && this.options.placeholder) {\n      this.options.description = this.options.placeholder;\n    }\n  }\n\n  updateValue(event) {\n    this.jsf.updateValue(this, event.target.value);\n  }\n}\n","import {Component, Inject, Input, OnInit, Optional} from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\nimport { JsonSchemaFormService } from '@ajsf/core';\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'material-number-widget',\n  template: `\n    <mat-form-field [appearance]=\"options?.appearance || matFormFieldDefaultOptions?.appearance || 'standard'\"\n    [class]=\"options?.htmlClass || ''\"\n    [floatLabel]=\"options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')\"\n    [hideRequiredMarker]=\"options?.hideRequired ? 'true' : 'false'\"\n    [style.width]=\"'100%'\">\n    <mat-label *ngIf=\"!options?.notitle\">{{options?.title}}</mat-label>\n      <span matPrefix *ngIf=\"options?.prefix || options?.fieldAddonLeft\"\n        [innerHTML]=\"options?.prefix || options?.fieldAddonLeft\"></span>\n      <input matInput *ngIf=\"boundControl\"\n        [formControl]=\"formControl\"\n        [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n        [attr.max]=\"options?.maximum\"\n        [attr.min]=\"options?.minimum\"\n        [attr.step]=\"options?.multipleOf || options?.step || 'any'\"\n        [id]=\"'control' + layoutNode?._id\"\n        [name]=\"controlName\"\n        [placeholder]=\"options?.notitle ? options?.placeholder : options?.title\"\n        [readonly]=\"options?.readonly ? 'readonly' : null\"\n        [required]=\"options?.required\"\n        [style.width]=\"'100%'\"\n        [type]=\"'number'\"\n        (blur)=\"options.showErrors = true\">\n      <input matInput *ngIf=\"!boundControl\"\n        [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n        [attr.max]=\"options?.maximum\"\n        [attr.min]=\"options?.minimum\"\n        [attr.step]=\"options?.multipleOf || options?.step || 'any'\"\n        [disabled]=\"controlDisabled\"\n        [id]=\"'control' + layoutNode?._id\"\n        [name]=\"controlName\"\n        [placeholder]=\"options?.notitle ? options?.placeholder : options?.title\"\n        [readonly]=\"options?.readonly ? 'readonly' : null\"\n        [required]=\"options?.required\"\n        [style.width]=\"'100%'\"\n        [type]=\"'number'\"\n        [value]=\"controlValue\"\n        (input)=\"updateValue($event)\"\n        (blur)=\"options.showErrors = true\">\n      <span matSuffix *ngIf=\"options?.suffix || options?.fieldAddonRight\"\n        [innerHTML]=\"options?.suffix || options?.fieldAddonRight\"></span>\n      <mat-hint *ngIf=\"layoutNode?.type === 'range'\" align=\"start\"\n        [innerHTML]=\"controlValue\"></mat-hint>\n      <mat-hint *ngIf=\"options?.description && (!options?.showErrors || !options?.errorMessage)\"\n        align=\"end\" [innerHTML]=\"options?.description\"></mat-hint>\n    </mat-form-field>\n    <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\n      [innerHTML]=\"options?.errorMessage\"></mat-error>`,\n  styles: [`\n    mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }\n    ::ng-deep json-schema-form mat-form-field .mat-form-field-wrapper .mat-form-field-flex\n      .mat-form-field-infix { width: initial; }\n  `],\n})\nexport class MaterialNumberComponent implements OnInit {\n  formControl: AbstractControl;\n  controlName: string;\n  controlValue: any;\n  controlDisabled = false;\n  boundControl = false;\n  options: any;\n  allowNegative = true;\n  allowDecimal = true;\n  allowExponents = false;\n  lastValidNumber = '';\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public matFormFieldDefaultOptions,\n    private jsf: JsonSchemaFormService\n  ) { }\n\n  ngOnInit() {\n    this.options = this.layoutNode.options || {};\n    this.jsf.initializeControl(this);\n    if (this.layoutNode.dataType === 'integer') { this.allowDecimal = false; }\n    if (!this.options.notitle && !this.options.description && this.options.placeholder) {\n      this.options.description = this.options.placeholder;\n    }\n  }\n\n  updateValue(event) {\n    this.jsf.updateValue(this, event.target.value);\n  }\n}\n","import { Component, Input, OnInit } from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\nimport { JsonSchemaFormService } from '@ajsf/core';\n\n// TODO: Add this control\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'material-one-of-widget',\n  template: ``,\n})\nexport class MaterialOneOfComponent implements OnInit {\n  formControl: AbstractControl;\n  controlName: string;\n  controlValue: any;\n  controlDisabled = false;\n  boundControl = false;\n  options: any;\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    private jsf: JsonSchemaFormService\n  ) { }\n\n  ngOnInit() {\n    this.options = this.layoutNode.options || {};\n    this.jsf.initializeControl(this);\n  }\n\n  updateValue(event) {\n    this.jsf.updateValue(this, event.target.value);\n  }\n}\n","import { AbstractControl } from '@angular/forms';\nimport { Component, Input, OnInit } from '@angular/core';\nimport { JsonSchemaFormService, buildTitleMap } from '@ajsf/core';\n\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'material-radios-widget',\n  template: `\n    <div>\n      <div *ngIf=\"options?.title\">\n        <label\n          [attr.for]=\"'control' + layoutNode?._id\"\n          [class]=\"options?.labelHtmlClass || ''\"\n          [style.display]=\"options?.notitle ? 'none' : ''\"\n          [innerHTML]=\"options?.title\"></label>\n      </div>\n      <mat-radio-group *ngIf=\"boundControl\"\n        [formControl]=\"formControl\"\n        [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n        [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n        [attr.required]=\"options?.required\"\n        [style.flex-direction]=\"flexDirection\"\n        [name]=\"controlName\"\n        (blur)=\"options.showErrors = true\">\n        <mat-radio-button *ngFor=\"let radioItem of radiosList\"\n          [id]=\"'control' + layoutNode?._id + '/' + radioItem?.name\"\n          [value]=\"radioItem?.value\">\n          <span [innerHTML]=\"radioItem?.name\"></span>\n        </mat-radio-button>\n      </mat-radio-group>\n      <mat-radio-group *ngIf=\"!boundControl\"\n        [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n        [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n