@zajsf/material/fesm2022/zajsf-material.mjs.map

Angular JSON Schema Form builder using Angular Material UI

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