@softpak/components 20.3.7 → 20.3.9

package/fesm2022/softpak-components-spx-form-view.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-form-view.mjs","sources":["../../../../projects/softpak/components/spx-form-view/spx-form-button-type.enum.ts","../../../../projects/softpak/components/spx-form-view/spx-autocomplete-search.component.ts","../../../../projects/softpak/components/spx-form-view/spx-autocomplete-search.component.html","../../../../projects/softpak/components/spx-form-view/spx-check-required.const.ts","../../../../projects/softpak/components/spx-form-view/spx-form-view.component.ts","../../../../projects/softpak/components/spx-form-view/spx-form-view.component.html","../../../../projects/softpak/components/spx-form-view/softpak-components-spx-form-view.ts"],"sourcesContent":["export enum SpxFormButtonTypeEnum {\n    button = 'button',\n    submit = 'submit',\n}\n","import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, computed, input, output, signal } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { Subscription, debounceTime } from 'rxjs';\n\nimport { SpxFormFieldI } from './spx-form-field.interface';\nimport { SpxFormSectionI } from './spx-form-section.interface';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\nimport { SpxSeverityEnum, unsubscribeSubscriptions } from '@softpak/components/spx-helpers';\nimport { SpxInputComponent, SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\n\nexport const sectionAutocompleteSearch = 'autocompleteSearch';\nexport const ctrlQuery = 'query';\nexport const ctrlOptions = 'options';\n\n@Component({\n    selector: 'spx-autocomplete-search',\n    templateUrl: './spx-autocomplete-search.component.html',\n    imports: [\n        FormsModule,\n        ReactiveFormsModule,\n        SpxButtonComponent,\n        SpxInputComponent,\n    ],\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpxAutocompleteSearchComponent implements OnInit, OnDestroy {\n  formGroup = signal<FormGroup | null>(null);\n  readonly spxSuggestions = input<SpxValuePair<any>[]>([]);\n  readonly spxField = input.required<SpxFormFieldI>();\n  readonly txtOptions = input.required<string>();\n  readonly txtQuery = input.required<string>();\n  readonly txtSubmit = input.required<string>();\n  readonly spxValuePair = input.required<SpxValuePair<any>>();\n  spxCancel = output();\n  spxSearch = output<SpxValuePair<any>>();\n  spxSubmit = output<SpxValuePair<any>>();\n  inputTypeRadio = SpxInputTypeEnum.radio;\n  inputTypeText = SpxInputTypeEnum.text;\n  SpxSeverity = SpxSeverityEnum;\n \n  sections: SpxFormSectionI[] = [\n    {\n      key: sectionAutocompleteSearch,\n      showTitle: () => false,\n      fields: [\n        {\n          key: ctrlQuery,\n          type: () => SpxInputTypeEnum.text,\n          label: () => this.txtQuery(),\n          capitalize: () => true,\n        },\n        {\n          key: ctrlOptions,\n          type: () => SpxInputTypeEnum.radio,\n          label: () => this.txtOptions(),\n        },\n      ]\n    }\n  ];\n\n  readonly ctrlQuery = computed(() => this.formGroup()?.get(ctrlQuery) as FormControl);\n  readonly ctrlOptions = computed(() => this.formGroup()?.get(ctrlOptions) as FormControl);\n\n  private subscriptions: {\n    subSelection?: Subscription;\n    subQuery?: Subscription;\n  } = {};\n\n  constructor(readonly formBuilder: FormBuilder) {\n    this.createForm();\n  }\n\n  ngOnInit(): void {\n    this.listenToSelection();\n    this.listenToQuery();\n    const spxValuePair = this.spxValuePair();\n    this.ctrlQuery().setValue(spxValuePair, { emitEvent: false });\n    this.spxSearch.emit(spxValuePair);\n  }\n\n  ngOnDestroy(): void {\n    unsubscribeSubscriptions(this.subscriptions);\n  }\n\n  private createForm(): void {\n    this.formGroup.set(this.formBuilder.group({\n      [ctrlQuery]: [null],\n      [ctrlOptions]: [null],\n    }));\n  }\n\n  getRawValidators(formControl: FormControl) {\n    return (formControl as any)._rawValidators;\n  }\n\n  onCancel(): void {\n    this.spxCancel.emit();\n  }\n  \n  onSubmit(): void {\n    this.spxSubmit.emit(this.ctrlQuery().value);\n  }\n\n  private listenToQuery(): void {\n    this.subscriptions.subQuery = this.ctrlQuery().valueChanges.pipe(debounceTime(500)).subscribe(valuePair => {\n      this.spxSearch.emit(valuePair);\n    });\n  }\n\n  private listenToSelection(): void {\n    this.subscriptions.subSelection = this.ctrlOptions().valueChanges.subscribe(valuePair => {\n      this.ctrlQuery().setValue(valuePair);\n    });\n  }\n}\n","@if(formGroup()) {\n  <form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup()!\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"h-full w-full px-3 flex flex-col gap-3\">\n      <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\n        <spx-input [formControl]=\"ctrlQuery()\" [spxLabel]=\"txtQuery()\" [spxType]=\"inputTypeText\">\n        </spx-input>\n        <spx-input [formControl]=\"ctrlOptions()\" [spxLabel]=\"txtOptions()\" [spxSuggestions]=\"spxSuggestions()\"\n          [spxType]=\"inputTypeRadio\">\n        </spx-input>\n      </div>\n      <div class=\"py-3 flex flex-col gap-3\">\n        <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\n          Save\n        </spx-button>\n        <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\n          Cancel\n        </spx-button>\n      </div>\n    </div>\n  </form>\n}\n","import { AbstractControl, FormArray, FormGroup, ValidationErrors } from \"@angular/forms\";\n\nexport const checkRequired = (control: AbstractControl): boolean => {\n    // Check of deze control zelf 'required' is\n    const errors: ValidationErrors | null = control.validator?.({} as AbstractControl) ?? null;\n    if (errors?.['required']) {\n        return true;\n    }\n\n    // Als het een FormGroup of FormArray is, check alle children\n    if (control instanceof FormGroup || control instanceof FormArray) {\n        return Object.values(control.controls).some(child => checkRequired(child));\n    }\n    return false;\n}\n","import { ChangeDetectionStrategy, Component, ElementRef, inject, input, output, signal, viewChildren } from '@angular/core';\nimport { SpxFormSectionI } from './spx-form-section.interface';\nimport { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, ValidationErrors } from '@angular/forms';\nimport { SpxFormFieldI } from './spx-form-field.interface';\nimport { SpxAutocompleteSearchComponent } from './spx-autocomplete-search.component';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { SpxFormI } from './spx-form.interface';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\nimport { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';\nimport { SpxFormSectionComponent } from '@softpak/components/spx-form-section';\nimport { SpxInputComponent, SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\nimport { SpxValidateControlComponent } from '@softpak/components/spx-validation';\nimport { checkRequired } from './spx-check-required.const';\n\n@Component({\n  selector: 'spx-form-view',\n  imports: [\n    FormsModule,\n    ReactiveFormsModule,\n    SpxAutocompleteSearchComponent,\n    SpxButtonComponent,\n    SpxCapitalizePipe,\n    SpxFormSectionComponent,\n    SpxInputComponent,\n    SpxValidateControlComponent,\n    TranslateModule\n  ],\n  templateUrl: './spx-form-view.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class SpxFormViewComponent {\n  readonly checkRequired = checkRequired;\n  readonly formBuilder = inject(FormBuilder);\n  readonly spxFormGroup = input.required<FormGroup>();\n  readonly spxForm = input.required<SpxFormI>();\n  readonly spxSuggestions = input.required<any>();\n  spxBlur = output<{ field: SpxFormFieldI, valuePair: SpxValuePair<any> }>();\n  spxClick = output<{ field: SpxFormFieldI }>();\n  spxSearch = output<{ field: SpxFormFieldI, valuePair: SpxValuePair<any> }>();\n  spxInputs = viewChildren(ElementRef<SpxInputComponent>);\n  autoCompleteField = signal<SpxFormFieldI | null>(null);\n  typeAutocomplete = SpxInputTypeEnum.autocomplete;\n  typeButton = SpxInputTypeEnum.button;\n  typeFloat = SpxInputTypeEnum.float;\n  typeNumber = SpxInputTypeEnum.number;\n  typeRadio = SpxInputTypeEnum.radio;\n  typeText = SpxInputTypeEnum.text;\n  typeNumericKeyboard = SpxInputTypeEnum.textNumericKeyboard;\n  typeOverlay = SpxInputTypeEnum.overlay;\n  typeOverlayNumber = SpxInputTypeEnum.overlayNumber;\n\n  setAutofocus(key: string): void {\n    const field = this.spxInputs().find(input => input.nativeElement.spxName() === key);\n    if (field) {\n      field.nativeElement.setFocusIn();\n    }\n  }\n\n  onBlur(field: SpxFormFieldI) {\n    this.spxBlur.emit({\n      field,\n      valuePair: this.spxFormGroup().get(field.key)!.value,\n    });\n  }\n\n  onClick(field: SpxFormFieldI) {\n    this.spxClick.emit({\n      field,\n    });\n  }\n\n  onAutocompleteCancel(): void {\n    this.autoCompleteField.set(null);\n  }\n\n  onAutocompleteSearch(valuePair: SpxValuePair<any>): void {\n    if (this.autoCompleteField()) {\n      this.spxSearch.emit({\n        field: this.autoCompleteField()!,\n        valuePair,\n      });\n    }\n  }\n\n  onAutocompleteSave(valuePair: SpxValuePair<any>) {\n    this.spxFormGroup().get(this.autoCompleteField()!.key)?.setValue(valuePair);\n    this.autoCompleteField.set(null);\n  }\n\n  onSearch(field: SpxFormFieldI) {\n    this.autoCompleteField.set(field);\n  }\n\n  getRawValidators(formControl: AbstractControl) {\n    // eslint-disable-next-line no-underscore-dangle\n    return (formControl as any)._rawValidators;\n  }\n\n  static createForm(form: SpxFormI): FormGroup {\n    const controls = form.sections.flatMap(section => section.fields).reduce((acc, field) => {\n      const control = new FormControl(\n        field.defaultValue?.() as any ?? null,\n        field.defaultValidators?.() ?? []\n      );\n\n      // Koppel automatisch afterValueChange als die bestaat\n      if (field.afterValueChange) {\n        console.log('avc 1');\n        control.valueChanges.subscribe((valuePair) => {\n          field.afterValueChange!(valuePair as SpxValuePair<boolean | string | number> | null);\n           console.log('avc 2', valuePair);\n        });\n      }\n\n      acc[field.key] = control;\n      return acc;\n    }, {} as { [key: string]: FormControl });\n    return new FormGroup(controls);\n  }\n}\n","@if (autoCompleteField()) {\n  <spx-autocomplete-search\n    [spxField]=\"autoCompleteField()!\"\n    [spxSuggestions]=\"this.spxSuggestions()[autoCompleteField()!.key]\"\n    [spxValuePair]=\"$any(this.spxFormGroup().get(autoCompleteField()!.key)).value\"\n    [txtOptions]=\"'Options'\"\n    [txtQuery]=\"'Query'\"\n    [txtSubmit]=\"'Save'\"\n    (spxCancel)=\"onAutocompleteCancel()\"\n    (spxSearch)=\"onAutocompleteSearch($event)\"\n    (spxSubmit)=\"onAutocompleteSave($event)\">\n  </spx-autocomplete-search>\n}\n<div class=\"flex flex-col gap-3\">\n  @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\n    <spx-form-section\n      [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\n      [spxIndex]=\"spxSectionIndex + 1\"\n      [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\n      @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\n        @if (spxField.show === undefined || spxField.show()) {\n          @if (spxField.type() === typeButton) {\n            <spx-button\n              [spxFullWidth]=\"true\"\n              [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\n              [spxType]=\"'button'\"\n              (spxClick)=\"onClick(spxField)\"\n            >{{ (spxField.label ? spxField.label() : spxField.key) | translate  | capitalize }}</spx-button>\n          }\n          @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\n            <spx-input\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n              [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\n              [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate  | capitalize\"\n              [spxName]=\"spxField.key\"\n              [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n              [spxRequired]=\"checkRequired(this.spxFormGroup().get(spxField.key)!)\"\n              [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\n              [spxShowHelp]=\"false\"\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n              [spxStep]=\"spxField.step ? spxField.step() : undefined\"\n              [spxType]=\"spxField.type()\"\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n              (spxBlur)=\"onBlur(spxField)\"\n              (spxSearch)=\"onSearch(spxField)\">\n              <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate  | capitalize\"></spx-validate-control>\n            </spx-input>\n          }\n          @if (spxField.type() === typeRadio) {\n            <spx-input\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\n              [spxName]=\"spxField.key\"\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n              [spxRequired]=\"checkRequired(this.spxFormGroup().get(spxField.key)!)\"\n              [spxShowHelp]=\"false\"\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n              [spxType]=\"typeRadio\"\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\n              <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\n            </spx-input>\n          }\n        }\n        \n      }\n    </spx-form-section>\n  }\n\n  @for (spxButton of spxForm().buttons; track spxButton) {\n    <spx-button\n      [spxFullWidth]=\"true\"\n      [spxSeverity]=\"spxButton.severity\"\n      [spxType]=\"spxButton.type\"\n      (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\n      {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\n    </spx-button>\n  }\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"softpak-components-spx-form-view.mjs","sources":["../../../../projects/softpak/components/spx-form-view/spx-form-button-type.enum.ts","../../../../projects/softpak/components/spx-form-view/spx-autocomplete-search.component.ts","../../../../projects/softpak/components/spx-form-view/spx-autocomplete-search.component.html","../../../../projects/softpak/components/spx-form-view/spx-check-required.const.ts","../../../../projects/softpak/components/spx-form-view/spx-form-view.component.ts","../../../../projects/softpak/components/spx-form-view/spx-form-view.component.html","../../../../projects/softpak/components/spx-form-view/softpak-components-spx-form-view.ts"],"sourcesContent":["export enum SpxFormButtonTypeEnum {\n    button = 'button',\n    submit = 'submit',\n}\n","import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, computed, input, output, signal } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { Subscription, debounceTime } from 'rxjs';\n\nimport { SpxFormFieldI } from './spx-form-field.interface';\nimport { SpxFormSectionI } from './spx-form-section.interface';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\nimport { SpxSeverityEnum, unsubscribeSubscriptions } from '@softpak/components/spx-helpers';\nimport { SpxInputComponent, SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\n\nexport const sectionAutocompleteSearch = 'autocompleteSearch';\nexport const ctrlQuery = 'query';\nexport const ctrlOptions = 'options';\n\n@Component({\n    selector: 'spx-autocomplete-search',\n    templateUrl: './spx-autocomplete-search.component.html',\n    imports: [\n        FormsModule,\n        ReactiveFormsModule,\n        SpxButtonComponent,\n        SpxInputComponent,\n    ],\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpxAutocompleteSearchComponent implements OnInit, OnDestroy {\n  formGroup = signal<FormGroup | null>(null);\n  readonly spxSuggestions = input<SpxValuePair<any>[]>([]);\n  readonly spxField = input.required<SpxFormFieldI>();\n  readonly txtOptions = input.required<string>();\n  readonly txtQuery = input.required<string>();\n  readonly txtSubmit = input.required<string>();\n  readonly spxValuePair = input.required<SpxValuePair<any>>();\n  spxCancel = output();\n  spxSearch = output<SpxValuePair<any>>();\n  spxSubmit = output<SpxValuePair<any>>();\n  inputTypeRadio = SpxInputTypeEnum.radio;\n  inputTypeText = SpxInputTypeEnum.text;\n  SpxSeverity = SpxSeverityEnum;\n \n  sections: SpxFormSectionI[] = [\n    {\n      key: sectionAutocompleteSearch,\n      showTitle: () => false,\n      fields: [\n        {\n          key: ctrlQuery,\n          type: () => SpxInputTypeEnum.text,\n          label: () => this.txtQuery(),\n          capitalize: () => true,\n        },\n        {\n          key: ctrlOptions,\n          type: () => SpxInputTypeEnum.radio,\n          label: () => this.txtOptions(),\n        },\n      ]\n    }\n  ];\n\n  readonly ctrlQuery = computed(() => this.formGroup()?.get(ctrlQuery) as FormControl);\n  readonly ctrlOptions = computed(() => this.formGroup()?.get(ctrlOptions) as FormControl);\n\n  private subscriptions: {\n    subSelection?: Subscription;\n    subQuery?: Subscription;\n  } = {};\n\n  constructor(readonly formBuilder: FormBuilder) {\n    this.createForm();\n  }\n\n  ngOnInit(): void {\n    this.listenToSelection();\n    this.listenToQuery();\n    const spxValuePair = this.spxValuePair();\n    this.ctrlQuery().setValue(spxValuePair, { emitEvent: false });\n    this.spxSearch.emit(spxValuePair);\n  }\n\n  ngOnDestroy(): void {\n    unsubscribeSubscriptions(this.subscriptions);\n  }\n\n  private createForm(): void {\n    this.formGroup.set(this.formBuilder.group({\n      [ctrlQuery]: [null],\n      [ctrlOptions]: [null],\n    }));\n  }\n\n  getRawValidators(formControl: FormControl) {\n    return (formControl as any)._rawValidators;\n  }\n\n  onCancel(): void {\n    this.spxCancel.emit();\n  }\n  \n  onSubmit(): void {\n    this.spxSubmit.emit(this.ctrlQuery().value);\n  }\n\n  private listenToQuery(): void {\n    this.subscriptions.subQuery = this.ctrlQuery().valueChanges.pipe(debounceTime(500)).subscribe(valuePair => {\n      this.spxSearch.emit(valuePair);\n    });\n  }\n\n  private listenToSelection(): void {\n    this.subscriptions.subSelection = this.ctrlOptions().valueChanges.subscribe(valuePair => {\n      this.ctrlQuery().setValue(valuePair);\n    });\n  }\n}\n","@if(formGroup()) {\n  <form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup()!\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"h-full w-full px-3 flex flex-col gap-3\">\n      <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\n        <spx-input [formControl]=\"ctrlQuery()\" [spxLabel]=\"txtQuery()\" [spxType]=\"inputTypeText\">\n        </spx-input>\n        <spx-input [formControl]=\"ctrlOptions()\" [spxLabel]=\"txtOptions()\" [spxSuggestions]=\"spxSuggestions()\"\n          [spxType]=\"inputTypeRadio\">\n        </spx-input>\n      </div>\n      <div class=\"py-3 flex flex-col gap-3\">\n        <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\n          Save\n        </spx-button>\n        <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\n          Cancel\n        </spx-button>\n      </div>\n    </div>\n  </form>\n}\n","import { AbstractControl, FormArray, FormGroup, ValidationErrors } from \"@angular/forms\";\n\nexport const checkRequired = (control: AbstractControl): boolean => {\n    // Check of deze control zelf 'required' is\n    const errors: ValidationErrors | null = control.validator?.({} as AbstractControl) ?? null;\n    if (errors?.['required']) {\n        return true;\n    }\n\n    // Als het een FormGroup of FormArray is, check alle children\n    if (control instanceof FormGroup || control instanceof FormArray) {\n        return Object.values(control.controls).some(child => checkRequired(child));\n    }\n    return false;\n}\n","import { ChangeDetectionStrategy, Component, ElementRef, inject, input, output, signal, viewChildren } from '@angular/core';\nimport { SpxFormSectionI } from './spx-form-section.interface';\nimport { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, ValidationErrors } from '@angular/forms';\nimport { SpxFormFieldI } from './spx-form-field.interface';\nimport { SpxAutocompleteSearchComponent } from './spx-autocomplete-search.component';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { SpxFormI } from './spx-form.interface';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\nimport { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';\nimport { SpxFormSectionComponent } from '@softpak/components/spx-form-section';\nimport { SpxInputComponent, SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\nimport { SpxValidateControlComponent } from '@softpak/components/spx-validation';\nimport { checkRequired } from './spx-check-required.const';\n\n@Component({\n  selector: 'spx-form-view',\n  imports: [\n    FormsModule,\n    ReactiveFormsModule,\n    SpxAutocompleteSearchComponent,\n    SpxButtonComponent,\n    SpxCapitalizePipe,\n    SpxFormSectionComponent,\n    SpxInputComponent,\n    SpxValidateControlComponent,\n    TranslateModule\n  ],\n  templateUrl: './spx-form-view.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class SpxFormViewComponent {\n  readonly checkRequired = checkRequired;\n  readonly formBuilder = inject(FormBuilder);\n  readonly spxFormGroup = input.required<FormGroup>();\n  readonly spxForm = input.required<SpxFormI>();\n  readonly spxSuggestions = input.required<any>();\n  spxBlur = output<{ field: SpxFormFieldI, valuePair: SpxValuePair<any> }>();\n  spxClick = output<{ field: SpxFormFieldI }>();\n  spxSearch = output<{ field: SpxFormFieldI, valuePair: SpxValuePair<any> }>();\n  spxInputs = viewChildren(ElementRef<SpxInputComponent>);\n  autoCompleteField = signal<SpxFormFieldI | null>(null);\n  typeAutocomplete = SpxInputTypeEnum.autocomplete;\n  typeButton = SpxInputTypeEnum.button;\n  typeFloat = SpxInputTypeEnum.float;\n  typeNumber = SpxInputTypeEnum.number;\n  typeRadio = SpxInputTypeEnum.radio;\n  typeText = SpxInputTypeEnum.text;\n  typeNumericKeyboard = SpxInputTypeEnum.textNumericKeyboard;\n  typeOverlay = SpxInputTypeEnum.overlay;\n  typeOverlayNumber = SpxInputTypeEnum.overlayNumber;\n\n  setAutofocus(key: string): void {\n    const field = this.spxInputs().find(input => input.nativeElement.spxName() === key);\n    if (field) {\n      field.nativeElement.setFocusIn();\n    }\n  }\n\n  onBlur(field: SpxFormFieldI) {\n    this.spxBlur.emit({\n      field,\n      valuePair: this.spxFormGroup().get(field.key)!.value,\n    });\n  }\n\n  onClick(field: SpxFormFieldI) {\n    this.spxClick.emit({\n      field,\n    });\n  }\n\n  onAutocompleteCancel(): void {\n    this.autoCompleteField.set(null);\n  }\n\n  onAutocompleteSearch(valuePair: SpxValuePair<any>): void {\n    if (this.autoCompleteField()) {\n      this.spxSearch.emit({\n        field: this.autoCompleteField()!,\n        valuePair,\n      });\n    }\n  }\n\n  onAutocompleteSave(valuePair: SpxValuePair<any>) {\n    this.spxFormGroup().get(this.autoCompleteField()!.key)?.setValue(valuePair);\n    this.autoCompleteField.set(null);\n  }\n\n  onSearch(field: SpxFormFieldI) {\n    this.autoCompleteField.set(field);\n  }\n\n  getRawValidators(formControl: AbstractControl) {\n    // eslint-disable-next-line no-underscore-dangle\n    return (formControl as any)._rawValidators;\n  }\n\n  static createForm(form: SpxFormI): FormGroup {\n    const controls = form.sections.flatMap(section => section.fields).reduce((acc, field) => {\n      const control = new FormControl(\n        field.defaultValue?.() as any ?? null,\n        field.defaultValidators?.() ?? []\n      );\n\n      // Koppel automatisch afterValueChange als die bestaat\n      if (field.afterValueChange) {\n        console.log('avc 1');\n        control.valueChanges.subscribe((valuePair) => {\n          field.afterValueChange!(valuePair as SpxValuePair<boolean | string | number> | null);\n           console.log('avc 2', valuePair);\n        });\n      }\n\n      acc[field.key] = control;\n      return acc;\n    }, {} as { [key: string]: FormControl });\n    return new FormGroup(controls);\n  }\n}\n","@if (autoCompleteField()) {\n  <spx-autocomplete-search\n    [spxField]=\"autoCompleteField()!\"\n    [spxSuggestions]=\"this.spxSuggestions()[autoCompleteField()!.key]\"\n    [spxValuePair]=\"$any(this.spxFormGroup().get(autoCompleteField()!.key)).value\"\n    [txtOptions]=\"'Options'\"\n    [txtQuery]=\"'Query'\"\n    [txtSubmit]=\"'Save'\"\n    (spxCancel)=\"onAutocompleteCancel()\"\n    (spxSearch)=\"onAutocompleteSearch($event)\"\n    (spxSubmit)=\"onAutocompleteSave($event)\">\n  </spx-autocomplete-search>\n}\n<div class=\"flex flex-col gap-3\">\n  @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\n    <spx-form-section\n      [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\n      [spxIndex]=\"spxSectionIndex + 1\"\n      [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\n      @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\n        @if (spxField.show === undefined || spxField.show()) {\n          @if (spxField.type() === typeButton) {\n            <spx-button\n              [spxFullWidth]=\"true\"\n              [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\n              [spxType]=\"'button'\"\n              (spxClick)=\"onClick(spxField)\"\n            >{{ (spxField.label ? spxField.label() : spxField.key) | translate  | capitalize }}</spx-button>\n          }\n          @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\n            <spx-input\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n              [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\n              [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate  | capitalize\"\n              [spxName]=\"spxField.key\"\n              [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n              [spxRequired]=\"checkRequired(this.spxFormGroup().get(spxField.key)!)\"\n              [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\n              [spxShowHelp]=\"false\"\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n              [spxStep]=\"spxField.step ? spxField.step() : undefined\"\n              [spxType]=\"spxField.type()\"\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n              (spxBlur)=\"onBlur(spxField)\"\n              (spxSearch)=\"onSearch(spxField)\">\n              <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate  | capitalize\"></spx-validate-control>\n            </spx-input>\n          }\n          @if (spxField.type() === typeRadio) {\n            <spx-input\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\n              [spxName]=\"spxField.key\"\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n              [spxRequired]=\"checkRequired(this.spxFormGroup().get(spxField.key)!)\"\n              [spxShowHelp]=\"false\"\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n              [spxType]=\"typeRadio\"\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\n              <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\n            </spx-input>\n          }\n        }\n        \n      }\n    </spx-form-section>\n  }\n\n  @for (spxButton of spxForm().buttons; track spxButton) {\n    <spx-button\n      [spxFullWidth]=\"true\"\n      [spxSeverity]=\"spxButton.severity\"\n      [spxType]=\"spxButton.type\"\n      (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\n      {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\n    </spx-button>\n  }\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/softpak-components-spx-inputs.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, model, output, signal, HostListener, ChangeDetectionStrategy, Component, computed, viewChild } from '@angular/core';
+import { Injectable, inject, computed, input, model, output, signal, HostListener, ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
 import { SpxButtonComponent } from '@softpak/components/spx-button';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -60,8 +60,11 @@ class SpxInputBoxComponent {
         this.faQuestion = faQuestion;
         this.faTimes = faTimes;
         this.SpxSeverity = SpxSeverityEnum;
+        this.clearButtonName = computed(() => this.spxName() ? `${this.spxName}__clear_button` : undefined);
+        this.searchButtonName = computed(() => this.spxName() ? `${this.spxName}__search_button` : undefined);
         this.spxCompact = input();
         this.spxLabel = input();
+        this.spxName = input();
         this.spxReadonly = input(false);
         this.spxRequired = input();
         this.spxShowClear = input(true);
@@ -108,7 +111,7 @@ class SpxInputBoxComponent {
         this.spxHelp.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxValue: "spxValueChange", spxClear: "spxClear", spxSearch: "spxSearch", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSetIdInParent: "spxSetIdInParent" }, host: { listeners: { "click": "handleFocusIn()", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-3\"\n  [class.rounded-none]=\"this.spxShowValidationMessages()\"\n  [class.rounded-t]=\"this.spxShowValidationMessages()\"\n  [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.bg-white]=\"!this.spxReadonly()\"\n  [class.bg-gray-300]=\"this.spxReadonly()\"\n  [class.cursor-not-allowed]=\"this.spxReadonly()\"\n  \n  >\n  <div class=\"flex-auto p-3\"\n    [class.p-0]=\"this.spxCompact()\"\n    [class.flex]=\"this.spxCompact()\"\n    [class.items-center]=\"this.spxCompact()\">\n    @if (this.spxShowLabel()) {\n      <div class=\"font-bold text-sm mb-1 text-gray-800\"\n        [class.mb-0]=\"this.spxCompact()\"\n        [class.px-3]=\"this.spxCompact()\">\n        {{this.spxLabel()}} @if (spxRequired()) {\n        <span class=\"text-red-800\">*</span>\n      }\n    </div>\n  }\n\n  <ng-content select=\"[controls]\"></ng-content>\n</div>\n<div class=\"flex flex-none gap-1 p-1\">\n  @if (this.spxShowEdit()) {\n    <spx-button\n      (spxClick)=\"onEdit()\"\n      [spxFullHeight]=\"true\"\n      [spxSize]=\"'xl'\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowHelp()) {\n    <spx-button\n      (spxClick)=\"onHelp()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowSearch()) {\n    <spx-button\n      (spxClick)=\"onSearch()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowClear()) {\n    <spx-button\n      (spxClick)=\"onClear()\"\n      [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n      [spxFullHeight]=\"true\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n</div>\n</div>\n@if (this.spxShowValidationMessages()) {\n  <div class=\"bg-red-600 rounded-b text-white p-3\">\n    <ng-content select=\"[validation-messages]\"></ng-content>\n  </div>\n}\n@else if (this.spxAlert()) {\n  <div  [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\n  [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\n  [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\n  [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\n  [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\"\n  class=\"rounded-b text-white p-3\">\n  <div>\n    {{this.spxAlert()?.text}}\n  </div>\n</div>\n}", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxValue: "spxValueChange", spxClear: "spxClear", spxSearch: "spxSearch", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSetIdInParent: "spxSetIdInParent" }, host: { listeners: { "click": "handleFocusIn()", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-3\"\n  [class.rounded-none]=\"this.spxShowValidationMessages()\"\n  [class.rounded-t]=\"this.spxShowValidationMessages()\"\n  [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.bg-white]=\"!this.spxReadonly()\"\n  [class.bg-gray-300]=\"this.spxReadonly()\"\n  [class.cursor-not-allowed]=\"this.spxReadonly()\"\n  \n  >\n  <div class=\"flex-auto p-3\"\n    [class.p-0]=\"this.spxCompact()\"\n    [class.flex]=\"this.spxCompact()\"\n    [class.items-center]=\"this.spxCompact()\">\n    @if (this.spxShowLabel()) {\n      <div class=\"font-bold text-sm mb-1 text-gray-800\"\n        [class.mb-0]=\"this.spxCompact()\"\n        [class.px-3]=\"this.spxCompact()\">\n        {{this.spxLabel()}} @if (spxRequired()) {\n        <span class=\"text-red-800\">*</span>\n      }\n    </div>\n  }\n\n  <ng-content select=\"[controls]\"></ng-content>\n</div>\n<div class=\"flex flex-none gap-1 p-1\">\n  @if (this.spxShowEdit()) {\n    <spx-button\n      (spxClick)=\"onEdit()\"\n      [spxFullHeight]=\"true\"\n      [spxSize]=\"'xl'\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowHelp()) {\n    <spx-button\n      (spxClick)=\"onHelp()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowSearch()) {\n    <spx-button\n      (spxClick)=\"onSearch()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxName]=\"clearButtonName()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowClear()) {\n    <spx-button\n      (spxClick)=\"onClear()\"\n      [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n      [spxFullHeight]=\"true\"\n      [spxName]=\"clearButtonName()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n</div>\n</div>\n@if (this.spxShowValidationMessages()) {\n  <div class=\"bg-red-600 rounded-b text-white p-3\">\n    <ng-content select=\"[validation-messages]\"></ng-content>\n  </div>\n}\n@else if (this.spxAlert()) {\n  <div  [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\n  [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\n  [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\n  [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\n  [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\"\n  class=\"rounded-b text-white p-3\">\n  <div>\n    {{this.spxAlert()?.text}}\n  </div>\n</div>\n}", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
             type: Component,
@@ -118,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
                         IsSeverityPipe
                     ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "(click)": "handleFocusIn()"
-                    }, template: "<div class=\"flex rounded w-full gap-3\"\n  [class.rounded-none]=\"this.spxShowValidationMessages()\"\n  [class.rounded-t]=\"this.spxShowValidationMessages()\"\n  [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.bg-white]=\"!this.spxReadonly()\"\n  [class.bg-gray-300]=\"this.spxReadonly()\"\n  [class.cursor-not-allowed]=\"this.spxReadonly()\"\n  \n  >\n  <div class=\"flex-auto p-3\"\n    [class.p-0]=\"this.spxCompact()\"\n    [class.flex]=\"this.spxCompact()\"\n    [class.items-center]=\"this.spxCompact()\">\n    @if (this.spxShowLabel()) {\n      <div class=\"font-bold text-sm mb-1 text-gray-800\"\n        [class.mb-0]=\"this.spxCompact()\"\n        [class.px-3]=\"this.spxCompact()\">\n        {{this.spxLabel()}} @if (spxRequired()) {\n        <span class=\"text-red-800\">*</span>\n      }\n    </div>\n  }\n\n  <ng-content select=\"[controls]\"></ng-content>\n</div>\n<div class=\"flex flex-none gap-1 p-1\">\n  @if (this.spxShowEdit()) {\n    <spx-button\n      (spxClick)=\"onEdit()\"\n      [spxFullHeight]=\"true\"\n      [spxSize]=\"'xl'\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowHelp()) {\n    <spx-button\n      (spxClick)=\"onHelp()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowSearch()) {\n    <spx-button\n      (spxClick)=\"onSearch()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowClear()) {\n    <spx-button\n      (spxClick)=\"onClear()\"\n      [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n      [spxFullHeight]=\"true\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n</div>\n</div>\n@if (this.spxShowValidationMessages()) {\n  <div class=\"bg-red-600 rounded-b text-white p-3\">\n    <ng-content select=\"[validation-messages]\"></ng-content>\n  </div>\n}\n@else if (this.spxAlert()) {\n  <div  [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\n  [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\n  [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\n  [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\n  [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\"\n  class=\"rounded-b text-white p-3\">\n  <div>\n    {{this.spxAlert()?.text}}\n  </div>\n</div>\n}" }]
+                    }, template: "<div class=\"flex rounded w-full gap-3\"\n  [class.rounded-none]=\"this.spxShowValidationMessages()\"\n  [class.rounded-t]=\"this.spxShowValidationMessages()\"\n  [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.bg-white]=\"!this.spxReadonly()\"\n  [class.bg-gray-300]=\"this.spxReadonly()\"\n  [class.cursor-not-allowed]=\"this.spxReadonly()\"\n  \n  >\n  <div class=\"flex-auto p-3\"\n    [class.p-0]=\"this.spxCompact()\"\n    [class.flex]=\"this.spxCompact()\"\n    [class.items-center]=\"this.spxCompact()\">\n    @if (this.spxShowLabel()) {\n      <div class=\"font-bold text-sm mb-1 text-gray-800\"\n        [class.mb-0]=\"this.spxCompact()\"\n        [class.px-3]=\"this.spxCompact()\">\n        {{this.spxLabel()}} @if (spxRequired()) {\n        <span class=\"text-red-800\">*</span>\n      }\n    </div>\n  }\n\n  <ng-content select=\"[controls]\"></ng-content>\n</div>\n<div class=\"flex flex-none gap-1 p-1\">\n  @if (this.spxShowEdit()) {\n    <spx-button\n      (spxClick)=\"onEdit()\"\n      [spxFullHeight]=\"true\"\n      [spxSize]=\"'xl'\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowHelp()) {\n    <spx-button\n      (spxClick)=\"onHelp()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowSearch()) {\n    <spx-button\n      (spxClick)=\"onSearch()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxName]=\"clearButtonName()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowClear()) {\n    <spx-button\n      (spxClick)=\"onClear()\"\n      [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n      [spxFullHeight]=\"true\"\n      [spxName]=\"clearButtonName()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n</div>\n</div>\n@if (this.spxShowValidationMessages()) {\n  <div class=\"bg-red-600 rounded-b text-white p-3\">\n    <ng-content select=\"[validation-messages]\"></ng-content>\n  </div>\n}\n@else if (this.spxAlert()) {\n  <div  [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\n  [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\n  [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\n  [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\n  [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\"\n  class=\"rounded-b text-white p-3\">\n  <div>\n    {{this.spxAlert()?.text}}\n  </div>\n</div>\n}" }]
         }], propDecorators: { handleFocusIn: [{
                 type: HostListener,
                 args: ['focusin', ["$event"]]
@@ -166,7 +169,7 @@ class SpxDropdownComponent {
         this.spxSelect.emit(valuePair);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative text-black\">\n  <div\n    class=\"absolute bg-gray-100 left-0 right-0 z-20\">\n    @for (valuePair of this.spxSuggestions(); track valuePair; let i = $index) {\n      <button\n        class=\"text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left\"\n        [class.bg-gray-100]=\"i === this.focusPosition()\"\n        [class.bg-white]=\"i !== this.focusPosition()\"\n        (click)=\"this.handleSuggestionClick(valuePair)\"\n        [attr.tabindex]=\"-1\"\n        [attr.type]=\"'button'\">\n        <div class=\"flex-1 p-1 font-bold text-lg\">{{valuePair?.description}}</div>\n        <spx-button (spxClick)=\"this.handleSuggestionClick(valuePair)\" [spxType]=\"'button'\" [spxTabIndex]=\"-1\">Select</spx-button>\n      </button>\n    }\n  </div>\n</div>", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative text-black\">\n  <div\n    class=\"absolute bg-gray-100 left-0 right-0 z-20\">\n    @for (valuePair of this.spxSuggestions(); track valuePair; let i = $index) {\n      <button\n        class=\"text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left\"\n        [class.bg-gray-100]=\"i === this.focusPosition()\"\n        [class.bg-white]=\"i !== this.focusPosition()\"\n        (click)=\"this.handleSuggestionClick(valuePair)\"\n        [attr.tabindex]=\"-1\"\n        [attr.type]=\"'button'\">\n        <div class=\"flex-1 p-1 font-bold text-lg\">{{valuePair?.description}}</div>\n        <spx-button (spxClick)=\"this.handleSuggestionClick(valuePair)\" [spxType]=\"'button'\" [spxTabIndex]=\"-1\">Select</spx-button>\n      </button>\n    }\n  </div>\n</div>", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxDropdownComponent, decorators: [{
             type: Component,
@@ -253,7 +256,7 @@ class SpxInputTextComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputTextComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\n  <input\n    #input\n    class=\"font-bold text-lg w-full outline-none\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.autocomplete]=\"this.spxAutocomplete()\"\n    [attr.autofocus]=\"this.spxAutofocus()\"\n    [attr.inputMode]=\"this.spxInputMode()\"\n    [attr.pattern]=\"this.spxPattern()\"\n    [attr.name]=\"this.spxName()\"\n    [attr.type]=\"this.spxType()\"\n    [class.bg-white]=\"!this.spxReadonly()\"\n    [class.bg-gray-300]=\"this.spxReadonly()\"\n    [class.cursor-not-allowed]=\"this.spxReadonly()\"\n    [class.uppercase]=\"this.spxCapitalize()\"\n    [disabled]=\"this.mappedReadonly()\"\n    [ngModel]=\"\n      this.value()?.description\n        ? this.value()?.description\n        : this.value()?.value\n    \"\n    (ngModelChange)=\"this.handleChange($event)\"\n  />\n  @if (this.value()?.description && this.value()?.value &&\n  this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n  <span>{{ this.value()?.value }}</span>\n  } @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType()\n  === 'overlaynumber')) {\n  <spx-dropdown\n    [spxSuggestions]=\"this.spxSuggestions()\"\n    (spxSelect)=\"this.handleSuggestionClick($event)\"\n  >\n  </spx-dropdown>\n  } @if (this.spxSpeedDial()) {\n  <div class=\"flex flex-wrap gap-3\">\n    @for (speedDial of this.spxSpeedDial(); track $index) {\n    <button class=\"px-3 px-1\" [ngClass]=\"'bg-' + speedDial.backgroundColor\" (click)=\"doSelect(speedDial)\">\n      {{ speedDial.valuePair.description }}\n    </button>\n    }\n  </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\n  <input #input class=\"font-bold text-lg w-full outline-none\" autocomplete=\"off\" spellcheck=\"false\"\n    [attr.autocomplete]=\"this.spxAutocomplete()\" [attr.autofocus]=\"this.spxAutofocus()\"\n    [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"this.spxPattern()\" [attr.name]=\"this.spxName()\"\n    [attr.type]=\"this.spxType()\" [class.bg-white]=\"!this.spxReadonly()\" [class.bg-gray-300]=\"this.spxReadonly()\"\n    [class.cursor-not-allowed]=\"this.spxReadonly()\" [class.uppercase]=\"this.spxCapitalize()\"\n    [disabled]=\"this.mappedReadonly()\" [ngModel]=\"\n      this.value()?.description\n        ? this.value()?.description\n        : this.value()?.value\n    \" (ngModelChange)=\"this.handleChange($event)\" />\n  @if (this.value()?.description && this.value()?.value &&\n  this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n  <span>{{ this.value()?.value }}</span>\n  } @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType()\n  === 'overlaynumber')) {\n  <spx-dropdown [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\n  </spx-dropdown>\n  } @if (this.spxSpeedDial()) {\n  <div class=\"flex flex-wrap gap-3\">\n    @for (speedDial of this.spxSpeedDial(); track $index) {\n    <button class=\"px-3 px-1\" [ngClass]=\"'bg-' + speedDial.backgroundColor\" (click)=\"doSelect(speedDial)\">\n      {{ speedDial.valuePair.description }}\n    </button>\n    }\n  </div>\n  }\n</div>", dependencies: [{ kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputTextComponent, decorators: [{
             type: Component,
@@ -262,7 +265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
                         ReactiveFormsModule,
                         FormsModule,
                         NgClass,
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\n  <input\n    #input\n    class=\"font-bold text-lg w-full outline-none\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.autocomplete]=\"this.spxAutocomplete()\"\n    [attr.autofocus]=\"this.spxAutofocus()\"\n    [attr.inputMode]=\"this.spxInputMode()\"\n    [attr.pattern]=\"this.spxPattern()\"\n    [attr.name]=\"this.spxName()\"\n    [attr.type]=\"this.spxType()\"\n    [class.bg-white]=\"!this.spxReadonly()\"\n    [class.bg-gray-300]=\"this.spxReadonly()\"\n    [class.cursor-not-allowed]=\"this.spxReadonly()\"\n    [class.uppercase]=\"this.spxCapitalize()\"\n    [disabled]=\"this.mappedReadonly()\"\n    [ngModel]=\"\n      this.value()?.description\n        ? this.value()?.description\n        : this.value()?.value\n    \"\n    (ngModelChange)=\"this.handleChange($event)\"\n  />\n  @if (this.value()?.description && this.value()?.value &&\n  this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n  <span>{{ this.value()?.value }}</span>\n  } @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType()\n  === 'overlaynumber')) {\n  <spx-dropdown\n    [spxSuggestions]=\"this.spxSuggestions()\"\n    (spxSelect)=\"this.handleSuggestionClick($event)\"\n  >\n  </spx-dropdown>\n  } @if (this.spxSpeedDial()) {\n  <div class=\"flex flex-wrap gap-3\">\n    @for (speedDial of this.spxSpeedDial(); track $index) {\n    <button class=\"px-3 px-1\" [ngClass]=\"'bg-' + speedDial.backgroundColor\" (click)=\"doSelect(speedDial)\">\n      {{ speedDial.valuePair.description }}\n    </button>\n    }\n  </div>\n  }\n</div>\n" }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\n  <input #input class=\"font-bold text-lg w-full outline-none\" autocomplete=\"off\" spellcheck=\"false\"\n    [attr.autocomplete]=\"this.spxAutocomplete()\" [attr.autofocus]=\"this.spxAutofocus()\"\n    [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"this.spxPattern()\" [attr.name]=\"this.spxName()\"\n    [attr.type]=\"this.spxType()\" [class.bg-white]=\"!this.spxReadonly()\" [class.bg-gray-300]=\"this.spxReadonly()\"\n    [class.cursor-not-allowed]=\"this.spxReadonly()\" [class.uppercase]=\"this.spxCapitalize()\"\n    [disabled]=\"this.mappedReadonly()\" [ngModel]=\"\n      this.value()?.description\n        ? this.value()?.description\n        : this.value()?.value\n    \" (ngModelChange)=\"this.handleChange($event)\" />\n  @if (this.value()?.description && this.value()?.value &&\n  this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n  <span>{{ this.value()?.value }}</span>\n  } @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType()\n  === 'overlaynumber')) {\n  <spx-dropdown [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\n  </spx-dropdown>\n  } @if (this.spxSpeedDial()) {\n  <div class=\"flex flex-wrap gap-3\">\n    @for (speedDial of this.spxSpeedDial(); track $index) {\n    <button class=\"px-3 px-1\" [ngClass]=\"'bg-' + speedDial.backgroundColor\" (click)=\"doSelect(speedDial)\">\n      {{ speedDial.valuePair.description }}\n    </button>\n    }\n  </div>\n  }\n</div>" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 class SpxInputFloatComponent {
@@ -510,7 +513,7 @@ class SpxInputTimeModalComponent {
         this.modalController.dismiss(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputTimeModalComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SpxInputTimeModalComponent, isStandalone: true, selector: "spx-input-time-modal", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ion-title>Select {{view()}}</ion-title>\n    <ion-buttons slot=\"end\">\n      <spx-button [spxSeverity]=\"typeError\" (spxClick)=\"closeDialog()\">\n        <fa-icon [icon]=\"faXmark\"></fa-icon>\n      </spx-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content class=\"ion-padding bg-white\">\n  <!-- Uren -->\n  <div class=\"custom-bg grid grid-cols-1 gap-3\">\n    @if (view() === 'hours') {\n      <div class=\"flex-wrap gap-2\">\n        <div class=\"grid grid-cols-3 md:grid-cols-4 gap-3\">\n          @for (hour of hourOptions(); track hour) {\n            <div  class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === hour\" (click)=\"onChange(hour)\">\n              {{ hour }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <!-- Minuten -->\n    @if (view() === 'minutes') {\n      <div class=\"grid grid-cols-1 gap-3\">\n        <div class=\"grid grid-cols-4 md:grid-cols-5 gap-3\">\n          @for (minute of minuteOptions(); track minute) {\n            <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === minute\" (click)=\"onChange(minute)\">\n              {{ minute }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ion-content>", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SpxInputTimeModalComponent, isStandalone: true, selector: "spx-input-time-modal", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ion-title>Select {{view()}}</ion-title>\n    <ion-buttons slot=\"end\">\n      <spx-button [spxSeverity]=\"typeError\" (spxClick)=\"closeDialog()\">\n        <fa-icon [icon]=\"faXmark\"></fa-icon>\n      </spx-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content class=\"ion-padding bg-white\">\n  <!-- Uren -->\n  <div class=\"custom-bg grid grid-cols-1 gap-3\">\n    @if (view() === 'hours') {\n      <div class=\"flex-wrap gap-2\">\n        <div class=\"grid grid-cols-3 md:grid-cols-4 gap-3\">\n          @for (hour of hourOptions(); track hour) {\n            <div  class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === hour\" (click)=\"onChange(hour)\">\n              {{ hour }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <!-- Minuten -->\n    @if (view() === 'minutes') {\n      <div class=\"grid grid-cols-1 gap-3\">\n        <div class=\"grid grid-cols-4 md:grid-cols-5 gap-3\">\n          @for (minute of minuteOptions(); track minute) {\n            <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === minute\" (click)=\"onChange(minute)\">\n              {{ minute }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ion-content>", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
             type: Component,
@@ -849,6 +852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
 
 class SpxInputComponent {
     constructor() {
+        this.mappedName = computed(() => this.spxName() ?? undefined);
         this.mappedReadonly = computed(() => this.spxReadonly() === true ? true : undefined);
         this.spxSpeedDial = input([]);
         this.spxLabel = input('label');
@@ -983,7 +987,7 @@ class SpxInputComponent {
                 useExisting: SpxInputComponent,
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\n  (spxClear)=\"this.handleClear()\"\n  (spxEdit)=\"this.handleEdit()\"\n  (spxHelp)=\"this.handleHelp()\"\n  (spxSearch)=\"this.handleSearch()\"\n  (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n  [spxAlert]=\"this.spxAlert()\"\n  [spxCompact]=\"this.spxCompact()\"\n  [spxLabel]=\"this.spxLabel()\"\n  [spxReadonly]=\"this.spxReadonly()\"\n  [spxRequired]=\"this.spxRequired()\"\n  [spxShowClear]=\"this.spxShowClear()\"\n  [spxShowEdit]=\"this.spxShowEdit()\"\n  [spxShowHelp]=\"this.spxShowHelp()\"\n  [spxShowLabel]=\"this.spxShowLabel()\"\n  [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n  [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n  [spxValue]=\"this.value()\"\n>\n  <div controls>\n    @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n    this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n    this.spxType() === 'password') {\n    <spx-input-text\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n      [spxSpeedDial]=\"this.spxSpeedDial()\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxCapitalize]=\"this.spxCapitalize()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n      [spxName]=\"this.spxName()\"\n      [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxType]=\"this.spxType()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputText\n    ></spx-input-text>\n    } @if (this.spxType() === 'date') {\n    <spx-input-date\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutoFocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxMax]=\"this.spxMax()!\"\n      [spxMin]=\"this.spxMin()!\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSelectDay]=\"this.spxSelectDay()\"\n      [spxSelectMonth]=\"this.spxSelectMonth()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputDate\n    ></spx-input-date>\n    } @if (this.spxType() === 'float') {\n    <spx-input-float\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputFloat\n    ></spx-input-float>\n    } @if (this.spxType() === 'number') {\n    <spx-input-number\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxInputMode()\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputNumber\n    ></spx-input-number>\n    } @if (this.spxType() === 'radio') {\n    <spx-input-radio\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxShowLabel]=\"this.spxShowLabel()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputRadio\n    ></spx-input-radio>\n    } @if (this.spxType() === 'time') {\n    <spx-input-time\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputTime\n    ></spx-input-time>\n    }\n  </div>\n  <div validation-messages>\n    <ng-content></ng-content>\n  </div>\n</spx-input-box>\n", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxAlert", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxSpeedDial", "spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\n  (spxClear)=\"this.handleClear()\"\n  (spxEdit)=\"this.handleEdit()\"\n  (spxHelp)=\"this.handleHelp()\"\n  (spxSearch)=\"this.handleSearch()\"\n  (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n  [spxAlert]=\"this.spxAlert()\"\n  [spxCompact]=\"this.spxCompact()\"\n  [spxLabel]=\"this.spxLabel()\"\n  [spxName]=\"this.mappedName()\"\n  [spxReadonly]=\"this.spxReadonly()\"\n  [spxRequired]=\"this.spxRequired()\"\n  [spxShowClear]=\"this.spxShowClear()\"\n  [spxShowEdit]=\"this.spxShowEdit()\"\n  [spxShowHelp]=\"this.spxShowHelp()\"\n  [spxShowLabel]=\"this.spxShowLabel()\"\n  [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n  [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n  [spxValue]=\"this.value()\"\n>\n  <div controls>\n    @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n    this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n    this.spxType() === 'password') {\n    <spx-input-text\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n      [spxSpeedDial]=\"this.spxSpeedDial()\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxCapitalize]=\"this.spxCapitalize()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n      [spxName]=\"this.mappedName()\"\n      [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxType]=\"this.spxType()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputText\n    ></spx-input-text>\n    } @if (this.spxType() === 'date') {\n    <spx-input-date\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutoFocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxMax]=\"this.spxMax()!\"\n      [spxMin]=\"this.spxMin()!\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSelectDay]=\"this.spxSelectDay()\"\n      [spxSelectMonth]=\"this.spxSelectMonth()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputDate\n    ></spx-input-date>\n    } @if (this.spxType() === 'float') {\n    <spx-input-float\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputFloat\n    ></spx-input-float>\n    } @if (this.spxType() === 'number') {\n    <spx-input-number\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxInputMode()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputNumber\n    ></spx-input-number>\n    } @if (this.spxType() === 'radio') {\n    <spx-input-radio\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxShowLabel]=\"this.spxShowLabel()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputRadio\n    ></spx-input-radio>\n    } @if (this.spxType() === 'time') {\n    <spx-input-time\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputTime\n    ></spx-input-time>\n    }\n  </div>\n  <div validation-messages>\n    <ng-content></ng-content>\n  </div>\n</spx-input-box>\n", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxName", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxAlert", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxSpeedDial", "spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputComponent, decorators: [{
             type: Component,
@@ -1003,7 +1007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
                             useExisting: SpxInputComponent,
                             multi: true
                         }
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\n  (spxClear)=\"this.handleClear()\"\n  (spxEdit)=\"this.handleEdit()\"\n  (spxHelp)=\"this.handleHelp()\"\n  (spxSearch)=\"this.handleSearch()\"\n  (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n  [spxAlert]=\"this.spxAlert()\"\n  [spxCompact]=\"this.spxCompact()\"\n  [spxLabel]=\"this.spxLabel()\"\n  [spxReadonly]=\"this.spxReadonly()\"\n  [spxRequired]=\"this.spxRequired()\"\n  [spxShowClear]=\"this.spxShowClear()\"\n  [spxShowEdit]=\"this.spxShowEdit()\"\n  [spxShowHelp]=\"this.spxShowHelp()\"\n  [spxShowLabel]=\"this.spxShowLabel()\"\n  [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n  [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n  [spxValue]=\"this.value()\"\n>\n  <div controls>\n    @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n    this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n    this.spxType() === 'password') {\n    <spx-input-text\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n      [spxSpeedDial]=\"this.spxSpeedDial()\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxCapitalize]=\"this.spxCapitalize()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n      [spxName]=\"this.spxName()\"\n      [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxType]=\"this.spxType()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputText\n    ></spx-input-text>\n    } @if (this.spxType() === 'date') {\n    <spx-input-date\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutoFocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxMax]=\"this.spxMax()!\"\n      [spxMin]=\"this.spxMin()!\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSelectDay]=\"this.spxSelectDay()\"\n      [spxSelectMonth]=\"this.spxSelectMonth()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputDate\n    ></spx-input-date>\n    } @if (this.spxType() === 'float') {\n    <spx-input-float\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputFloat\n    ></spx-input-float>\n    } @if (this.spxType() === 'number') {\n    <spx-input-number\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxInputMode()\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputNumber\n    ></spx-input-number>\n    } @if (this.spxType() === 'radio') {\n    <spx-input-radio\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxShowLabel]=\"this.spxShowLabel()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputRadio\n    ></spx-input-radio>\n    } @if (this.spxType() === 'time') {\n    <spx-input-time\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputTime\n    ></spx-input-time>\n    }\n  </div>\n  <div validation-messages>\n    <ng-content></ng-content>\n  </div>\n</spx-input-box>\n" }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\n  (spxClear)=\"this.handleClear()\"\n  (spxEdit)=\"this.handleEdit()\"\n  (spxHelp)=\"this.handleHelp()\"\n  (spxSearch)=\"this.handleSearch()\"\n  (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n  [spxAlert]=\"this.spxAlert()\"\n  [spxCompact]=\"this.spxCompact()\"\n  [spxLabel]=\"this.spxLabel()\"\n  [spxName]=\"this.mappedName()\"\n  [spxReadonly]=\"this.spxReadonly()\"\n  [spxRequired]=\"this.spxRequired()\"\n  [spxShowClear]=\"this.spxShowClear()\"\n  [spxShowEdit]=\"this.spxShowEdit()\"\n  [spxShowHelp]=\"this.spxShowHelp()\"\n  [spxShowLabel]=\"this.spxShowLabel()\"\n  [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n  [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n  [spxValue]=\"this.value()\"\n>\n  <div controls>\n    @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n    this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n    this.spxType() === 'password') {\n    <spx-input-text\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n      [spxSpeedDial]=\"this.spxSpeedDial()\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxCapitalize]=\"this.spxCapitalize()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n      [spxName]=\"this.mappedName()\"\n      [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxType]=\"this.spxType()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputText\n    ></spx-input-text>\n    } @if (this.spxType() === 'date') {\n    <spx-input-date\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutoFocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxMax]=\"this.spxMax()!\"\n      [spxMin]=\"this.spxMin()!\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSelectDay]=\"this.spxSelectDay()\"\n      [spxSelectMonth]=\"this.spxSelectMonth()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputDate\n    ></spx-input-date>\n    } @if (this.spxType() === 'float') {\n    <spx-input-float\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputFloat\n    ></spx-input-float>\n    } @if (this.spxType() === 'number') {\n    <spx-input-number\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxInputMode()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputNumber\n    ></spx-input-number>\n    } @if (this.spxType() === 'radio') {\n    <spx-input-radio\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxShowLabel]=\"this.spxShowLabel()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputRadio\n    ></spx-input-radio>\n    } @if (this.spxType() === 'time') {\n    <spx-input-time\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputTime\n    ></spx-input-time>\n    }\n  </div>\n  <div validation-messages>\n    <ng-content></ng-content>\n  </div>\n</spx-input-box>\n" }]
         }], propDecorators: { _handleBlurEvent: [{
                 type: HostListener,
                 args: ['focusout']