@jsonforms/angular-material/lib/fesm2022/jsonforms-angular-material.mjs.map

Material Renderer Set for Angular module of JSON Forms

{"version":3,"file":"jsonforms-angular-material.mjs","sources":["../../src/library/controls/autocomplete.renderer.ts","../../src/library/controls/boolean.renderer.ts","../../src/library/util/date-format.ts","../../src/library/util/dayjs-date-adapter.ts","../../src/library/controls/date.renderer.ts","../../src/library/controls/number.renderer.ts","../../src/library/controls/range.renderer.ts","../../src/library/controls/textarea.renderer.ts","../../src/library/controls/text.renderer.ts","../../src/library/controls/toggle.renderer.ts","../../src/library/other/label.renderer.ts","../../src/library/other/master-detail/detail.ts","../../src/library/other/master-detail/master.ts","../../src/library/other/object.renderer.ts","../../src/library/other/table.renderer.ts","../../src/library/layouts/categorization-layout.renderer.ts","../../src/library/layouts/layout.renderer.ts","../../src/library/layouts/group-layout.renderer.ts","../../src/library/layouts/horizontal-layout.renderer.ts","../../src/library/layouts/vertical-layout.renderer.ts","../../src/library/layouts/array-layout.renderer.ts","../../src/library/layouts/index.ts","../../src/library/module.ts","../../src/library/controls/index.ts","../../src/library/other/master-detail/index.ts","../../src/library/other/index.ts","../../src/library/index.ts","../../src/jsonforms-angular-material.ts"],"sourcesContent":["/*\n  The MIT License\n  \n  Copyright (c) 2017-2019 EclipseSource Munich\n  https://github.com/eclipsesource/jsonforms\n  \n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n  \n  The above copyright notice and this permission notice shall be included in\n  all copies or substantial portions of the Software.\n  \n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n  THE SOFTWARE.\n*/\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport type { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';\nimport { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';\nimport {\n  Actions,\n  composeWithUi,\n  ControlElement,\n  isEnumControl,\n  OwnPropsOfControl,\n  RankedTester,\n  rankWith,\n} from '@jsonforms/core';\nimport type { Observable } from 'rxjs';\nimport { map, startWith } from 'rxjs/operators';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatAutocompleteModule } from '@angular/material/autocomplete';\n\n/**\n * To use this component you will need to add your own tester:\n * <pre><code>\n * ...\n * export const AutocompleteControlRendererTester: RankedTester = rankWith(2, isEnumControl);\n * ...\n * </code></pre>\n * Add the tester and renderer to JSONForms registry:\n * <pre><code>\n * ...\n * { tester: AutocompleteControlRendererTester, renderer: AutocompleteControlRenderer },\n * ...\n * </code></pre>\n * Furthermore you need to update your module.\n * <pre><code>\n * ...\n * imports: [JsonFormsAngularMaterialModule, MatAutocompleteModule],\n * declarations: [AutocompleteControlRenderer]\n * ...\n * </code></pre>\n *\n */\n@Component({\n  selector: 'AutocompleteControlRenderer',\n  template: `\n    <mat-form-field [ngStyle]=\"{ display: hidden ? 'none' : '' }\">\n      <mat-label>{{ label }}</mat-label>\n      <input\n        matInput\n        type=\"text\"\n        (change)=\"onChange($event)\"\n        [id]=\"id\"\n        [formControl]=\"form\"\n        [matAutocomplete]=\"auto\"\n        (keydown)=\"updateFilter($event)\"\n        (focus)=\"focused = true\"\n        (focusout)=\"focused = false\"\n      />\n      <mat-autocomplete\n        autoActiveFirstOption\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"onSelect($event)\"\n      >\n        <mat-option\n          *ngFor=\"let option of filteredOptions | async\"\n          [value]=\"option\"\n        >\n          {{ option }}\n        </mat-option>\n      </mat-autocomplete>\n      <mat-hint *ngIf=\"shouldShowUnfocusedDescription() || focused\">{{\n        description\n      }}</mat-hint>\n      <mat-error>{{ error }}</mat-error>\n    </mat-form-field>\n  `,\n  styles: [\n    `\n      :host {\n        display: flex;\n        flex-direction: row;\n      }\n      mat-form-field {\n        flex: 1 1 auto;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    MatAutocompleteModule,\n  ],\n})\nexport class AutocompleteControlRenderer\n  extends JsonFormsControl\n  implements OnInit\n{\n  @Input() options: string[];\n  filteredOptions: Observable<string[]>;\n  shouldFilter: boolean;\n  focused = false;\n\n  constructor(jsonformsService: JsonFormsAngularService) {\n    super(jsonformsService);\n  }\n  getEventValue = (event: any) => event.target.value;\n\n  ngOnInit() {\n    super.ngOnInit();\n    this.shouldFilter = false;\n    this.filteredOptions = this.form.valueChanges.pipe(\n      startWith(''),\n      map((val) => this.filter(val))\n    );\n  }\n\n  updateFilter(event: any) {\n    // ENTER\n    if (event.keyCode === 13) {\n      this.shouldFilter = false;\n    } else {\n      this.shouldFilter = true;\n    }\n  }\n\n  onSelect(ev: MatAutocompleteSelectedEvent) {\n    const path = composeWithUi(this.uischema as ControlElement, this.path);\n    this.shouldFilter = false;\n    this.jsonFormsService.updateCore(\n      Actions.update(path, () => ev.option.value)\n    );\n    this.triggerValidation();\n  }\n\n  filter(val: string): string[] {\n    return (this.options || this.scopedSchema.enum || []).filter(\n      (option) =>\n        !this.shouldFilter ||\n        !val ||\n        option.toLowerCase().indexOf(val.toLowerCase()) === 0\n    );\n  }\n  protected getOwnProps(): OwnPropsOfAutoComplete {\n    return {\n      ...super.getOwnProps(),\n      options: this.options,\n    };\n  }\n}\n\nexport const enumControlTester: RankedTester = rankWith(2, isEnumControl);\n\ninterface OwnPropsOfAutoComplete extends OwnPropsOfControl {\n  options: string[];\n}\n","/*\n  The MIT License\n  \n  Copyright (c) 2017-2019 EclipseSource Munich\n  https://github.com/eclipsesource/jsonforms\n  \n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n  \n  The above copyright notice and this permission notice shall be included in\n  all copies or substantial portions of the Software.\n  \n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n  THE SOFTWARE.\n*/\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ViewRef,\n} from '@angular/core';\nimport { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';\nimport { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';\nimport { CommonModule } from '@angular/common';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\n@Component({\n  selector: 'BooleanControlRenderer',\n  template: `\n    <div [ngStyle]=\"{ display: hidden ? 'none' : '' }\" class=\"boolean-control\">\n      <mat-checkbox\n        (change)=\"onChange($event)\"\n        [checked]=\"isChecked()\"\n        [disabled]=\"!isEnabled()\"\n        [id]=\"id\"\n      >\n        {{ label }}\n      </mat-checkbox>\n      <mat-hint class=\"mat-caption\" *ngIf=\"shouldShowUnfocusedDescription()\">{{\n        description\n      }}</mat-hint>\n      <mat-error class=\"mat-caption\">{{ error }}</mat-error>\n    </div>\n  `,\n  styles: [\n    `\n      :host {\n        display: flex;\n        flex-direction: row;\n      }\n      .boolean-control {\n        flex: 1 1 auto;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        height: 100%;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [CommonModule, MatCheckboxModule, MatFormFieldModule],\n})\nexport class BooleanControlRenderer extends JsonFormsControl {\n  constructor(\n    jsonformsService: JsonFormsAngularService,\n    private changeDetectionRef: ChangeDetectorRef\n  ) {\n    super(jsonformsService);\n  }\n  isChecked = () => this.data || false;\n  getEventValue = (event: any) => event.checked;\n\n  mapAdditionalProps() {\n    if (!(this.changeDetectionRef as ViewRef).destroyed) {\n      this.changeDetectionRef.markForCheck();\n    }\n  }\n}\n\nexport const booleanControlTester: RankedTester = rankWith(2, isBooleanControl);\n","import { Injectable } from '@angular/core';\n\n@Injectable()\nexport class MyFormat {\n  displayFormat = 'M/D/YYYY';\n\n  setDisplayFormat(displayFormat: string) {\n    this.displayFormat = displayFormat;\n  }\n\n  get display() {\n    return {\n      monthYearLabel: 'YYYY-MM',\n      dateA11yLabel: 'YYYY-MM-DD',\n      monthYearA11yLabel: 'YYYY-MM',\n      dateInput: this.displayFormat,\n    };\n  }\n  get parse() {\n    return {\n      dateInput: this.displayFormat,\n    };\n  }\n}\n","/*\n  The MIT License\n  \n  Copyright (c) 2017-2019 EclipseSource Munich\n  https://github.com/eclipsesource/jsonforms\n  \n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n  \n  The above copyright notice and this permission notice shall be included in\n  all copies or substantial portions of the Software.\n  \n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n  THE SOFTWARE.\n*/\n\nimport { Injectable } from '@angular/core';\nimport { NativeDateAdapter } from '@angular/material/core';\nimport { defaultDateFormat } from '@jsonforms/core';\nimport dayjs from 'dayjs';\nimport customParsing from 'dayjs/plugin/customParseFormat';\n\n// allows to parse date strings with custom format\ndayjs.extend(customParsing);\n\n/**\n * date adapter for dayjs to parse and format dates\n */\n@Injectable()\nexport class DayJsDateAdapter extends NativeDateAdapter {\n  saveFormat: string = defaultDateFormat;\n\n  setSaveFormat(format: string) {\n    this.saveFormat = format;\n  }\n\n  /**\n   * parses a given data prop string in the save-format into a date object\n   * @param value date string to be parsed\n   * @returns date object or null if parsing failed\n   */\n  parseSaveFormat(value: string): Date | null {\n    return this.parse(value, this.saveFormat);\n  }\n\n  parse(value: string, format: string): Date | null {\n    if (!value) {\n      return null;\n    }\n    const date = dayjs(value, format);\n\n    if (date.isValid()) {\n      return date.toDate();\n    } else {\n      return null;\n    }\n  }\n\n  toSaveFormat(value: Date) {\n    if (!value) {\n      return undefined;\n    }\n    const date = dayjs(value);\n    if (date.isValid()) {\n      return date.format(this.saveFormat);\n    } else {\n      return undefined;\n    }\n  }\n\n  /**\n   * transforms the date to a string representation for display\n   * @param date date to be formatted\n   * @param displayFormat format to be used for formatting the date e.g. YYYY-MM-DD\n   * @returns string representation of the date\n   */\n  format(date: Date, displayFormat: string): string {\n    return dayjs(date).format(displayFormat);\n  }\n\n  deserialize(value: any): Date | null {\n    if (!value) {\n      return null;\n    }\n    const date = dayjs(value);\n    if (date.isValid()) {\n      return date.toDate();\n    } else {\n      return null;\n    }\n  }\n}\n","/*\n  The MIT License\n  \n  Copyright (c) 2017-2019 EclipseSource Munich\n  https://github.com/eclipsesource/jsonforms\n  \n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n  \n  The above copyright notice and this permission notice shall be included in\n  all copies or substantial portions of the Software.\n  \n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n  THE SOFTWARE.\n*/\nimport {\n  Component,\n  ChangeDetectionStrategy,\n  Inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  defaultDateFormat,\n  isDateControl,\n  JsonFormsState,\n  RankedTester,\n  rankWith,\n  StatePropsOfControl,\n} from '@jsonforms/core';\nimport { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';\nimport { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';\nimport { MyFormat } from '../util/date-format';\nimport { DayJsDateAdapter } from '../util/dayjs-date-adapter';\nimport {\n  MatDatepicker,\n  MatDatepickerModule,\n} from '@angular/material/datepicker';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\n@Component({\n  selector: 'DateControlRenderer',\n  template: `\n    <mat-form-field\n      class=\"date-control-renderer\"\n      [ngStyle]=\"{ display: hidden ? 'none' : '' }\"\n    >\n      <mat-label>{{ label }}</mat-label>\n      <input\n        matInput\n        (dateChange)=\"onChange($event)\"\n        [id]=\"id\"\n        [formControl]=\"form\"\n        [matDatepicker]=\"datepicker\"\n        (focus)=\"focused = true\"\n        (focusout)=\"focused = false\"\n      />\n      <mat-datepicker-toggle\n        matSuffix\n        [for]=\"datepicker\"\n      ></mat-datepicker-toggle>\n      <mat-datepicker\n        #datepicker\n        (monthSelected)=\"monthSelected($event, datepicker)\"\n        (yearSelected)=\"yearSelected($event, datepicker)\"\n        [startView]=\"startView\"\n        [panelClass]=\"panelClass\"\n      ></mat-datepicker>\n      <mat-hint *ngIf=\"shouldShowUnfocusedDescription() || focused\">{{\n        description\n      }}</mat-hint>\n      <mat-error>{{ error }}</mat-error>\n    </mat-form-field>\n  `,\n  styles: [\n    `\n      DateControlRenderer {\n        display: flex;\n        flex-direction: row;\n      }\n      .date-control-renderer {\n        flex: 1 1 auto;\n      }\n      .no-panel-navigation .mat-calendar-period-button {\n        pointer-events: none;\n      }\n      .no-panel-navigation .mat-calendar-arrow {\n        display: none;\n      }\n    `,\n  ],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: DateAdapter,\n      useClass: DayJsDateAdapter,\n    },\n    {\n      provide: MAT_DATE_FORMATS,\n      useClass: MyFormat,\n    },\n  ],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    MatDatepickerModule,\n  ],\n})\nexport class DateControlRenderer extends JsonFormsControl {\n  focused = false;\n  views: string[] = [];\n  startView = '';\n  panelClass = '';\n\n  constructor(\n    jsonformsService: JsonFormsAngularService,\n    @Inject(MAT_DATE_FORMATS) private dateFormat: MyFormat,\n    @Inject(DateAdapter) private dateAdapter: DayJsDateAdapter\n  ) {\n    super(jsonformsService);\n  }\n\n  getEventValue = (event: any) => {\n    const value = event.value ? event.value : event;\n    return this.dateAdapter.toSaveFormat(value);\n  };\n\n  protected mapToProps(state: JsonFormsState): StatePropsOfControl {\n    const props = super.mapToProps(state);\n    const saveFormat = this.uischema?.options?.dateSaveFormat\n      ? this.uischema.options.dateSaveFormat\n      : defaultDateFormat;\n    this.views = this.uischema?.options?.views\n      ? this.uischema.options.views\n      : ['year', 'month', 'day'];\n    this.setViewProperties();\n\n    const dateFormat = this.uischema?.options?.dateFormat;\n\n    if (dateFormat) {\n      this.dateFormat.setDisplayFormat(dateFormat);\n    }\n\n    this.dateAdapter.setSaveFormat(saveFormat);\n    if (this.jsonFormsService.getLocale()) {\n      this.dateAdapter.setLocale(this.jsonFormsService.getLocale());\n    }\n    const date = this.dateAdapter.parseSaveFormat(props.data);\n    return { ...props, data: date };\n  }\n\n  yearSelected($event: any, datepicker: MatDatepicker<DayJsDateAdapter>) {\n    if (!this.views.includes('day') && !this.views.includes('month')) {\n      this.onChange($event);\n      datepicker.close();\n    }\n  }\n  monthSelected($event: any, datepicker: MatDatepicker<DayJsDateAdapter>) {\n    if (!this.views.includes('day')) {\n      this.onChange($event);\n      datepicker.close();\n    }\n  }\n\n  setViewProperties() {\n    if (!this.views.includes('day')) {\n      this.startView = 'multi-year';\n      this.panelClass = 'no-panel-navigation';\n    } else {\n      this.startView = 'month';\n    }\n  }\n}\n\nexport const DateControlRendererTester: RankedTester = rankWith(\n  2,\n  isDateControl\n);\n","/*\n  The MIT License\n  \n  Copyright (c) 2017-2019 EclipseSource Munich\n  https://github.com/eclipsesource/jsonforms\n  \n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n  \n  The above copyright notice and this permission notice shall be included in\n  all copies or substantial portions of the Software.\n  \n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n  THE SOFTWARE.\n*/\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';\nimport {\n  isIntegerControl,\n  isNumberControl,\n  or,\n  RankedTester,\n  rankWith,\n  StatePropsOfControl,\n} from '@jsonforms/core';\nimport merge from 'lodash/merge';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\n@Component({\n  selector: 'NumberControlRenderer',\n  template: `\n    <mat-form-field [ngStyle]=\"{ display: hidden ? 'none' : '' }\">\n      <mat-label>{{ label }}</mat-label>\n      <input\n        matInput\n        (input)=\"onChange($event)\"\n        [value]=\"getValue()\"\n        [id]=\"id\"\n        [formControl]=\"form\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"multipleOf\"\n        (focus)=\"focused = true\"\n        (focusout)=\"focused = false\"\n      />\n      <mat-hint *ngIf=\"shouldShowUnfocusedDescription() || focused\">{{\n        description\n      }}</mat-hint>\n      <mat-error>{{ error }}</mat-error>\n    </mat-form-field>\n  `,\n  styles: [\n    `\n      :host {\n        display: flex;\n        flex-direction: row;\n      }\n      mat-form-field {\n        flex: 1 1 auto;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n  ],\n})\nexport class NumberControlRenderer extends JsonFormsControl {\n  private readonly MAXIMUM_FRACTIONAL_DIGITS = 20;\n\n  oldValue: string;\n  min: number;\n  max: number;\n  multipleOf: number;\n  locale: string;\n  numberFormat: Intl.NumberFormat;\n  decimalSeparator: string;\n  focused = false;\n\n  constructor(jsonformsService: JsonFormsAngularService) {\n    super(jsonformsService);\n  }\n\n  onChange(ev: any) {\n    const data = this.oldValue\n      ? ev.target.value.replace(this.oldValue, '')\n      : ev.target.value;\n    // ignore these\n    if (\n      data === '.' ||\n      data === ',' ||\n      data === ' ' ||\n      // if the value is 0 and we already have a value then we ignore\n      (data === '0' &&\n        this.getValue() !== '' &&\n        // a 0 in the first place\n        ((ev.target.selectionStart === 1 && ev.target.selectionEnd === 1) ||\n          // or in the last place as this doesn't change the value (when there is a separator)\n          (ev.target.selectionStart === ev.target.value.length &&\n            ev.target.selectionEnd === ev.target.value.length &&\n            ev.target.value.indexOf(this.decimalSeparator) !== -1)))\n    ) {\n      this.oldValue = ev.target.value;\n      return;\n    }\n    super.onChange(ev);\n    this.oldValue = this.getValue();\n  }\n\n  getEventValue = (event: any) => {\n    const cleanPattern = new RegExp(`[^-+0-9${this.decimalSeparator}]`, 'g');\n    const cleaned = event.target.value.replace(cleanPattern, '');\n    const normalized = cleaned.replace(this.decimalSeparator, '.');\n\n    if (normalized === '') {\n      return undefined;\n    }\n\n    // convert to number\n    const number = +normalized;\n    // if not a number just return the string\n    if (Number.isNaN(number)) {\n      return event.target.value;\n    }\n    return number;\n  };\n\n  getValue = () => {\n    if (this.data !== undefined && this.data !== null) {\n      if (typeof this.data === 'number') {\n        return this.numberFormat.format(this.data);\n      }\n      return this.data;\n    }\n    return '';\n  };\n\n  mapAdditionalProps(props: StatePropsOfControl) {\n    if (this.scopedSchema) {\n      const testerContext = {\n        rootSchema: this.rootSchema,\n        config: props.config,\n      };\n      const defaultStep = isNumberControl(\n        this.uischema,\n        this.rootSchema,\n        testerContext\n      )\n        ? 0.1\n        : 1;\n      this.min = this.scopedSchema.minimum;\n      this.max = this.scopedSchema.maximum;\n      this.multipleOf = this.scopedSchema.multipleOf || defaultStep;\n      const appliedUiSchemaOptions = merge(\n        {},\n        props.config,\n        this.uischema.options\n      );\n      const currentLocale = this.jsonFormsService.getLocale();\n      if (this.locale === undefined || this.locale !== currentLocale) {\n        this.locale = currentLocale;\n        this.numberFormat = new Intl.NumberFormat(this.locale, {\n          useGrouping: appliedUiSchemaOptions.useGrouping,\n          maximumFractionDigits: this.MAXIMUM_FRACTIONAL_DIGITS,\n        });\n        this.determineDecimalSeparator();\n        this.oldValue = this.getValue();\n      }\n      this.form.setValue(this.getValue());\n    }\n  }\n\n  private determineDecimalSeparator(): void {\n    const example = this.numberFormat.format(1.1);\n    this.decimalSeparator = example.charAt(1);\n  }\n}\nexport const NumberControlRendererTester: RankedTester = rankWith(\n  2,\n  or(isNumberControl, isIntegerControl)\n);\n","/*\n  The MIT License\n  \n  Copyright (c) 2017-2019 EclipseSource Munich\n  https://github.com/eclipsesource/jsonforms\n  \n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n  \n  The above copyright notice and this permission notice shall be included in\n  all copies or substantial portions of the Software.\n  \n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n  THE SOFTWARE.\n*/\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ChangeDetectorRef,\n} from '@angular/core';\nimport { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';\nimport { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';\nimport { CommonModule } from '@angular/common';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\n@Component({\n  selector: 'RangeControlRenderer',\n  template: `\n    <div [ngStyle]=\"{ display: hidden ? 'none' : '' }\" class=\"range-control\">\n      <label class=\"mat-caption\" style=\"color:rgba(0,0,0,.54)\">{{\n        label\n      }}</label>\n      <mat-slider\n        [disabled]=\"!isEnabled()\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"multipleOf\"\n        [discrete]=\"true\"\n        [id]=\"id\"\n        showTickMarks\n        #ngSlider\n      >\n        <input matSliderThumb (valueChange)=\"onChange($event)\" />\n      </mat-slider>\n      <mat-hint class=\"mat-caption\" *ngIf=\"shouldShowUnfocusedDescription()\">{{\n        description\n      }}</mat-hint>\n      <mat-error class=\"mat-caption\">{{ error }}</mat-error>\n    </div>\n  `,\n  styles: [\n    `\n      :host {\n        display: flex;\n        flex-direction: row;\n      }\n      .range-control {\n        flex: 1 1 auto;\n        display: flex;\n        flex-direction: column;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [CommonModule, MatSliderModule, MatFormFieldModule],\n})\nexport class RangeControlRenderer extends JsonFormsControl {\n  min: number;\n  max: number;\n  multipleOf: number;\n  focused = false;\n\n  constructor(\n    jsonformsService: JsonFormsAngularService,\n    private changeDetectorRef: ChangeDetectorRef\n  ) {\n    super(jsonformsService);\n  }\n  getEventValue = (event: number) => Number(event);\n  mapAdditionalProps() {\n    if (this.scopedSchema) {\n      this.min = this.scopedSchema.minimum;\n      this.max = this.scopedSchema.maximum;\n      this.multipleOf = this.scopedSchema.multipleOf || 1;\n    }\n    this.changeDetectorRef.markForCheck();\n  }\n}\nexport const RangeControlRendererTester: RankedTester = rankWith(\n  4,\n  isRangeControl\n);\n","/*\n  The MIT License\n  \n  Copyright (c) 2017-2019 EclipseSource Munich\n  https://github.com/eclipsesource/jsonforms\n  \n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n  \n  The above copyright notice and this permission notice shall be included in\n  all copies or substantial portions of the Software.\n  \n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n  THE SOFTWARE.\n*/\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';\nimport { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\n@Component({\n  selector: 'TextAreaRenderer',\n  template: `\n    <mat-form-field [ngStyle]=\"{ display: hidden ? 'none' : '' }\">\n      <mat-label>{{ label }}</mat-label>\n      <textarea\n        matInput\n        (input)=\"onChange($event)\"\n        [id]=\"id\"\n        [formControl]=\"form\"\n        (focus)=\"focused = true\"\n        (focusout)=\"focused = false\"\n      ></textarea>\n      <mat-hint *ngIf=\"shouldShowUnfocusedDescription() || focused\">{{\n        description\n      }}</mat-hint>\n      <mat-error>{{ error }}</mat-error>\n    </mat-form-field>\n  `,\n  styles: [\n    `\n      :host {\n        display: flex;\n        flex-direction: row;\n      }\n      mat-form-field {\n        flex: 1 1 auto;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n  ],\n})\nexport class TextAreaRenderer extends JsonFormsControl {\n  focused = false;\n  constructor(jsonformsService: JsonFormsAngularService) {\n    super(jsonformsService);\n  }\n  getEventValue = (event: any) => event.target.value || undefined;\n}\nexport const TextAreaRendererTester: RankedTester = rankWith(\n  2,\n  isMultiLineControl\n);\n","/*\n  The MIT License\n  \n  Copyright (c) 2017-2019 EclipseSource Munich\n  https://github.com/eclipsesource/jsonforms\n  \n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n  \n  The above copyright notice and this permission notice shall be included in\n  all copies or substantial portions of the Software.\n  \n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n  THE SOFTWARE.\n*/\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';\nimport { isStringControl, RankedTester, rankWith } from '@jsonforms/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\n@Component({\n  selector: 'TextControlRenderer',\n  template: `\n    <mat-form-field [ngStyle]=\"{ display: hidden ? 'none' : '' }\">\n      <mat-label>{{ label }}</mat-label>\n      <input\n        matInput\n        [type]=\"getType()\"\n        (input)=\"onChange($event)\"\n        [id]=\"id\"\n        [formControl]=\"form\"\n        (focus)=\"focused = true\"\n        (focusout)=\"focused = false\"\n      />\n      <mat-hint *ngIf=\"shouldShowUnfocusedDescription() || focused\">{{\n        description\n      }}</mat-hint>\n      <mat-error>{{ error }}</mat-error>\n    </mat-form-field>\n  `,\n  styles: [\n    `\n      :host {\n        display: flex;\n        flex-direction: row;\n      }\n      mat-form-field {\n        flex: 1 1 auto;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n  ],\n})\nexport class TextControlRenderer extends JsonFormsControl {\n  focused = false;\n  constructor(jsonformsService: JsonFormsAngularService) {\n    super(jsonformsService);\n  }\n  getEventValue = (event: any) => event.target.value || undefined;\n  getType = (): string => {\n    if (this.uischema.options && this.uischema.options.format) {\n      return this.uischema.options.format;\n    }\n    if (this.scopedSchema && this.scopedSchema.format) {\n      switch (this.scopedSchema.format) {\n        case 'email':\n          return 'email';\n        case 'tel':\n          return 'tel';\n        default:\n          return 'text';\n      }\n    }\n    return 'text';\n  };\n}\nexport const TextControlRendererTester: RankedTester = rankWith(\n  1,\n  isStringControl\n);\n","/*\n  The MIT License\n  \n  Copyright (c) 2017-2019 EclipseSource Munich\n  https://github.com/eclipsesource/jsonforms\n  \n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n  \n  The above copyright notice and this permission notice shall be included in\n  all copies or substantial portions of the Software.\n  \n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n  THE SOFTWARE.\n*/\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ChangeDetectorRef,\n} from '@angular/core';\nimport { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';\nimport {\n  and,\n  isBooleanControl,\n  optionIs,\n  RankedTester,\n  rankWith,\n} from '@jsonforms/core';\nimport { CommonModule } from '@angular/common';\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\n@Component({\n  selector: 'ToggleControlRenderer',\n  template: `\n    <div [ngStyle]=\"{ display: hidden ? 'none' : '' }\">\n      <mat-slide-toggle\n        (change)=\"onChange($event)\"\n        [checked]=\"isChecked()\"\n        [disabled]=\"!isEnabled()\"\n        [id]=\"id\"\n      >\n        {{ label }}\n      </mat-slide-toggle>\n      <mat-hint class=\"mat-caption\" *ngIf=\"shouldShowUnfocusedDescription()\">{{\n        description\n      }}</mat-hint>\n      <mat-error class=\"mat-caption\">{{ error }}</mat-error>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [CommonModule, MatSlideToggleModule, MatFormFieldModule],\n})\nexport class ToggleControlRenderer extends JsonFormsControl {\n  constructor(\n    jsonformsService: JsonFormsAngularService,\n    private changeDetectorRef: ChangeDetectorRef\n  ) {\n    super(jsonformsService);\n  }\n  isChecked = () => this.data || false;\n  getEventValue = (event: any) => event.checked;\n  mapAdditionalProps() {\n    this.changeDetectorRef.markForCheck();\n  }\n}\n\nexport const ToggleControlRendererTester: RankedTester = rankWith(\n  3,\n  and(isBooleanControl, optionIs('toggle', true))\n);\n","/*\n  The MIT License\n\n  Copyright (c) 2017-2019 EclipseSource Munich\n  https://github.com/eclipsesource/jsonforms\n\n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n\n  The above copyright notice and this permission notice shall be included in\n  all copies or substantial portions of the Software.\n\n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n  THE SOFTWARE.\n*/\nimport { Component, OnInit } from '@angular/core';\nimport {\n  JsonFormsAngularService,\n  JsonFormsBaseRenderer,\n} from '@jsonforms/angular';\nimport {\n  JsonFormsState,\n  LabelElement,\n  mapStateToLabelProps,\n  OwnPropsOfLabel,\n  RankedTester,\n  rankWith,\n  uiTypeIs,\n} from '@jsonforms/core';\n\n@Component({\n  selector: 'LabelRenderer',\n  template: ` <label class=\"mat-headline-6\"> {{ label }} </label> `,\n  styles: [\n    `\n      :host {\n        flex: 1 1 auto;\n      }\n    `,\n  ],\n})\nexport class LabelRenderer\n  extends JsonFormsBaseRenderer<LabelElement>\n  implements OnInit\n{\n  label: string;\n  visible: boolean;\n\n  constructor(private jsonFormsService: JsonFormsAngularService) {\n    super();\n  }\n  ngOnInit() {\n    this.addSubscription(\n      this.jsonFormsService.$state.subscribe({\n        next: (state: JsonFormsState) => {\n          const props = mapStateToLabelProps(\n            state,\n            this.getOwnProps() as OwnPropsOfLabel\n          );\n          this.visible = props.visible;\n          this.label = props.text;\n        },\n      })\n    );\n  }\n}\n\nexport const LabelRendererTester: RankedTester = rankWith(4, uiTypeIs('Label'));\n","/*\n  The MIT License\n  \n  Copyright (c) 2017-2019 EclipseSource Munich\n  https://github.com/eclipsesource/jsonforms\n  \n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n  \n  The above copyright notice and this permission notice shall be included in\n  all copies or substantial portions of the Software.\n  \n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n  THE SOFTWARE.\n*/\nimport { Component, Input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { JsonFormsModule } from '@jsonforms/angular';\n\n@Component({\n  selector: 'jsonforms-detail',\n  template: `\n    <div *ngIf=\"initialized\">\n      <jsonforms-outlet [renderProps]=\"_item\"></jsonforms-outlet>\n    </div>\n  `,\n  imports: [CommonModule, JsonFormsModule],\n})\nexport class JsonFormsDetailComponent {\n  _item: any;\n  _schema: any;\n  initialized = false;\n\n  @Input()\n  set item(item: any) {\n    if (item) {\n      this._item = item;\n      this.initialized = true;\n    }\n  }\n}\n","/*\n  The MIT License\n  \n  Copyright (c) 2017-2019 EclipseSource Munich\n  https://github.com/eclipsesource/jsonforms\n  \n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n  \n  The above copyright notice and this permission notice shall be included in\n  all copies or substantial portions of the Software.\n  \n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n  THE SOFTWARE.\n*/\nimport some from 'lodash/some';\nimport get from 'lodash/get';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnInit,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatSidenavModule } from '@angular/material/sidenav';\nimport { MatListModule } from '@angular/material/list';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n  JsonFormsAngularService,\n  JsonFormsArrayControl,\n} from '@jsonforms/angular';\nimport {\n  ArrayControlProps,\n  arrayDefaultTranslations,\n  ArrayTranslations,\n  ControlElement,\n  createDefaultValue,\n  decode,\n  defaultJsonFormsI18nState,\n  findUISchema,\n  getArrayTranslations,\n  getFirstPrimitiveProp,\n  JsonFormsState,\n  mapDispatchToArrayControlProps,\n  mapStateToArrayControlProps,\n  RankedTester,\n  rankWith,\n  setReadonly,\n  StatePropsOfArrayControl,\n  uiTypeIs,\n} from '@jsonforms/core';\nimport { JsonFormsDetailComponent } from './detail';\n\nconst keywords = ['#', 'properties', 'items'];\n\nexport const removeSchemaKeywords = (path: string) => {\n  return decode(\n    path\n      .split('/')\n      .filter((s) => !some(keywords, (key) => key === s))\n      .join('.')\n  );\n};\n\n@Component({\n  selector: 'jsonforms-list-with-detail-master',\n  template: `\n    <mat-sidenav-container\n      [ngStyle]=\"{ display: hidden ? 'none' : '' }\"\n      autosize=\"true\"\n      class=\"container\"\n    >\n      <mat-sidenav mode=\"side\" opened>\n        <mat-nav-list>\n          <mat-list-item *ngIf=\"masterItems.length === 0\">{{\n            translations.noDataMessage\n          }}</mat-list-item>\n          <mat-list-item\n            *ngFor=\"\n              let item of masterItems;\n              let i = index;\n              trackBy: trackElement\n            \"\n            [class.selected]=\"item === selectedItem\"\n            (click)=\"onSelect(item, i)\"\n            (mouseover)=\"onListItemHover(i)\"\n            (mouseout)=\"onListItemHover(undefined)\"\n          >\n            <a matLine>{{ item.label || 'No label set' }}</a>\n            <button\n              mat-icon-button\n              class=\"button item-button hide\"\n              (click)=\"onDeleteClick(i)\"\n              [ngClass]=\"{ show: highlightedIdx == i }\"\n              *ngIf=\"isEnabled()\"\n            >\n              <mat-icon mat-list-icon>delete</mat-icon>\n            </button>\n          </mat-list-item>\n        </mat-nav-list>\n        <button\n          mat-fab\n          color=\"primary\"\n          class=\"add-button\"\n          (click)=\"onAddClick()\"\n          *ngIf=\"isEnabled()\"\n        >\n          <mat-icon [attr.aria-label]=\"translations.addAriaLabel\">add</mat-icon>\n        </button>\n      </mat-sidenav>\n      <mat-sidenav-content class=\"content\">\n        <jsonforms-detail\n          *ngIf=\"selectedItem\"\n          [item]=\"selectedItem\"\n        ></jsonforms-detail>\n      </mat-sidenav-content>\n    </mat-sidenav-container>\n  `,\n  styles: [\n    `\n      /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */\n      mat-list-item.selected {\n        background: rgba(0, 0, 0, 0.04);\n      }\n      .container {\n        height: 100vh;\n      }\n      .content {\n        padding: 15px;\n        background-color: #fff;\n      }\n      .add-button {\n        float: right;\n        margin-top: 0.5em;\n        margin-right: 0.25em;\n      }\n      .button {\n        float: right;\n        margin-right: 0.25em;\n      }\n      .item-button {\n        position: absolute;\n        top: 0;\n        right: 0;\n      }\n      .hide {\n        display: none;\n      }\n      .show {\n        display: inline-block;\n      }\n      mat-sidenav {\n        width: 20%;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    CommonModule,\n    MatSidenavModule,\n    MatListModule,\n    MatButtonModule,\n    MatIconModule,\n    JsonFormsDetailComponent,\n  ],\n})\nexport class MasterListComponent\n  extends JsonFormsArrayControl\n  implements OnInit\n{\n  masterItems: any[];\n  selectedItem: any;\n  selectedItemIdx: number;\n  addItem: (path: string, value: any) => () => void;\n  removeItems: (path: string, toDelete: number[]) => () => void;\n  highlightedIdx: number;\n  translations: ArrayTranslations;\n\n  constructor(\n    jsonformsService: JsonFormsAngularService,\n    private changeDetectorRef: ChangeDetectorRef\n  ) {\n    super(jsonformsService);\n  }\n\n  onListItemHover(idx: number) {\n    this.highlightedIdx = idx;\n  }\n\n  trackElement(_index: number, element: any) {\n    return element ? element.label : null;\n  }\n\n  ngOnInit() {\n    super.ngOnInit();\n    const dispatch = this.jsonFormsService.updateCore.bind(\n      this.jsonFormsService\n    );\n    const { addItem, removeItems } = mapDispatchToArrayControlProps(dispatch);\n    this.addItem = addItem;\n    this.removeItems = removeItems;\n  }\n\n  mapAdditionalProps(\n    props: ArrayControlProps & { translations: ArrayTranslations }\n  ) {\n    const { data, path, schema, uischema } = props;\n    const controlElement = uischema as ControlElement;\n    this.propsPath = props.path;\n    const detailUISchema = findUISchema(\n      props.uischemas,\n      schema,\n      `${controlElement.scope}/items`,\n      props.path,\n      'VerticalLayout',\n      controlElement,\n      props.rootSchema\n    );\n\n    if (!this.isEnabled()) {\n      setReadonly(detailUISchema);\n    }\n\n    this.translations = props.translations;\n\n    const masterItems = (data || []).map((d: any, inde