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

dynamic-forms - component library using material

{"version":3,"file":"dynamic-forms-material.mjs","sources":["../../../../../libs/material/src/lib/dynamic-form-library/dynamic-form-library.ts","../../../../../libs/material/src/lib/dynamic-form-dialog/dynamic-form-dialog.component.ts","../../../../../libs/material/src/lib/dynamic-form-dialog/dynamic-form-dialog.component.html","../../../../../libs/material/src/lib/dynamic-form-action/dynamic-form-button/dynamic-form-button.component.ts","../../../../../libs/material/src/lib/dynamic-form-action/dynamic-form-button/dynamic-form-button.component.html","../../../../../libs/material/src/lib/dynamic-form-action/dynamic-form-button/dynamic-form-button-type.ts","../../../../../libs/material/src/lib/dynamic-form-action/dynamic-form-icon/dynamic-form-icon.component.ts","../../../../../libs/material/src/lib/dynamic-form-action/dynamic-form-icon/dynamic-form-icon.component.html","../../../../../libs/material/src/lib/dynamic-form-action/dynamic-form-icon/dynamic-form-icon-type.ts","../../../../../libs/material/src/lib/dynamic-form-action/dynamic-form-action.module.ts","../../../../../libs/material/src/lib/dynamic-form-element/dynamic-form-items/dynamic-form-accordion/dynamic-form-accordion.component.ts","../../../../../libs/material/src/lib/dynamic-form-element/dynamic-form-items/dynamic-form-accordion/dynamic-form-accordion.component.html","../../../../../libs/material/src/lib/dynamic-form-element/dynamic-form-items/dynamic-form-accordion/dynamic-form-accordion.module.ts","../../../../../libs/material/src/lib/dynamic-form-element/dynamic-form-items/dynamic-form-tabs/dynamic-form-tabs.component.ts","../../../../../libs/material/src/lib/dynamic-form-element/dynamic-form-items/dynamic-form-tabs/dynamic-form-tabs.component.html","../../../../../libs/material/src/lib/dynamic-form-element/dynamic-form-items/dynamic-form-tabs/dynamic-form-tabs.module.ts","../../../../../libs/material/src/lib/dynamic-form-element/dynamic-form-modal/dynamic-form-modal.component.ts","../../../../../libs/material/src/lib/dynamic-form-element/dynamic-form-modal/dynamic-form-modal.component.html","../../../../../libs/material/src/lib/dynamic-form-element/dynamic-form-modal/dynamic-form-modal.module.ts","../../../../../libs/material/src/lib/dynamic-form-element/dynamic-form-element.module.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-input-wrapper/dynamic-form-input-wrapper.component.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-input-wrapper/dynamic-form-input-wrapper.component.html","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-checkbox/dynamic-form-checkbox.component.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-checkbox/dynamic-form-checkbox.component.html","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-checkbox/dynamic-form-checkbox-type.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-combobox/dynamic-form-combobox.component.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-combobox/dynamic-form-combobox.component.html","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-combobox/dynamic-form-combobox-type.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-datepicker/dynamic-form-datepicker.component.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-datepicker/dynamic-form-datepicker.component.html","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-datepicker/dynamic-form-datepicker-type.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-file/dynamic-form-file.component.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-file/dynamic-form-file.component.html","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-file/dynamic-form-file-type.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-numberbox/dynamic-form-numberbox.component.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-numberbox/dynamic-form-numberbox.component.html","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-numberbox/dynamic-form-numberbox-type.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-radio/dynamic-form-radio.component.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-radio/dynamic-form-radio.component.html","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-radio/dynamic-form-radio-type.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-select/dynamic-form-select.component.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-select/dynamic-form-select.component.html","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-select/dynamic-form-select-type.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-switch/dynamic-form-switch.component.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-switch/dynamic-form-switch.component.html","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-switch/dynamic-form-switch-type.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-textarea/dynamic-form-textarea.component.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-textarea/dynamic-form-textarea.component.html","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-textarea/dynamic-form-textarea-type.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-textbox/dynamic-form-textbox.component.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-textbox/dynamic-form-textbox.component.html","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-textbox/dynamic-form-textbox-type.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-toggle/dynamic-form-toggle.component.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-toggle/dynamic-form-toggle.component.html","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-toggle/dynamic-form-toggle-type.ts","../../../../../libs/material/src/lib/dynamic-form-input/dynamic-form-input.module.ts","../../../../../libs/material/src/lib/dynamic-forms.module.ts","../../../../../libs/material/src/lib/dynamic-form-converter/datetime-adapter.ts","../../../../../libs/material/src/public_api.ts","../../../../../libs/material/src/dynamic-forms-material.ts"],"sourcesContent":["import { DynamicFormLibrary } from '@dynamic-forms/core';\n\nexport const matDynamicFormLibrary: DynamicFormLibrary = {\n  name: 'material',\n  references: ['core'],\n};\n","import { NgClass } from '@angular/common';\nimport {\n  Component,\n  EventEmitter,\n  Inject,\n  Input,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n} from '@angular/core';\nimport { MatDialog, MatDialogConfig, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\nimport { DYNAMIC_FORM_THEME, DynamicFormAction, DynamicFormElement, DynamicFormElementsComponent } from '@dynamic-forms/core';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n  selector: 'mat-dynamic-form-dialog',\n  templateUrl: './dynamic-form-dialog.component.html',\n  imports: [NgClass, MatDialogModule, DynamicFormElementsComponent],\n})\nexport class MatDynamicFormDialogComponent implements OnInit, OnChanges, OnDestroy {\n  private _dialog: { config: MatDialogConfig; reference: MatDialogRef<any>; subscription: Subscription };\n  private _dialogOpenSubscription: Subscription;\n\n  @ViewChild('dialogTemplateRef', { static: true })\n  dialogTemplateRef: TemplateRef<any>;\n\n  @Input() isOpen$: Observable<boolean>;\n\n  @Input() children: DynamicFormElement[];\n  @Input() headerActions: DynamicFormAction[];\n  @Input() footerActions: DynamicFormAction[];\n\n  @Input() width: string;\n  @Input() height: string;\n  @Input() minWidth: string;\n  @Input() minHeight: string;\n  @Input() maxWidth: string;\n  @Input() maxHeight: string;\n  @Input() maximized: boolean;\n\n  @Input() title: string;\n  @Input() titleHtml: string;\n\n  @Input() classNameForm: string;\n  @Input() classNameModal: string;\n  @Input() classNameChildren: string;\n  @Input() classNameHeader: string;\n  @Input() classNameFooter: string;\n\n  @Input() classNameTitle: string;\n\n  @Output() readonly escaped = new EventEmitter();\n\n  constructor(\n    private dialog: MatDialog,\n    @Optional() @Inject(DYNAMIC_FORM_THEME) public theme: string,\n  ) {}\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (this._dialog && changes.maximized) {\n      const width = this.getDialogWidth();\n      const height = this.getDialogHeight();\n      this._dialog.reference.updateSize(width, height);\n    }\n  }\n\n  ngOnInit(): void {\n    this._dialogOpenSubscription = this.isOpen$.subscribe(isOpen => (isOpen ? this.openDialog() : this.closeDialog()));\n  }\n\n  ngOnDestroy(): void {\n    this._dialogOpenSubscription.unsubscribe();\n    this.closeDialog();\n  }\n\n  private openDialog(): void {\n    this.closeDialog();\n    const config = this.getDialogConfig();\n    const reference = this.dialog.open(this.dialogTemplateRef, config);\n    const subscription = reference.beforeClosed().subscribe(_ => this.escaped.emit());\n    this._dialog = { config, reference, subscription };\n  }\n\n  private closeDialog(): void {\n    if (this._dialog) {\n      this._dialog.reference.close();\n      this._dialog.subscription.unsubscribe();\n      this._dialog = null;\n    }\n  }\n\n  private getDialogWidth(): string {\n    return this.maximized ? this.maxWidth || '100%' : this.width;\n  }\n\n  private getDialogHeight(): string {\n    return this.maximized ? this.maxHeight || '100%' : this.height;\n  }\n\n  private getDialogConfig(): MatDialogConfig {\n    const config = new MatDialogConfig();\n    config.width = this.getDialogWidth();\n    config.height = this.getDialogHeight();\n    config.minWidth = this.minWidth;\n    config.minHeight = this.minHeight;\n    config.maxWidth = this.maxWidth;\n    config.maxHeight = this.maxHeight;\n    return config;\n  }\n}\n","<ng-template #dialogTemplateRef>\n  <div class=\"dynamic-form-wrapper\" [ngClass]=\"theme\" [class.maximized]=\"maximized\">\n    <div class=\"dynamic-form\" [ngClass]=\"classNameForm\" [class.maximized]=\"maximized\">\n      <div class=\"dynamic-form-modal\" [ngClass]=\"classNameModal\" [class.maximized]=\"maximized\">\n        @if (title || titleHtml || headerActions?.length) {\n          <div class=\"modal-header\" [ngClass]=\"classNameHeader\">\n            @if (titleHtml) {\n              <div class=\"modal-title\" [ngClass]=\"classNameTitle\" [innerHTML]=\"titleHtml\"></div>\n            } @else {\n              <div class=\"modal-title\" [ngClass]=\"classNameTitle\">{{ title }}</div>\n            }\n            @if (headerActions?.length) {\n              <div class=\"modal-toolbar\">\n                <dynamic-form-elements [elements]=\"headerActions\" />\n              </div>\n            }\n          </div>\n        }\n        <mat-dialog-content class=\"modal-body\" [ngClass]=\"classNameChildren\" [class.maximized]=\"maximized\">\n          <dynamic-form-elements [elements]=\"children\" />\n        </mat-dialog-content>\n        @if (footerActions?.length) {\n          <mat-dialog-actions class=\"modal-footer\" [ngClass]=\"classNameFooter\">\n            <dynamic-form-elements [elements]=\"footerActions\" />\n          </mat-dialog-actions>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n","import { NgClass } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { DynamicFormActionService, DynamicFormButtonBase, DynamicFormColorPipe } from '@dynamic-forms/core';\nimport { MatDynamicFormDialogComponent } from '../../dynamic-form-dialog/dynamic-form-dialog.component';\n\n@Component({\n  selector: 'mat-dynamic-form-button',\n  templateUrl: './dynamic-form-button.component.html',\n  imports: [NgClass, DynamicFormColorPipe, MatDynamicFormDialogComponent, MatButtonModule],\n})\nexport class MatDynamicFormButtonComponent extends DynamicFormButtonBase {\n  constructor(protected override actionService: DynamicFormActionService) {\n    super(actionService);\n  }\n}\n","@if (template.url) {\n  <a\n    mat-flat-button\n    class=\"dynamic-form-button\"\n    [ngClass]=\"template.className\"\n    [color]=\"template.color | dynamicFormColor: 'primary'\"\n    [disabled]=\"template.disabled\"\n    [hidden]=\"template.hidden\"\n    [href]=\"template.url\"\n    [target]=\"template.urlTarget || '_blank'\"\n    >{{ template.label }}</a\n  >\n} @else {\n  <button\n    mat-flat-button\n    class=\"dynamic-form-button\"\n    [id]=\"id\"\n    [ngClass]=\"template.className\"\n    [color]=\"template.color | dynamicFormColor: 'primary'\"\n    [type]=\"template.type || 'button'\"\n    [disabled]=\"template.disabled\"\n    [hidden]=\"template.hidden\"\n    (click)=\"onClick($event)\"\n    >{{ template.label }}</button\n  >\n}\n@if (dialog) {\n  <mat-dynamic-form-dialog\n    [isOpen$]=\"dialogOpen$\"\n    [children]=\"dialogChildren\"\n    [headerActions]=\"dialogHeaderActions\"\n    [footerActions]=\"dialogFooterActions\"\n    [width]=\"template.dialogWidth\"\n    [minWidth]=\"template.dialogMinWidth\"\n    [maxWidth]=\"template.dialogMaxWidth\"\n    [title]=\"template.dialogTitle\"\n    [titleHtml]=\"template.dialogTitleHtml\"\n    [classNameForm]=\"element.root.template.className\"\n    [classNameModal]=\"template.className\"\n    [classNameTitle]=\"template.classNameDialogTitle\"\n    [classNameChildren]=\"dialogTemplate?.classNameChildren\"\n    [classNameHeader]=\"dialogTemplate?.classNameHeader\"\n    [classNameFooter]=\"dialogTemplate?.classNameFooter\"\n    (escaped)=\"closeDialog()\"\n  />\n}\n","import { DynamicFormActionType } from '@dynamic-forms/core';\nimport { matDynamicFormLibrary } from '../../dynamic-form-library/dynamic-form-library';\nimport { MatDynamicFormButtonComponent } from './dynamic-form-button.component';\n\nexport const matDynamicFormButtonType: DynamicFormActionType = {\n  type: 'button',\n  component: MatDynamicFormButtonComponent,\n  libraryName: matDynamicFormLibrary.name,\n};\n","import { NgClass } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { DynamicFormActionService, DynamicFormColorPipe, DynamicFormIconBase, DynamicFormIconPipe } from '@dynamic-forms/core';\nimport { MatDynamicFormDialogComponent } from '../../dynamic-form-dialog/dynamic-form-dialog.component';\n\n@Component({\n  selector: 'mat-dynamic-form-icon',\n  templateUrl: './dynamic-form-icon.component.html',\n  imports: [\n    NgClass,\n    DynamicFormColorPipe,\n    DynamicFormIconPipe,\n    MatDynamicFormDialogComponent,\n    MatButtonModule,\n    MatIconModule,\n    MatTooltipModule,\n  ],\n})\nexport class MatDynamicFormIconComponent extends DynamicFormIconBase {\n  constructor(protected override actionService: DynamicFormActionService) {\n    super(actionService);\n  }\n}\n","<div class=\"dynamic-form-icon-wrapper\" [ngClass]=\"template.classNameWrapper\">\n  @if (template.url) {\n    <a\n      mat-icon-button\n      class=\"dynamic-form-icon\"\n      [ngClass]=\"template.className\"\n      [color]=\"template.color | dynamicFormColor: 'primary'\"\n      [disabled]=\"template.disabled\"\n      [hidden]=\"template.hidden\"\n      [matTooltip]=\"template.label\"\n      [href]=\"template.url\"\n      [target]=\"template.urlTarget || '_blank'\"\n    >\n      <mat-icon>{{ template.icon | dynamicFormIcon }}</mat-icon></a\n    >\n  } @else {\n    <button\n      mat-icon-button\n      class=\"dynamic-form-icon\"\n      [id]=\"id\"\n      [ngClass]=\"template.className\"\n      [color]=\"template.color | dynamicFormColor: 'primary'\"\n      [type]=\"template.type || 'button'\"\n      [disabled]=\"template.disabled\"\n      [hidden]=\"template.hidden\"\n      [matTooltip]=\"template.label\"\n      (click)=\"onClick($event)\"\n    >\n      <mat-icon>{{ template.icon | dynamicFormIcon }}</mat-icon>\n    </button>\n  }\n</div>\n@if (dialog) {\n  <mat-dynamic-form-dialog\n    [isOpen$]=\"dialogOpen$\"\n    [children]=\"dialogChildren\"\n    [headerActions]=\"dialogHeaderActions\"\n    [footerActions]=\"dialogFooterActions\"\n    [width]=\"template.dialogWidth\"\n    [minWidth]=\"template.dialogMinWidth\"\n    [maxWidth]=\"template.dialogMaxWidth\"\n    [title]=\"template.dialogTitle\"\n    [titleHtml]=\"template.dialogTitleHtml\"\n    [classNameForm]=\"element.root.template.className\"\n    [classNameModal]=\"template.className\"\n    [classNameTitle]=\"template.classNameDialogTitle\"\n    [classNameChildren]=\"dialogTemplate?.classNameChildren\"\n    [classNameHeader]=\"dialogTemplate?.classNameHeader\"\n    [classNameFooter]=\"dialogTemplate?.classNameFooter\"\n    (escaped)=\"closeDialog()\"\n  />\n}\n","import { DynamicFormActionType } from '@dynamic-forms/core';\nimport { matDynamicFormLibrary } from '../../dynamic-form-library/dynamic-form-library';\nimport { MatDynamicFormIconComponent } from './dynamic-form-icon.component';\n\nexport const matDynamicFormIconType: DynamicFormActionType = {\n  type: 'icon',\n  component: MatDynamicFormIconComponent,\n  libraryName: matDynamicFormLibrary.name,\n};\n","import { DynamicFormsFeature, withDynamicFormActions } from '@dynamic-forms/core';\nimport { matDynamicFormButtonType } from './dynamic-form-button/dynamic-form-button-type';\nimport { matDynamicFormIconType } from './dynamic-form-icon/dynamic-form-icon-type';\n\nexport const matDynamicFormActionTypes = [matDynamicFormButtonType, matDynamicFormIconType];\n\nexport function withMatDynamicFormActionDefaultFeatures(): DynamicFormsFeature[] {\n  return [withDynamicFormActions(...matDynamicFormActionTypes)];\n}\n","import { NgClass } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { MatExpansionModule } from '@angular/material/expansion';\nimport { DynamicFormAccordionBase, DynamicFormElementsComponent } from '@dynamic-forms/core';\n\n@Component({\n  selector: 'mat-dynamic-form-accordion',\n  templateUrl: './dynamic-form-accordion.component.html',\n  imports: [NgClass, MatExpansionModule, DynamicFormElementsComponent],\n})\nexport class MatDynamicFormAccordionComponent extends DynamicFormAccordionBase {\n  constructor() {\n    super();\n  }\n}\n","<mat-accordion class=\"dynamic-form-items dynamic-form-accordion\" [ngClass]=\"template.className\" [hidden]=\"template.hidden\">\n  @for (child of element.children; let index = $index; track index) {\n    <mat-expansion-panel\n      [ngClass]=\"child.template.className\"\n      [expanded]=\"index === selectedIndex\"\n      [disabled]=\"child.disabled\"\n      [hidden]=\"child.template.hidden\"\n      (opened)=\"openItem(index)\"\n      (closed)=\"closeItem(index)\"\n    >\n      <mat-expansion-panel-header class=\"dynamic-form-item-header\">\n        <mat-panel-title>{{ child.label }}</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div class=\"dynamic-form-item\">\n          <dynamic-form-elements [elements]=\"child.children\" />\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n  }\n</mat-accordion>\n","import { DynamicFormElementType, DynamicFormsFeature, dynamicFormItemsFactory, withDynamicFormElements } from '@dynamic-forms/core';\nimport { matDynamicFormLibrary } from '../../../dynamic-form-library/dynamic-form-library';\nimport { MatDynamicFormAccordionComponent } from './dynamic-form-accordion.component';\n\nexport const matDynamicFormAccordionType: DynamicFormElementType = {\n  type: 'accordion',\n  factory: dynamicFormItemsFactory,\n  component: MatDynamicFormAccordionComponent,\n  libraryName: matDynamicFormLibrary.name,\n};\n\nexport function withMatDynamicFormAccordion(): DynamicFormsFeature {\n  return withDynamicFormElements(matDynamicFormAccordionType);\n}\n","import { NgClass } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { MatTabsModule } from '@angular/material/tabs';\nimport { DynamicFormElementsComponent, DynamicFormTabsBase } from '@dynamic-forms/core';\n\n@Component({\n  selector: 'mat-dynamic-form-tabs',\n  templateUrl: './dynamic-form-tabs.component.html',\n  imports: [NgClass, MatTabsModule, DynamicFormElementsComponent],\n})\nexport class MatDynamicFormTabsComponent extends DynamicFormTabsBase {\n  constructor() {\n    super();\n  }\n}\n","<mat-tab-group\n  class=\"dynamic-form-items dynamic-form-tabs\"\n  [ngClass]=\"template.className\"\n  [hidden]=\"template.hidden\"\n  [selectedIndex]=\"selectedIndex\"\n  (selectedIndexChange)=\"selectItem($event)\"\n>\n  @for (child of element.children; track $index) {\n    <mat-tab [ngClass]=\"child.template.className\" [disabled]=\"child.disabled\" [hidden]=\"template.hidden\">\n      <ng-template matTabLabel>\n        <div class=\"dynamic-form-item-header\">{{ child.label }}</div>\n      </ng-template>\n      <ng-template matTabContent>\n        <div class=\"dynamic-form-item\">\n          <dynamic-form-elements [elements]=\"child.children\" />\n        </div>\n      </ng-template>\n    </mat-tab>\n  }\n</mat-tab-group>\n","import { DynamicFormElementType, DynamicFormsFeature, dynamicFormItemsFactory, withDynamicFormElements } from '@dynamic-forms/core';\nimport { matDynamicFormLibrary } from '../../../dynamic-form-library/dynamic-form-library';\nimport { MatDynamicFormTabsComponent } from './dynamic-form-tabs.component';\n\nexport const matDynamicFormTabsType: DynamicFormElementType = {\n  type: 'tabs',\n  factory: dynamicFormItemsFactory,\n  component: MatDynamicFormTabsComponent,\n  libraryName: matDynamicFormLibrary.name,\n};\n\nexport function withMatDynamicFormTabs(): DynamicFormsFeature {\n  return withDynamicFormElements(matDynamicFormTabsType);\n}\n","import { Component } from '@angular/core';\nimport { DynamicFormElementComponent, DynamicFormModalBase } from '@dynamic-forms/core';\nimport { MatDynamicFormDialogComponent } from '../../dynamic-form-dialog/dynamic-form-dialog.component';\n\n@Component({\n  selector: 'mat-dynamic-form-modal',\n  templateUrl: './dynamic-form-modal.component.html',\n  imports: [DynamicFormElementComponent, MatDynamicFormDialogComponent],\n})\nexport class MatDynamicFormModalComponent extends DynamicFormModalBase {}\n","@if (trigger) {\n  <dynamic-form-element [element]=\"trigger\" />\n}\n\n<mat-dynamic-form-dialog\n  [isOpen$]=\"isOpen$\"\n  [children]=\"children\"\n  [headerActions]=\"headerActions\"\n  [footerActions]=\"footerActions\"\n  [width]=\"template.width\"\n  [height]=\"template.height\"\n  [minWidth]=\"template.minWidth\"\n  [minHeight]=\"template.minHeight\"\n  [maxWidth]=\"template.maxWidth\"\n  [maxHeight]=\"template.maxHeight\"\n  [maximized]=\"template.maximized\"\n  [title]=\"template.title\"\n  [titleHtml]=\"template.titleHtml\"\n  [classNameForm]=\"element.root.template.className\"\n  [classNameModal]=\"template.className\"\n  [classNameTitle]=\"template.classNameTitle\"\n  [classNameChildren]=\"template.classNameChildren\"\n  [classNameHeader]=\"template.classNameHeader\"\n  [classNameFooter]=\"template.classNameFooter\"\n  (escaped)=\"element.close()\"\n/>\n","import { DynamicFormElementType, DynamicFormsFeature, dynamicFormModalFactory, withDynamicFormElements } from '@dynamic-forms/core';\nimport { matDynamicFormLibrary } from '../../dynamic-form-library/dynamic-form-library';\nimport { MatDynamicFormModalComponent } from './dynamic-form-modal.component';\n\nexport const matDynamicFormModalType: DynamicFormElementType = {\n  type: 'modal',\n  factory: dynamicFormModalFactory,\n  component: MatDynamicFormModalComponent,\n  libraryName: matDynamicFormLibrary.name,\n};\n\nexport function withMatDynamicFormModal(): DynamicFormsFeature {\n  return withDynamicFormElements(matDynamicFormModalType);\n}\n","import { DynamicFormsFeature, withDynamicFormElements, withDynamicFormModalActionHandlers } from '@dynamic-forms/core';\nimport { matDynamicFormAccordionType } from './dynamic-form-items/dynamic-form-accordion/dynamic-form-accordion.module';\nimport { matDynamicFormTabsType } from './dynamic-form-items/dynamic-form-tabs/dynamic-form-tabs.module';\nimport { matDynamicFormModalType } from './dynamic-form-modal/dynamic-form-modal.module';\n\nexport const matDynamicFormElementTypes = [matDynamicFormAccordionType, matDynamicFormTabsType, matDynamicFormModalType];\n\nexport function withMatDynamicFormElementDefaultFeatures(): DynamicFormsFeature[] {\n  return [withDynamicFormElements(...matDynamicFormElementTypes), withDynamicFormModalActionHandlers()];\n}\n","import { NgClass } from '@angular/common';\nimport { Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'mat-dynamic-form-input-wrapper',\n  templateUrl: './dynamic-form-input-wrapper.component.html',\n  imports: [NgClass],\n})\nexport class MatDynamicFormInputWrapperComponent {\n  @Input() label: string;\n  @Input() inputId: string;\n  @Input() required: boolean;\n  @Input({ required: true }) disabled: boolean;\n  @Input({ required: true }) invalid: boolean;\n  @Input({ required: true }) hasValidation: boolean;\n  @Input() errorMessage: boolean;\n}\n","<div\n  class=\"mat-mdc-form-field mat-mdc-form-field-wrapper\"\n  [ngClass]=\"{ 'mdc-text-field--disabled': disabled, 'mdc-text-field--invalid': invalid, 'no-validation': !hasValidation }\"\n>\n  <div class=\"mat-mdc-form-field-input-wrapper\">\n    @if (label) {\n      <label class=\"mat-mdc-form-field-input-label mat-mdc-floating-label mdc-floating-label\" [for]=\"inputId\"\n        >{{ label }}\n        @if (required) {\n          <span>*</span>\n        }\n      </label>\n    }\n    <ng-content />\n  </div>\n  @if (hasValidation) {\n    <div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\">\n      @if (invalid) {\n        <div class=\"mat-mdc-form-field-error-wrapper\">\n          <div class=\"mat-mdc-form-field-error mat-mdc-form-field-bottom-align\">{{ errorMessage }}</div>\n        </div>\n      }\n    </div>\n  }\n</div>\n","import { Component } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { DynamicFormCheckbox, DynamicFormInputBase, DynamicFormValidationService } from '@dynamic-forms/core';\nimport { MatDynamicFormInputWrapperComponent } from '../dynamic-form-input-wrapper/dynamic-form-input-wrapper.component';\n\n@Component({\n  selector: 'mat-dynamic-form-checkbox',\n  templateUrl: './dynamic-form-checkbox.component.html',\n  imports: [ReactiveFormsModule, MatDynamicFormInputWrapperComponent, MatCheckboxModule],\n})\nexport class MatDynamicFormCheckboxComponent extends DynamicFormInputBase<DynamicFormCheckbox> {\n  constructor(protected override validationService: DynamicFormValidationService) {\n    super(validationService);\n  }\n}\n","<mat-dynamic-form-input-wrapper\n  [disabled]=\"disabled\"\n  [invalid]=\"showErrors\"\n  [hasValidation]=\"hasValidation\"\n  [errorMessage]=\"showErrors ? errorMessage : null\"\n>\n  <mat-checkbox\n    color=\"primary\"\n    [id]=\"inputId\"\n    [indeterminate]=\"input?.indeterminate\"\n    [required]=\"validation?.required\"\n    [formControl]=\"control\"\n    >{{ template.label }}\n    @if (validation?.required) {\n      <span>*</span>\n    }\n  </mat-checkbox>\n</mat-dynamic-form-input-wrapper>\n","import { DynamicFormInputType } from '@dynamic-forms/core';\nimport { matDynamicFormLibrary } from '../../dynamic-form-library/dynamic-form-library';\nimport { MatDynamicFormCheckboxComponent } from './dynamic-form-checkbox.component';\n\nexport const matDynamicFormCheckboxType: DynamicFormInputType = {\n  type: 'checkbox',\n  component: MatDynamicFormCheckboxComponent,\n  libraryName: matDynamicFormLibrary.name,\n};\n","import { AsyncPipe } from '@angular/common';\nimport { Component, OnInit } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatAutocompleteModule } from '@angular/material/autocomplete';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { DynamicFormCombobox, DynamicFormElementComponent, DynamicFormInputBase, DynamicFormValidationService } from '@dynamic-forms/core';\nimport { Observable } from 'rxjs';\nimport { map, startWith } from 'rxjs/operators';\n\n@Component({\n  selector: 'mat-dynamic-form-combobox',\n  templateUrl: './dynamic-form-combobox.component.html',\n  imports: [AsyncPipe, ReactiveFormsModule, DynamicFormElementComponent, MatFormFieldModule, MatInputModule, MatAutocompleteModule],\n})\nexport class MatDynamicFormComboboxComponent extends DynamicFormInputBase<DynamicFormCombobox> implements OnInit {\n  filteredOptions: Observable<string[]>;\n\n  constructor(protected override validationService: DynamicFormValidationService) {\n    super(validationService);\n  }\n\n  ngOnInit(): void {\n    this.filteredOptions = this.control.valueChanges.pipe(\n      startWith(''),\n      map(value => this.getFilteredOptions(value)),\n    );\n  }\n\n  private getFilteredOptions(value: string): string[] {\n    const valueNormalized = value ? value.toUpperCase() : null;\n    return valueNormalized ? this.input.options?.filter(option => option.toUpperCase().includes(valueNormalized)) : this.input.options;\n  }\n}\n","<mat-form-field appearance=\"fill\" color=\"primary\" [floatLabel]=\"template.labelFloating\">\n  <mat-label>{{ template.label }}</mat-label>\n  <input\n    matInput\n    type=\"text\"\n    [id]=\"inputId\"\n    [placeholder]=\"input.placeholder\"\n    [matAutocomplete]=\"auto\"\n    [readonly]=\"readonly\"\n    [required]=\"validation?.required\"\n    [formControl]=\"control\"\n  />\n  <mat-autocomplete #auto=\"matAutocomplete\">\n    @for (option of filteredOptions | async; track $index) {\n      <mat-option [value]=\"option\">{{ option }}</mat-option>\n    }\n  </mat-autocomplete>\n  @if (prefixAddOn?.classType === \"element\" && !prefixAddOn.hidden) {\n    <dynamic-form-element matTextPrefix [element]=\"prefixAddOn\" />\n  }\n  @if (prefixAddOn && prefixAddOn.classType !== \"element\" && !prefixAddOn.hidden) {\n    <dynamic-form-element matPrefix [element]=\"prefixAddOn\" />\n  }\n  @if (suffixAddOn?.classType === \"element\" && !suffixAddOn.hidden) {\n    <dynamic-form-element matTextSuffix [element]=\"suffixAddOn\" />\n  }\n  @if (suffixAddOn && suffixAddOn.classType !== \"element\" && !suffixAddOn.hidden) {\n    <dynamic-form-element matSuffix [element]=\"suffixAddOn\" />\n  }\n  <mat-hint align=\"start\">{{ hints?.hintStart }}</mat-hint>\n  <mat-hint align=\"end\">{{ hints?.hintEnd }}</mat-hint>\n  <mat-error>{{ errorMessage }}</mat-error>\n</mat-form-field>\n","import { DynamicFormInputType } from '@dynamic-forms/core';\nimport { matDynamicFormLibrary } from '../../dynamic-form-library/dynamic-form-library';\nimport { MatDynamicFormComboboxComponent } from './dynamic-form-combobox.component';\n\nexport const matDynamicFormComboboxType: DynamicFormInputType = {\n  type: 'combobox',\n  component: MatDynamicFormComboboxComponent,\n  libraryName: matDynamicFormLibrary.name,\n};\n","import { Component } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport {\n  DynamicFormDatepicker,\n  DynamicFormElementComponent,\n  DynamicFormInputBase,\n  DynamicFormValidationService,\n} from '@dynamic-forms/core';\n\n@Component({\n  selector: 'mat-dynamic-form-datepicker',\n  templateUrl: './dynamic-form-datepicker.component.html',\n  imports: [ReactiveFormsModule, DynamicFormElementComponent, MatFormFieldModule, MatInputModule, MatDatepickerModule],\n})\nexport class MatDynamicFormDatepickerComponent extends DynamicFormInputBase<DynamicFormDatepicker> {\n  constructor(protected override validationService: DynamicFormValidationService) {\n    super(validationService);\n  }\n}\n","<mat-form-field appearance=\"fill\" color=\"primary\" [floatLabel]=\"template.labelFloating\" [class.suffixes-flex]=\"suffixAddOn\">\n  <mat-label>{{ template.label }}</mat-label>\n  <input\n    matInput\n    [matDatepicker]=\"datepicker\"\n    [id]=\"inputId\"\n    [placeholder]=\"input.placeholder\"\n    [min]=\"validation?.minDate ? input.minDate : null\"\n    [max]=\"validation?.maxDate ? input.maxDate : null\"\n    [readonly]=\"readonly\"\n    [required]=\"validation?.required\"\n    [formControl]=\"control\"\n  />\n  <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"control.disabled || readonly\" />\n  <mat-datepicker #datepicker [disabled]=\"control.disabled\" />\n  @if (prefixAddOn?.classType === \"element\" && !prefixAddOn.hidden) {\n    <dynamic-form-element matTextPrefix [element]=\"prefixAddOn\" />\n  }\n  @if (prefixAddOn && prefixAddOn.classType !== \"element\" && !prefixAddOn.hidden) {\n    <dynamic-form-element matPrefix [element]=\"prefixAddOn\" />\n  }\n  @if (suffixAddOn?.classType === \"element\" && !suffixAddOn.hidden) {\n    <dynamic-form-element matTextSuffix [element]=\"suffixAddOn\" />\n  }\n  @if (suffixAddOn && suffixAddOn.classType !== \"element\" && !suffixAddOn.hidden) {\n    <dynamic-form-element matSuffix [element]=\"suffixAddOn\" />\n  }\n  <mat-hint align=\"start\">{{ hints?.hintStart }}</mat-hint>\n  <mat-hint align=\"end\">{{ hints?.hintEnd }}</mat-hint>\n  <mat-error>{{ errorMessage }}</mat-error>\n</mat-form-field>\n","import { DynamicFormInputType } from '@dynamic-forms/core';\nimport { matDynamicFormLibrary } from '../../dynamic-form-library/dynamic-form-library';\nimport { MatDynamicFormDatepickerComponent } from './dynamic-form-datepicker.component';\n\nexport const matDynamicFormDatepickerType: DynamicFormInputType = {\n  type: 'datepicker',\n  component: MatDynamicFormDatepickerComponent,\n  libraryName: matDynamicFormLibrary.name,\n};\n","import { Component, OnInit, ViewChild } from '@angular/core';\nimport { NgControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInput, MatInputModule } from '@angular/material/input';\nimport {\n  DynamicFormBuilder,\n  DynamicFormElementComponent,\n  DynamicFormFileBase,\n  DynamicFormFileDirective,\n  DynamicFormValidationService,\n} from '@dynamic-forms/core';\n\n@Component({\n  selector: 'mat-dynamic-form-file',\n  templateUrl: './dynamic-form-file.component.html',\n  imports: [ReactiveFormsModule, DynamicFormFileDirective, DynamicFormElementComponent, MatInputModule, MatFormFieldModule],\n})\nexport class MatDynamicFormFileComponent extends DynamicFormFileBase implements OnInit {\n  @ViewChild(MatInput, { static: true })\n  protected _matInput: MatInput;\n\n  @ViewChild(NgControl, { static: true })\n  protected _ngControl: NgControl;\n\n  constructor(\n    protected override builder: DynamicFormBuilder,\n    protected override validationService: DynamicFormValidationService,\n  ) {\n    super(builder, validationService);\n  }\n\n  override ngOnInit(): void {\n    super.ngOnInit();\n    this._matInput.ngControl = this._ngControl;\n    this._matInput['_errorStateTracker'].ngControl = this._ngControl;\n  }\n}\n","<mat-form-field appearance=\"fill\" color=\"primary\" [floatLabel]=\"template.labelFloating\" [class.suffixes-flex]=\"suffixAddOn\">\n  <mat-label>{{ template.label }}</mat-label>\n  <input\n    matInput\n    readonly\n    [id]=\"inputId\"\n    [placeholder]=\"input.placeholder\"\n    [value]=\"fileDirective.fileNamesAsText || ''\"\n    [disabled]=\"control.disabled\"\n    (blur)=\"control.markAsTouched()\"\n  />\n  <input\n    #fileDirective=\"dynamicFormFile\"\n    fileControl\n    dynamicFormFile\n    [acceptFiles]=\"input.accept\"\n    [multipleFiles]=\"input.multiple\"\n    [formControl]=\"control\"\n  />\n  @if (prefixAddOn?.classType === \"element\" && !prefixAddOn.hidden) {\n    <dynamic-form-element matTextPrefix [element]=\"prefixAddOn\" />\n  }\n  @if (prefixAddOn && prefixAddOn.classType !== \"element\" && !prefixAddOn.hidden) {\n    <dynamic-form-element matPrefix [element]=\"prefixAddOn\" />\n  }\n  <dynamic-form-element matSuffix [element]=\"uploadAction\" />\n  @if (suffixAddOn?.classType === \"element\" && !suffixAddOn.hidden) {\n    <dynamic-form-element matTextSuffix [element]=\"suffixAddOn\" />\n  }\n  @if (suffixAddOn && suffixAddOn.classType !== \"element\" && !suffixAddOn.hidden) {\n    <dynamic-form-element matSuffix [element]=\"suffixAddOn\" />\n  }\n  <mat-hint align=\"start\">{{ hints?.hintStart }}</mat-hint>\n  <mat-hint align=\"end\">{{ hints?.hintEnd }}</mat-hint>\n  <mat-error>{{ errorMessage }}</mat-error>\n</mat-form-field>\n","import { DynamicFormInputType } from '@dynamic-forms/core';\nimport { matDynamicFormLibrary } from '../../dynamic-form-library/dynamic-form-library';\nimport { MatDynamicFormFileComponent } from './dynamic-form-file.component';\n\nexport const matDynamicFormFileType: DynamicFormInputType = {\n  type: 'file',\n  component: MatDynamicFormFileComponent,\n  libraryName: matDynamicFormLibrary.name,\n};\n","import { Component } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { DynamicFormElementComponent, DynamicFormInputBase, DynamicFormNumberbox, DynamicFormValidationService } from '@dynamic-forms/core';\n\n@Component({\n  selector: 'mat-dynamic-form-numberbox',\n  templateUrl: './dynamic-form-numberbox.component.html',\n  imports: [ReactiveFormsModule, DynamicFormElementComponent, MatFormFieldModule, MatInputModule],\n})\nexport class MatDynamicFormNumberboxComponent extends DynamicFormInputBase<DynamicFormNumberbox> {\n  constructor(protected override validationService: DynamicFormValidationService) {\n    super(validationService);\n  }\n}\n","<mat-form-field appearance=\"fill\" color=\"primary\" [floatLabel]=\"template.labelFloating\">\n  <mat-label>{{ template.label }}</mat-label>\n  <input\n    matInput\n    type=\"number\"\n    [id]=\"inputId\"\n    [placeholder]=\"input.placeholder\"\n    [readonly]=\"readonly\"\n    [required]=\"validation?.required\"\n    [formControl]=\"control\"\n  />\n  @if (prefixAddOn?.classType === \"element\" && !prefixAddOn.hidden) {\n    <dynamic-form-element matTextPrefix [element]=\"prefixAddOn\" />\n  }\n  @if (prefixAddOn && prefixAddOn.classType !== \"element\" && !prefixAddOn.hidden) {\n    <dynamic-form-element matPrefix [element]=\"prefixAddOn\" />\n  }\n  @if (suffixAddOn?.classType === \"element\" && !suffixAddOn.hidden) {\n    <dynamic-form-element matTextSuffix [element]=\"suffixAddOn\" />\n  }\n  @if (suffixAddOn && suffixAddOn.classType !== \"element\" && !suffixAddOn.hidden) {\n    <dynamic-form-element matSuffix [element]=\"suffixAddOn\" />\n  }\n  <mat-hint align=\"start\">{{ hints?.hintStart }}</mat-hint>\n  <mat-hint align=\"end\">{{ hints?.hintEnd }}</mat-hint>\n  <mat-error>{{ errorMessage }}</mat-error>\n</mat-form-field>\n","import { DynamicFormInputType } from '@dynamic-forms/core';\nimport { matDynamicFormLibrary } from '../../dynamic-form-library/dynamic-form-library';\nimport { MatDynamicFormNumberboxComponent } from './dynamic-form-numberbox.component';\n\nexport const matDynamicFormNumberboxType: DynamicFormInputType = {\n  type: 'numberbox',\n  component: MatDynamicFormNumberboxComponent,\n  libraryName: matDynamicFormLibrary.name,\n};\n","import { Component } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { DynamicFormInputBase, DynamicFormRadio, DynamicFormValidationService } from '@dynamic-forms/core';\nimport { MatDynamicFormInputWrapperComponent } from '../dynamic-form-input-wrapper/dynamic-form-input-wrapper.component';\n\n@Component({\n  selector: 'mat-dynamic-form-radio',\n  templateUrl: './dynamic-form-radio.component.html',\n  imports: [ReactiveFormsModule, MatDynamicFormInputWrapperComponent, MatRadioModule],\n})\nexport class MatDynamicFormRadioComponent extends DynamicFormInputBase<DynamicFormRadio> {\n  constructor(protected override validationService: DynamicFormValidationService) {\n    super(validationService);\n  }\n}\n","<mat-dynamic-form-input-wrapper\n  [label]=\"template.label\"\n  [required]=\"validation?.required\"\n  [disabled]=\"disabled\"\n  [invalid]=\"showErrors\"\n  [hasValidation]=\"hasValidation\"\n  [errorMessage]=\"showErrors ? errorMessage : null\"\n>\n  <mat-radio-group [formControl]=\"control\">\n    @for (option of input.options; let index = $index; track index) {\n      <mat-radio-button color=\"primary\" [id]=\"inputId + '-' + index\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{\n        option.label\n      }}</mat-radio-button>\n    }\n  </mat-radio-group>\n</mat-dynamic-form-input-wrapper>\n","import { DynamicFormInputType } from '@dynamic-forms/core';\nimport { matDynamicFormLibrary } from '../../dynamic-form-library/dynamic-form-library';\nimport { MatDynamicFormRadioComponent } from './dynamic-form-radio.component';\n\nexport const matDynamicFormRadioType: DynamicFormInputType = {\n  type: 'radio',\n  component: MatDynamicFormRadioComponent,\n  libraryName: matDynamicFormLibrary.name,\n};\n","import { Component } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectModule } from '@angular/material/select';\nimport { DynamicFormElementComponent, DynamicFormInputBase, DynamicFormSelect, DynamicFormValidationService } from '@dynamic-forms/core';\n\n@Component({\n  selector: 'mat-dynamic-form-select',\n  templateUrl: './dynamic-form-select.component.html',\n  imports: [ReactiveFormsModule, DynamicFormElementComponent, MatFormFieldModule, MatSelectModule],\n})\nexport class MatDynamicFormSelectComponent extends DynamicFormInputBase<DynamicFormSelect> {\n  constructor(protected override validationService: DynamicFormValidationService) {\n    super(validationService);\n  }\n}\n","@if (input.multiple) {\n  <mat-form-field appearance=\"fill\" color=\"primary\" [floatLabel]=\"template.labelFloating\">\n    <mat-label>{{ template.label }}</mat-label>\n    <mat-select multiple [id]=\"inputId\" [placeholder]=\"input.placeholder\" [required]=\"validation?.required\" [formControl]=\"control\">\n      @for (option of input.options; track option) {\n        @if (option.items) {\n          <mat-optgroup [label]=\"option.label\" [disabled]=\"option.disabled\">\n            @for (optionItem of option.items; track optionItem) {\n              <mat-option [value]=\"optionItem.value\" [disabled]=\"optionItem.disabled\">{{ optionItem.label }}</mat-option>\n            }\n          </mat-optgroup>\n        } @else {\n          <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</mat-option>\n        }\n      }\n    </mat-select>\n    @if (prefixAddOn?.classType === \"element\" && !prefixAddOn.hidden) {\n      <dynamic-form-element matTextPrefix [element]=\"prefixAddOn\" />\n    }\n    @if (prefixAddOn && prefixAddOn.classType !== \"element\" && !prefixAddOn.hidden) {\n      <dynamic-form-element matPrefix [element]=\"prefixAddOn\" />\n    }\n    @if (suffixAddOn?.classType === \"element\" && !suffixAddOn.hidden) {\n      <dynamic-form-element matTextSuffix [element]=\"suffixAddOn\" />\n    }\n    @if (suffixAddOn && suffixAddOn.classType !== \"element\" && !suffixAddOn.hidden) {\n      <dynamic-form-element matSuffix [element]=\"suffixAddOn\" />\n    }\n    <mat-hint align=\"start\">{{ hints?.hintStart }}</mat-hint>\n    <mat-hint align=\"end\">{{ hints?.hintEnd }}</mat-hint>\n    <mat-error>{{ errorMessage }}</mat-error>\n  </mat-form-field>\n} @else {\n  <mat-form-field appearance=\"fill\" color=\"primary\" [floatLabel]=\"template.labelFloating\">\n    <mat-label>{{ template.label }}</mat-label>\n    <mat-select [id]=\"inputId\" [placeholder]=\"input.placeholder\" [required]=\"validation?.required\" [formControl]=\"control\">\n      @for (option of input.options; track option) {\n        @if (option.items) {\n          <mat-optgroup [label]=\"option.label\" [disabled]=\"option.disabled\">\n            @for (optionItem of option.items; track optionItem) {\n              <mat-option [value]=\"optionItem.value\" [disabled]=\"optionItem.disabled\">{{ optionItem.label }}</mat-option>\n            }\n          </mat-optgroup>\n        } @else {\n          <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</mat-option>\n        }\n      }\n    </mat-select>\n    @if (prefixAddOn?.classType === \"element\" && !prefixAddOn.hidden) {\n      <dynamic-form-element matTextPrefix [element]=\"prefixAddOn\" />\n    }\n    @if (prefixAddOn && prefixAddOn.classType !== \"element\" && !prefixAddOn.hidden) {\n      <dynamic-form-element matPrefix [element]=\"prefixAddOn\" />\n    }\n    @if (suffixAddOn?.classType === \"element\" && !suffixAddOn.hidden) {\n      <dynamic-form-element matTextSuffix [element]=\"suffixAddOn\" />\n    }\n    @if (suffixAddOn && suffixAddOn.classType !== \"element\" && !suffixAddOn.hidden) {\n      <dynamic-form-element matSuffix [element]=\"suffixAddOn\" />\n    }\n    <mat-hint align=\"start\">{{ hints?.hintStart }}</mat-hint>\n    <mat-hint align=\"end\">{{ hints?.hintEnd }}</mat-hint>\n    <mat-error>{{ errorMessage }}</mat-error>\n  </mat-form-field>\n}\n","import { DynamicFormInputType } from '@dynamic-forms/core';\nimport { matDynamicFormLibrary } from '../../dynamic-form-library/dynamic-form-library';\nimport { MatDynamicFormSelectComponent } from './dynamic-form-select.component';\n\nexport const matDynamicFormSelectType: DynamicFormInputType = {\n  type: 'select',\n  component: MatDynamicFormSelectComponent,\n  libraryName: matDynamicFormLibrary.name,\n};\n","import { Component } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\nimport { DynamicFormInputBase, DynamicFormSwitch, DynamicFormValidationService } from '@dynamic-forms/core';\nimport { MatDynamicFormInputWrapperComponent } from '../dynamic-form-input-wrapper/dynamic-form-input-wrapper.component';\n\n@Component({\n  selector: 'mat-dynamic-form-switch',\n  templateUrl: './dynamic-form-switch.component.html',\n  imports: [ReactiveFormsModule, MatDynamicFormInputWrapperComponent, MatSlideToggleModule],\n})\nexport class MatDynamicFormSwitchComponent extends DynamicFormInputBase<DynamicFormSwitch> {\n  constructor(protected override validationService: DynamicFormValidationService) {\n    super(validationService);\n  }\n}\n","<mat-dynamic-form-input-wrapper\n  [disabled]=\"disabled\"\n  [invalid]=\"showErrors\"\n  [hasValidation]=\"hasValidation\"\n  [errorMessage]=\"showErrors ? errorMessage : null\"\n>\n  <mat-slide-toggle color=\"primary\" [id]=\"inputId\" [required]=\"validation?.required\" [formControl]=\"control\"\n    >{{ template.label }}\n    @if (validation?.required) {\n      <span>*</span>\n    }\n  </mat-slide-toggle>\n</mat-dynamic-form-input-wrapper>\n","import { DynamicFormInputType } from '@dynamic-forms/core';\nimport { matDynamicFormLibrary } from '../../dynamic-form-library/dynamic-form-library';\nimport { MatDynamicFormSwitchComponent } from './dynamic-form-switch.component';\n\nexport const matDynamicFormSwitchType: DynamicFormInputType = {\n  type: 'switch',\n  component: MatDynamicFormSwitchComponent,\n  libraryName: matDynamicFormLibrary.name,\n};\n","import { Component } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { DynamicFormElementComponent, DynamicFormInputBase, DynamicFormTextarea, DynamicFormValidationService } from '@dynamic-forms/core';\n\n@Component({\n  selector: 'mat-dynamic-form-textarea',\n  templateUrl: './dynamic-form-textarea.component.html',\n  imports: [ReactiveFormsModule, DynamicFormElementComponent, MatFormFieldModule, MatInputModule],\n})\nexport class MatDynamicFormTextareaComponent extends DynamicFormInputBase<DynamicFormTextarea> {\n  constructor(protected override validationService: DynamicFormValidationService) {\n    super(validationService);\n  }\n}\n","<mat-form-field appearance=\"fill\" color=\"primary\" [floatLabel]=\"template.labelFloating\">\n  <mat-label>{{ template.label }}</mat-label>\n  <textarea\n    #autosize=\"cdkTextareaAutosize\"\n    matInput\n    cdkTextareaAutosize\n    cdkAutosizeMinRows=\"1\"\n    [id]=\"inputId\"\n    [placeholder]=\"input.placeholder\"\n    [readonly]=\"readonly\"\n    [required]=\"validation?.required\"\n    [formControl]=\"control\"\n  >\n  </textarea>\n  <mat-hint align=\"start\">{{ hints?.hintStart }}</mat-hint>\n  <mat-hint align=\"end\">{{ hints?.hintEnd }}</mat-hint>\n  @if (prefixAddOn?.classType === \"element\" && !prefixAddOn.hidden) {\n    <dynamic-form-element matTextPrefix [element]=\"prefixAddOn\" />\n  }\n  @if (prefixAddOn && prefixAddOn.classType !== \"element\" && !prefixAddOn.hidden) {\n    <dynamic-form-el