@ng-dynamic-forms/ui-material/fesm2022/ui-material.mjs.map

Material UI package for NG Dynamic Forms

{"version":3,"file":"ui-material.mjs","sources":["../../../../projects/ng-dynamic-forms/ui-material/src/lib/dynamic-material-form-input-control.component.ts","../../../../projects/ng-dynamic-forms/ui-material/src/lib/checkbox/dynamic-material-checkbox.component.ts","../../../../projects/ng-dynamic-forms/ui-material/src/lib/checkbox/dynamic-material-checkbox.component.html","../../../../projects/ng-dynamic-forms/ui-material/src/lib/chips/dynamic-material-chips.component.ts","../../../../projects/ng-dynamic-forms/ui-material/src/lib/chips/dynamic-material-chips.component.html","../../../../projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts","../../../../projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.html","../../../../projects/ng-dynamic-forms/ui-material/src/lib/input/dynamic-material-input.component.ts","../../../../projects/ng-dynamic-forms/ui-material/src/lib/input/dynamic-material-input.component.html","../../../../projects/ng-dynamic-forms/ui-material/src/lib/radio-group/dynamic-material-radio-group.component.ts","../../../../projects/ng-dynamic-forms/ui-material/src/lib/radio-group/dynamic-material-radio-group.component.html","../../../../projects/ng-dynamic-forms/ui-material/src/lib/select/dynamic-material-select.component.ts","../../../../projects/ng-dynamic-forms/ui-material/src/lib/select/dynamic-material-select.component.html","../../../../projects/ng-dynamic-forms/ui-material/src/lib/slide-toggle/dynamic-material-slide-toggle.component.ts","../../../../projects/ng-dynamic-forms/ui-material/src/lib/slide-toggle/dynamic-material-slide-toggle.component.html","../../../../projects/ng-dynamic-forms/ui-material/src/lib/slider/dynamic-material-slider.component.ts","../../../../projects/ng-dynamic-forms/ui-material/src/lib/slider/dynamic-material-slider.component.html","../../../../projects/ng-dynamic-forms/ui-material/src/lib/textarea/dynamic-material-textarea.component.ts","../../../../projects/ng-dynamic-forms/ui-material/src/lib/textarea/dynamic-material-textarea.component.html","../../../../projects/ng-dynamic-forms/ui-material/src/lib/dynamic-material-form-control-container.component.ts","../../../../projects/ng-dynamic-forms/ui-material/src/lib/dynamic-material-form-control-container.component.html","../../../../projects/ng-dynamic-forms/ui-material/src/lib/dynamic-material-form-array.component.html","../../../../projects/ng-dynamic-forms/ui-material/src/lib/dynamic-material-form-group.component.html","../../../../projects/ng-dynamic-forms/ui-material/src/lib/dynamic-material-form.component.ts","../../../../projects/ng-dynamic-forms/ui-material/src/lib/dynamic-material-form.component.html","../../../../projects/ng-dynamic-forms/ui-material/src/ui-material.ts"],"sourcesContent":["import { MatInput } from \"@angular/material/input\";\nimport {\n    DynamicFormControlComponent,\n    DynamicFormLayoutService,\n    DynamicFormValidationService,\n    DynamicInputControlModel,\n    DynamicInputModel\n} from \"@ng-dynamic-forms/core\";\n\nexport abstract class DynamicMaterialFormInputControlComponent extends DynamicFormControlComponent {\n    matInput!: MatInput;\n\n    protected constructor(protected layoutService: DynamicFormLayoutService, protected validationService: DynamicFormValidationService) {\n        super(layoutService, validationService);\n    }\n\n    get characterCount(): number | null {\n        return this.matInput ? this.matInput.value.length : null;\n    }\n\n    get characterHint(): string {\n        return `${this.characterCount} / ${(this.model as DynamicInputControlModel<string>).maxLength}`;\n    }\n\n    get showCharacterHint(): boolean {\n        return !!((this.model as DynamicInputModel).maxLength && this.characterCount);\n    }\n}\n","import { Component, EventEmitter, Inject, Input, Optional, Output, ViewChild } from \"@angular/core\";\nimport { UntypedFormGroup, ReactiveFormsModule } from \"@angular/forms\";\nimport { MatCheckbox, MatCheckboxModule } from \"@angular/material/checkbox\";\nimport { MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions } from \"@angular/material/core\";\nimport {\n    DynamicCheckboxModel,\n    DynamicFormControlComponent,\n    DynamicFormControlCustomEvent,\n    DynamicFormControlLayout,\n    DynamicFormLayout,\n    DynamicFormLayoutService,\n    DynamicFormValidationService\n} from \"@ng-dynamic-forms/core\";\nimport { NgClass } from \"@angular/common\";\n\n@Component({\n    selector: \"dynamic-material-checkbox\",\n    templateUrl: \"./dynamic-material-checkbox.component.html\",\n    standalone: true,\n    imports: [ReactiveFormsModule, MatCheckboxModule, NgClass]\n})\nexport class DynamicMaterialCheckboxComponent extends DynamicFormControlComponent {\n    @Input() formLayout?: DynamicFormLayout;\n    @Input() group!: UntypedFormGroup;\n    @Input() layout?: DynamicFormControlLayout;\n    @Input() model!: DynamicCheckboxModel;\n\n    @Output() blur: EventEmitter<any> = new EventEmitter();\n    @Output() change: EventEmitter<any> = new EventEmitter();\n    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();\n    @Output() focus: EventEmitter<any> = new EventEmitter();\n\n    @ViewChild(\"matCheckbox\", {static: true}) matCheckbox!: MatCheckbox;\n\n    constructor(protected layoutService: DynamicFormLayoutService,\n                protected validationService: DynamicFormValidationService,\n                @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) @Optional() public RIPPLE_OPTIONS: RippleGlobalOptions) {\n        super(layoutService, validationService);\n    }\n}\n","<ng-container [formGroup]=\"group\">\n\n    <mat-checkbox #matCheckbox\n                  [checked]=\"model.checked\"\n                  [color]=\"model.getAdditional('color', 'accent')\"\n                  [disableRipple]=\"model.getAdditional('disableRipple', RIPPLE_OPTIONS && RIPPLE_OPTIONS['disabled'] || false)\"\n                  [formControlName]=\"model.id\"\n                  [id]=\"id\"\n                  [indeterminate]=\"model.indeterminate\"\n                  [labelPosition]=\"model.labelPosition || 'after'\"\n                  [name]=\"model.name\"\n                  [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"\n                  (blur)=\"onBlur($event)\"\n                  (change)=\"onChange($event)\"\n                  (focus)=\"onFocus($event)\"\n                  (indeterminateChange)=\"onCustomEvent($event, 'indeterminateChange')\">\n\n        <span [ngClass]=\"getClass('element', 'label')\" [innerHTML]=\"model.label\"></span>\n\n    </mat-checkbox>\n\n</ng-container>\n","import { Component, EventEmitter, Inject, Input, Optional, Output, ViewChild } from \"@angular/core\";\nimport { UntypedFormGroup, ReactiveFormsModule } from \"@angular/forms\";\nimport {\n    MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,\n    MatAutocomplete,\n    MatAutocompleteDefaultOptions,\n    MatAutocompleteSelectedEvent,\n    MatAutocompleteModule\n} from \"@angular/material/autocomplete\";\nimport { MAT_CHIPS_DEFAULT_OPTIONS, MatChipInputEvent, MatChipGrid, MatChipsDefaultOptions, MatChipsModule } from \"@angular/material/chips\";\nimport { MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions, MatOptionModule } from \"@angular/material/core\";\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldDefaultOptions, MatFormFieldModule } from \"@angular/material/form-field\";\nimport { MatInput, MatInputModule } from \"@angular/material/input\";\nimport {\n    DynamicFormControlComponent,\n    DynamicFormControlCustomEvent,\n    DynamicFormControlLayout,\n    DynamicFormLayout,\n    DynamicFormLayoutService,\n    DynamicFormValidationService,\n    DynamicInputModel\n} from \"@ng-dynamic-forms/core\";\nimport { MatIconModule } from \"@angular/material/icon\";\nimport { NgClass, NgFor, AsyncPipe } from \"@angular/common\";\n\n@Component({\n    selector: \"dynamic-material-chips\",\n    templateUrl: \"./dynamic-material-chips.component.html\",\n    standalone: true,\n    imports: [MatFormFieldModule, ReactiveFormsModule, NgClass, MatChipsModule, NgFor, MatIconModule, MatInputModule, MatAutocompleteModule,\n        MatOptionModule, AsyncPipe]\n})\nexport class DynamicMaterialChipsComponent extends DynamicFormControlComponent {\n    @Input() formLayout?: DynamicFormLayout;\n    @Input() group!: UntypedFormGroup;\n    @Input() layout?: DynamicFormControlLayout;\n    @Input() model!: DynamicInputModel;\n\n    @Output() blur: EventEmitter<any> = new EventEmitter();\n    @Output() change: EventEmitter<any> = new EventEmitter();\n    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();\n    @Output() focus: EventEmitter<any> = new EventEmitter();\n\n    @ViewChild(\"matAutocomplete\", {static: true}) matAutocomplete!: MatAutocomplete;\n    @ViewChild(\"matChipGrid\", {static: true}) matChipGrid!: MatChipGrid;\n    @ViewChild(MatInput, {static: true}) matInput!: MatInput;\n\n    constructor(protected layoutService: DynamicFormLayoutService,\n                protected validationService: DynamicFormValidationService,\n                @Inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS) public AUTOCOMPLETE_OPTIONS: MatAutocompleteDefaultOptions,\n                @Inject(MAT_CHIPS_DEFAULT_OPTIONS) public CHIPS_OPTIONS: MatChipsDefaultOptions,\n                @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public FORM_FIELD_OPTIONS: MatFormFieldDefaultOptions,\n                @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) @Optional() public RIPPLE_OPTIONS: RippleGlobalOptions) {\n        super(layoutService, validationService);\n    }\n\n    get chips(): string[] {\n        return Array.isArray(this.model.value) ? this.model.value as string[] : [];\n    }\n\n    onChipInputTokenEnd($event: MatChipInputEvent): void {\n        const inputElement = $event.chipInput?.inputElement;\n        const inputValue = $event.value.trim();\n\n        if (inputValue.length > 0) {\n            this.control.patchValue([...this.chips, inputValue]);\n            this.onChange($event);\n        }\n\n        if (inputElement instanceof HTMLInputElement) {\n            inputElement.value = \"\";\n        }\n    }\n\n    onChipSelected($event: MatAutocompleteSelectedEvent): void {\n        const selectedChip = $event.option.value;\n        const chips = this.chips;\n\n        if (!chips.includes(selectedChip)) {\n            this.control.patchValue([...this.chips, selectedChip]);\n        }\n    }\n\n    onChipRemoved(chip: string, index: number): void {\n        const chips = this.chips;\n\n        if (chips[index] === chip) {\n            chips.splice(index, 1);\n            this.control.patchValue([...chips]);\n        }\n    }\n}\n","<mat-form-field [appearance]=\"model.getAdditional('appearance', 'fill')\"\n                [color]=\"model.getAdditional('color', 'primary')\"\n                [floatLabel]=\"model.getAdditional('floatLabel', FORM_FIELD_OPTIONS && FORM_FIELD_OPTIONS['floatLabel'] || 'auto')\"\n                [formGroup]=\"group\"\n                [hideRequiredMarker]=\"model.getAdditional('hideRequiredMarker', false)\"\n                [ngClass]=\"getClass('grid', 'control')\">\n\n    <mat-chip-grid #matChipGrid [formControlName]=\"model.id\" [id]=\"id\">\n\n        <mat-chip-row *ngFor=\"let chip of chips; let index = index\"\n                      (removed)=\"onChipRemoved(chip, index)\">\n\n            <span>{{ chip }}</span>\n\n            <mat-icon matChipRemove>cancel</mat-icon>\n\n        </mat-chip-row>\n\n        <input matInput\n               [matAutocomplete]=\"matAutocomplete\"\n               [matChipInputAddOnBlur]=\"model.getAdditional('matChipInputAddOnBlur', true)\"\n               [matChipInputFor]=\"matChipGrid\"\n               [matChipInputSeparatorKeyCodes]=\"model.getAdditional('matChipInputSeparatorKeyCodes', CHIPS_OPTIONS['separatorKeyCodes'])\"\n               [placeholder]=\"model.placeholder\"\n               (matChipInputTokenEnd)=\"onChipInputTokenEnd($event)\"\n               (blur)=\"onBlur($event)\"\n               (focus)=\"onFocus($event)\"/>\n\n        <mat-autocomplete #matAutocomplete\n                          [autoActiveFirstOption]=\"model.getAdditional('autoActiveFirstOption', AUTOCOMPLETE_OPTIONS['autoActiveFirstOption'])\"\n                          [disableRipple]=\"model.getAdditional('disableRipple', RIPPLE_OPTIONS && RIPPLE_OPTIONS['disabled'] || false)\"\n                          [displayWith]=\"model.getAdditional('displayWith', null)\"\n                          (optionSelected)=\"onChipSelected($event)\">\n\n            <mat-option *ngFor=\"let option of model.list$ | async\" [value]=\"option\">{{ option }}</mat-option>\n\n        </mat-autocomplete>\n\n    </mat-chip-grid>\n\n</mat-form-field>\n","import { Component, EventEmitter, Inject, Input, Optional, Output, ViewChild } from \"@angular/core\";\nimport { UntypedFormGroup, ReactiveFormsModule } from \"@angular/forms\";\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule } from \"@angular/material/form-field\";\nimport { MatDatepicker, MatDatepickerModule } from \"@angular/material/datepicker\";\nimport { MatInput, MatInputModule } from \"@angular/material/input\";\nimport {\n    DynamicDatePickerModel,\n    DynamicFormControlComponent,\n    DynamicFormControlCustomEvent, DynamicFormControlLayout,\n    DynamicFormLayout,\n    DynamicFormLayoutService,\n    DynamicFormValidationService\n} from \"@ng-dynamic-forms/core\";\nimport { MatFormFieldDefaultOptions } from \"@angular/material/form-field\";\nimport { NgClass, NgIf, NgFor } from \"@angular/common\";\n\n@Component({\n    selector: \"dynamic-material-datepicker\",\n    templateUrl: \"./dynamic-material-datepicker.component.html\",\n    standalone: true,\n    imports: [MatFormFieldModule, ReactiveFormsModule, NgClass, NgIf, MatInputModule, MatDatepickerModule, NgFor]\n})\nexport class DynamicMaterialDatePickerComponent extends DynamicFormControlComponent {\n    @Input() formLayout?: DynamicFormLayout;\n    @Input() group!: UntypedFormGroup;\n    @Input() layout?: DynamicFormControlLayout;\n    @Input() model!: DynamicDatePickerModel;\n\n    @Output() blur: EventEmitter<any> = new EventEmitter();\n    @Output() change: EventEmitter<any> = new EventEmitter();\n    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();\n    @Output() focus: EventEmitter<any> = new EventEmitter();\n\n    @ViewChild(\"matDatepicker\", {static: true}) matDatePicker!: MatDatepicker<any>;\n    @ViewChild(MatInput, {static: true}) matInput!: MatInput;\n\n    constructor(protected layoutService: DynamicFormLayoutService,\n                protected validationService: DynamicFormValidationService,\n                @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public FORM_FIELD_OPTIONS: MatFormFieldDefaultOptions) {\n        super(layoutService, validationService);\n    }\n}\n","<mat-form-field [appearance]=\"model.getAdditional('appearance', 'fill')\"\n                [color]=\"model.getAdditional('color', 'primary')\"\n                [floatLabel]=\"model.getAdditional('floatLabel', FORM_FIELD_OPTIONS && FORM_FIELD_OPTIONS['floatLabel'] || 'auto')\"\n                [formGroup]=\"group\"\n                [hideRequiredMarker]=\"model.getAdditional('hideRequiredMarker', false)\"\n                [ngClass]=\"getClass('grid', 'control')\">\n\n    <ng-container *ngIf=\"model.label\" ngProjectAs=\"mat-label\">\n\n        <mat-label [innerHTML]=\"model.label\"></mat-label>\n\n    </ng-container>\n\n    <span *ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span>\n\n    <input matInput\n           [autofocus]=\"model.autoFocus\"\n           [formControlName]=\"model.id\"\n           [id]=\"id\"\n           [max]=\"model.max\"\n           [matDatepicker]=\"matDatepicker\"\n           [min]=\"model.min\"\n           [name]=\"model.name\"\n           [ngClass]=\"getClass('element', 'control')\"\n           [placeholder]=\"model.placeholder || ''\"\n           [readonly]=\"model.readOnly\"\n           [required]=\"model.required\"\n           (blur)=\"onBlur($event)\"\n           (dateChange)=\"onChange($event)\"\n           (dateInput)=\"onCustomEvent($event, 'dateInput')\"\n           (focus)=\"onFocus($event)\"/>\n\n    <span *ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span>\n\n    <mat-hint *ngIf=\"model.hint !== null\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint>\n\n\n    <mat-datepicker-toggle matSuffix [for]=\"matDatepicker\"></mat-datepicker-toggle>\n\n    <mat-datepicker #matDatepicker\n                    [opened]=\"model.getAdditional('opened', false)\"\n                    [startAt]=\"model.focusedDate\"\n                    [startView]=\"model.getAdditional('startView', 'month')\"\n                    [touchUi]=\"model.getAdditional('touchUi', false)\"\n                    (closed)=\"onCustomEvent($event, 'closed')\"\n                    (monthSelected)=\"onCustomEvent($event, 'monthSelected')\"\n                    (opened)=\"onCustomEvent($event, 'opened')\"\n                    (yearSelected)=\"onCustomEvent($event, 'yearSelected')\"></mat-datepicker>\n\n    <mat-error *ngFor=\"let message of errorMessages\">{{ message }}</mat-error>\n\n</mat-form-field>\n","import { Component, EventEmitter, Inject, Input, Optional, Output, ViewChild } from \"@angular/core\";\nimport { UntypedFormGroup, ReactiveFormsModule } from \"@angular/forms\";\nimport {\n    MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,\n    MatAutocomplete,\n    MatAutocompleteDefaultOptions,\n    MatAutocompleteModule\n} from \"@angular/material/autocomplete\";\nimport { ErrorStateMatcher, MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions, MatOptionModule } from \"@angular/material/core\";\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldDefaultOptions, MatFormFieldModule } from \"@angular/material/form-field\";\nimport { MatInput, MatInputModule } from \"@angular/material/input\";\nimport {\n    DynamicFormControlCustomEvent, DynamicFormControlLayout,\n    DynamicFormLayout,\n    DynamicFormLayoutService,\n    DynamicFormValidationService,\n    DynamicInputModel\n} from \"@ng-dynamic-forms/core\";\nimport { DynamicMaterialFormInputControlComponent } from \"../dynamic-material-form-input-control.component\";\nimport { NgClass, NgIf, NgFor, AsyncPipe } from \"@angular/common\";\n\n@Component({\n    selector: \"dynamic-material-input\",\n    templateUrl: \"./dynamic-material-input.component.html\",\n    standalone: true,\n    imports: [MatFormFieldModule, ReactiveFormsModule, NgClass, NgIf, MatInputModule, MatAutocompleteModule, NgFor, MatOptionModule,\n        AsyncPipe]\n})\nexport class DynamicMaterialInputComponent extends DynamicMaterialFormInputControlComponent {\n    @Input() formLayout?: DynamicFormLayout;\n    @Input() group!: UntypedFormGroup;\n    @Input() layout?: DynamicFormControlLayout;\n    @Input() model!: DynamicInputModel;\n\n    @Output() blur: EventEmitter<any> = new EventEmitter();\n    @Output() change: EventEmitter<any> = new EventEmitter();\n    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();\n    @Output() focus: EventEmitter<any> = new EventEmitter();\n\n    @ViewChild(\"matAutocomplete\", {static: true}) matAutocomplete!: MatAutocomplete;\n    @ViewChild(MatInput, {static: true}) matInput!: MatInput;\n\n    constructor(protected layoutService: DynamicFormLayoutService,\n                protected validationService: DynamicFormValidationService,\n                @Inject(ErrorStateMatcher) public errorStateMatcher: ErrorStateMatcher,\n                @Inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS) public AUTOCOMPLETE_OPTIONS: MatAutocompleteDefaultOptions,\n                @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public FORM_FIELD_OPTIONS: MatFormFieldDefaultOptions,\n                @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) @Optional() public RIPPLE_OPTIONS: RippleGlobalOptions) {\n        super(layoutService, validationService);\n    }\n}\n","<mat-form-field [appearance]=\"model.getAdditional('appearance', 'fill')\"\n                [color]=\"model.getAdditional('color', 'primary')\"\n                [floatLabel]=\"model.getAdditional('floatLabel', FORM_FIELD_OPTIONS && FORM_FIELD_OPTIONS['floatLabel'] || 'auto')\"\n                [formGroup]=\"group\"\n                [hideRequiredMarker]=\"model.getAdditional('hideRequiredMarker', false)\"\n                [ngClass]=\"getClass('grid','control')\">\n\n    <ng-container *ngIf=\"model.label\" ngProjectAs=\"mat-label\">\n\n        <mat-label [innerHTML]=\"model.label\"></mat-label>\n\n    </ng-container>\n\n    <span *ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span>\n\n    <input matInput\n           [attr.accept]=\"model.accept\"\n           [attr.max]=\"model.max\"\n           [attr.min]=\"model.min\"\n           [attr.multiple]=\"model.multiple\"\n           [attr.step]=\"model.step\"\n           [autocomplete]=\"model.autoComplete\"\n           [autofocus]=\"model.autoFocus\"\n           [errorStateMatcher]=\"model.getAdditional('errorStateMatcher', errorStateMatcher)\"\n           [formControlName]=\"model.id\"\n           [id]=\"id\"\n           [maxlength]=\"model.maxLength\"\n           [matAutocomplete]=\"matAutocomplete\"\n           [minlength]=\"model.minLength\"\n           [name]=\"model.name\"\n           [ngClass]=\"getClass('element', 'control')\"\n           [pattern]=\"model.pattern\"\n           [placeholder]=\"model.placeholder\"\n           [readonly]=\"model.readOnly\"\n           [required]=\"model.required\"\n           [spellcheck]=\"model.spellCheck\"\n           [tabindex]=\"model.tabIndex\"\n           [type]=\"model.inputType\"\n           (blur)=\"onBlur($event)\"\n           (change)=\"onChange($event)\"\n           (focus)=\"onFocus($event)\"/>\n\n    <span *ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span>\n\n    <mat-hint *ngIf=\"model.hint !== null\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint>\n\n    <mat-hint *ngIf=\"showCharacterHint\" align=\"end\">{{ characterHint }}</mat-hint>\n\n    <mat-error *ngFor=\"let message of errorMessages\">{{ message }}</mat-error>\n\n</mat-form-field>\n\n<mat-autocomplete #matAutocomplete=\"matAutocomplete\"\n                  [autoActiveFirstOption]=\"model.getAdditional('autoActiveFirstOption', AUTOCOMPLETE_OPTIONS['autoActiveFirstOption'])\"\n                  [disableRipple]=\"model.getAdditional('disableRipple', RIPPLE_OPTIONS && RIPPLE_OPTIONS['disabled'] || false)\"\n                  [displayWith]=\"model.getAdditional('displayWith', null)\"\n                  (optionSelected)=\"onChange($event)\">\n\n    <ng-container *ngIf=\"model.getAdditional('matAutocomplete', null) === null; else displayWith\">\n        <mat-option *ngFor=\"let option of model.list$ | async\" [value]=\"option\">{{ option }}</mat-option>\n    </ng-container>\n    <ng-template #displayWith>\n        <mat-option *ngFor=\"let option of model.list$ | async\" [value]=\"option\">\n            {{ option[model.getAdditional('optionLabel', 'label')] }}\n        </mat-option>\n    </ng-template>\n\n</mat-autocomplete>\n","import { Component, EventEmitter, Input, Output, ViewChild } from \"@angular/core\";\nimport { UntypedFormGroup, ReactiveFormsModule } from \"@angular/forms\";\nimport { MatRadioGroup, MatRadioModule } from \"@angular/material/radio\";\nimport {\n    DynamicFormControlComponent,\n    DynamicFormControlCustomEvent,\n    DynamicFormControlLayout,\n    DynamicFormLayout,\n    DynamicFormLayoutService,\n    DynamicFormValidationService,\n    DynamicRadioGroupModel\n} from \"@ng-dynamic-forms/core\";\nimport { NgClass, NgFor, AsyncPipe } from \"@angular/common\";\n\n@Component({\n    selector: \"dynamic-material-radio-group\",\n    templateUrl: \"./dynamic-material-radio-group.component.html\",\n    standalone: true,\n    imports: [ReactiveFormsModule, MatRadioModule, NgClass, NgFor, AsyncPipe]\n})\nexport class DynamicMaterialRadioGroupComponent extends DynamicFormControlComponent {\n    @Input() formLayout?: DynamicFormLayout;\n    @Input() group!: UntypedFormGroup;\n    @Input() layout?: DynamicFormControlLayout;\n    @Input() model!: DynamicRadioGroupModel<string>;\n\n    @Output() blur: EventEmitter<any> = new EventEmitter();\n    @Output() change: EventEmitter<any> = new EventEmitter();\n    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();\n    @Output() focus: EventEmitter<any> = new EventEmitter();\n\n    @ViewChild(\"matRadioGroup\", {static: true}) matRadioGroup!: MatRadioGroup;\n\n    constructor(protected layoutService: DynamicFormLayoutService, protected validationService: DynamicFormValidationService) {\n        super(layoutService, validationService);\n    }\n}\n","<ng-container [formGroup]=\"group\">\n\n    <mat-radio-group #matRadioGroup\n                     [formControlName]=\"model.id\"\n                     [id]=\"id\"\n                     [labelPosition]=\"model.getAdditional('labelPosition', 'after')\"\n                     [name]=\"model.name\"\n                     [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"\n                     [required]=\"model.required\"\n                     (blur)=\"onBlur($event)\"\n                     (change)=\"onChange($event)\"\n                     (focus)=\"onFocus($event)\">\n\n        <mat-radio-button *ngFor=\"let option of model.options$ | async\"\n                          [name]=\"model.name\"\n                          [ngClass]=\"getClass('element', 'option')\"\n                          [value]=\"option.value\"><span [innerHTML]=\"option.label\"></span></mat-radio-button>\n\n    </mat-radio-group>\n\n</ng-container>\n","import { Component, EventEmitter, Inject, Input, Optional, Output, ViewChild } from \"@angular/core\";\nimport { UntypedFormGroup, ReactiveFormsModule } from \"@angular/forms\";\nimport { ErrorStateMatcher, MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions, MatOptionModule } from \"@angular/material/core\";\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldDefaultOptions, MatFormFieldModule } from \"@angular/material/form-field\";\nimport { MatSelect, MatSelectModule } from \"@angular/material/select\";\nimport {\n    DynamicFormControlComponent,\n    DynamicFormControlCustomEvent,\n    DynamicFormControlLayout,\n    DynamicFormLayout,\n    DynamicFormLayoutService,\n    DynamicFormValidationService,\n    DynamicSelectModel\n} from \"@ng-dynamic-forms/core\";\nimport { NgClass, NgIf, NgFor, AsyncPipe } from \"@angular/common\";\n\n@Component({\n    selector: \"dynamic-material-select\",\n    templateUrl: \"./dynamic-material-select.component.html\",\n    standalone: true,\n    imports: [MatFormFieldModule, NgClass, ReactiveFormsModule, NgIf, MatSelectModule, NgFor, MatOptionModule, AsyncPipe]\n})\nexport class DynamicMaterialSelectComponent extends DynamicFormControlComponent {\n    @Input() formLayout?: DynamicFormLayout;\n    @Input() group!: UntypedFormGroup;\n    @Input() layout?: DynamicFormControlLayout;\n    @Input() model!: DynamicSelectModel<string>;\n\n    @Output() blur: EventEmitter<any> = new EventEmitter();\n    @Output() change: EventEmitter<any> = new EventEmitter();\n    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();\n    @Output() focus: EventEmitter<any> = new EventEmitter();\n\n    @ViewChild(\"matSelect\", {static: true}) matSelect!: MatSelect;\n\n    constructor(protected layoutService: DynamicFormLayoutService,\n                protected validationService: DynamicFormValidationService,\n                @Inject(ErrorStateMatcher) public errorStateMatcher: ErrorStateMatcher,\n                @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public FORM_FIELD_OPTIONS: MatFormFieldDefaultOptions,\n                @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) @Optional() public RIPPLE_OPTIONS: RippleGlobalOptions) {\n        super(layoutService, validationService);\n    }\n}\n","<mat-form-field [appearance]=\"model.getAdditional('appearance', 'fill')\"\n                [color]=\"model.getAdditional('color', 'primary')\"\n                [ngClass]=\"getClass('grid', 'control')\"\n                [floatLabel]=\"model.getAdditional('floatLabel', FORM_FIELD_OPTIONS && FORM_FIELD_OPTIONS['floatLabel'] || 'auto')\"\n                [formGroup]=\"group\">\n\n    <ng-container *ngIf=\"model.label\" ngProjectAs=\"mat-label\">\n\n        <mat-label [innerHTML]=\"model.label\"></mat-label>\n\n    </ng-container>\n\n    <span *ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span>\n\n    <mat-select #matSelect\n                [compareWith]=\"model.compareWithFn\"\n                [disableOptionCentering]=\"model.getAdditional('disableOptionCentering', false)\"\n                [disableRipple]=\"model.getAdditional('disableRipple', RIPPLE_OPTIONS && RIPPLE_OPTIONS['disabled'] || false)\"\n                [errorStateMatcher]=\"model.getAdditional('errorStateMatcher', errorStateMatcher)\"\n                [formControlName]=\"model.id\"\n                [id]=\"id\"\n                [multiple]=\"model.multiple\"\n                [ngClass]=\"getClass('element', 'control')\"\n                [placeholder]=\"model.placeholder\"\n                [required]=\"model.required\"\n                (openedChange)=\"onCustomEvent($event, 'openedChange')\"\n                (selectionChange)=\"onChange($event)\">\n\n        <mat-option *ngFor=\"let option of model.options$ | async\"\n                    [disabled]=\"option.disabled\"\n                    [ngClass]=\"getClass('element', 'option')\"\n                    [value]=\"option.value\"><span [innerHTML]=\"option.label\"></span></mat-option>\n    </mat-select>\n\n    <span *ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span>\n\n    <mat-hint *ngIf=\"model.hint !== null\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint>\n\n    <mat-error *ngFor=\"let message of errorMessages\">{{ message }}</mat-error>\n\n</mat-form-field>\n","import { Component, EventEmitter, Inject, Input, Optional, Output, ViewChild } from \"@angular/core\";\nimport { UntypedFormGroup, ReactiveFormsModule } from \"@angular/forms\";\nimport { MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions } from \"@angular/material/core\";\nimport { MatSlideToggle, MatSlideToggleModule } from \"@angular/material/slide-toggle\";\nimport {\n    DynamicFormControlComponent,\n    DynamicFormControlCustomEvent,\n    DynamicFormControlLayout,\n    DynamicFormLayout,\n    DynamicFormLayoutService,\n    DynamicFormValidationService,\n    DynamicSwitchModel\n} from \"@ng-dynamic-forms/core\";\nimport { NgClass, NgIf } from \"@angular/common\";\n\n@Component({\n    selector: \"dynamic-material-slide-toggle\",\n    templateUrl: \"./dynamic-material-slide-toggle.component.html\",\n    standalone: true,\n    imports: [ReactiveFormsModule, MatSlideToggleModule, NgClass, NgIf]\n})\nexport class DynamicMaterialSlideToggleComponent extends DynamicFormControlComponent {\n    @Input() formLayout?: DynamicFormLayout;\n    @Input() group!: UntypedFormGroup;\n    @Input() layout?: DynamicFormControlLayout;\n    @Input() model!: DynamicSwitchModel;\n\n    @Output() blur: EventEmitter<any> = new EventEmitter();\n    @Output() change: EventEmitter<any> = new EventEmitter();\n    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();\n    @Output() focus: EventEmitter<any> = new EventEmitter();\n\n    @ViewChild(\"matSlideToggle\", {static: true}) matSlideToggle!: MatSlideToggle;\n\n    constructor(protected layoutService: DynamicFormLayoutService,\n                protected validationService: DynamicFormValidationService,\n                @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) @Optional() public RIPPLE_OPTIONS: RippleGlobalOptions) {\n        super(layoutService, validationService);\n    }\n}\n","<ng-container [formGroup]=\"group\">\n\n    <mat-slide-toggle #matSlideToggle\n                      [checked]=\"model.checked\"\n                      [color]=\"model.getAdditional('color', 'accent')\"\n                      [disableRipple]=\"model.getAdditional('disableRipple', RIPPLE_OPTIONS && RIPPLE_OPTIONS['disabled'] || false)\"\n                      [formControlName]=\"model.id\"\n                      [id]=\"id\"\n                      [labelPosition]=\"model.labelPosition || 'after'\"\n                      [name]=\"model.name\"\n                      [ngClass]=\"[getClass('element','control'), getClass('grid','control')]\"\n                      (change)=\"onChange($event)\"\n                      (toggleChange)=\"onCustomEvent($event, 'toggleChange')\">\n\n        <span *ngIf=\"!model.checked\" [innerHTML]=\"model.offLabel\"></span>\n\n        <span *ngIf=\"model.checked\" [innerHTML]=\"model.onLabel\"></span>\n\n    </mat-slide-toggle>\n\n</ng-container>\n","import { Component, EventEmitter, Input, Output, ViewChild } from \"@angular/core\";\nimport { UntypedFormGroup, ReactiveFormsModule } from \"@angular/forms\";\nimport { MatSlider, MatSliderModule } from \"@angular/material/slider\";\nimport {\n    DynamicFormControlComponent,\n    DynamicFormControlCustomEvent,\n    DynamicFormControlLayout,\n    DynamicFormLayout,\n    DynamicFormLayoutService,\n    DynamicFormValidationService,\n    DynamicSliderModel\n} from \"@ng-dynamic-forms/core\";\nimport { NgClass } from \"@angular/common\";\n\n@Component({\n    selector: \"dynamic-material-slider\",\n    templateUrl: \"./dynamic-material-slider.component.html\",\n    standalone: true,\n    imports: [ReactiveFormsModule, MatSliderModule, NgClass]\n})\nexport class DynamicMaterialSliderComponent extends DynamicFormControlComponent {\n    @Input() formLayout?: DynamicFormLayout;\n    @Input() group!: UntypedFormGroup;\n    @Input() layout?: DynamicFormControlLayout;\n    @Input() model!: DynamicSliderModel;\n\n    @Output() blur: EventEmitter<any> = new EventEmitter();\n    @Output() change: EventEmitter<any> = new EventEmitter();\n    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();\n    @Output() focus: EventEmitter<any> = new EventEmitter();\n\n    @ViewChild(\"matSlider\", {static: true}) matSlider!: MatSlider;\n\n    constructor(protected layoutService: DynamicFormLayoutService, protected validationService: DynamicFormValidationService) {\n        super(layoutService, validationService);\n    }\n}\n","<ng-container [formGroup]=\"group\">\n\n    <mat-slider #matSlider\n                [color]=\"model.getAdditional('color', 'accent')\"\n                [id]=\"id\"\n                [min]=\"model.min\"\n                [max]=\"model.max\"\n                [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"\n                [step]=\"model.step\"\n                [tabIndex]=\"model.tabIndex\">\n        <input matSliderThumb #matSliderThumb\n               [formControlName]=\"model.id\"\n               (valueChange)=\"onChange({source: matSliderThumb, parent: matSlider, value: matSliderThumb.value})\"\n               (dragEnd)=\"onCustomEvent({source: matSliderThumb, parent: matSlider, value: matSliderThumb.value}, 'dragEnd')\"\n               (dragStart)=\"onCustomEvent({source: matSliderThumb, parent: matSlider, value: matSliderThumb.value}, 'dragStart')\"\n        />\n    </mat-slider>\n\n</ng-container>\n","import { Component, EventEmitter, Inject, Input, Optional, Output, ViewChild } from \"@angular/core\";\nimport { UntypedFormGroup, ReactiveFormsModule } from \"@angular/forms\";\nimport { MatInput, MatInputModule } from \"@angular/material/input\";\nimport {\n    DynamicFormControlCustomEvent,\n    DynamicFormControlLayout,\n    DynamicFormLayout,\n    DynamicFormLayoutService,\n    DynamicFormValidationService,\n    DynamicTextAreaModel\n} from \"@ng-dynamic-forms/core\";\nimport { DynamicMaterialFormInputControlComponent } from \"../dynamic-material-form-input-control.component\";\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldDefaultOptions, MatFormFieldModule } from \"@angular/material/form-field\";\nimport { TextFieldModule } from \"@angular/cdk/text-field\";\nimport { NgClass, NgIf, NgFor } from \"@angular/common\";\n\n@Component({\n    selector: \"dynamic-material-textarea\",\n    templateUrl: \"./dynamic-material-textarea.component.html\",\n    standalone: true,\n    imports: [MatFormFieldModule, ReactiveFormsModule, NgClass, NgIf, MatInputModule, TextFieldModule, NgFor]\n})\nexport class DynamicMaterialTextAreaComponent extends DynamicMaterialFormInputControlComponent {\n    @Input() formLayout?: DynamicFormLayout;\n    @Input() group!: UntypedFormGroup;\n    @Input() layout?: DynamicFormControlLayout;\n    @Input() model!: DynamicTextAreaModel;\n\n    @Output() blur: EventEmitter<any> = new EventEmitter();\n    @Output() change: EventEmitter<any> = new EventEmitter();\n    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();\n    @Output() focus: EventEmitter<any> = new EventEmitter();\n\n    @ViewChild(MatInput, {static: true}) matInput!: MatInput;\n\n    constructor(protected layoutService: DynamicFormLayoutService,\n                protected validationService: DynamicFormValidationService,\n                @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) @Optional() public FORM_FIELD_OPTIONS: MatFormFieldDefaultOptions) {\n        super(layoutService, validationService);\n    }\n}\n","<mat-form-field [appearance]=\"model.getAdditional('appearance', 'fill')\"\n                [color]=\"model.getAdditional('color', 'primary')\"\n                [floatLabel]=\"model.getAdditional('floatLabel', FORM_FIELD_OPTIONS && FORM_FIELD_OPTIONS['floatLabel'] || 'auto')\"\n                [formGroup]=\"group\"\n                [hideRequiredMarker]=\"model.getAdditional('hideRequiredMarker', false)\"\n                [ngClass]=\"getClass('grid', 'control')\">\n\n    <ng-container *ngIf=\"model.label\" ngProjectAs=\"mat-label\">\n\n        <mat-label [innerHTML]=\"model.label\"></mat-label>\n\n    </ng-container>\n\n    <textarea matInput\n              [cdkTextareaAutosize]=\"model.getAdditional('cdkTextareaAutosize', true)\"\n              [cols]=\"model.cols\"\n              [formControlName]=\"model.id\"\n              [id]=\"id\"\n              [maxlength]=\"model.maxLength\"\n              [minlength]=\"model.minLength\"\n              [name]=\"model.name\"\n              [ngClass]=\"getClass('element', 'control')\"\n              [placeholder]=\"model.placeholder\"\n              [readonly]=\"model.readOnly\"\n              [required]=\"model.required\"\n              [rows]=\"model.rows\"\n              [spellcheck]=\"model.spellCheck\"\n              [tabindex]=\"model.tabIndex\"\n              [wrap]=\"model.wrap\"\n              (blur)=\"onBlur($event)\"\n              (change)=\"onChange($event)\"\n              (focus)=\"onFocus($event)\"></textarea>\n\n    <mat-hint *ngIf=\"model.hint !== null\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint>\n\n    <mat-hint *ngIf=\"showCharacterHint\" align=\"end\">{{ characterHint }}</mat-hint>\n\n    <mat-error *ngFor=\"let message of errorMessages\">{{ message }}</mat-error>\n\n</mat-form-field>\n","import {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ComponentFactoryResolver,\n    ContentChildren,\n    EventEmitter,\n    HostBinding,\n    Input,\n    Output,\n    QueryList,\n    Type,\n    ViewChild,\n    ViewChildren,\n    ViewContainerRef\n} from \"@angular/core\";\nimport { UntypedFormGroup, ReactiveFormsModule } from \"@angular/forms\";\nimport {\n    DYNAMIC_FORM_CONTROL_TYPE_ARRAY,\n    DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX,\n    DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP,\n    DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER,\n    DYNAMIC_FORM_CONTROL_TYPE_GROUP,\n    DYNAMIC_FORM_CONTROL_TYPE_INPUT,\n    DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP,\n    DYNAMIC_FORM_CONTROL_TYPE_SELECT,\n    DYNAMIC_FORM_CONTROL_TYPE_SLIDER,\n    DYNAMIC_FORM_CONTROL_TYPE_SWITCH,\n    DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA,\n    DynamicFormArrayComponent,\n    DynamicFormArrayModel,\n    DynamicFormArrayGroupModel,\n    DynamicFormControl,\n    DynamicFormControlContainerComponent,\n    DynamicFormControlCustomEvent,\n    DynamicFormControlEvent,\n    DynamicFormControlLayout,\n    DynamicFormControlModel,\n    DynamicFormComponentService,\n    DynamicFormGroupComponent,\n    DynamicFormGroupModel,\n    DynamicFormLayout,\n    DynamicFormLayoutService,\n    DynamicFormRelationService,\n    DynamicFormValidationService,\n    DynamicFormValueControlModel,\n    DynamicInputModel,\n    DynamicTemplateDirective\n} from \"@ng-dynamic-forms/core\";\nimport { DynamicMaterialDatePickerComponent } from \"./datepicker/dynamic-material-datepicker.component\";\nimport { DynamicMaterialInputComponent } from \"./input/dynamic-material-input.component\";\nimport { DynamicMaterialTextAreaComponent } from \"./textarea/dynamic-material-textarea.component\";\nimport { DynamicMaterialSlideToggleComponent } from \"./slide-toggle/dynamic-material-slide-toggle.component\";\nimport { DynamicMaterialCheckboxComponent } from \"./checkbox/dynamic-material-checkbox.component\";\nimport { DynamicMaterialSliderComponent } from \"./slider/dynamic-material-slider.component\";\nimport { DynamicMaterialRadioGroupComponent } from \"./radio-group/dynamic-material-radio-group.component\";\nimport { DynamicMaterialChipsComponent } from \"./chips/dynamic-material-chips.component\";\nimport { DynamicMaterialSelectComponent } from \"./select/dynamic-material-select.component\";\nimport { MatFormFieldModule } from \"@angular/material/form-field\";\nimport { NgClass, NgFor, NgTemplateOutlet, NgIf } from \"@angular/common\";\n\n@Component({\n    selector: \"dynamic-material-form-control\",\n    templateUrl: \"./dynamic-material-form-control-container.component.html\",\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n    imports: [ReactiveFormsModule, NgClass, NgIf, NgTemplateOutlet, NgFor, MatFormFieldModule]\n})\nexport class DynamicMaterialFormControlContainerComponent extends DynamicFormControlContainerComponent {\n    @ContentChildren(DynamicTemplateDirective) contentTemplateList!: QueryList<DynamicTemplateDirective>;\n\n    @HostBinding(\"class\") klass?: string;\n\n    @Input() context: DynamicFormArrayGroupModel | null = null;\n    @Input() group!: UntypedFormGroup;\n    @Input() hostClass?: string[];\n    // tslint:disable-next-line:no-input-rename\n    @Input(\"templates\") inputTemplateList?: QueryList<DynamicTemplateDirective>;\n    @Input() layout?: DynamicFormLayout;\n    @Input() model!: DynamicFormControlModel;\n\n    @Output() blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();\n    @Output() change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();\n    @Output() focus: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();\n    // tslint:disable-next-line:no-output-rename\n    @Output(\"matEvent\") customEvent: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();\n\n    @ViewChild(\"componentViewContainer\", {read: ViewContainerRef, static: true}) componentViewContainerRef!: ViewContainerRef;\n\n    constructor(protected changeDetectorRef: ChangeDetectorRef,\n                protected componentFactoryResolver: ComponentFactoryResolver,\n                protected layoutService: DynamicFormLayoutService,\n                protected validationService: DynamicFormValidationService,\n                protected componentService: DynamicFormComponentService,\n                protected relationService: DynamicFormRelationService) {\n        super(changeDetectorRef, componentFactoryResolver, layoutService, validationService, componentService, relationService);\n    }\n\n    get componentType(): Type<DynamicFormControl> | null {\n        return this.componentService.getCustomComponentType(this.model) || materialUIFormControlMapFn(this.model);\n    }\n\n    get hasMatFormField(): boolean {\n        const matFormFieldTypes = [DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER, DYNAMIC_FORM_CONTROL_TYPE_INPUT,\n            DYNAMIC_FORM_CONTROL_TYPE_SELECT, DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA];\n\n        return matFormFieldTypes.some(type => this.model.type === type) || (\n            this.model instanceof DynamicFormValueControlModel &&\n            this.model.getAdditional(\"isFormFieldControl\")\n        );\n    }\n}\n\nexport function materialUIFormControlMapFn(model: DynamicFormControlModel): Type<DynamicFormControl> | null {\n    switch (model.type) {\n        case DYNAMIC_FORM_CONTROL_TYPE_ARRAY:\n            return DynamicMaterialFormArrayComponent;\n\n        case DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX:\n            return DynamicMaterialCheckboxComponent;\n\n        case DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP:\n            return DynamicMaterialFormGroupComponent;\n\n        case DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER:\n            return DynamicMaterialDatePickerComponent;\n\n        case DYNAMIC_FORM_CONTROL_TYPE_GROUP:\n            return DynamicMaterialFormGroupComponent;\n\n        case DYNAMIC_FORM_CONTROL_TYPE_INPUT:\n            const inputModel = model as DynamicInputModel;\n            return inputModel.multiple ? DynamicMaterialChipsComponent : DynamicMaterialInputComponent;\n\n        case DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP:\n            return DynamicMaterialRadioGroupComponent;\n\n        case DYNAMIC_FORM_CONTROL_TYPE_SELECT:\n            return DynamicMaterialSelectComponent;\n\n        case DYNAMIC_FORM_CONTROL_TYPE_SLIDER:\n            return DynamicMaterialSliderComponent;\n\n        case DYNAMIC_FORM_CONTROL_TYPE_SWITCH:\n            return DynamicMaterialSlideToggleComponent;\n\n        case DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA:\n            return DynamicMaterialTextAreaComponent;\n\n        default:\n            return null;\n    }\n}\n\n@Component({\n    selector: \"dynamic-material-form-array\",\n    templateUrl: \"./dynamic-material-form-array.component.html\",\n    standalone: true,\n    imports: [ReactiveFormsModule, NgClass, NgFor, NgTemplateOutlet, DynamicMaterialFormControlContainerComponent]\n})\nexport class DynamicMaterialFormArrayComponent extends DynamicFormArrayComponent {\n    @Input() formLayout?: DynamicFormLayout;\n    @Input() group!: UntypedFormGroup;\n    @Input() layout?: DynamicFormControlLayout;\n    @Input() model!: DynamicFormArrayModel;\n    @Input() templates?: QueryList<DynamicTemplateDirective>;\n\n    @Output() blur: EventEmitter<any> = new EventEmitter();\n    @Output() change: EventEmitter<any> = new EventEmitter();\n    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();\n    @Output() focus: EventEmitter<any> = new EventEmitter();\n\n    @ViewChildren(DynamicMaterialFormControlContainerComponent) components!: QueryList<DynamicMaterialFormControlContainerComponent>;\n\n    constructor(protected layoutService: DynamicFormLayoutService, protected validationService: DynamicFormValidationService) {\n        super(layoutService, validationService);\n    }\n}\n\n@Component({\n    selector: \"dynamic-material-form-group\",\n    templateUrl: \"./dynamic-material-form-group.component.html\",\n    standalone: true,\n    imports: [ReactiveFormsModule, NgClass, NgFor, DynamicMaterialFormControlContainerComponent]\n})\nexport class DynamicMaterialFormGroupComponent extends DynamicFormGroupComponent {\n    @Input() formLayout?: DynamicFormLayout;\n    @Input() group!: UntypedFormGroup;\n    @Input() layout?: DynamicFormControlLayout;\n    @Input() model!: DynamicFormGroupModel;\n    @Input() templates?: QueryList<DynamicTemplateDirective> | DynamicTemplateDirective[];\n\n    @Output() blur: EventEmitter<any> = new EventEmitter();\n    @Output() change: EventEmitter<any> = new EventEmitter();\n    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();\n    @Output() focus: EventEmitter<any> = new EventEmitter();\n\n    @ViewChildren(DynamicMaterialFormControlContainerComponent) components!: QueryList<DynamicMaterialFormControlContainerComponent>;\n\n    constructor(protected layoutService: DynamicFormLayoutService, protected validationService: DynamicFormValidationService) {\n        super(layoutService, validationService);\n    }\n}\n","<div [formGroup]=\"group\"\n     [ngClass]=\"['ng-dynamic-forms-'+model.type.toLowerCase(), getClass('element', 'container'), getClass('grid', 'container')]\">\n\n    <label *ngIf=\"!hasMatFormField && !isCheckbox && hasLabel\"\n           [for]=\"id\"\n           [innerHTML]=\"model.label\"\n           [ngClass]=\"[getClass('element', 'label'), getClass('grid', 'label')]\"></label>\n\n    <ng-container *ngTemplateOutlet=\"startTemplate?.templateRef; context: model\"></ng-container>\n\n    <ng-container #componentViewContainer></ng-container>\n\n    <ng-container *ngIf=\"!hasMatFormField\">\n\n        <mat-error *ngFor=\"let message of errorMessages\">{{ message }}</mat-error>\n\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"endTemplate?.templateRef; context: model\"></ng-container>\n\n    <ng-content></ng-content>\n\n</div>\n","<ng-container [formGroup]=\"group\">\n\n    <div [formArrayName]=\"model.id\" [id]=\"id\" [ngClass]=\"getClass('element', 'control')\">\n\n        <div *ngFor=\"let groupModel of model.groups; let idx = index\" role=\"group\"\n             [formGroupName]=\"idx\" [ngClass]=\"[getClass('element', 'group'), getClass('grid', 'group')]\">\n\n            <ng-container *ngTemplateOutlet=\"startTemplate?.templateRef; context: groupModel\"></ng-container>\n\n            <dynamic-mat