@softpak/components 19.0.0-beta.1 → 19.0.0-beta.10

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

@@ -1,17 +1,18 @@
-import { NgIf, NgFor } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, HostListener, ViewChild } from '@angular/core';
+import { EventEmitter, Component, Input, Output, HostListener, ViewChild, input, model, output, signal, viewChild, computed } from '@angular/core';
 import { SpxButtonComponent } from '@softpak/components/spx-button';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faEdit, faSearch, faQuestion, faTimes, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { fromEvent } from 'rxjs';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
-import { DateTime } from 'luxon';
 import { valuePairToValue, SpxSeverityEnum } from '@softpak/components/spx-helpers';
-import * as i1$1 from '@ionic/angular/standalone';
-import { IonButtons, IonContent, IonHeader, IonTitle, IonToolbar, IonButton } from '@ionic/angular/standalone';
+import { DateTime } from 'luxon';
+import * as i1$2 from '@ionic/angular/standalone';
+import { IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import * as i1$3 from '@ionic/angular';
 
 class SpxInputBoxComponent {
     handleFocusIn(ev) {
@@ -71,147 +72,167 @@ class SpxInputBoxComponent {
             this.spxFocusOut.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: "spxCompact", spxFocused: "spxFocused", spxLabel: "spxLabel", spxReadonly: "spxReadonly", spxRequired: "spxRequired", spxShowClear: "spxShowClear", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxShowLabel: "spxShowLabel", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxValue: "spxValue" }, outputs: { spxClear: "spxClear", spxSearch: "spxSearch", spxFocus: "spxFocus", spxFocusOut: "spxFocusOut", spxEdit: "spxEdit", spxHelp: "spxHelp" }, host: { listeners: { "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)", "document:click": "handleWindowClick($event)" } }, ngImport: i0, template: `<div class="flex rounded w-full gap-3"
-    [class.rounded-none]="this.spxShowValidationMessages"
-    [class.rounded-t]="this.spxShowValidationMessages"
-    [class.outline-none]="this.spxFocused && !this.spxReadonly"
-    [class.ring-2]="this.spxFocused && !this.spxReadonly"
-    [class.ring-offset-2]="this.spxFocused && !this.spxReadonly"
-    [class.ring-blue-500]="this.spxFocused && !this.spxReadonly"
-    [class.bg-white]="!this.spxReadonly"
-    [class.bg-gray-300]="this.spxReadonly"
-    [class.cursor-not-allowed]="this.spxReadonly">
-    <div class="flex-auto p-3"
-      [class.p-0]="this.spxCompact"
-      [class.flex]="this.spxCompact"
-      [class.items-center]="this.spxCompact">
-      <div *ngIf="this.spxShowLabel" class="font-bold text-sm mb-1 text-gray-800"
-        [class.mb-0]="this.spxCompact"
-        [class.px-3]="this.spxCompact">
-        {{this.spxLabel}} <span *ngIf="spxRequired" class="text-red-800">*</span>
-      </div>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: "spxCompact", spxFocused: "spxFocused", spxLabel: "spxLabel", spxReadonly: "spxReadonly", spxRequired: "spxRequired", spxShowClear: "spxShowClear", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxShowLabel: "spxShowLabel", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxValue: "spxValue" }, outputs: { spxClear: "spxClear", spxSearch: "spxSearch", spxFocus: "spxFocus", spxFocusOut: "spxFocusOut", spxEdit: "spxEdit", spxHelp: "spxHelp" }, host: { listeners: { "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)", "document:click": "handleWindowClick($event)" } }, ngImport: i0, template: `<div class="flex rounded w-full gap-3"
+      [class.rounded-none]="this.spxShowValidationMessages"
+      [class.rounded-t]="this.spxShowValidationMessages"
+      [class.outline-none]="this.spxFocused && !this.spxReadonly"
+      [class.ring-2]="this.spxFocused && !this.spxReadonly"
+      [class.ring-offset-2]="this.spxFocused && !this.spxReadonly"
+      [class.ring-blue-500]="this.spxFocused && !this.spxReadonly"
+      [class.bg-white]="!this.spxReadonly"
+      [class.bg-gray-300]="this.spxReadonly"
+      [class.cursor-not-allowed]="this.spxReadonly">
+      <div class="flex-auto p-3"
+        [class.p-0]="this.spxCompact"
+        [class.flex]="this.spxCompact"
+        [class.items-center]="this.spxCompact">
+        @if (this.spxShowLabel) {
+          <div class="font-bold text-sm mb-1 text-gray-800"
+            [class.mb-0]="this.spxCompact"
+            [class.px-3]="this.spxCompact">
+            {{this.spxLabel}} @if (spxRequired) {
+            <span class="text-red-800">*</span>
+          }
+        </div>
+      }
       <ng-content select="[controls]"></ng-content>
     </div>
     <div class="flex flex-none gap-1 p-1">
-      <spx-button
-        *ngIf="this.spxShowEdit"
-        (spxClick)="onEdit()"
-        [spxFullHeight]="true"
-        [spxSize]="'xl'"
-        [spxType]="'button'">
-        <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
-      </spx-button>
-      <spx-button
-        *ngIf="this.spxShowHelp"
-        (spxClick)="onHelp()"
-        [spxFullHeight]="true"
-        [spxDisabled]="this.spxReadonly"
-        [spxSize]="'xl'"
-        [spxTabIndex]="-1"
-        [spxType]="'button'">
-        <fa-icon [icon]="faQuestion" class="block text-xl"></fa-icon>
-      </spx-button>
-      <spx-button
-        *ngIf="this.spxShowSearch"
-        (spxClick)="onSearch()"
-        [spxFullHeight]="true"
-        [spxDisabled]="this.spxReadonly"
-        [spxSize]="'xl'"
-        [spxTabIndex]="-1"
-        [spxType]="'button'">
-        <fa-icon [icon]="faSearch" class="block text-xl"></fa-icon>
-      </spx-button>
-      <spx-button
-        *ngIf="this.spxShowClear"
-        (spxClick)="onClear()"
-        [spxDisabled]="this.spxReadonly || !this.spxValue?.value"
-        [spxFullHeight]="true"
-        [spxSize]="'xl'"
-        [spxTabIndex]="-1"
-        [spxType]="'button'">
-        <fa-icon [icon]="faTimes" class="block text-xl"></fa-icon>
-      </spx-button>
+      @if (this.spxShowEdit) {
+        <spx-button
+          (spxClick)="onEdit()"
+          [spxFullHeight]="true"
+          [spxSize]="'xl'"
+          [spxType]="'button'">
+          <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
+        </spx-button>
+      }
+      @if (this.spxShowHelp) {
+        <spx-button
+          (spxClick)="onHelp()"
+          [spxFullHeight]="true"
+          [spxDisabled]="this.spxReadonly"
+          [spxSize]="'xl'"
+          [spxTabIndex]="-1"
+          [spxType]="'button'">
+          <fa-icon [icon]="faQuestion" class="block text-xl"></fa-icon>
+        </spx-button>
+      }
+      @if (this.spxShowSearch) {
+        <spx-button
+          (spxClick)="onSearch()"
+          [spxFullHeight]="true"
+          [spxDisabled]="this.spxReadonly"
+          [spxSize]="'xl'"
+          [spxTabIndex]="-1"
+          [spxType]="'button'">
+          <fa-icon [icon]="faSearch" class="block text-xl"></fa-icon>
+        </spx-button>
+      }
+      @if (this.spxShowClear) {
+        <spx-button
+          (spxClick)="onClear()"
+          [spxDisabled]="this.spxReadonly || !this.spxValue?.value"
+          [spxFullHeight]="true"
+          [spxSize]="'xl'"
+          [spxTabIndex]="-1"
+          [spxType]="'button'">
+          <fa-icon [icon]="faTimes" class="block text-xl"></fa-icon>
+        </spx-button>
+      }
+    </div>
     </div>
-  </div>
-  <div *ngIf="this.spxShowValidationMessages" class="bg-red-600 rounded-b text-white p-3">
-    <ng-content select="[validation-messages]"></ng-content>
-  </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
+    @if (this.spxShowValidationMessages) {
+      <div class="bg-red-600 rounded-b text-white p-3">
+        <ng-content select="[validation-messages]"></ng-content>
+      </div>
+    }`, isInline: true, 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-input-box',
+                    standalone: true,
                     imports: [
-                        NgIf,
                         SpxButtonComponent,
-                        FontAwesomeModule,
+                        FontAwesomeModule
                     ],
                     template: `<div class="flex rounded w-full gap-3"
-    [class.rounded-none]="this.spxShowValidationMessages"
-    [class.rounded-t]="this.spxShowValidationMessages"
-    [class.outline-none]="this.spxFocused && !this.spxReadonly"
-    [class.ring-2]="this.spxFocused && !this.spxReadonly"
-    [class.ring-offset-2]="this.spxFocused && !this.spxReadonly"
-    [class.ring-blue-500]="this.spxFocused && !this.spxReadonly"
-    [class.bg-white]="!this.spxReadonly"
-    [class.bg-gray-300]="this.spxReadonly"
-    [class.cursor-not-allowed]="this.spxReadonly">
-    <div class="flex-auto p-3"
-      [class.p-0]="this.spxCompact"
-      [class.flex]="this.spxCompact"
-      [class.items-center]="this.spxCompact">
-      <div *ngIf="this.spxShowLabel" class="font-bold text-sm mb-1 text-gray-800"
-        [class.mb-0]="this.spxCompact"
-        [class.px-3]="this.spxCompact">
-        {{this.spxLabel}} <span *ngIf="spxRequired" class="text-red-800">*</span>
-      </div>
+      [class.rounded-none]="this.spxShowValidationMessages"
+      [class.rounded-t]="this.spxShowValidationMessages"
+      [class.outline-none]="this.spxFocused && !this.spxReadonly"
+      [class.ring-2]="this.spxFocused && !this.spxReadonly"
+      [class.ring-offset-2]="this.spxFocused && !this.spxReadonly"
+      [class.ring-blue-500]="this.spxFocused && !this.spxReadonly"
+      [class.bg-white]="!this.spxReadonly"
+      [class.bg-gray-300]="this.spxReadonly"
+      [class.cursor-not-allowed]="this.spxReadonly">
+      <div class="flex-auto p-3"
+        [class.p-0]="this.spxCompact"
+        [class.flex]="this.spxCompact"
+        [class.items-center]="this.spxCompact">
+        @if (this.spxShowLabel) {
+          <div class="font-bold text-sm mb-1 text-gray-800"
+            [class.mb-0]="this.spxCompact"
+            [class.px-3]="this.spxCompact">
+            {{this.spxLabel}} @if (spxRequired) {
+            <span class="text-red-800">*</span>
+          }
+        </div>
+      }
       <ng-content select="[controls]"></ng-content>
     </div>
     <div class="flex flex-none gap-1 p-1">
-      <spx-button
-        *ngIf="this.spxShowEdit"
-        (spxClick)="onEdit()"
-        [spxFullHeight]="true"
-        [spxSize]="'xl'"
-        [spxType]="'button'">
-        <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
-      </spx-button>
-      <spx-button
-        *ngIf="this.spxShowHelp"
-        (spxClick)="onHelp()"
-        [spxFullHeight]="true"
-        [spxDisabled]="this.spxReadonly"
-        [spxSize]="'xl'"
-        [spxTabIndex]="-1"
-        [spxType]="'button'">
-        <fa-icon [icon]="faQuestion" class="block text-xl"></fa-icon>
-      </spx-button>
-      <spx-button
-        *ngIf="this.spxShowSearch"
-        (spxClick)="onSearch()"
-        [spxFullHeight]="true"
-        [spxDisabled]="this.spxReadonly"
-        [spxSize]="'xl'"
-        [spxTabIndex]="-1"
-        [spxType]="'button'">
-        <fa-icon [icon]="faSearch" class="block text-xl"></fa-icon>
-      </spx-button>
-      <spx-button
-        *ngIf="this.spxShowClear"
-        (spxClick)="onClear()"
-        [spxDisabled]="this.spxReadonly || !this.spxValue?.value"
-        [spxFullHeight]="true"
-        [spxSize]="'xl'"
-        [spxTabIndex]="-1"
-        [spxType]="'button'">
-        <fa-icon [icon]="faTimes" class="block text-xl"></fa-icon>
-      </spx-button>
+      @if (this.spxShowEdit) {
+        <spx-button
+          (spxClick)="onEdit()"
+          [spxFullHeight]="true"
+          [spxSize]="'xl'"
+          [spxType]="'button'">
+          <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
+        </spx-button>
+      }
+      @if (this.spxShowHelp) {
+        <spx-button
+          (spxClick)="onHelp()"
+          [spxFullHeight]="true"
+          [spxDisabled]="this.spxReadonly"
+          [spxSize]="'xl'"
+          [spxTabIndex]="-1"
+          [spxType]="'button'">
+          <fa-icon [icon]="faQuestion" class="block text-xl"></fa-icon>
+        </spx-button>
+      }
+      @if (this.spxShowSearch) {
+        <spx-button
+          (spxClick)="onSearch()"
+          [spxFullHeight]="true"
+          [spxDisabled]="this.spxReadonly"
+          [spxSize]="'xl'"
+          [spxTabIndex]="-1"
+          [spxType]="'button'">
+          <fa-icon [icon]="faSearch" class="block text-xl"></fa-icon>
+        </spx-button>
+      }
+      @if (this.spxShowClear) {
+        <spx-button
+          (spxClick)="onClear()"
+          [spxDisabled]="this.spxReadonly || !this.spxValue?.value"
+          [spxFullHeight]="true"
+          [spxSize]="'xl'"
+          [spxTabIndex]="-1"
+          [spxType]="'button'">
+          <fa-icon [icon]="faTimes" class="block text-xl"></fa-icon>
+        </spx-button>
+      }
     </div>
-  </div>
-  <div *ngIf="this.spxShowValidationMessages" class="bg-red-600 rounded-b text-white p-3">
-    <ng-content select="[validation-messages]"></ng-content>
-  </div>`
+    </div>
+    @if (this.spxShowValidationMessages) {
+      <div class="bg-red-600 rounded-b text-white p-3">
+        <ng-content select="[validation-messages]"></ng-content>
+      </div>
+    }`,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { spxCompact: [{
                 type: Input
@@ -298,49 +319,50 @@ class SpxDropdownComponent {
         this.focusPosition = 0;
         this.spxSelect.emit(valuePair);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: "spxSuggestions" }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: `<div class="relative text-black">
-  <div
-    class="absolute bg-gray-100 left-0 right-0 z-20">
-      <button
-        *ngFor="let valuePair of this.spxSuggestions; let i = index"
-        class="text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left"
-        [class.bg-gray-100]="i === this.focusPosition"
-        [class.bg-white]="i !== this.focusPosition"
-        (click)="this.handleSuggestionClick(valuePair)"
-        [attr.tabindex]="-1"
-        [attr.type]="'button'">
-        <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
-      <spx-button (spxClick)="this.handleSuggestionClick(valuePair)" [spxType]="'button'" [spxTabIndex]="-1">Select</spx-button>
-    </button>
-  </div>
-</div>`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: "spxSuggestions" }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: `<div class="relative text-black">
+    <div
+      class="absolute bg-gray-100 left-0 right-0 z-20">
+      @for (valuePair of this.spxSuggestions; track valuePair; let i = $index) {
+        <button
+          class="text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left"
+          [class.bg-gray-100]="i === this.focusPosition"
+          [class.bg-white]="i !== this.focusPosition"
+          (click)="this.handleSuggestionClick(valuePair)"
+          [attr.tabindex]="-1"
+          [attr.type]="'button'">
+          <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
+          <spx-button (spxClick)="this.handleSuggestionClick(valuePair)" [spxType]="'button'" [spxTabIndex]="-1">Select</spx-button>
+        </button>
+      }
+    </div>
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxDropdownComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-dropdown',
+                    standalone: true,
                     imports: [
-                        NgIf,
-                        NgFor,
-                        SpxButtonComponent,
+                        SpxButtonComponent
                     ],
                     template: `<div class="relative text-black">
-  <div
-    class="absolute bg-gray-100 left-0 right-0 z-20">
-      <button
-        *ngFor="let valuePair of this.spxSuggestions; let i = index"
-        class="text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left"
-        [class.bg-gray-100]="i === this.focusPosition"
-        [class.bg-white]="i !== this.focusPosition"
-        (click)="this.handleSuggestionClick(valuePair)"
-        [attr.tabindex]="-1"
-        [attr.type]="'button'">
-        <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
-      <spx-button (spxClick)="this.handleSuggestionClick(valuePair)" [spxType]="'button'" [spxTabIndex]="-1">Select</spx-button>
-    </button>
-  </div>
-</div>`
+    <div
+      class="absolute bg-gray-100 left-0 right-0 z-20">
+      @for (valuePair of this.spxSuggestions; track valuePair; let i = $index) {
+        <button
+          class="text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left"
+          [class.bg-gray-100]="i === this.focusPosition"
+          [class.bg-white]="i !== this.focusPosition"
+          (click)="this.handleSuggestionClick(valuePair)"
+          [attr.tabindex]="-1"
+          [attr.type]="'button'">
+          <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
+          <spx-button (spxClick)="this.handleSuggestionClick(valuePair)" [spxType]="'button'" [spxTabIndex]="-1">Select</spx-button>
+        </button>
+      }
+    </div>
+  </div>`,
                 }]
         }], propDecorators: { spxSuggestions: [{
                 type: Input
@@ -393,79 +415,87 @@ class SpxInputTextComponent {
     handleKeyUp() {
         this.spxFocused = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxSuggestions: "spxSuggestions", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused", spxType: "spxType", value: "value", spxWasInternalUpdate: "spxWasInternalUpdate" }, outputs: { spxBlurFromChild: "spxBlurFromChild", spxChange: "spxChange", spxFocus: "spxFocus" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<div class="relative text-black">
-  <input
-    #input
-    class="font-bold text-lg w-full outline-none"
-    autocomplete="off"
-    spellcheck="false"
-    [class.bg-white]="!this.spxReadonly"
-    [class.bg-gray-300]="this.spxReadonly"
-    [class.cursor-not-allowed]="this.spxReadonly"
-    [class.uppercase]="this.spxCapitalize"
-    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
-    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
-    [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
-    [attr.pattern]="this.spxPattern ? this.spxPattern : undefined"
-    [attr.name]="this.spxName"
-    [attr.type]="this.spxType"
-    [value]="this.value?.description ? this.value?.description : this.value?.value"
-    (blur)="this.handleBlur()"
-    (keyUp)="this.handleKeyUp()"
-    (focus)="this.handleFocus()"
-    (input)="this.handleDescriptionInput($event)"
-  />
-  <span *ngIf="this.value?.description && this.value?.value && this.value?.description?.valueOf() !== this.value?.value?.valueOf()">{{this.value?.value}}</span>
-  <spx-dropdown
-    *ngIf="this.spxFocused && (this.spxType === 'overlay' || this.spxType === 'overlaynumber')"
-    [spxSuggestions]="this.spxSuggestions" (spxSelect)="this.handleSuggestionClick($event)">
-  </spx-dropdown>
-</div>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxAutocomplete: "spxAutocomplete", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxSuggestions: "spxSuggestions", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused", spxType: "spxType", value: "value", spxWasInternalUpdate: "spxWasInternalUpdate" }, outputs: { spxBlurFromChild: "spxBlurFromChild", spxChange: "spxChange", spxFocus: "spxFocus" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<div class="relative text-black">
+    <input
+      #input
+      class="font-bold text-lg w-full outline-none"
+      autocomplete="off"
+      spellcheck="false"
+      [class.bg-white]="!this.spxReadonly"
+      [class.bg-gray-300]="this.spxReadonly"
+      [class.cursor-not-allowed]="this.spxReadonly"
+      [class.uppercase]="this.spxCapitalize"
+      [attr.autocomplete]="this.spxAutocomplete ? this.spxAutocomplete : undefined"
+      [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
+      [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
+      [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
+      [attr.pattern]="this.spxPattern ? this.spxPattern : undefined"
+      [attr.name]="this.spxName"
+      [attr.type]="this.spxType"
+      [value]="this.value?.description ? this.value?.description : this.value?.value"
+      (blur)="this.handleBlur()"
+      (keyUp)="this.handleKeyUp()"
+      (focus)="this.handleFocus()"
+      (input)="this.handleDescriptionInput($event)"
+      />
+    @if (this.value?.description && this.value?.value && this.value?.description?.valueOf() !== this.value?.value?.valueOf()) {
+      <span>{{this.value?.value}}</span>
+    }
+    @if (this.spxFocused && (this.spxType === 'overlay' || this.spxType === 'overlaynumber')) {
+      <spx-dropdown
+        [spxSuggestions]="this.spxSuggestions" (spxSelect)="this.handleSuggestionClick($event)">
+      </spx-dropdown>
+    }
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-input-text',
+                    standalone: true,
                     imports: [
-                        NgIf,
-                        NgFor,
-                        SpxButtonComponent,
-                        SpxDropdownComponent,
+                        SpxDropdownComponent
                     ],
                     template: `<div class="relative text-black">
-  <input
-    #input
-    class="font-bold text-lg w-full outline-none"
-    autocomplete="off"
-    spellcheck="false"
-    [class.bg-white]="!this.spxReadonly"
-    [class.bg-gray-300]="this.spxReadonly"
-    [class.cursor-not-allowed]="this.spxReadonly"
-    [class.uppercase]="this.spxCapitalize"
-    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
-    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
-    [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
-    [attr.pattern]="this.spxPattern ? this.spxPattern : undefined"
-    [attr.name]="this.spxName"
-    [attr.type]="this.spxType"
-    [value]="this.value?.description ? this.value?.description : this.value?.value"
-    (blur)="this.handleBlur()"
-    (keyUp)="this.handleKeyUp()"
-    (focus)="this.handleFocus()"
-    (input)="this.handleDescriptionInput($event)"
-  />
-  <span *ngIf="this.value?.description && this.value?.value && this.value?.description?.valueOf() !== this.value?.value?.valueOf()">{{this.value?.value}}</span>
-  <spx-dropdown
-    *ngIf="this.spxFocused && (this.spxType === 'overlay' || this.spxType === 'overlaynumber')"
-    [spxSuggestions]="this.spxSuggestions" (spxSelect)="this.handleSuggestionClick($event)">
-  </spx-dropdown>
-</div>`
+    <input
+      #input
+      class="font-bold text-lg w-full outline-none"
+      autocomplete="off"
+      spellcheck="false"
+      [class.bg-white]="!this.spxReadonly"
+      [class.bg-gray-300]="this.spxReadonly"
+      [class.cursor-not-allowed]="this.spxReadonly"
+      [class.uppercase]="this.spxCapitalize"
+      [attr.autocomplete]="this.spxAutocomplete ? this.spxAutocomplete : undefined"
+      [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
+      [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
+      [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
+      [attr.pattern]="this.spxPattern ? this.spxPattern : undefined"
+      [attr.name]="this.spxName"
+      [attr.type]="this.spxType"
+      [value]="this.value?.description ? this.value?.description : this.value?.value"
+      (blur)="this.handleBlur()"
+      (keyUp)="this.handleKeyUp()"
+      (focus)="this.handleFocus()"
+      (input)="this.handleDescriptionInput($event)"
+      />
+    @if (this.value?.description && this.value?.value && this.value?.description?.valueOf() !== this.value?.value?.valueOf()) {
+      <span>{{this.value?.value}}</span>
+    }
+    @if (this.spxFocused && (this.spxType === 'overlay' || this.spxType === 'overlaynumber')) {
+      <spx-dropdown
+        [spxSuggestions]="this.spxSuggestions" (spxSelect)="this.handleSuggestionClick($event)">
+      </spx-dropdown>
+    }
+  </div>`,
                 }]
         }], propDecorators: { spxName: [{
                 type: Input
             }], spxAutofocus: [{
                 type: Input
+            }], spxAutocomplete: [{
+                type: Input
             }], spxInputMode: [{
                 type: Input
             }], spxPattern: [{
@@ -497,298 +527,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 args: ['input', { static: true }]
             }] } });
 
-class SpxInputDateComponent {
-    async spxSetFocus() {
-        // this.elYear.focus();
-    }
-    // @Watch('spxValidators') watchSpxValidators(newValue) {
-    //   console.log('validators', newValue);
-    // }
-    // @Watch('value') watchValue(newValue) {
-    //   if (this.spxWasInternalUpdate) {
-    //     this.spxWasInternalUpdate = false;
-    //   } else {
-    //     const parsedValue = DateTime.fromISO(newValue?.value);
-    //     this.spxInternalValue.years = parsedValue.year;
-    //     this.spxInternalValue.months = parsedValue.month;
-    //     this.spxInternalValue.days = parsedValue.day;
-    //     this.spxSelectStep = 'years';
-    //   }
-    // }
-    constructor() {
-        this.spxReadonly = false;
-        this.spxFocused = true;
-        this.spxSelectMonth = true;
-        this.spxSelectDay = true;
-        this.spxChange = new EventEmitter();
-        this.spxFocus = new EventEmitter();
-        this.spxSelectStep = 'years';
-        this.spxInternalValue = {};
-        this.spxSuggestions = {
-            years: [],
-            months: [{
-                    description: 'Jan',
-                    value: 1,
-                }, {
-                    description: 'Feb',
-                    value: 2,
-                }, {
-                    description: 'Mar',
-                    value: 3,
-                }, {
-                    description: 'Apr',
-                    value: 4,
-                }, {
-                    description: 'May',
-                    value: 5,
-                }, {
-                    description: 'Jun',
-                    value: 6,
-                }, {
-                    description: 'Jul',
-                    value: 7,
-                }, {
-                    description: 'Aug',
-                    value: 8,
-                }, {
-                    description: 'Sep',
-                    value: 9,
-                }, {
-                    description: 'Oct',
-                    value: 10,
-                }, {
-                    description: 'Nov',
-                    value: 11,
-                }, {
-                    description: 'Dec',
-                    value: 12,
-                }],
-            days: [],
-        };
-        this.spxWasInternalUpdate = false;
-        this.suggestYears();
-    }
-    componentWillLoad() {
-        const parsedValue = this.value ? DateTime.fromISO(this.value.value) : DateTime.now();
-        this.spxInternalValue.years = parsedValue.year;
-        this.spxInternalValue.months = parsedValue.month;
-        this.spxInternalValue.days = parsedValue.day;
-    }
-    handleDayInput(event) {
-        this.spxInternalValue.days = event.target ? event.target.value : null;
-        this.updateValue();
-    }
-    handleMonthInput(event) {
-        this.spxInternalValue.months = event.target ? event.target.value : null;
-        this.afterMonthChange();
-    }
-    afterMonthChange() {
-        if (this.spxInternalValue.months.toString().length === 2 && this.spxSelectDay && this.spxLastKeyPressed !== 38 && this.spxLastKeyPressed !== 40) {
-            // this.elDay!.focus();
-        }
-        this.updateValue();
-    }
-    handleYearInput(event) {
-        this.spxInternalValue.years = event.target ? event.target.value : null;
-        this.afterYearChange();
-    }
-    afterYearChange() {
-        if (this.spxInternalValue.years.toString().length === 4 && this.spxSelectMonth && this.spxLastKeyPressed !== 38 && this.spxLastKeyPressed !== 40) {
-            // this.elMonth!.focus();
-        }
-        this.updateValue();
-    }
-    handleInput(event) {
-        this.setValue(event.target ? event.target.value : null);
-    }
-    handleFocus(step) {
-        this.spxSelectStep = step;
-        this.spxFocus.emit();
-    }
-    handleKeyDown(event) {
-        this.spxLastKeyPressed = event.which;
-    }
-    handleSuggestionClick(value) {
-        this.spxLastKeyPressed = null;
-        this.spxInternalValue[this.spxSelectStep] = value;
-        this.updateValue();
-        this.doneWithField();
-    }
-    updateValue() {
-        const concatenatedValue = `${this.spxInternalValue.years ? this.spxInternalValue.years : ``}${this.spxInternalValue.months ? `-${this.spxInternalValue.months < 10 ? `0${this.spxInternalValue.months}` : this.spxInternalValue.months}` : ``}${this.spxInternalValue.days ? `-${this.spxInternalValue.days < 10 ? `0${this.spxInternalValue.days}` : this.spxInternalValue.days}` : ``}`;
-        const parsedValue = DateTime.fromISO(concatenatedValue);
-        this.spxWasInternalUpdate = true;
-        this.value = {
-            description: parsedValue.toISO(),
-            value: parsedValue.toISO(),
-        };
-        this.spxChange.emit(this.value);
-    }
-    doneWithField() {
-        if (this.spxSelectStep === 'days') {
-            this.spxSelectStep = 'years';
-        }
-        else if (this.spxSelectStep === 'months') {
-            this.spxSelectStep = this.spxSelectDay ? 'days' : 'years';
-            this.afterMonthChange();
-        }
-        else if (this.spxSelectStep === 'years') {
-            this.afterYearChange();
-            this.spxSelectStep = this.spxSelectMonth ? 'months' : 'years';
-        }
-    }
-    setValue(value) {
-        this.spxInternalValue = value;
-        const parsed = DateTime.fromISO(value);
-        this.value = {
-            description: parsed.toISO(),
-            value: parsed.toISO(),
-        };
-        this.spxChange.emit(this.value);
-        this.spxWasInternalUpdate = true;
-    }
-    suggestYears() {
-        this.spxSuggestions.years = [];
-        for (let year = DateTime.fromISO(this.spxMin).year; year <= DateTime.fromISO(this.spxMax).year; year++) {
-            this.spxSuggestions.years.push({
-                description: `'${year.toString().substring(2, 4)}`,
-                value: year,
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: SpxInputDateComponent, isStandalone: true, selector: "spx-input-date", inputs: { spxMax: "spxMax", spxMin: "spxMin", spxName: "spxName", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxFocused: "spxFocused", spxSelectMonth: "spxSelectMonth", spxSelectDay: "spxSelectDay", value: "value", spxLastKeyPressed: "spxLastKeyPressed", spxSelectStep: "spxSelectStep", spxInternalValue: "spxInternalValue", spxSuggestions: "spxSuggestions", spxWasInternalUpdate: "spxWasInternalUpdate" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, ngImport: i0, template: `<div class='spx-input-date__controls'>
-  <input
-    class='spx-input-date__input'
-    [attr.value]="this.spxInternalValue.years"
-    (focus)="this.handleFocus('years')"
-    (input)="this.handleYearInput($event)"
-    (keyDown)="this.handleKeyDown($event)"
-    [attr.type]="'number'"
-    [attr.min]="1900"
-    [attr.max]="2100"
-    [attr.step]="1"
-  />
-  <div class='spx-input-date__control-label'>Year</div>
-    <input
-      *ngIf="this.spxSelectMonth"
-      class='spx-input-date__input'
-      [attr.value]="this.spxInternalValue.months"
-      (focus)="this.handleFocus('months')"
-      (input)="this.handleMonthInput($event)"
-      (keyDown)="this.handleKeyDown($event)"
-      [attr.type]="'number'"
-      [attr.min]="1"
-      [attr.max]="12"
-      [attr.step]="1" />
-      <div class='spx-input-date__control-label'>Month</div>
-    <input
-      *ngIf="this.spxSelectDay"
-      class='spx-input-date__input'
-      [attr.value]="this.spxInternalValue.days"
-      (focus)="this.handleFocus('days')"
-      (input)="this.handleDayInput($event)"
-      (keyDown)="this.handleKeyDown($event)"
-      [attr.type]="'number'"
-      [attr.min]="1"
-      [attr.max]="31"
-      [attr.step]="1" />
-      <div class='spx-input-date__control-label'>Days</div>
-</div>
-<div class='spx-input-date__suggestions'>
-  <spx-suggestion 
-  *ngFor="let valuePair of spxSuggestions[spxSelectStep]"  
-  (click)="this.handleSuggestionClick(valuePair.value)">{{valuePair?.description}}</spx-suggestion>
-</div>`, isInline: true, styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputDateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spx-input-date', imports: [
-                        NgIf,
-                        NgFor,
-                        SpxButtonComponent,
-                        SpxSuggestionComponent
-                    ], template: `<div class='spx-input-date__controls'>
-  <input
-    class='spx-input-date__input'
-    [attr.value]="this.spxInternalValue.years"
-    (focus)="this.handleFocus('years')"
-    (input)="this.handleYearInput($event)"
-    (keyDown)="this.handleKeyDown($event)"
-    [attr.type]="'number'"
-    [attr.min]="1900"
-    [attr.max]="2100"
-    [attr.step]="1"
-  />
-  <div class='spx-input-date__control-label'>Year</div>
-    <input
-      *ngIf="this.spxSelectMonth"
-      class='spx-input-date__input'
-      [attr.value]="this.spxInternalValue.months"
-      (focus)="this.handleFocus('months')"
-      (input)="this.handleMonthInput($event)"
-      (keyDown)="this.handleKeyDown($event)"
-      [attr.type]="'number'"
-      [attr.min]="1"
-      [attr.max]="12"
-      [attr.step]="1" />
-      <div class='spx-input-date__control-label'>Month</div>
-    <input
-      *ngIf="this.spxSelectDay"
-      class='spx-input-date__input'
-      [attr.value]="this.spxInternalValue.days"
-      (focus)="this.handleFocus('days')"
-      (input)="this.handleDayInput($event)"
-      (keyDown)="this.handleKeyDown($event)"
-      [attr.type]="'number'"
-      [attr.min]="1"
-      [attr.max]="31"
-      [attr.step]="1" />
-      <div class='spx-input-date__control-label'>Days</div>
-</div>
-<div class='spx-input-date__suggestions'>
-  <spx-suggestion 
-  *ngFor="let valuePair of spxSuggestions[spxSelectStep]"  
-  (click)="this.handleSuggestionClick(valuePair.value)">{{valuePair?.description}}</spx-suggestion>
-</div>`, styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { spxMax: [{
-                type: Input
-            }], spxMin: [{
-                type: Input
-            }], spxName: [{
-                type: Input
-            }], spxReadonly: [{
-                type: Input
-            }], spxValidators: [{
-                type: Input
-            }], spxFocused: [{
-                type: Input
-            }], spxSelectMonth: [{
-                type: Input
-            }], spxSelectDay: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], spxChange: [{
-                type: Output
-            }], spxFocus: [{
-                type: Output
-            }], spxLastKeyPressed: [{
-                type: Input
-            }], spxSelectStep: [{
-                type: Input
-            }], spxInternalValue: [{
-                type: Input
-            }], spxSuggestions: [{
-                type: Input
-            }], spxWasInternalUpdate: [{
-                type: Input
-            }] } });
-
 class SpxInputFloatComponent {
     constructor() {
-        // private elFirstInput?: HTMLElement;
-        // private elSecondInput?: HTMLElement;
         this.internalValue = {
             first: null,
             second: null,
@@ -804,16 +544,18 @@ class SpxInputFloatComponent {
     spxSetFocus() {
         this.firstInputRef?.nativeElement?.focus();
     }
-    // @Watch('value') onValueChanged(newValue: SpxValuePair<any>, _oldValue: SpxValuePair<any>) {
-    //   this.handleSetValue(newValue);
-    // }
-    componentDidLoad() {
+    ngOnInit() {
         if (this.spxAutofocus) {
             this.spxFocus.emit();
             this.spxSetFocus();
         }
         this.handleSetValue(this.value);
     }
+    ngOnChanges(changes) {
+        if (changes['value']) {
+            this.handleSetValue(changes['value'].currentValue);
+        }
+    }
     handleFocus() {
         this.spxFocus.emit();
     }
@@ -832,10 +574,10 @@ class SpxInputFloatComponent {
         }
         this.tick = {};
     }
-    handleInput(event, position) {
+    handleInput(value, position) {
         this.internalValue = {
-            first: position === 1 ? (event.target ? event.target.value : null) : this.internalValue.first,
-            second: position === 2 ? (event.target ? event.target.value : null) : this.internalValue.second,
+            first: position === 1 ? value : this.internalValue.first,
+            second: position === 2 ? value : this.internalValue.second,
         };
         let result;
         if (this.internalValue.first === null && this.internalValue.second === null) {
@@ -853,8 +595,8 @@ class SpxInputFloatComponent {
     isNumeric(value) {
         return /^[+-]?\d+(\.\d+)?$/.test(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputFloatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: SpxInputFloatComponent, isStandalone: true, selector: "spx-input-float", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxFocused: "spxFocused", spxStep: "spxStep", value: "value", spxWasInternalUpdate: "spxWasInternalUpdate", tick: "tick" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, viewQueries: [{ propertyName: "firstInputRef", first: true, predicate: ["firstInputRef"], descendants: true, static: true }], ngImport: i0, template: `<div class="flex items-end">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputFloatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpxInputFloatComponent, isStandalone: true, selector: "spx-input-float", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxFocused: "spxFocused", spxStep: "spxStep", value: "value", spxWasInternalUpdate: "spxWasInternalUpdate", tick: "tick" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, viewQueries: [{ propertyName: "firstInputRef", first: true, predicate: ["firstInputRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<div class="flex items-end">
   <input
     #firstInputRef
     class="spx-input-float__input"
@@ -863,30 +605,28 @@ class SpxInputFloatComponent {
     [attr.pattern]="'[0-9]*'"
     [attr.step]="1"
     [attr.type]="'text'"
-    [attr.value]="this.internalValue?.first ? this.internalValue?.first : undefined"
     [class.spx-input-float--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
     (focus)="this.handleFocus()"
-    (input)="this.handleInput($event, 1)" />
+    [ngModel]="this.internalValue?.first ? this.internalValue?.first : undefined"
+    (ngModelChange)="this.handleInput($event, 1)" />
   <span class="text-black font-bold text-2xl mx-4">,</span>
   <input
     [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
     class="spx-input-float__input"
     [class.spx-input-float--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
     [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
-    [attr.value]="this.internalValue?.second ? this.internalValue?.second : undefined"
     (focus)="this.handleFocus()"
-    (input)="this.handleInput($event, 2)"
+    [ngModel]="this.internalValue?.second ? this.internalValue?.second : undefined"
+    (ngModelChange)="this.handleInput($event, 2)"
     [attr.step]="1"
     [attr.type]="'text'"
     [attr.pattern]="'[0-9]*'" />
-</div>`, isInline: true, styles: [":host{display:block}.spx-input-float__input{border:1px solid #333333;border-radius:8px;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));flex:1;font-size:20px;font-weight:700;padding:8px;width:100%}.spx-input-float__input:focus{outline:none}\n"] }); }
+</div>`, isInline: true, styles: [":host{display:block}.spx-input-float__input{border:1px solid #333333;border-radius:8px;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));flex:1;font-size:20px;font-weight:700;padding:8px;width:100%}.spx-input-float__input:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputFloatComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputFloatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-input-float', imports: [
-                        NgIf,
-                        NgFor,
-                        SpxButtonComponent,
+            args: [{ selector: 'spx-input-float', standalone: true, imports: [
+                        FormsModule,
                     ], template: `<div class="flex items-end">
   <input
     #firstInputRef
@@ -896,19 +636,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
     [attr.pattern]="'[0-9]*'"
     [attr.step]="1"
     [attr.type]="'text'"
-    [attr.value]="this.internalValue?.first ? this.internalValue?.first : undefined"
     [class.spx-input-float--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
     (focus)="this.handleFocus()"
-    (input)="this.handleInput($event, 1)" />
+    [ngModel]="this.internalValue?.first ? this.internalValue?.first : undefined"
+    (ngModelChange)="this.handleInput($event, 1)" />
   <span class="text-black font-bold text-2xl mx-4">,</span>
   <input
     [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
     class="spx-input-float__input"
     [class.spx-input-float--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
     [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
-    [attr.value]="this.internalValue?.second ? this.internalValue?.second : undefined"
     (focus)="this.handleFocus()"
-    (input)="this.handleInput($event, 2)"
+    [ngModel]="this.internalValue?.second ? this.internalValue?.second : undefined"
+    (ngModelChange)="this.handleInput($event, 2)"
     [attr.step]="1"
     [attr.type]="'text'"
     [attr.pattern]="'[0-9]*'" />
@@ -968,8 +708,8 @@ class SpxInputNumberComponent {
         };
         this.spxChange.emit(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: SpxInputNumberComponent, isStandalone: true, selector: "spx-input-number", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxFocused: "spxFocused", spxStep: "spxStep", value: "value" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<div class="spx-input-number__controls">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpxInputNumberComponent, isStandalone: true, selector: "spx-input-number", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxFocused: "spxFocused", spxStep: "spxStep", value: "value" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<div class="spx-input-number__controls">
   <input
     #input
     class="spx-input-number__input"
@@ -984,9 +724,9 @@ class SpxInputNumberComponent {
     (input)="this.handleInput($event)" />
 </div>`, isInline: true, styles: [":host{display:block}.spx-input-number__input{border:0;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}.spx-input-number__input:focus{outline:none}.spx-input-number__value{color:#0009;font-size:14px}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-input-number', imports: [], template: `<div class="spx-input-number__controls">
+            args: [{ selector: 'spx-input-number', standalone: true, imports: [], template: `<div class="spx-input-number__controls">
   <input
     #input
     class="spx-input-number__input"
@@ -1094,38 +834,40 @@ class SpxInputRadioComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: "spxName", spxValidators: "spxValidators", spxFocused: "spxFocused", spxShowLabel: "spxShowLabel", spxReadonly: "spxReadonly", spxSuggestions: "spxSuggestions", value: "value" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, usesOnChanges: true, ngImport: i0, template: `<div class="grid grid-cols-2 gap-2" [class.mt-3]="this.spxShowLabel">
-      <spx-suggestion
-        *ngFor="let valuePair of this.cachedSuggestions; let i = index"
-        [spxDisabled]="this.spxReadonly"
-        [spxFocused]="this.spxFocused && i === this.focusPosition"
-        [spxSelected]="this.value?.value === valuePair?.value"
-        [spxTabbable]="this.focusPosition === i"
-        (click)="this.handleSuggestionClick($event, valuePair)">
-        {{valuePair?.description}}
-      </spx-suggestion>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: "spxName", spxValidators: "spxValidators", spxFocused: "spxFocused", spxShowLabel: "spxShowLabel", spxReadonly: "spxReadonly", spxSuggestions: "spxSuggestions", value: "value" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, usesOnChanges: true, ngImport: i0, template: `<div class="grid grid-cols-2 gap-2" [class.mt-3]="this.spxShowLabel">
+        @for (valuePair of this.cachedSuggestions; track valuePair; let i = $index) {
+          <spx-suggestion
+            [spxDisabled]="this.spxReadonly"
+            [spxFocused]="this.spxFocused && i === this.focusPosition"
+            [spxSelected]="this.value?.value === valuePair?.value"
+            [spxTabbable]="this.focusPosition === i"
+            (click)="this.handleSuggestionClick($event, valuePair)">
+            {{valuePair?.description}}
+          </spx-suggestion>
+        }
+      </div>`, isInline: true, dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-input-radio',
+                    standalone: true,
                     imports: [
-                        NgFor,
-                        SpxSuggestionComponent,
+                        SpxSuggestionComponent
                     ],
                     template: `<div class="grid grid-cols-2 gap-2" [class.mt-3]="this.spxShowLabel">
-      <spx-suggestion
-        *ngFor="let valuePair of this.cachedSuggestions; let i = index"
-        [spxDisabled]="this.spxReadonly"
-        [spxFocused]="this.spxFocused && i === this.focusPosition"
-        [spxSelected]="this.value?.value === valuePair?.value"
-        [spxTabbable]="this.focusPosition === i"
-        (click)="this.handleSuggestionClick($event, valuePair)">
-        {{valuePair?.description}}
-      </spx-suggestion>
-    </div>`
+        @for (valuePair of this.cachedSuggestions; track valuePair; let i = $index) {
+          <spx-suggestion
+            [spxDisabled]="this.spxReadonly"
+            [spxFocused]="this.spxFocused && i === this.focusPosition"
+            [spxSelected]="this.value?.value === valuePair?.value"
+            [spxTabbable]="this.focusPosition === i"
+            (click)="this.handleSuggestionClick($event, valuePair)">
+            {{valuePair?.description}}
+          </spx-suggestion>
+        }
+      </div>`,
                 }]
         }], propDecorators: { spxName: [{
                 type: Input
@@ -1183,89 +925,102 @@ class SpxInputTimeModalComponent {
         console.log(value);
         this.modalController.dismiss(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputTimeModalComponent, deps: [{ token: i1$1.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: SpxInputTimeModalComponent, isStandalone: true, selector: "spx-input-time-modal", inputs: { view: "view", value: "value" }, outputs: { change: "change" }, ngImport: i0, template: `<ion-header>
-  <ion-toolbar>
-    <ion-title>Select {{view}}</ion-title>
-    <ion-buttons slot="end">
-      <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">
-        <fa-icon [icon]="faXmark"></fa-icon>
-      </spx-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding bg-white">
-  <!-- Uren -->
-  <div class="custom-bg grid grid-cols-1 gap-3">
-    <div *ngIf="view === 'hours'" class="flex-wrap gap-2">
-      <div class="grid grid-cols-3 md:grid-cols-4 gap-3">
-        <div  *ngFor="let hour of hourOptions" 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)">
-          {{ hour }}
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputTimeModalComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputTimeModalComponent, isStandalone: true, selector: "spx-input-time-modal", inputs: { view: "view", value: "value" }, outputs: { change: "change" }, ngImport: i0, template: `<ion-header>
+    <ion-toolbar>
+      <ion-title>Select {{view}}</ion-title>
+      <ion-buttons slot="end">
+        <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">
+          <fa-icon [icon]="faXmark"></fa-icon>
+        </spx-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding bg-white">
+    <!-- Uren -->
+    <div class="custom-bg grid grid-cols-1 gap-3">
+      @if (view === 'hours') {
+        <div class="flex-wrap gap-2">
+          <div class="grid grid-cols-3 md:grid-cols-4 gap-3">
+            @for (hour of hourOptions; track hour) {
+              <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)">
+                {{ hour }}
+              </div>
+            }
+          </div>
         </div>
-      </div>
-    </div>
-    <!-- Minuten -->
-    <div *ngIf="view === 'minutes'" class="grid grid-cols-1 gap-3">
-      <div class="grid grid-cols-4 md:grid-cols-5 gap-3">
-        <div *ngFor="let minute of minuteOptions" 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)">
-          {{ minute }}
+      }
+      <!-- Minuten -->
+      @if (view === 'minutes') {
+        <div class="grid grid-cols-1 gap-3">
+          <div class="grid grid-cols-4 md:grid-cols-5 gap-3">
+            @for (minute of minuteOptions; track minute) {
+              <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)">
+                {{ minute }}
+              </div>
+            }
+          </div>
         </div>
-      </div>
+      }
     </div>
-  </div>
-</ion-content>
-    `, isInline: true, dependencies: [{ 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] }); }
+  </ion-content>
+  `, isInline: true, 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"] }, { 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-input-time-modal',
+                    standalone: true,
                     imports: [
-                        IonButton,
+                        FontAwesomeModule,
                         IonButtons,
                         IonContent,
                         IonHeader,
                         IonTitle,
                         IonToolbar,
-                        NgIf,
-                        NgFor,
                         SpxButtonComponent,
-                        SpxDropdownComponent,
-                        FontAwesomeModule,
                     ],
                     template: `<ion-header>
-  <ion-toolbar>
-    <ion-title>Select {{view}}</ion-title>
-    <ion-buttons slot="end">
-      <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">
-        <fa-icon [icon]="faXmark"></fa-icon>
-      </spx-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding bg-white">
-  <!-- Uren -->
-  <div class="custom-bg grid grid-cols-1 gap-3">
-    <div *ngIf="view === 'hours'" class="flex-wrap gap-2">
-      <div class="grid grid-cols-3 md:grid-cols-4 gap-3">
-        <div  *ngFor="let hour of hourOptions" 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)">
-          {{ hour }}
+    <ion-toolbar>
+      <ion-title>Select {{view}}</ion-title>
+      <ion-buttons slot="end">
+        <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">
+          <fa-icon [icon]="faXmark"></fa-icon>
+        </spx-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding bg-white">
+    <!-- Uren -->
+    <div class="custom-bg grid grid-cols-1 gap-3">
+      @if (view === 'hours') {
+        <div class="flex-wrap gap-2">
+          <div class="grid grid-cols-3 md:grid-cols-4 gap-3">
+            @for (hour of hourOptions; track hour) {
+              <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)">
+                {{ hour }}
+              </div>
+            }
+          </div>
         </div>
-      </div>
-    </div>
-    <!-- Minuten -->
-    <div *ngIf="view === 'minutes'" class="grid grid-cols-1 gap-3">
-      <div class="grid grid-cols-4 md:grid-cols-5 gap-3">
-        <div *ngFor="let minute of minuteOptions" 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)">
-          {{ minute }}
+      }
+      <!-- Minuten -->
+      @if (view === 'minutes') {
+        <div class="grid grid-cols-1 gap-3">
+          <div class="grid grid-cols-4 md:grid-cols-5 gap-3">
+            @for (minute of minuteOptions; track minute) {
+              <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)">
+                {{ minute }}
+              </div>
+            }
+          </div>
         </div>
-      </div>
+      }
     </div>
-  </div>
-</ion-content>
-    `
+  </ion-content>
+  `,
                 }]
-        }], ctorParameters: () => [{ type: i1$1.ModalController }], propDecorators: { view: [{
+        }], ctorParameters: () => [{ type: i1$2.ModalController }], propDecorators: { view: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -1370,8 +1125,8 @@ class SpxInputTimeComponent {
             this.spxChange.emit(this.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputTimeComponent, deps: [{ token: i1$1.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: SpxInputTimeComponent, isStandalone: true, selector: "spx-input-time", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxSuggestions: "spxSuggestions", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused", spxType: "spxType", value: "value", spxWasInternalUpdate: "spxWasInternalUpdate" }, outputs: { spxBlurFromChild: "spxBlurFromChild", spxChange: "spxChange", spxFocus: "spxFocus" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<div class="relative text-black">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputTimeComponent, deps: [{ token: i1$3.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpxInputTimeComponent, isStandalone: true, selector: "spx-input-time", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxSuggestions: "spxSuggestions", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused", spxType: "spxType", value: "value", spxWasInternalUpdate: "spxWasInternalUpdate" }, outputs: { spxBlurFromChild: "spxBlurFromChild", spxChange: "spxChange", spxFocus: "spxFocus" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<div class="relative text-black">
     <div class="flex items-center justify-around gap-3">
       <div class="grow rounded bg-gray-100 p-3 text-xl text-center font-bold" (click)="openDialog('hours')">{{ formattedHour ?? '--' }}</div>
       <div class="text-gray text-xl">:</div>
@@ -1379,21 +1134,16 @@ class SpxInputTimeComponent {
     </div>
 </div>`, isInline: true, styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputTimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-input-time', imports: [
-                        NgIf,
-                        NgFor,
-                        SpxButtonComponent,
-                        SpxDropdownComponent,
-                    ], template: `<div class="relative text-black">
+            args: [{ selector: 'spx-input-time', standalone: true, imports: [], template: `<div class="relative text-black">
     <div class="flex items-center justify-around gap-3">
       <div class="grow rounded bg-gray-100 p-3 text-xl text-center font-bold" (click)="openDialog('hours')">{{ formattedHour ?? '--' }}</div>
       <div class="text-gray text-xl">:</div>
       <div class="grow rounded bg-gray-100 p-3 text-xl text-center font-bold" (click)="openDialog('minutes')">{{ formattedMinute ?? '--' }}</div>
     </div>
 </div>`, styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.ModalController }], propDecorators: { spxName: [{
+        }], ctorParameters: () => [{ type: i1$3.ModalController }], propDecorators: { spxName: [{
                 type: Input
             }], spxAutofocus: [{
                 type: Input
@@ -1428,6 +1178,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 args: ['input', { static: true }]
             }] } });
 
+var stepType;
+(function (stepType) {
+    stepType["years"] = "years";
+    stepType["months"] = "months";
+    stepType["days"] = "days";
+})(stepType || (stepType = {}));
+class SpxInputDateComponent {
+    constructor() {
+        this.spxMax = input.required();
+        this.spxMin = input.required();
+        this.spxReadonly = input();
+        this.spxValidators = input();
+        this.value = model({
+            description: "",
+            value: "",
+        });
+        this.spxChange = output();
+        this.spxFocused = input(true);
+        this.spxFocus = output();
+        this.spxSelectedStep = signal(stepType.years);
+        this.spxSelectDay = input(false);
+        this.spxSelectMonth = input(true);
+        this.selectedYear = signal(null);
+        this.selectedMonth = signal(null);
+        this.selectedDay = signal(null);
+        this.yearInputComponent = viewChild.required(stepType.years);
+        this.monthInputComponent = viewChild.required(stepType.months);
+        this.dayInputComponent = viewChild.required(stepType.days);
+        this.spxSuggestionC = computed(() => {
+            switch (this.spxSelectedStep()) {
+                case stepType.years:
+                    return this.spxSuggestions().years;
+                case stepType.months:
+                    return [...this.spxSuggestions().months];
+                case stepType.days:
+                    return [...this.spxSuggestions().days];
+            }
+        });
+        this.spxSuggestions = input({ years: [],
+            months: [{
+                    description: 'Jan',
+                    value: 1,
+                }, {
+                    description: 'Feb',
+                    value: 2,
+                }, {
+                    description: 'Mar',
+                    value: 3,
+                }, {
+                    description: 'Apr',
+                    value: 4,
+                }, {
+                    description: 'May',
+                    value: 5,
+                }, {
+                    description: 'Jun',
+                    value: 6,
+                }, {
+                    description: 'Jul',
+                    value: 7,
+                }, {
+                    description: 'Aug',
+                    value: 8,
+                }, {
+                    description: 'Sep',
+                    value: 9,
+                }, {
+                    description: 'Oct',
+                    value: 10,
+                }, {
+                    description: 'Nov',
+                    value: 11,
+                }, {
+                    description: 'Dec',
+                    value: 12,
+                }],
+            days: [], });
+    }
+    handleFocus(selectedStep) {
+        switch (selectedStep) {
+            case stepType.years:
+                this.spxSelectedStep.set(stepType.years);
+                break;
+            case stepType.months:
+                this.spxSelectedStep.set(stepType.months);
+                this.monthInputComponent().nativeElement.focus();
+                break;
+            case stepType.days:
+                this.spxSelectedStep.set(stepType.days);
+                this.dayInputComponent().nativeElement.focus();
+                break;
+        }
+    }
+    onModelChange(newValue, selectedStep) {
+        const parsedValue = +newValue; // Convert to number
+        if (parsedValue == 0)
+            return;
+        switch (selectedStep) {
+            case stepType.years:
+                this.selectedYear.set(parsedValue);
+                break;
+            case stepType.months:
+                this.selectedMonth.set(parsedValue);
+                break;
+            case stepType.days:
+                this.selectedDay.set(parsedValue);
+                break;
+        }
+    }
+    ngOnInit() {
+        this.suggestYears();
+        if (valuePairToValue(this.value)) {
+            const parsedValue = DateTime.fromISO(valuePairToValue(this.value));
+            this.selectedYear.set(parsedValue.year);
+            this.selectedMonth.set(parsedValue.month);
+            this.selectedDay.set(parsedValue.day);
+        }
+    }
+    handleSuggestionClick(value) {
+        switch (this.spxSelectedStep()) {
+            case stepType.years:
+                this.selectedYear.set(value);
+                break;
+            case stepType.months:
+                this.selectedMonth.set(value);
+                break;
+            case stepType.days:
+                this.selectedDay.set(value);
+                break;
+        }
+        this.updateValueAndEmit();
+        this.changeSelectedStep();
+    }
+    updateValueAndEmit() {
+        const concatenatedValue = `${this.selectedYear() ? this.selectedYear() : ``}${this.selectedMonth() ? `${this.selectedMonth() < 10 ? `0${this.selectedMonth()}` : this.selectedMonth()}` : ``}${this.selectedDay() ? `-${this.selectedDay() < 10 ? `0${this.selectedDay()}` : this.selectedDay()}` : ``}`;
+        const parsedValue = DateTime.fromISO(concatenatedValue);
+        this.value.set({ value: parsedValue.toISO(), description: parsedValue.toISO() });
+        this.spxChange.emit(this.value());
+    }
+    changeSelectedStep() {
+        switch (this.spxSelectedStep()) {
+            case stepType.years:
+                if (this.spxSelectMonth()) {
+                    this.spxSelectedStep.set(stepType.months);
+                    this.monthInputComponent().nativeElement.focus();
+                }
+                else {
+                    this.spxSelectedStep.set(stepType.years);
+                    this.yearInputComponent().nativeElement.focus();
+                }
+                break;
+            case stepType.months:
+                if (this.spxSelectDay()) {
+                    this.spxSelectedStep.set(stepType.days);
+                    this.dayInputComponent().nativeElement.focus();
+                }
+                else {
+                    this.spxSelectedStep.set(stepType.years);
+                    this.yearInputComponent().nativeElement.focus();
+                }
+                break;
+            case stepType.days:
+                this.spxSelectedStep.set(stepType.years);
+                this.yearInputComponent().nativeElement.focus();
+                break;
+        }
+    }
+    suggestYears() {
+        this.spxSuggestions().years = [];
+        for (let year = DateTime.fromISO(this.spxMin()).year; year <= DateTime.fromISO(this.spxMax()).year; year++) {
+            this.spxSuggestions().years.push({
+                description: `'${year.toString().substring(2, 4)}`,
+                value: year,
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputDateComponent, isStandalone: true, selector: "spx-input-date", inputs: { spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: true, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: true, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxFocused: { classPropertyName: "spxFocused", publicName: "spxFocused", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", spxChange: "spxChange", spxFocus: "spxFocus" }, viewQueries: [{ propertyName: "yearInputComponent", first: true, predicate: stepType.years, descendants: true, isSignal: true }, { propertyName: "monthInputComponent", first: true, predicate: stepType.months, descendants: true, isSignal: true }, { propertyName: "dayInputComponent", first: true, predicate: stepType.days, descendants: true, isSignal: true }], ngImport: i0, template: "<div class='spx-input-date__controls'>\n  <input #years\n    class='spx-input-date__input'\n    [(ngModel)]=\"selectedYear\"\n    [attr.type]=\"'number'\"\n    (click)=\"this.handleFocus('years')\"\n    (ngModelChange)=\"onModelChange($event, 'years')\"\n    [attr.min]=\"1900\"\n    [attr.max]=\"2100\"\n    [attr.step]=\"1\"\n    />\n  <div class='spx-input-date__control-label'>Year</div>\n  @if (this.spxSelectMonth()) {\n    <input #months\n      class='spx-input-date__input'\n      [(ngModel)]=\"selectedMonth\"\n      (ngModelChange)=\"onModelChange($event, 'months')\"\n      (click)=\"this.handleFocus('months')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"12\"\n      [attr.step]=\"1\" />\n  }\n  <div class='spx-input-date__control-label'>Month</div>\n  @if (this.spxSelectDay()) {\n    <input #days\n      class='spx-input-date__input'\n      [(ngModel)]=\"selectedDay\"\n      (ngModelChange)=\"onModelChange($event, 'days')\"\n      (click)=\"this.handleFocus('days')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"31\"\n      [attr.step]=\"1\" />\n    <div class='spx-input-date__control-label'>Days</div>\n  }\n</div>\n<div class='spx-input-date__suggestions'>\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\n    <spx-suggestion [spxSelected]=\"\n    (selectedYear() === valuePair.value) ||\n    (selectedMonth() === valuePair.value) ||  \n    (selectedDay() === valuePair.value)\"\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\n  }\n</div>", styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"], dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }, { kind: "ngmodule", type: FormsModule }, { 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: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spx-input-date', standalone: true, imports: [
+                        SpxSuggestionComponent,
+                        FormsModule
+                    ], template: "<div class='spx-input-date__controls'>\n  <input #years\n    class='spx-input-date__input'\n    [(ngModel)]=\"selectedYear\"\n    [attr.type]=\"'number'\"\n    (click)=\"this.handleFocus('years')\"\n    (ngModelChange)=\"onModelChange($event, 'years')\"\n    [attr.min]=\"1900\"\n    [attr.max]=\"2100\"\n    [attr.step]=\"1\"\n    />\n  <div class='spx-input-date__control-label'>Year</div>\n  @if (this.spxSelectMonth()) {\n    <input #months\n      class='spx-input-date__input'\n      [(ngModel)]=\"selectedMonth\"\n      (ngModelChange)=\"onModelChange($event, 'months')\"\n      (click)=\"this.handleFocus('months')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"12\"\n      [attr.step]=\"1\" />\n  }\n  <div class='spx-input-date__control-label'>Month</div>\n  @if (this.spxSelectDay()) {\n    <input #days\n      class='spx-input-date__input'\n      [(ngModel)]=\"selectedDay\"\n      (ngModelChange)=\"onModelChange($event, 'days')\"\n      (click)=\"this.handleFocus('days')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"31\"\n      [attr.step]=\"1\" />\n    <div class='spx-input-date__control-label'>Days</div>\n  }\n</div>\n<div class='spx-input-date__suggestions'>\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\n    <spx-suggestion [spxSelected]=\"\n    (selectedYear() === valuePair.value) ||\n    (selectedMonth() === valuePair.value) ||  \n    (selectedDay() === valuePair.value)\"\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\n  }\n</div>", styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"] }]
+        }] });
+
 class SpxInputComponent {
     constructor() {
         this.spxLabel = 'label';
@@ -1482,14 +1419,18 @@ class SpxInputComponent {
         this.spxSearch.emit();
     }
     setFocusIn() {
-        this.spxFocused = true;
-        this.passFocusToControl();
+        setTimeout(() => {
+            this.spxFocused = true;
+            this.passFocusToControl();
+        }, 0);
     }
     setFocusOut() {
-        this.spxFocused = false;
-        if (this.spxType === SpxInputTypeEnum.radio) {
-            this.radioInput?.spxFocusOut();
-        }
+        setTimeout(() => {
+            this.spxFocused = false;
+            if (this.spxType === SpxInputTypeEnum.radio) {
+                this.radioInput?.spxFocusOut();
+            }
+        }, 0);
     }
     handleEdit() {
         this.spxEdit.emit();
@@ -1518,7 +1459,7 @@ class SpxInputComponent {
         }
     }
     writeValue(value) {
-        this.value = this.lastValue = value;
+        this.value = this.lastValue = value; // hier komt initiele waarde van formcontrol binnen
     }
     handleChangeEvent(value) {
         if (value !== this.lastValue) {
@@ -1530,139 +1471,145 @@ class SpxInputComponent {
         this.onTouched();
     }
     registerOnChange(fn) {
-        this.onChange = fn;
+        this.onChange = fn; // emit verandering aan formcontrol
     }
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxLabel: "spxLabel", spxMax: "spxMax", spxMin: "spxMin", spxName: "spxName", spxReadonly: "spxReadonly", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxRequired: "spxRequired", spxSelectMonth: "spxSelectMonth", spxSelectDay: "spxSelectDay", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxShowLabel: "spxShowLabel", spxCompact: "spxCompact", spxShowClear: "spxShowClear", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxStep: "spxStep", spxSuggestions: "spxSuggestions", spxType: "spxType", spxValidators: "spxValidators", value: "value", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused" }, outputs: { spxBlur: "spxBlur", spxClear: "spxClear", spxChange: "spxChange", spxFocus: "spxFocus", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxLabel: "spxLabel", spxMax: "spxMax", spxMin: "spxMin", spxName: "spxName", spxReadonly: "spxReadonly", spxAutocomplete: "spxAutocomplete", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxRequired: "spxRequired", spxSelectMonth: "spxSelectMonth", spxSelectDay: "spxSelectDay", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxShowLabel: "spxShowLabel", spxCompact: "spxCompact", spxShowClear: "spxShowClear", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxStep: "spxStep", spxSuggestions: "spxSuggestions", spxType: "spxType", spxValidators: "spxValidators", value: "value", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused" }, outputs: { spxBlur: "spxBlur", spxClear: "spxClear", spxChange: "spxChange", spxFocus: "spxFocus", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: SpxInputComponent,
                 multi: true
             }
         ], viewQueries: [{ propertyName: "floatInput", first: true, predicate: SpxInputFloatComponent, descendants: true }, { propertyName: "numberInput", first: true, predicate: SpxInputNumberComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: SpxInputTextComponent, descendants: true }, { propertyName: "timeInput", first: true, predicate: SpxInputTimeComponent, descendants: true }, { propertyName: "radioInput", first: true, predicate: SpxInputRadioComponent, descendants: true }], ngImport: i0, template: `<spx-input-box
-  [spxFocused]="this.spxFocused"
-  [spxLabel]="this.spxLabel"
-  [spxReadonly]="this.spxReadonly"
-  [spxRequired]="this.spxRequired"
-  [spxValue]="this.value"
-  [spxShowHelp]="this.spxShowHelp"
-  [spxCompact]="this.spxCompact"
-  [spxShowClear]="this.spxShowClear"
-  [spxShowEdit]="this.spxShowEdit"
-  [spxShowLabel]="this.spxShowLabel"
-  [spxShowSearch]="this.spxShowSearch ? this.spxShowSearch : this.spxType === 'autocomplete'"
-  [spxShowValidationMessages]="this.spxShowValidationMessages"
-  (spxClear)="this.handleClear()"
-  (spxEdit)="this.handleEdit()"
-  (spxHelp)="this.handleHelp()"
-  (spxFocus)="this.setFocusIn()"
-  (spxFocusOut)="this.setFocusOut()"
-  (spxSearch)="this.handleSearch()">
-  <div controls>
-    <spx-input-text
-      *ngIf="this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password'"
-      (spxBlurFromChild)="this.handleBlur()"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      [spxAutofocus]="this.spxAutofocus"
-      [spxCapitalize]="this.spxCapitalize"
-      [spxFocused]="this.spxFocused"
-      [spxInputMode]="this.spxType === 'overlaynumber' ? 'numeric' : this.spxInputMode"
-      [spxName]="this.spxName"
-      [spxPattern]="this.spxType === 'overlaynumber' ? '[0-9]*' : this.spxPattern"
-      [spxReadonly]="this.spxReadonly"
-      [spxSuggestions]="this.spxSuggestions"
-      [spxType]="this.spxType"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-      ></spx-input-text>
-    <spx-input-date
-      *ngIf="this.spxType === 'date'"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      [spxFocused]="this.spxFocused"
-      [spxMax]="this.spxMax"
-      [spxMin]="this.spxMin"
-      [spxName]="this.spxName"
-      [spxReadonly]="this.spxReadonly"
-      [spxSelectDay]="this.spxSelectDay"
-      [spxSelectMonth]="this.spxSelectMonth"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-    ></spx-input-date>
-    <spx-input-float
-      *ngIf="this.spxType === 'float'"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      [spxAutofocus]="this.spxAutofocus"
-      [spxFocused]="this.spxFocused"
-      [spxName]="this.spxName"
-      [spxReadonly]="this.spxReadonly"
-      [spxStep]="this.spxStep"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-    ></spx-input-float>
-    <spx-input-number
-      *ngIf="this.spxType === 'number'"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      [spxAutofocus]="this.spxAutofocus"
-      [spxFocused]="this.spxFocused"
-      [spxInputMode]="this.spxInputMode"
-      [spxName]="this.spxName"
-      [spxReadonly]="this.spxReadonly"
-      [spxStep]="this.spxStep"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-    ></spx-input-number>
-    <spx-input-radio
-      #radioInput
-      *ngIf="this.spxType === 'radio'"
-      (spxChange)="this.handleChange($event)"
-      [spxFocused]="this.spxFocused"
-      [spxName]="this.spxName"
-      [spxReadonly]="this.spxReadonly"
-      [spxShowLabel]="this.spxShowLabel"
-      [spxSuggestions]="this.spxSuggestions"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-    ></spx-input-radio>
-    <spx-input-time
-      #timeInput
-      *ngIf="this.spxType === 'time'"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      [spxFocused]="this.spxFocused"
-      [spxName]="this.spxName"
-      [spxReadonly]="this.spxReadonly"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-    ></spx-input-time>
-  </div>
-  <div validation-messages>
-    <ng-content></ng-content>
-  </div>
-</spx-input-box>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxFocused", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxValue"], outputs: ["spxClear", "spxSearch", "spxFocus", "spxFocusOut", "spxEdit", "spxHelp"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxName", "spxReadonly", "spxValidators", "spxFocused", "spxSelectMonth", "spxSelectDay", "value", "spxLastKeyPressed", "spxSelectStep", "spxInternalValue", "spxSuggestions", "spxWasInternalUpdate"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxWasInternalUpdate", "tick"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxFocused", "spxShowLabel", "spxReadonly", "spxSuggestions", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }] }); }
+    [spxFocused]="this.spxFocused"
+    [spxLabel]="this.spxLabel"
+    [spxReadonly]="this.spxReadonly"
+    [spxRequired]="this.spxRequired"
+    [spxValue]="this.value"
+    [spxShowHelp]="this.spxShowHelp"
+    [spxCompact]="this.spxCompact"
+    [spxShowClear]="this.spxShowClear"
+    [spxShowEdit]="this.spxShowEdit"
+    [spxShowLabel]="this.spxShowLabel"
+    [spxShowSearch]="this.spxShowSearch ? this.spxShowSearch : this.spxType === 'autocomplete'"
+    [spxShowValidationMessages]="this.spxShowValidationMessages"
+    (spxClear)="this.handleClear()"
+    (spxEdit)="this.handleEdit()"
+    (spxHelp)="this.handleHelp()"
+    (spxFocus)="this.setFocusIn()"
+    (spxFocusOut)="this.setFocusOut()"
+    (spxSearch)="this.handleSearch()">
+    <div controls>
+      @if (this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password') {
+        <spx-input-text
+          (spxBlurFromChild)="this.handleBlur()"
+          (spxChange)="this.handleChange($event)"
+          (spxFocus)="this.handleFocus()"
+          [spxAutocomplete]="this.spxAutocomplete ? this.spxAutocomplete : undefined"
+          [spxAutofocus]="this.spxAutofocus"
+          [spxCapitalize]="this.spxCapitalize"
+          [spxFocused]="this.spxFocused"
+          [spxInputMode]="this.spxType === 'overlaynumber' ? 'numeric' : this.spxInputMode"
+          [spxName]="this.spxName"
+          [spxPattern]="this.spxType === 'overlaynumber' ? '[0-9]*' : this.spxPattern"
+          [spxReadonly]="this.spxReadonly"
+          [spxSuggestions]="this.spxSuggestions"
+          [spxType]="this.spxType"
+          [spxValidators]="this.spxValidators"
+          [value]="this.value"
+        ></spx-input-text>
+      }
+      @if (this.spxType === 'date') {
+        <spx-input-date
+          (spxChange)="this.handleChange($event)"
+          (spxFocus)="this.handleFocus()"
+          [spxFocused]="this.spxFocused"
+          [spxMax]="this.spxMax!"
+          [spxMin]="this.spxMin!"
+          [spxReadonly]="this.spxReadonly"
+          [spxSelectDay]="this.spxSelectDay"
+          [spxSelectMonth]="this.spxSelectMonth"
+          [spxValidators]="this.spxValidators"
+          [(value)]="this.value"
+        ></spx-input-date>
+      }
+      @if (this.spxType === 'float') {
+        <spx-input-float
+          (spxChange)="this.handleChange($event)"
+          (spxFocus)="this.handleFocus()"
+          [spxAutofocus]="this.spxAutofocus"
+          [spxFocused]="this.spxFocused"
+          [spxName]="this.spxName"
+          [spxReadonly]="this.spxReadonly"
+          [spxStep]="this.spxStep"
+          [spxValidators]="this.spxValidators"
+          [value]="this.value"
+        ></spx-input-float>
+      }
+      @if (this.spxType === 'number') {
+        <spx-input-number
+          (spxChange)="this.handleChange($event)"
+          (spxFocus)="this.handleFocus()"
+          [spxAutofocus]="this.spxAutofocus"
+          [spxFocused]="this.spxFocused"
+          [spxInputMode]="this.spxInputMode"
+          [spxName]="this.spxName"
+          [spxReadonly]="this.spxReadonly"
+          [spxStep]="this.spxStep"
+          [spxValidators]="this.spxValidators"
+          [value]="this.value"
+        ></spx-input-number>
+      }
+      @if (this.spxType === 'radio') {
+        <spx-input-radio
+          #radioInput
+          (spxChange)="this.handleChange($event)"
+          [spxFocused]="this.spxFocused"
+          [spxName]="this.spxName"
+          [spxReadonly]="this.spxReadonly"
+          [spxShowLabel]="this.spxShowLabel"
+          [spxSuggestions]="this.spxSuggestions"
+          [spxValidators]="this.spxValidators"
+          [value]="this.value"
+        ></spx-input-radio>
+      }
+      @if (this.spxType === 'time') {
+        <spx-input-time
+          #timeInput
+          (spxChange)="this.handleChange($event)"
+          (spxFocus)="this.handleFocus()"
+          [spxFocused]="this.spxFocused"
+          [spxName]="this.spxName"
+          [spxReadonly]="this.spxReadonly"
+          [spxValidators]="this.spxValidators"
+          [value]="this.value"
+        ></spx-input-time>
+      }
+    </div>
+    <div validation-messages>
+      <ng-content></ng-content>
+    </div>
+  </spx-input-box>`, isInline: true, dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxFocused", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxValue"], outputs: ["spxClear", "spxSearch", "spxFocus", "spxFocusOut", "spxEdit", "spxHelp"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "value", "spxFocused", "spxSelectDay", "spxSelectMonth", "spxSuggestions"], outputs: ["valueChange", "spxChange", "spxFocus"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxWasInternalUpdate", "tick"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxFocused", "spxShowLabel", "spxReadonly", "spxSuggestions", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpxInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-input',
+                    standalone: true,
                     host: {
                         '(spxChange)': 'handleChangeEvent($event)'
                     },
                     imports: [
-                        NgIf,
                         SpxInputBoxComponent,
                         SpxInputDateComponent,
                         SpxInputFloatComponent,
                         SpxInputNumberComponent,
                         SpxInputRadioComponent,
                         SpxInputTextComponent,
-                        SpxInputTimeComponent,
+                        SpxInputTimeComponent
                     ],
                     providers: [
                         {
@@ -1672,109 +1619,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         }
                     ],
                     template: `<spx-input-box
-  [spxFocused]="this.spxFocused"
-  [spxLabel]="this.spxLabel"
-  [spxReadonly]="this.spxReadonly"
-  [spxRequired]="this.spxRequired"
-  [spxValue]="this.value"
-  [spxShowHelp]="this.spxShowHelp"
-  [spxCompact]="this.spxCompact"
-  [spxShowClear]="this.spxShowClear"
-  [spxShowEdit]="this.spxShowEdit"
-  [spxShowLabel]="this.spxShowLabel"
-  [spxShowSearch]="this.spxShowSearch ? this.spxShowSearch : this.spxType === 'autocomplete'"
-  [spxShowValidationMessages]="this.spxShowValidationMessages"
-  (spxClear)="this.handleClear()"
-  (spxEdit)="this.handleEdit()"
-  (spxHelp)="this.handleHelp()"
-  (spxFocus)="this.setFocusIn()"
-  (spxFocusOut)="this.setFocusOut()"
-  (spxSearch)="this.handleSearch()">
-  <div controls>
-    <spx-input-text
-      *ngIf="this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password'"
-      (spxBlurFromChild)="this.handleBlur()"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      [spxAutofocus]="this.spxAutofocus"
-      [spxCapitalize]="this.spxCapitalize"
-      [spxFocused]="this.spxFocused"
-      [spxInputMode]="this.spxType === 'overlaynumber' ? 'numeric' : this.spxInputMode"
-      [spxName]="this.spxName"
-      [spxPattern]="this.spxType === 'overlaynumber' ? '[0-9]*' : this.spxPattern"
-      [spxReadonly]="this.spxReadonly"
-      [spxSuggestions]="this.spxSuggestions"
-      [spxType]="this.spxType"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-      ></spx-input-text>
-    <spx-input-date
-      *ngIf="this.spxType === 'date'"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      [spxFocused]="this.spxFocused"
-      [spxMax]="this.spxMax"
-      [spxMin]="this.spxMin"
-      [spxName]="this.spxName"
-      [spxReadonly]="this.spxReadonly"
-      [spxSelectDay]="this.spxSelectDay"
-      [spxSelectMonth]="this.spxSelectMonth"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-    ></spx-input-date>
-    <spx-input-float
-      *ngIf="this.spxType === 'float'"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      [spxAutofocus]="this.spxAutofocus"
-      [spxFocused]="this.spxFocused"
-      [spxName]="this.spxName"
-      [spxReadonly]="this.spxReadonly"
-      [spxStep]="this.spxStep"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-    ></spx-input-float>
-    <spx-input-number
-      *ngIf="this.spxType === 'number'"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      [spxAutofocus]="this.spxAutofocus"
-      [spxFocused]="this.spxFocused"
-      [spxInputMode]="this.spxInputMode"
-      [spxName]="this.spxName"
-      [spxReadonly]="this.spxReadonly"
-      [spxStep]="this.spxStep"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-    ></spx-input-number>
-    <spx-input-radio
-      #radioInput
-      *ngIf="this.spxType === 'radio'"
-      (spxChange)="this.handleChange($event)"
-      [spxFocused]="this.spxFocused"
-      [spxName]="this.spxName"
-      [spxReadonly]="this.spxReadonly"
-      [spxShowLabel]="this.spxShowLabel"
-      [spxSuggestions]="this.spxSuggestions"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-    ></spx-input-radio>
-    <spx-input-time
-      #timeInput
-      *ngIf="this.spxType === 'time'"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      [spxFocused]="this.spxFocused"
-      [spxName]="this.spxName"
-      [spxReadonly]="this.spxReadonly"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-    ></spx-input-time>
-  </div>
-  <div validation-messages>
-    <ng-content></ng-content>
-  </div>
-</spx-input-box>`
+    [spxFocused]="this.spxFocused"
+    [spxLabel]="this.spxLabel"
+    [spxReadonly]="this.spxReadonly"
+    [spxRequired]="this.spxRequired"
+    [spxValue]="this.value"
+    [spxShowHelp]="this.spxShowHelp"
+    [spxCompact]="this.spxCompact"
+    [spxShowClear]="this.spxShowClear"
+    [spxShowEdit]="this.spxShowEdit"
+    [spxShowLabel]="this.spxShowLabel"
+    [spxShowSearch]="this.spxShowSearch ? this.spxShowSearch : this.spxType === 'autocomplete'"
+    [spxShowValidationMessages]="this.spxShowValidationMessages"
+    (spxClear)="this.handleClear()"
+    (spxEdit)="this.handleEdit()"
+    (spxHelp)="this.handleHelp()"
+    (spxFocus)="this.setFocusIn()"
+    (spxFocusOut)="this.setFocusOut()"
+    (spxSearch)="this.handleSearch()">
+    <div controls>
+      @if (this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password') {
+        <spx-input-text
+          (spxBlurFromChild)="this.handleBlur()"
+          (spxChange)="this.handleChange($event)"
+          (spxFocus)="this.handleFocus()"
+          [spxAutocomplete]="this.spxAutocomplete ? this.spxAutocomplete : undefined"
+          [spxAutofocus]="this.spxAutofocus"
+          [spxCapitalize]="this.spxCapitalize"
+          [spxFocused]="this.spxFocused"
+          [spxInputMode]="this.spxType === 'overlaynumber' ? 'numeric' : this.spxInputMode"
+          [spxName]="this.spxName"
+          [spxPattern]="this.spxType === 'overlaynumber' ? '[0-9]*' : this.spxPattern"
+          [spxReadonly]="this.spxReadonly"
+          [spxSuggestions]="this.spxSuggestions"
+          [spxType]="this.spxType"
+          [spxValidators]="this.spxValidators"
+          [value]="this.value"
+        ></spx-input-text>
+      }
+      @if (this.spxType === 'date') {
+        <spx-input-date
+          (spxChange)="this.handleChange($event)"
+          (spxFocus)="this.handleFocus()"
+          [spxFocused]="this.spxFocused"
+          [spxMax]="this.spxMax!"
+          [spxMin]="this.spxMin!"
+          [spxReadonly]="this.spxReadonly"
+          [spxSelectDay]="this.spxSelectDay"
+          [spxSelectMonth]="this.spxSelectMonth"
+          [spxValidators]="this.spxValidators"
+          [(value)]="this.value"
+        ></spx-input-date>
+      }
+      @if (this.spxType === 'float') {
+        <spx-input-float
+          (spxChange)="this.handleChange($event)"
+          (spxFocus)="this.handleFocus()"
+          [spxAutofocus]="this.spxAutofocus"
+          [spxFocused]="this.spxFocused"
+          [spxName]="this.spxName"
+          [spxReadonly]="this.spxReadonly"
+          [spxStep]="this.spxStep"
+          [spxValidators]="this.spxValidators"
+          [value]="this.value"
+        ></spx-input-float>
+      }
+      @if (this.spxType === 'number') {
+        <spx-input-number
+          (spxChange)="this.handleChange($event)"
+          (spxFocus)="this.handleFocus()"
+          [spxAutofocus]="this.spxAutofocus"
+          [spxFocused]="this.spxFocused"
+          [spxInputMode]="this.spxInputMode"
+          [spxName]="this.spxName"
+          [spxReadonly]="this.spxReadonly"
+          [spxStep]="this.spxStep"
+          [spxValidators]="this.spxValidators"
+          [value]="this.value"
+        ></spx-input-number>
+      }
+      @if (this.spxType === 'radio') {
+        <spx-input-radio
+          #radioInput
+          (spxChange)="this.handleChange($event)"
+          [spxFocused]="this.spxFocused"
+          [spxName]="this.spxName"
+          [spxReadonly]="this.spxReadonly"
+          [spxShowLabel]="this.spxShowLabel"
+          [spxSuggestions]="this.spxSuggestions"
+          [spxValidators]="this.spxValidators"
+          [value]="this.value"
+        ></spx-input-radio>
+      }
+      @if (this.spxType === 'time') {
+        <spx-input-time
+          #timeInput
+          (spxChange)="this.handleChange($event)"
+          (spxFocus)="this.handleFocus()"
+          [spxFocused]="this.spxFocused"
+          [spxName]="this.spxName"
+          [spxReadonly]="this.spxReadonly"
+          [spxValidators]="this.spxValidators"
+          [value]="this.value"
+        ></spx-input-time>
+      }
+    </div>
+    <div validation-messages>
+      <ng-content></ng-content>
+    </div>
+  </spx-input-box>`,
                 }]
         }], propDecorators: { spxLabel: [{
                 type: Input
@@ -1786,6 +1739,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 type: Input
             }], spxReadonly: [{
                 type: Input
+            }], spxAutocomplete: [{
+                type: Input
             }], spxAutofocus: [{
                 type: Input
             }], spxInputMode: [{