@softpak/components 19.4.0 → 19.5.0-beta.2

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

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, HostListener, ViewChild, input, model, output, signal, viewChild, computed } from '@angular/core';
+import { Injectable, inject, input, model, output, signal, Component, ChangeDetectionStrategy, HostListener, 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 { BehaviorSubject, map, pairwise, filter, fromEvent } from 'rxjs';
 import * as i1$1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
 import { valuePairToValue, SpxSeverityEnum } from '@softpak/components/spx-helpers';
 import { DateTime } from 'luxon';
@@ -14,25 +14,87 @@ 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 SelectedInputService {
+    constructor() {
+        this.focusedElement = new BehaviorSubject(0); // Signal to store the selected input's ID
+        this.focusedElement$ = this.focusedElement.asObservable(); // Observable for the comparison result
+    }
+    isFocused$(id) {
+        return this.focusedElement$.pipe(map((focusedId) => {
+            return focusedId === id;
+        }) // Emit true/false if the element is focused
+        );
+    }
+    isBlurred$(id) {
+        return this.focusedElement$.pipe(pairwise(), // Emit both the previous and current value as a tuple
+        filter(([previous]) => {
+            // console.log("PREVIOUS:" + previous);
+            // console.log("NEXT: " + current);
+            // console.log("CURRENT ID: " + id)
+            return previous === id;
+        }), // Only proceed if the previous value matches the ID
+        map(([, current]) => {
+            return current === null;
+        }));
+    }
+    getSelectedElementId() {
+        return this.focusedElement.value; // Access the value directly from BehaviorSubject
+    }
+    // Method to update the selected ID
+    setSelectedElementId(id) {
+        this.focusedElement.next(id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SelectedInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SelectedInputService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SelectedInputService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root', // Ensure the service is available globally
+                }]
+        }] });
+
 class SpxInputBoxComponent {
-    handleFocusIn(ev) {
-        this.emitFocusIn();
+    constructor() {
+        this.selectedInputService = inject(SelectedInputService);
+        this.faEdit = faEdit;
+        this.faSearch = faSearch;
+        this.faQuestion = faQuestion;
+        this.faTimes = faTimes;
+        this.spxCompact = input();
+        this.spxLabel = input();
+        this.spxReadonly = input(false);
+        this.spxRequired = input();
+        this.spxShowClear = input(true);
+        this.spxShowEdit = input();
+        this.spxShowHelp = input();
+        this.spxShowLabel = input(true);
+        this.spxShowSearch = input();
+        this.spxShowValidationMessages = input();
+        this.spxValue = model();
+        this.spxClear = output();
+        this.spxSearch = output();
+        this.spxEdit = output();
+        this.spxHelp = output();
+        this.id = signal(0);
+        this.spxIsFocused = signal(false);
+        this.spxSetIdInParent = output();
     }
-    handleFocusOut(ev) {
-        const thisEl = this.elRef.nativeElement;
-        const relatedElement = ev.relatedTarget;
-        if (!relatedElement || !thisEl.contains(relatedElement)) {
-            this.emitFocusOut();
-        }
+    ngOnInit() {
+        this.id.set(Math.random());
+        this.spxSetIdInParent.emit(this.id());
+        this.selectedInputService.isFocused$(this.id()).subscribe((isFocused) => {
+            this.spxIsFocused.set(isFocused);
+        });
     }
-    handleWindowClick(ev) {
-        if (ev.composedPath().includes(this.elRef.nativeElement)) {
-            this.emitFocusIn();
-        }
-        else {
-            this.emitFocusOut();
+    handleFocusIn(ev) {
+        if (this.selectedInputService.getSelectedElementId() != this.id()) {
+            this.selectedInputService.setSelectedElementId(this.id());
         }
     }
+    handleFocusOut(ev) {
+        this.selectedInputService.setSelectedElementId(null);
+    }
     onClear() {
         this.spxClear.emit();
     }
@@ -45,252 +107,36 @@ class SpxInputBoxComponent {
     onHelp() {
         this.spxHelp.emit();
     }
-    constructor(elRef) {
-        this.elRef = elRef;
-        this.faEdit = faEdit;
-        this.faSearch = faSearch;
-        this.faQuestion = faQuestion;
-        this.faTimes = faTimes;
-        this.spxFocused = false;
-        this.spxReadonly = false;
-        this.spxShowClear = true;
-        this.spxShowLabel = true;
-        this.spxClear = new EventEmitter();
-        this.spxSearch = new EventEmitter();
-        this.spxFocus = new EventEmitter();
-        this.spxFocusOut = new EventEmitter();
-        this.spxEdit = new EventEmitter();
-        this.spxHelp = new EventEmitter();
-    }
-    emitFocusIn() {
-        if (!this.spxFocused) {
-            this.spxFocus.emit();
-        }
-    }
-    emitFocusOut() {
-        if (this.spxFocused) {
-            this.spxFocusOut.emit();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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">
-      @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>
-    @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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxValue: "spxValueChange", spxClear: "spxClear", spxSearch: "spxSearch", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSetIdInParent: "spxSetIdInParent" }, host: { listeners: { "click": "handleFocusIn()", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-3\"\r\n      [class.rounded-none]=\"this.spxShowValidationMessages()\"\r\n      [class.rounded-t]=\"this.spxShowValidationMessages()\"\r\n      [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n      [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n      [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n      [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n      [class.bg-white]=\"!this.spxReadonly()\"\r\n      [class.bg-gray-300]=\"this.spxReadonly()\"\r\n      [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n      \r\n      >\r\n      <div class=\"flex-auto p-3\"\r\n        [class.p-0]=\"this.spxCompact()\"\r\n        [class.flex]=\"this.spxCompact()\"\r\n        [class.items-center]=\"this.spxCompact()\">\r\n        @if (this.spxShowLabel()) {\r\n          <div class=\"font-bold text-sm mb-1 text-gray-800\"\r\n            [class.mb-0]=\"this.spxCompact()\"\r\n            [class.px-3]=\"this.spxCompact()\">\r\n            {{this.spxLabel()}} @if (spxRequired()) {\r\n            <span class=\"text-red-800\">*</span>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <ng-content select=\"[controls]\"></ng-content>\r\n    </div>\r\n    <div class=\"flex flex-none gap-1 p-1\">\r\n      @if (this.spxShowEdit()) {\r\n        <spx-button\r\n          (spxClick)=\"onEdit()\"\r\n          [spxFullHeight]=\"true\"\r\n          [spxSize]=\"'xl'\"\r\n          [spxType]=\"'button'\">\r\n          <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\r\n        </spx-button>\r\n      }\r\n      @if (this.spxShowHelp()) {\r\n        <spx-button\r\n          (spxClick)=\"onHelp()\"\r\n          [spxFullHeight]=\"true\"\r\n          [spxDisabled]=\"this.spxReadonly()\"\r\n          [spxSize]=\"'xl'\"\r\n          [spxTabIndex]=\"-1\"\r\n          [spxType]=\"'button'\">\r\n          <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\r\n        </spx-button>\r\n      }\r\n      @if (this.spxShowSearch()) {\r\n        <spx-button\r\n          (spxClick)=\"onSearch()\"\r\n          [spxFullHeight]=\"true\"\r\n          [spxDisabled]=\"this.spxReadonly()\"\r\n          [spxSize]=\"'xl'\"\r\n          [spxTabIndex]=\"-1\"\r\n          [spxType]=\"'button'\">\r\n          <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\r\n        </spx-button>\r\n      }\r\n      @if (this.spxShowClear()) {\r\n        <spx-button\r\n          (spxClick)=\"onClear()\"\r\n          [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\r\n          [spxFullHeight]=\"true\"\r\n          [spxSize]=\"'xl'\"\r\n          [spxTabIndex]=\"-1\"\r\n          [spxType]=\"'button'\">\r\n          <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\r\n        </spx-button>\r\n      }\r\n    </div>\r\n    </div>\r\n    @if (this.spxShowValidationMessages()) {\r\n      <div class=\"bg-red-600 rounded-b text-white p-3\">\r\n        <ng-content select=\"[validation-messages]\"></ng-content>\r\n      </div>\r\n    }", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'spx-input-box',
-                    imports: [
+            args: [{ selector: 'spx-input-box', imports: [
                         SpxButtonComponent,
                         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">
-        @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">
-      @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>
-    @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
-            }], spxFocused: [{
-                type: Input
-            }], spxLabel: [{
-                type: Input
-            }], spxReadonly: [{
-                type: Input
-            }], spxRequired: [{
-                type: Input
-            }], spxShowClear: [{
-                type: Input
-            }], spxShowEdit: [{
-                type: Input
-            }], spxShowHelp: [{
-                type: Input
-            }], spxShowLabel: [{
-                type: Input
-            }], spxShowSearch: [{
-                type: Input
-            }], spxShowValidationMessages: [{
-                type: Input
-            }], spxValue: [{
-                type: Input
-            }], spxClear: [{
-                type: Output
-            }], spxSearch: [{
-                type: Output
-            }], spxFocus: [{
-                type: Output
-            }], spxFocusOut: [{
-                type: Output
-            }], spxEdit: [{
-                type: Output
-            }], spxHelp: [{
-                type: Output
-            }], handleFocusIn: [{
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "(click)": "handleFocusIn()"
+                    }, template: "<div class=\"flex rounded w-full gap-3\"\r\n      [class.rounded-none]=\"this.spxShowValidationMessages()\"\r\n      [class.rounded-t]=\"this.spxShowValidationMessages()\"\r\n      [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n      [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n      [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n      [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n      [class.bg-white]=\"!this.spxReadonly()\"\r\n      [class.bg-gray-300]=\"this.spxReadonly()\"\r\n      [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n      \r\n      >\r\n      <div class=\"flex-auto p-3\"\r\n        [class.p-0]=\"this.spxCompact()\"\r\n        [class.flex]=\"this.spxCompact()\"\r\n        [class.items-center]=\"this.spxCompact()\">\r\n        @if (this.spxShowLabel()) {\r\n          <div class=\"font-bold text-sm mb-1 text-gray-800\"\r\n            [class.mb-0]=\"this.spxCompact()\"\r\n            [class.px-3]=\"this.spxCompact()\">\r\n            {{this.spxLabel()}} @if (spxRequired()) {\r\n            <span class=\"text-red-800\">*</span>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <ng-content select=\"[controls]\"></ng-content>\r\n    </div>\r\n    <div class=\"flex flex-none gap-1 p-1\">\r\n      @if (this.spxShowEdit()) {\r\n        <spx-button\r\n          (spxClick)=\"onEdit()\"\r\n          [spxFullHeight]=\"true\"\r\n          [spxSize]=\"'xl'\"\r\n          [spxType]=\"'button'\">\r\n          <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\r\n        </spx-button>\r\n      }\r\n      @if (this.spxShowHelp()) {\r\n        <spx-button\r\n          (spxClick)=\"onHelp()\"\r\n          [spxFullHeight]=\"true\"\r\n          [spxDisabled]=\"this.spxReadonly()\"\r\n          [spxSize]=\"'xl'\"\r\n          [spxTabIndex]=\"-1\"\r\n          [spxType]=\"'button'\">\r\n          <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\r\n        </spx-button>\r\n      }\r\n      @if (this.spxShowSearch()) {\r\n        <spx-button\r\n          (spxClick)=\"onSearch()\"\r\n          [spxFullHeight]=\"true\"\r\n          [spxDisabled]=\"this.spxReadonly()\"\r\n          [spxSize]=\"'xl'\"\r\n          [spxTabIndex]=\"-1\"\r\n          [spxType]=\"'button'\">\r\n          <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\r\n        </spx-button>\r\n      }\r\n      @if (this.spxShowClear()) {\r\n        <spx-button\r\n          (spxClick)=\"onClear()\"\r\n          [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\r\n          [spxFullHeight]=\"true\"\r\n          [spxSize]=\"'xl'\"\r\n          [spxTabIndex]=\"-1\"\r\n          [spxType]=\"'button'\">\r\n          <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\r\n        </spx-button>\r\n      }\r\n    </div>\r\n    </div>\r\n    @if (this.spxShowValidationMessages()) {\r\n      <div class=\"bg-red-600 rounded-b text-white p-3\">\r\n        <ng-content select=\"[validation-messages]\"></ng-content>\r\n      </div>\r\n    }" }]
+        }], propDecorators: { handleFocusIn: [{
                 type: HostListener,
                 args: ['focusin', ["$event"]]
             }], handleFocusOut: [{
                 type: HostListener,
                 args: ['focusout', ["$event"]]
-            }], handleWindowClick: [{
-                type: HostListener,
-                args: ['document:click', ["$event"]]
             }] } });
 
 class SpxDropdownComponent {
     constructor() {
-        this.focusPosition = 0;
-        this.spxSuggestions = [];
-        this.spxSelect = new EventEmitter();
+        this.focusPosition = signal(0);
+        this.spxSuggestions = input([]);
+        this.spxSelect = output();
     }
     ngOnInit() {
         this.listenToKeyUp();
     }
-    ngOnChanges(changes) {
-        this.focusPosition = 0;
+    ngOnChanges(_changes) {
+        this.focusPosition.set(0);
     }
     ngOnDestroy() {
         this.subscriptionKeyUp?.unsubscribe();
@@ -300,525 +146,312 @@ class SpxDropdownComponent {
     }
     listenToKeyUp() {
         this.subscriptionKeyUp = fromEvent(window, 'keyup').subscribe((event) => {
-            if (event.key === 'ArrowUp' && this.focusPosition > 0) {
-                this.focusPosition = this.focusPosition - 1;
+            if (event.key === 'ArrowUp' && this.focusPosition() > 0) {
+                this.focusPosition.update((oldValue) => oldValue - 1);
                 event.preventDefault();
             }
-            if (event.key === 'ArrowDown' && this.focusPosition < this.spxSuggestions.length - 1) {
-                this.focusPosition = this.focusPosition + 1;
+            if (event.key === 'ArrowDown' && this.focusPosition() < this.spxSuggestions().length - 1) {
+                this.focusPosition.update((oldValue) => oldValue + 1);
                 event.preventDefault();
             }
-            if (event.key === 'Enter' && this.spxSuggestions.length > 0) {
-                this.select(this.spxSuggestions.at(this.focusPosition));
+            if (event.key === 'Enter' && this.spxSuggestions().length > 0) {
+                this.select(this.spxSuggestions().at(this.focusPosition()));
                 event.preventDefault();
             }
         });
     }
     select(valuePair) {
-        this.focusPosition = 0;
+        this.focusPosition.set(0);
         this.spxSelect.emit(valuePair);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative text-black\">\r\n  <div\r\n    class=\"absolute bg-gray-100 left-0 right-0 z-20\">\r\n    @for (valuePair of this.spxSuggestions(); track valuePair; let i = $index) {\r\n      <button\r\n        class=\"text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left\"\r\n        [class.bg-gray-100]=\"i === this.focusPosition()\"\r\n        [class.bg-white]=\"i !== this.focusPosition()\"\r\n        (click)=\"this.handleSuggestionClick(valuePair)\"\r\n        [attr.tabindex]=\"-1\"\r\n        [attr.type]=\"'button'\">\r\n        <div class=\"flex-1 p-1 font-bold text-lg\">{{valuePair?.description}}</div>\r\n        <spx-button (spxClick)=\"this.handleSuggestionClick(valuePair)\" [spxType]=\"'button'\" [spxTabIndex]=\"-1\">Select</spx-button>\r\n      </button>\r\n    }\r\n  </div>\r\n</div>", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxDropdownComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'spx-dropdown',
-                    imports: [
+            args: [{ selector: 'spx-dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         SpxButtonComponent
-                    ],
-                    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>`
-                }]
-        }], propDecorators: { spxSuggestions: [{
-                type: Input
-            }], spxSelect: [{
-                type: Output
-            }] } });
+                    ], template: "<div class=\"relative text-black\">\r\n  <div\r\n    class=\"absolute bg-gray-100 left-0 right-0 z-20\">\r\n    @for (valuePair of this.spxSuggestions(); track valuePair; let i = $index) {\r\n      <button\r\n        class=\"text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left\"\r\n        [class.bg-gray-100]=\"i === this.focusPosition()\"\r\n        [class.bg-white]=\"i !== this.focusPosition()\"\r\n        (click)=\"this.handleSuggestionClick(valuePair)\"\r\n        [attr.tabindex]=\"-1\"\r\n        [attr.type]=\"'button'\">\r\n        <div class=\"flex-1 p-1 font-bold text-lg\">{{valuePair?.description}}</div>\r\n        <spx-button (spxClick)=\"this.handleSuggestionClick(valuePair)\" [spxType]=\"'button'\" [spxTabIndex]=\"-1\">Select</spx-button>\r\n      </button>\r\n    }\r\n  </div>\r\n</div>" }]
+        }] });
+
+var SpxInputTypeEnum;
+(function (SpxInputTypeEnum) {
+    SpxInputTypeEnum["autocomplete"] = "autocomplete";
+    SpxInputTypeEnum["button"] = "button";
+    SpxInputTypeEnum["date"] = "date";
+    SpxInputTypeEnum["float"] = "float";
+    SpxInputTypeEnum["hidden"] = "hidden";
+    SpxInputTypeEnum["overlay"] = "overlay";
+    SpxInputTypeEnum["overlayNumber"] = "overlaynumber";
+    SpxInputTypeEnum["radio"] = "radio";
+    SpxInputTypeEnum["number"] = "number";
+    SpxInputTypeEnum["password"] = "password";
+    SpxInputTypeEnum["text"] = "text";
+    SpxInputTypeEnum["textNumericKeyboard"] = "textNumericKeyboard";
+    SpxInputTypeEnum["time"] = "time";
+    SpxInputTypeEnum["dropdown"] = "dropdown";
+})(SpxInputTypeEnum || (SpxInputTypeEnum = {}));
 
 class SpxInputTextComponent {
     constructor() {
-        this.spxAutofocus = false;
-        this.spxSuggestions = [];
-        this.spxReadonly = false;
-        this.spxCapitalize = false;
-        this.spxFocused = true;
-        this.spxType = 'text';
-        this.spxBlurFromChild = new EventEmitter();
-        this.spxChange = new EventEmitter();
-        this.spxFocus = new EventEmitter();
-        this.spxWasInternalUpdate = false;
+        this.spxName = input();
+        this.spxAutofocus = input(false);
+        this.spxAutocomplete = input();
+        this.spxInputMode = input();
+        this.spxPattern = input();
+        this.spxSuggestions = input([]);
+        this.spxReadonly = input(false);
+        this.spxValidators = input();
+        this.spxCapitalize = input(false);
+        this.spxType = input(SpxInputTypeEnum.text);
+        this.spxWasInternalUpdate = input(false);
+        this.inputRef = viewChild.required('input');
+        this.spxBlurFromChild = output();
+        this.value = model.required();
+        this.valueChange = output();
+        this.spxElementId = input();
+        this.selectedInputService = inject(SelectedInputService);
+        this.spxIsFocused = signal(false);
+    }
+    ngOnInit() {
+        this.componentDidLoad();
+        // Filter updates based on focus state
+        this.selectedInputService.focusedElement$
+            .pipe(filter((focusedId) => focusedId === this.spxElementId()))
+            .subscribe(() => {
+            this.spxIsFocused.set(true); // Update only if focused
+            this.spxSetFocus();
+        });
     }
     spxSetFocus() {
-        this.inputRef?.nativeElement?.focus();
+        this.inputRef().nativeElement?.focus();
     }
     componentDidLoad() {
-        if (this.spxAutofocus) {
-            this.spxFocus.emit();
+        if (this.spxAutofocus()) {
             this.spxSetFocus();
         }
     }
-    handleBlur() {
-        this.spxBlurFromChild.emit();
-    }
-    handleFocus() {
-        this.spxFocus.emit();
+    handleChange($event) {
+        this.value.set({ ...this.value(), value: $event });
+        this.valueChange.emit(this.value()); // Emit the updated value to the parent
     }
     handleDescriptionInput(event) {
-        this.value = {
+        this.value.set({
             description: event.target ? event.target.value : null,
             value: event.target ? event.target.value : null,
-        };
-        this.spxChange.emit(this.value);
+        });
     }
     handleSuggestionClick(value) {
-        if (!this.spxReadonly) {
-            this.value = value;
-            this.spxChange.emit(this.value);
-            this.spxFocused = false;
+        if (!this.spxReadonly()) {
+            this.value.set(value);
         }
     }
-    handleKeyUp() {
-        this.spxFocused = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxBlurFromChild: "spxBlurFromChild", value: "valueChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\r\n  <input\r\n    #input\r\n    class=\"font-bold text-lg w-full outline-none\"\r\n    autocomplete=\"off\"\r\n    spellcheck=\"false\"\r\n    [class.bg-white]=\"!this.spxReadonly()\"\r\n    [class.bg-gray-300]=\"this.spxReadonly()\"\r\n    [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n    [class.uppercase]=\"this.spxCapitalize()\"\r\n    [attr.autocomplete]=\"this.spxAutocomplete()\"\r\n    [attr.autofocus]=\"this.spxAutofocus()\"\r\n    [attr.disabled]=\"this.spxReadonly()\"\r\n    [attr.inputMode]=\"this.spxInputMode()\"\r\n    [attr.pattern]=\"this.spxPattern()\"\r\n    [attr.name]=\"this.spxName()\"\r\n    [attr.type]=\"this.spxType()\"\r\n    [ngModel]=\"this.value().description ? this.value().description : this.value().value\"\r\n    (ngModelChange)=\"this.handleChange($event)\"\r\n    />\r\n\r\n  @if (this.value().description && this.value().value && this.value().description?.valueOf() !== this.value().value?.valueOf()) {\r\n    <span>{{this.value().value}}</span>\r\n  }\r\n  @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType() === 'overlaynumber')) {\r\n    <spx-dropdown\r\n      [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\r\n    </spx-dropdown>\r\n  }\r\n</div>", dependencies: [{ kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTextComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'spx-input-text',
-                    imports: [
-                        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.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: [{
-                type: Input
-            }], spxSuggestions: [{
-                type: Input
-            }], spxReadonly: [{
-                type: Input
-            }], spxValidators: [{
-                type: Input
-            }], spxCapitalize: [{
-                type: Input
-            }], spxFocused: [{
-                type: Input
-            }], spxType: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], spxBlurFromChild: [{
-                type: Output
-            }], spxChange: [{
-                type: Output
-            }], spxFocus: [{
-                type: Output
-            }], spxWasInternalUpdate: [{
-                type: Input
-            }], inputRef: [{
-                type: ViewChild,
-                args: ['input', { static: true }]
-            }] } });
+            args: [{ selector: 'spx-input-text', imports: [
+                        SpxDropdownComponent,
+                        ReactiveFormsModule,
+                        FormsModule
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\r\n  <input\r\n    #input\r\n    class=\"font-bold text-lg w-full outline-none\"\r\n    autocomplete=\"off\"\r\n    spellcheck=\"false\"\r\n    [class.bg-white]=\"!this.spxReadonly()\"\r\n    [class.bg-gray-300]=\"this.spxReadonly()\"\r\n    [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n    [class.uppercase]=\"this.spxCapitalize()\"\r\n    [attr.autocomplete]=\"this.spxAutocomplete()\"\r\n    [attr.autofocus]=\"this.spxAutofocus()\"\r\n    [attr.disabled]=\"this.spxReadonly()\"\r\n    [attr.inputMode]=\"this.spxInputMode()\"\r\n    [attr.pattern]=\"this.spxPattern()\"\r\n    [attr.name]=\"this.spxName()\"\r\n    [attr.type]=\"this.spxType()\"\r\n    [ngModel]=\"this.value().description ? this.value().description : this.value().value\"\r\n    (ngModelChange)=\"this.handleChange($event)\"\r\n    />\r\n\r\n  @if (this.value().description && this.value().value && this.value().description?.valueOf() !== this.value().value?.valueOf()) {\r\n    <span>{{this.value().value}}</span>\r\n  }\r\n  @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType() === 'overlaynumber')) {\r\n    <spx-dropdown\r\n      [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\r\n    </spx-dropdown>\r\n  }\r\n</div>" }]
+        }] });
 
 class SpxInputFloatComponent {
     constructor() {
-        this.internalValue = {
+        this.internalValue = signal({
             first: null,
             second: null,
-        };
-        this.spxAutofocus = false;
-        this.spxReadonly = false;
-        this.spxFocused = true;
-        this.spxChange = new EventEmitter();
-        this.spxFocus = new EventEmitter();
-        this.spxWasInternalUpdate = false;
-        this.tick = {};
+        });
+        this.spxName = input();
+        this.spxAutofocus = input(false);
+        this.spxElementId = input();
+        this.spxReadonly = input(false);
+        this.spxValidators = input();
+        this.spxStep = input();
+        this.value = model.required();
+        this.spxWasInternalUpdate = input(false);
+        this.selectedInputService = inject(SelectedInputService);
+        this.spxIsFocused = signal(false);
+        this.firstInputRef = viewChild('firstInputRef');
+        this.secondInputRef = viewChild('secondInputRef');
     }
     spxSetFocus() {
-        this.firstInputRef?.nativeElement?.focus();
+        this.firstInputRef()?.nativeElement?.focus();
     }
     ngOnInit() {
-        if (this.spxAutofocus) {
-            this.spxFocus.emit();
+        if (this.spxAutofocus()) {
             this.spxSetFocus();
         }
-        this.handleSetValue(this.value);
-    }
-    ngOnChanges(changes) {
-        if (changes['value']) {
-            this.handleSetValue(changes['value'].currentValue);
-        }
-    }
-    handleFocus() {
-        this.spxFocus.emit();
+        this.selectedInputService.focusedElement$
+            .subscribe((focusedId) => {
+            if (focusedId === this.spxElementId() && this.spxIsFocused() == false) {
+                this.spxIsFocused.set(true); // Update only if focused
+                this.spxSetFocus();
+            }
+            else if (focusedId !== this.spxElementId() && focusedId != null) {
+                this.spxIsFocused.set(false);
+            }
+        });
+        this.handleSetValue(this.value());
     }
     handleSetValue(newValue) {
         if (this.isNumeric(newValue?.value)) {
-            this.internalValue = {
+            this.internalValue.set({
                 first: Math.floor(parseFloat(newValue?.value)),
                 second: newValue?.value?.split ? newValue?.value.split('.')[1] : 0,
-            };
+            });
         }
         else {
-            this.internalValue = {
+            this.internalValue.set({
                 first: null,
                 second: null,
-            };
+            });
         }
-        this.tick = {};
     }
     handleInput(value, position) {
-        this.internalValue = {
-            first: position === 1 ? value : this.internalValue.first,
-            second: position === 2 ? value : this.internalValue.second,
-        };
+        this.internalValue.set({
+            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) {
+        if (this.internalValue().first === null && this.internalValue().second === null) {
             result = null;
         }
         else {
-            result = `${this.internalValue.first ? this.internalValue.first : 0}.${this.internalValue.second ? this.internalValue.second : 0}`;
+            result = `${this.internalValue().first ? this.internalValue().first : 0}.${this.internalValue().second ? this.internalValue().second : 0}`;
         }
-        this.value = {
+        this.value.set({
             description: result,
             value: result,
-        };
-        this.spxChange.emit(this.value);
+        });
+    }
+    handleClear() {
+        this.internalValue().first = null;
+        this.internalValue().second = null;
     }
     isNumeric(value) {
         return /^[+-]?\d+(\.\d+)?$/.test(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputFloatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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"
-    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
-    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
-    [attr.pattern]="'[0-9]*'"
-    [attr.step]="1"
-    [attr.type]="'text'"
-    [class.spx-input-float--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
-    (focus)="this.handleFocus()"
-    [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"
-    (focus)="this.handleFocus()"
-    [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"], 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: SpxInputFloatComponent, isStandalone: true, selector: "spx-input-float", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "firstInputRef", first: true, predicate: ["firstInputRef"], descendants: true, isSignal: true }, { propertyName: "secondInputRef", first: true, predicate: ["secondInputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-end\">\r\n  <input\r\n    #firstInputRef\r\n    class=\"spx-input-float__input\"\r\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\r\n    [attr.disabled]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [attr.pattern]=\"'[0-9]*'\"\r\n    [attr.step]=\"1\"\r\n    [attr.type]=\"'text'\"\r\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [ngModel]=\"this.internalValue().first ? this.internalValue().first : undefined\"\r\n    (ngModelChange)=\"this.handleInput($event, 1)\" />\r\n  <span class=\"text-black font-bold text-2xl mx-4\">,</span>\r\n  <input #secondInputRef\r\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\r\n    class=\"spx-input-float__input\"\r\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [attr.disabled]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [ngModel]=\"this.internalValue().second ? this.internalValue().second : undefined\"\r\n    (ngModelChange)=\"this.handleInput($event, 2)\"\r\n    [attr.step]=\"1\"\r\n    [attr.type]=\"'text'\"\r\n    [attr.pattern]=\"'[0-9]*'\" />\r\n</div>", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputFloatComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-input-float', imports: [
                         FormsModule,
-                    ], template: `<div class="flex items-end">
-  <input
-    #firstInputRef
-    class="spx-input-float__input"
-    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
-    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
-    [attr.pattern]="'[0-9]*'"
-    [attr.step]="1"
-    [attr.type]="'text'"
-    [class.spx-input-float--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
-    (focus)="this.handleFocus()"
-    [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"
-    (focus)="this.handleFocus()"
-    [ngModel]="this.internalValue?.second ? this.internalValue?.second : undefined"
-    (ngModelChange)="this.handleInput($event, 2)"
-    [attr.step]="1"
-    [attr.type]="'text'"
-    [attr.pattern]="'[0-9]*'" />
-</div>`, 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"] }]
-        }], propDecorators: { spxName: [{
-                type: Input
-            }], spxAutofocus: [{
-                type: Input
-            }], spxReadonly: [{
-                type: Input
-            }], spxValidators: [{
-                type: Input
-            }], spxFocused: [{
-                type: Input
-            }], spxStep: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], spxChange: [{
-                type: Output
-            }], spxFocus: [{
-                type: Output
-            }], spxWasInternalUpdate: [{
-                type: Input
-            }], tick: [{
-                type: Input
-            }], firstInputRef: [{
-                type: ViewChild,
-                args: ['firstInputRef', { static: true }]
-            }] } });
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-end\">\r\n  <input\r\n    #firstInputRef\r\n    class=\"spx-input-float__input\"\r\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\r\n    [attr.disabled]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [attr.pattern]=\"'[0-9]*'\"\r\n    [attr.step]=\"1\"\r\n    [attr.type]=\"'text'\"\r\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [ngModel]=\"this.internalValue().first ? this.internalValue().first : undefined\"\r\n    (ngModelChange)=\"this.handleInput($event, 1)\" />\r\n  <span class=\"text-black font-bold text-2xl mx-4\">,</span>\r\n  <input #secondInputRef\r\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\r\n    class=\"spx-input-float__input\"\r\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [attr.disabled]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [ngModel]=\"this.internalValue().second ? this.internalValue().second : undefined\"\r\n    (ngModelChange)=\"this.handleInput($event, 2)\"\r\n    [attr.step]=\"1\"\r\n    [attr.type]=\"'text'\"\r\n    [attr.pattern]=\"'[0-9]*'\" />\r\n</div>", 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"] }]
+        }] });
 
 class SpxInputNumberComponent {
     constructor() {
-        this.spxAutofocus = false;
-        this.spxReadonly = false;
-        this.spxFocused = true;
-        this.spxChange = new EventEmitter();
-        this.spxFocus = new EventEmitter();
-        this.spxWasInternalUpdate = false;
+        this.spxName = input();
+        this.spxAutofocus = input(false);
+        this.spxInputMode = input();
+        this.spxReadonly = input(false);
+        this.spxValidators = input();
+        this.spxFocused = input(true);
+        this.spxStep = input();
+        this.value = model.required();
+        this.inputRef = viewChild.required('input');
+        this.spxElementId = input();
+        this.selectedInputService = inject(SelectedInputService);
+    }
+    ngOnInit() {
+        // Filter updates based on focus state
+        this.selectedInputService.focusedElement$
+            .pipe(filter((focusedId) => focusedId === this.spxElementId()))
+            .subscribe(() => {
+            this.spxSetFocus();
+        });
     }
     spxSetFocus() {
-        this.inputRef?.nativeElement?.focus();
+        this.inputRef().nativeElement?.focus();
+    }
+    handleChange($event) {
+        this.value.set({ ...this.value(), value: $event });
     }
     componentDidLoad() {
-        if (this.spxAutofocus) {
-            this.spxFocus.emit();
+        if (this.spxAutofocus()) {
             this.spxSetFocus();
         }
     }
-    handleFocus() {
-        this.spxFocus.emit();
-    }
-    handleInput(event) {
-        this.value = {
-            description: event.target ? event.target.value : null,
-            value: event.target ? event.target.value : null,
-        };
-        this.spxChange.emit(this.value);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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"
-    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
-    [class.spx-input-number--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
-    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
-    [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
-    [attr.value]="this.value?.value ? this.value?.value : undefined"
-    [attr.step]="this.spxStep ? this.spxStep : undefined"
-    [attr.type]="'number'"
-    (focus)="this.handleFocus()"
-    (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"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: SpxInputNumberComponent, isStandalone: true, selector: "spx-input-number", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxFocused: { classPropertyName: "spxFocused", publicName: "spxFocused", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"spx-input-number__controls\">\r\n  <input\r\n    #input\r\n    class=\"spx-input-number__input\"\r\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\r\n    [class.spx-input-number--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [attr.disabled]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [attr.inputMode]=\"this.spxInputMode() ? this.spxInputMode() : undefined\"\r\n    [attr.step]=\"this.spxStep() ? this.spxStep() : undefined\"\r\n    [attr.type]=\"'number'\"\r\n    [ngModel]=\"this.value().value\"\r\n    (ngModelChange)=\"this.handleChange($event)\" />\r\n</div>  ", 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"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-input-number', imports: [], template: `<div class="spx-input-number__controls">
-  <input
-    #input
-    class="spx-input-number__input"
-    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
-    [class.spx-input-number--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
-    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
-    [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
-    [attr.value]="this.value?.value ? this.value?.value : undefined"
-    [attr.step]="this.spxStep ? this.spxStep : undefined"
-    [attr.type]="'number'"
-    (focus)="this.handleFocus()"
-    (input)="this.handleInput($event)" />
-</div>`, 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"] }]
-        }], propDecorators: { spxName: [{
-                type: Input
-            }], spxAutofocus: [{
-                type: Input
-            }], spxInputMode: [{
-                type: Input
-            }], spxReadonly: [{
-                type: Input
-            }], spxValidators: [{
-                type: Input
-            }], spxFocused: [{
-                type: Input
-            }], spxStep: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], spxChange: [{
-                type: Output
-            }], spxFocus: [{
-                type: Output
-            }], inputRef: [{
-                type: ViewChild,
-                args: ['input', { static: true }]
-            }] } });
+            args: [{ selector: 'spx-input-number', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "<div class=\"spx-input-number__controls\">\r\n  <input\r\n    #input\r\n    class=\"spx-input-number__input\"\r\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\r\n    [class.spx-input-number--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [attr.disabled]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [attr.inputMode]=\"this.spxInputMode() ? this.spxInputMode() : undefined\"\r\n    [attr.step]=\"this.spxStep() ? this.spxStep() : undefined\"\r\n    [attr.type]=\"'number'\"\r\n    [ngModel]=\"this.value().value\"\r\n    (ngModelChange)=\"this.handleChange($event)\" />\r\n</div>  ", 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"] }]
+        }] });
 
 class SpxInputRadioComponent {
     constructor() {
-        this.cachedSuggestions = [];
-        this.focusPosition = 0;
-        this.spxFocused = false;
-        this.spxShowLabel = true;
-        this.spxReadonly = false;
-        this.spxSuggestions = [];
-        this.spxChange = new EventEmitter();
-        this.spxFocus = new EventEmitter();
-    }
-    spxFocusIn() {
-        this.listenToKeys();
-        this.determineFocusPosition();
+        this.cachedSuggestions = signal([]);
+        this.focusPosition = signal(0);
+        this.spxName = input();
+        this.spxValidators = input();
+        this.spxShowLabel = input(true);
+        this.spxReadonly = input(false);
+        this.spxSuggestions = input([]);
+        this.value = model.required();
+        this.selectedInputService = inject(SelectedInputService);
+        this.spxElementId = input();
+        this.spxIsFocused = signal(false);
     }
-    spxFocusOut() {
-        this.subscriptionKeyDown?.unsubscribe();
-        this.subscriptionKeyUp?.unsubscribe();
+    ngOnInit() {
+        this.selectedInputService.focusedElement$
+            .subscribe((focusedId) => {
+            if (focusedId === this.spxElementId() && this.spxIsFocused() == false) {
+                this.spxIsFocused.set(true); // Update only if focused
+                this.listenToKeys();
+            }
+            else if (focusedId !== this.spxElementId() && this.spxIsFocused() == true) {
+                this.spxIsFocused.set(false);
+                this.subscriptionKeyDown?.unsubscribe();
+                this.subscriptionKeyUp?.unsubscribe();
+            }
+            this.determineFocusPosition();
+        });
     }
     ngOnChanges(changes) {
         if ((changes['spxSuggestions'] && JSON.stringify(changes['spxSuggestions']?.previousValue) !== JSON.stringify(changes['spxSuggestions']?.currentValue))) {
-            this.cachedSuggestions = changes['spxSuggestions']?.currentValue ?? [];
+            this.cachedSuggestions.set(changes['spxSuggestions']?.currentValue ?? []);
         }
     }
-    handleSuggestionClick(event, valuePair) {
-        if (this.spxReadonly) {
+    handleSuggestionClick(valuePair) {
+        if (this.spxReadonly()) {
             console.log('spxInputRadio: clicked, but readonly');
         }
         else {
             console.log('spxInputRadio: clicked');
             this.select(valuePair);
         }
+        this.determineFocusPosition();
     }
     determineFocusPosition() {
-        if (this.value && this.spxSuggestions?.length) {
-            const index = this.spxSuggestions.findIndex(valuePair => valuePairToValue(valuePair) === valuePairToValue(this.value));
-            this.focusPosition = index >= 0 ? index : 0;
+        const spxSuggestions = this.spxSuggestions();
+        if (this.value() && spxSuggestions?.length) {
+            const index = spxSuggestions.findIndex(valuePair => valuePairToValue(valuePair) === valuePairToValue(this.value()));
+            this.focusPosition.set(index >= 0 ? index : 0);
         }
         else {
-            this.focusPosition = 0;
+            this.focusPosition.set(0);
         }
     }
     select(valuePair) {
-        this.focusPosition = 0;
-        this.value = valuePair;
-        this.spxChange.emit(valuePair);
+        this.value.set(valuePair);
     }
     listenToKeys() {
         this.subscriptionKeyUp = fromEvent(window, 'keyup').subscribe((event) => {
-            if ((event.key === 'ArrowUp' || event.key === 'ArrowLeft') && this.focusPosition > 0) {
-                this.focusPosition = this.focusPosition - 1;
-                this.select(this.spxSuggestions.at(this.focusPosition));
+            if ((event.key === 'ArrowUp' || event.key === 'ArrowLeft') && this.focusPosition() > 0) {
+                this.focusPosition.update((position) => position - 1);
+                this.select(this.spxSuggestions().at(this.focusPosition()));
                 event.preventDefault();
             }
-            if ((event.key === 'ArrowDown' || event.key === 'ArrowRight') && this.focusPosition < this.spxSuggestions.length - 1) {
-                this.focusPosition = this.focusPosition + 1;
-                this.select(this.spxSuggestions.at(this.focusPosition));
+            if ((event.key === 'ArrowDown' || event.key === 'ArrowRight') && this.focusPosition() < this.spxSuggestions().length - 1) {
+                this.focusPosition.update((position) => position + 1);
+                this.select(this.spxSuggestions().at(this.focusPosition()));
                 event.preventDefault();
             }
         });
@@ -832,141 +465,41 @@ class SpxInputRadioComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid grid-cols-2 gap-2\" [class.mt-3]=\"this.spxShowLabel()\">\r\n  @for (valuePair of this.cachedSuggestions(); track valuePair; let i = $index) {\r\n    <spx-suggestion\r\n      [spxDisabled]=\"this.spxReadonly()\"\r\n      [spxSelected]=\"this.value().value === valuePair?.value\"\r\n      [spxTabbable]=\"this.focusPosition() === i\"\r\n      [spxFocused]=\"(this.focusPosition() === i && this.spxIsFocused())\"\r\n      (click)=\"this.handleSuggestionClick(valuePair)\">\r\n      {{valuePair?.description}}\r\n    </spx-suggestion>\r\n  }\r\n</div>", dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'spx-input-radio',
-                    imports: [
+            args: [{ selector: 'spx-input-radio', standalone: true, imports: [
                         SpxSuggestionComponent
-                    ],
-                    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>`
-                }]
-        }], propDecorators: { spxName: [{
-                type: Input
-            }], spxValidators: [{
-                type: Input
-            }], spxFocused: [{
-                type: Input
-            }], spxShowLabel: [{
-                type: Input
-            }], spxReadonly: [{
-                type: Input
-            }], spxSuggestions: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], spxChange: [{
-                type: Output
-            }], spxFocus: [{
-                type: Output
-            }] } });
-
-var SpxInputTypeEnum;
-(function (SpxInputTypeEnum) {
-    SpxInputTypeEnum["autocomplete"] = "autocomplete";
-    SpxInputTypeEnum["button"] = "button";
-    SpxInputTypeEnum["date"] = "date";
-    SpxInputTypeEnum["float"] = "float";
-    SpxInputTypeEnum["hidden"] = "hidden";
-    SpxInputTypeEnum["overlay"] = "overlay";
-    SpxInputTypeEnum["overlayNumber"] = "overlaynumber";
-    SpxInputTypeEnum["radio"] = "radio";
-    SpxInputTypeEnum["number"] = "number";
-    SpxInputTypeEnum["password"] = "password";
-    SpxInputTypeEnum["text"] = "text";
-    SpxInputTypeEnum["textNumericKeyboard"] = "textNumericKeyboard";
-    SpxInputTypeEnum["time"] = "time";
-})(SpxInputTypeEnum || (SpxInputTypeEnum = {}));
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-2 gap-2\" [class.mt-3]=\"this.spxShowLabel()\">\r\n  @for (valuePair of this.cachedSuggestions(); track valuePair; let i = $index) {\r\n    <spx-suggestion\r\n      [spxDisabled]=\"this.spxReadonly()\"\r\n      [spxSelected]=\"this.value().value === valuePair?.value\"\r\n      [spxTabbable]=\"this.focusPosition() === i\"\r\n      [spxFocused]=\"(this.focusPosition() === i && this.spxIsFocused())\"\r\n      (click)=\"this.handleSuggestionClick(valuePair)\">\r\n      {{valuePair?.description}}\r\n    </spx-suggestion>\r\n  }\r\n</div>" }]
+        }] });
 
 class SpxInputTimeModalComponent {
     constructor(modalController) {
         this.modalController = modalController;
-        this.change = new EventEmitter();
+        this.view = input.required();
+        this.value = input.required();
+        this.change = output();
         this.faXmark = faXmark;
-        this.hourOptions = Array.from({ length: 24 }, (_, i) => i); // 0 to 23
-        this.minuteOptions = Array.from({ length: 12 }, (_, i) => i * 5); // Minutes in incrementen van 5
+        this.hourOptions = signal(Array.from({ length: 24 }, (_, i) => i)); // 0 to 23
+        this.minuteOptions = signal(Array.from({ length: 12 }, (_, i) => i * 5)); // Minutes in incrementen van 5
         this.typeError = SpxSeverityEnum.error;
-        this.hourOptions.push(this.hourOptions.shift());
-        this.minuteOptions.push(this.minuteOptions.shift());
+        this.hourOptions().push(this.hourOptions().shift());
+        this.minuteOptions().push(this.minuteOptions().shift());
     }
     closeDialog() {
         this.modalController.dismiss();
     }
     onChange(value) {
         this.change.emit(value);
-        console.log(value);
         this.modalController.dismiss(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTimeModalComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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>
-      }
-      <!-- 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>
-  </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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputTimeModalComponent, isStandalone: true, selector: "spx-input-time-modal", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: "<ion-header>\r\n  <ion-toolbar>\r\n    <ion-title>Select {{view()}}</ion-title>\r\n    <ion-buttons slot=\"end\">\r\n      <spx-button [spxSeverity]=\"typeError\" (spxClick)=\"closeDialog()\">\r\n        <fa-icon [icon]=\"faXmark\"></fa-icon>\r\n      </spx-button>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n<ion-content class=\"ion-padding bg-white\">\r\n  <!-- Uren -->\r\n  <div class=\"custom-bg grid grid-cols-1 gap-3\">\r\n    @if (view() === 'hours') {\r\n      <div class=\"flex-wrap gap-2\">\r\n        <div class=\"grid grid-cols-3 md:grid-cols-4 gap-3\">\r\n          @for (hour of hourOptions(); track hour) {\r\n            <div  class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === hour\" (click)=\"onChange(hour)\">\r\n              {{ hour }}\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Minuten -->\r\n    @if (view() === 'minutes') {\r\n      <div class=\"grid grid-cols-1 gap-3\">\r\n        <div class=\"grid grid-cols-4 md:grid-cols-5 gap-3\">\r\n          @for (minute of minuteOptions(); track minute) {\r\n            <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === minute\" (click)=\"onChange(minute)\">\r\n              {{ minute }}\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</ion-content>", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'spx-input-time-modal',
-                    imports: [
+            args: [{ selector: 'spx-input-time-modal', imports: [
                         FontAwesomeModule,
                         IonButtons,
                         IonContent,
@@ -974,134 +507,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         IonTitle,
                         IonToolbar,
                         SpxButtonComponent,
-                    ],
-                    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>
-      }
-      <!-- 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>
-  </ion-content>
-  `
-                }]
-        }], ctorParameters: () => [{ type: i1$2.ModalController }], propDecorators: { view: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\r\n  <ion-toolbar>\r\n    <ion-title>Select {{view()}}</ion-title>\r\n    <ion-buttons slot=\"end\">\r\n      <spx-button [spxSeverity]=\"typeError\" (spxClick)=\"closeDialog()\">\r\n        <fa-icon [icon]=\"faXmark\"></fa-icon>\r\n      </spx-button>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n<ion-content class=\"ion-padding bg-white\">\r\n  <!-- Uren -->\r\n  <div class=\"custom-bg grid grid-cols-1 gap-3\">\r\n    @if (view() === 'hours') {\r\n      <div class=\"flex-wrap gap-2\">\r\n        <div class=\"grid grid-cols-3 md:grid-cols-4 gap-3\">\r\n          @for (hour of hourOptions(); track hour) {\r\n            <div  class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === hour\" (click)=\"onChange(hour)\">\r\n              {{ hour }}\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Minuten -->\r\n    @if (view() === 'minutes') {\r\n      <div class=\"grid grid-cols-1 gap-3\">\r\n        <div class=\"grid grid-cols-4 md:grid-cols-5 gap-3\">\r\n          @for (minute of minuteOptions(); track minute) {\r\n            <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === minute\" (click)=\"onChange(minute)\">\r\n              {{ minute }}\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</ion-content>" }]
+        }], ctorParameters: () => [{ type: i1$2.ModalController }] });
 
 class SpxInputTimeComponent {
-    get formattedHour() {
-        return this.selectedHour !== null && this.selectedHour < 10 ? `0${this.selectedHour}` : this.selectedHour;
-    }
-    get formattedMinute() {
-        return this.selectedMinute !== null && this.selectedMinute < 10 ? `0${this.selectedMinute}` : this.selectedMinute;
-    }
-    get hour() { return this.value?.value ? DateTime.fromISO(this.value.value).hour : null; }
-    get minute() { return this.value?.value ? DateTime.fromISO(this.value.value).minute : null; }
     constructor(modalController) {
         this.modalController = modalController;
-        this.spxAutofocus = false;
-        this.spxSuggestions = [];
-        this.spxReadonly = false;
-        this.spxCapitalize = false;
-        this.spxFocused = true;
-        this.spxBlurFromChild = new EventEmitter();
-        this.spxChange = new EventEmitter();
-        this.spxFocus = new EventEmitter();
-        this.spxWasInternalUpdate = false;
+        this.spxName = input();
+        this.spxAutofocus = input(false);
+        this.spxInputMode = input();
+        this.spxPattern = input();
+        this.spxSuggestions = input([]);
+        this.spxReadonly = input(false);
+        this.spxValidators = input();
+        this.spxCapitalize = input(false);
+        this.value = model.required();
+        this.inputRef = viewChild.required('input');
         this.severitySuccess = SpxSeverityEnum.success;
-        this.hourOptions = Array.from({ length: 24 }, (_, i) => i).unshift(); // 0 to 23
-        this.minuteOptions = Array.from({ length: 12 }, (_, i) => i * 5).unshift(); // Minutes in incrementen van 5
-        this.selectedHour = null;
-        this.selectedMinute = null;
+        this.selectedHour = signal(null);
+        this.selectedMinute = signal(null);
+        this.formattedHour = computed(() => this.selectedHour() !== null && this.selectedHour() < 10 ? `0${this.selectedHour()}` : this.selectedHour());
+        this.formattedMinute = computed(() => this.selectedMinute() !== null && this.selectedMinute() < 10 ? `0${this.selectedMinute()}` : this.selectedMinute());
+        this.hour = computed(() => this.value()?.value ? DateTime.fromISO(this.value().value).hour : null);
+        this.minute = computed(() => this.value()?.value ? DateTime.fromISO(this.value().value).minute : null);
+    }
+    ngOnInit() {
+        this.componentDidLoad();
     }
     spxSetFocus() {
-        this.inputRef?.nativeElement?.focus();
+        this.inputRef().nativeElement?.focus();
     }
     componentDidLoad() {
-        if (this.spxAutofocus) {
-            this.spxFocus.emit();
+        if (this.spxAutofocus()) {
             this.spxSetFocus();
         }
     }
-    handleBlur() {
-        this.spxBlurFromChild.emit();
-    }
-    handleFocus() {
-        this.spxFocus.emit();
-    }
     handleDescriptionInput(event) {
-        this.value = {
+        this.value.set({
             description: event.target ? event.target.value : null,
             value: event.target ? event.target.value : null,
-        };
-        this.spxChange.emit(this.value);
+        });
     }
     handleSuggestionClick(value) {
-        if (!this.spxReadonly) {
-            this.value = value;
-            this.spxChange.emit(this.value);
-            this.spxFocused = false;
+        if (!this.spxReadonly()) {
+            this.value.set(value);
         }
     }
-    handleKeyUp() {
-        this.spxFocused = true;
-    }
     async openDialog(view) {
+        const value = this.value();
         const modal = await this.modalController.create({
             component: SpxInputTimeModalComponent,
             componentProps: {
-                value: this.value?.value ?
-                    (view === 'hours' ? DateTime.fromISO(this.value.value).hour : DateTime.fromISO(this.value.value).minute) : undefined,
+                value: value?.value ?
+                    (view === 'hours' ? DateTime.fromISO(value.value).hour : DateTime.fromISO(value.value).minute) : undefined,
                 view,
             },
         });
         modal.onDidDismiss().then((data) => {
-            // this.appStore.dispatch(infArticleActions.reset({}));
             if (view === 'hours') {
-                // console.log('hours');
-                // console.log(data);
                 this.selectedHour = data.data;
                 this.openDialog('minutes');
                 this.updateValue();
             }
             else if (view === 'minutes') {
-                // console.log('minutes');
-                // console.log(data);
                 this.selectedMinute = data.data;
                 this.updateValue();
             }
@@ -1109,69 +577,23 @@ class SpxInputTimeComponent {
         await modal.present();
     }
     updateValue() {
-        if (this.selectedHour !== null && this.selectedMinute !== null) {
-            const formattedHour = this.selectedHour < 10 ? `0${this.selectedHour}` : this.selectedHour;
-            const formattedMinute = this.selectedMinute < 10 ? `0${this.selectedMinute}` : this.selectedMinute;
+        if (this.selectedHour() !== null && this.selectedMinute() !== null) {
+            const formattedHour = this.selectedHour() < 10 ? `0${this.selectedHour()}` : this.selectedHour();
+            const formattedMinute = this.selectedMinute() < 10 ? `0${this.selectedMinute()}` : this.selectedMinute();
             const newValue = `${formattedHour}:${formattedMinute}`;
-            this.value = {
+            this.value.set({
                 description: newValue,
                 value: newValue,
-            };
-            this.spxChange.emit(this.value);
+            });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTimeComponent, deps: [{ token: i1$3.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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>
-      <div class="grow rounded bg-gray-100 p-3 text-xl text-center font-bold" (click)="openDialog('minutes')">{{ formattedMinute ?? '--' }}</div>
-    </div>
-</div>`, isInline: true, styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: SpxInputTimeComponent, isStandalone: true, selector: "spx-input-time", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\r\n  <div class=\"flex items-center justify-around gap-3\">\r\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('hours')\">{{ formattedHour() ?? '--' }}</div>\r\n    <div class=\"text-gray text-xl\">:</div>\r\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('minutes')\">{{ formattedMinute() ?? '--' }}</div>\r\n  </div>\r\n</div>", styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-input-time', 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$3.ModalController }], propDecorators: { spxName: [{
-                type: Input
-            }], spxAutofocus: [{
-                type: Input
-            }], spxInputMode: [{
-                type: Input
-            }], spxPattern: [{
-                type: Input
-            }], spxSuggestions: [{
-                type: Input
-            }], spxReadonly: [{
-                type: Input
-            }], spxValidators: [{
-                type: Input
-            }], spxCapitalize: [{
-                type: Input
-            }], spxFocused: [{
-                type: Input
-            }], spxType: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], spxBlurFromChild: [{
-                type: Output
-            }], spxChange: [{
-                type: Output
-            }], spxFocus: [{
-                type: Output
-            }], spxWasInternalUpdate: [{
-                type: Input
-            }], inputRef: [{
-                type: ViewChild,
-                args: ['input', { static: true }]
-            }] } });
+            args: [{ selector: 'spx-input-time', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\r\n  <div class=\"flex items-center justify-around gap-3\">\r\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('hours')\">{{ formattedHour() ?? '--' }}</div>\r\n    <div class=\"text-gray text-xl\">:</div>\r\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('minutes')\">{{ formattedMinute() ?? '--' }}</div>\r\n  </div>\r\n</div>", styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.ModalController }] });
 
 var stepType;
 (function (stepType) {
@@ -1185,13 +607,11 @@ class SpxInputDateComponent {
         this.spxMin = input.required();
         this.spxReadonly = input();
         this.spxValidators = input();
+        this.spxAutoFocus = input(false);
         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);
@@ -1201,6 +621,9 @@ class SpxInputDateComponent {
         this.yearInputComponent = viewChild.required(stepType.years);
         this.monthInputComponent = viewChild.required(stepType.months);
         this.dayInputComponent = viewChild.required(stepType.days);
+        this.spxElementId = input();
+        this.selectedInputService = inject(SelectedInputService);
+        this.spxIsFocused = signal(false);
         this.spxSuggestionC = computed(() => {
             switch (this.spxSelectedStep()) {
                 case stepType.years:
@@ -1255,6 +678,7 @@ class SpxInputDateComponent {
         switch (selectedStep) {
             case stepType.years:
                 this.spxSelectedStep.set(stepType.years);
+                this.yearInputComponent().nativeElement.focus();
                 break;
             case stepType.months:
                 this.spxSelectedStep.set(stepType.months);
@@ -1281,6 +705,7 @@ class SpxInputDateComponent {
                 this.selectedDay.set(parsedValue);
                 break;
         }
+        this.updateValueAndEmit();
     }
     ngOnInit() {
         this.suggestYears();
@@ -1290,6 +715,16 @@ class SpxInputDateComponent {
             this.selectedMonth.set(parsedValue.month);
             this.selectedDay.set(parsedValue.day);
         }
+        if (this.spxAutoFocus()) {
+            this.handleFocus("years");
+        }
+        // Filter updates based on focus state
+        this.selectedInputService.focusedElement$
+            .pipe(filter((focusedId) => focusedId === this.spxElementId()))
+            .subscribe(() => {
+            this.spxIsFocused.set(true); // Update only if focused
+            this.handleFocus(this.spxSelectedStep());
+        });
     }
     handleSuggestionClick(value) {
         switch (this.spxSelectedStep()) {
@@ -1306,11 +741,17 @@ class SpxInputDateComponent {
         this.updateValueAndEmit();
         this.changeSelectedStep();
     }
+    // Handle keyboard navigation (Tab and Shift + Tab)
+    handleTabKey(event) {
+        if (event.key === 'Tab') {
+            this.changeSelectedStep();
+            event.preventDefault(); // Prevent default tab behavior
+        }
+    }
     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()) {
@@ -1349,118 +790,137 @@ class SpxInputDateComponent {
             });
         }
     }
+    handleClear() {
+        this.spxSelectedStep.set(stepType.years);
+        this.selectedYear.set(null);
+        this.selectedMonth.set(null);
+        this.selectedDay.set(null);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 }, spxAutoFocus: { classPropertyName: "spxAutoFocus", publicName: "spxAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown": "handleTabKey($event)" } }, 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'>\r\n  <input #years\r\n    class='spx-input-date__input'\r\n    [ngModel]=\"selectedYear()\"\r\n    (ngModelChange)=\"onModelChange($event, 'years')\"\r\n    [attr.type]=\"'number'\"\r\n    (click)=\"this.handleFocus('years')\"\r\n    [attr.min]=\"1900\"\r\n    [attr.max]=\"2100\"\r\n    [attr.step]=\"1\"\r\n    />\r\n  <div class='spx-input-date__control-label'>Year</div>\r\n  @if (this.spxSelectMonth()) {\r\n    <input #months\r\n      class='spx-input-date__input'\r\n      [ngModel]=\"selectedMonth()\"\r\n      (ngModelChange)=\"onModelChange($event, 'months')\"\r\n      (click)=\"this.handleFocus('months')\"\r\n      [attr.type]=\"'number'\"\r\n      [attr.min]=\"1\"\r\n      [attr.max]=\"12\"\r\n      [attr.step]=\"1\" />\r\n  }\r\n  <div class='spx-input-date__control-label'>Month</div>\r\n  @if (this.spxSelectDay()) {\r\n    <input #days\r\n      class='spx-input-date__input'\r\n      [ngModel]=\"selectedDay()\"\r\n      (ngModelChange)=\"onModelChange($event, 'days')\"\r\n      (click)=\"this.handleFocus('days')\"\r\n      [attr.type]=\"'number'\"\r\n      [attr.min]=\"1\"\r\n      [attr.max]=\"31\"\r\n      [attr.step]=\"1\" />\r\n    <div class='spx-input-date__control-label'>Days</div>\r\n  }\r\n</div>\r\n<div class='spx-input-date__suggestions'>\r\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\r\n    <spx-suggestion [spxSelected]=\"\r\n    (selectedYear() === valuePair.value && this.spxSelectedStep() === 'years') ||\r\n    (selectedMonth() === valuePair.value && this.spxSelectedStep() === 'months') ||  \r\n    (selectedDay() === valuePair.value && this.spxSelectedStep() === 'days')\"\r\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\r\n  }\r\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-input-date', imports: [
+            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"] }]
-        }] });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class='spx-input-date__controls'>\r\n  <input #years\r\n    class='spx-input-date__input'\r\n    [ngModel]=\"selectedYear()\"\r\n    (ngModelChange)=\"onModelChange($event, 'years')\"\r\n    [attr.type]=\"'number'\"\r\n    (click)=\"this.handleFocus('years')\"\r\n    [attr.min]=\"1900\"\r\n    [attr.max]=\"2100\"\r\n    [attr.step]=\"1\"\r\n    />\r\n  <div class='spx-input-date__control-label'>Year</div>\r\n  @if (this.spxSelectMonth()) {\r\n    <input #months\r\n      class='spx-input-date__input'\r\n      [ngModel]=\"selectedMonth()\"\r\n      (ngModelChange)=\"onModelChange($event, 'months')\"\r\n      (click)=\"this.handleFocus('months')\"\r\n      [attr.type]=\"'number'\"\r\n      [attr.min]=\"1\"\r\n      [attr.max]=\"12\"\r\n      [attr.step]=\"1\" />\r\n  }\r\n  <div class='spx-input-date__control-label'>Month</div>\r\n  @if (this.spxSelectDay()) {\r\n    <input #days\r\n      class='spx-input-date__input'\r\n      [ngModel]=\"selectedDay()\"\r\n      (ngModelChange)=\"onModelChange($event, 'days')\"\r\n      (click)=\"this.handleFocus('days')\"\r\n      [attr.type]=\"'number'\"\r\n      [attr.min]=\"1\"\r\n      [attr.max]=\"31\"\r\n      [attr.step]=\"1\" />\r\n    <div class='spx-input-date__control-label'>Days</div>\r\n  }\r\n</div>\r\n<div class='spx-input-date__suggestions'>\r\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\r\n    <spx-suggestion [spxSelected]=\"\r\n    (selectedYear() === valuePair.value && this.spxSelectedStep() === 'years') ||\r\n    (selectedMonth() === valuePair.value && this.spxSelectedStep() === 'months') ||  \r\n    (selectedDay() === valuePair.value && this.spxSelectedStep() === 'days')\"\r\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\r\n  }\r\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"] }]
+        }], propDecorators: { handleTabKey: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
 
 class SpxInputComponent {
     constructor() {
-        this.spxLabel = 'label';
-        this.spxReadonly = false;
-        this.spxAutofocus = false;
-        this.spxRequired = false;
-        this.spxSelectMonth = true;
-        this.spxSelectDay = true;
-        this.spxShowEdit = false;
-        this.spxShowHelp = false;
-        this.spxShowLabel = true;
-        this.spxCompact = false;
-        this.spxShowClear = true;
-        this.spxShowSearch = false;
-        this.spxShowValidationMessages = false;
-        this.spxSuggestions = [];
-        this.spxType = SpxInputTypeEnum.text;
-        this.spxCapitalize = false;
-        this.spxBlur = new EventEmitter();
-        this.spxClear = new EventEmitter();
-        this.spxChange = new EventEmitter();
-        this.spxFocus = new EventEmitter();
-        this.spxEdit = new EventEmitter();
-        this.spxHelp = new EventEmitter();
-        this.spxSearch = new EventEmitter();
-        this.spxFocused = false;
+        this.spxLabel = input('label');
+        this.spxMax = input();
+        this.spxMin = input();
+        this.spxName = input();
+        this.spxReadonly = input(false);
+        this.spxAutocomplete = input();
+        this.spxAutofocus = input(false);
+        this.spxInputMode = input();
+        this.spxPattern = input();
+        this.spxRequired = input(false);
+        this.spxSelectMonth = input(true);
+        this.spxSelectDay = input(true);
+        this.spxShowEdit = input(false);
+        this.spxShowHelp = input(false);
+        this.spxShowLabel = input(true);
+        this.spxCompact = input(false);
+        this.spxShowClear = input(true);
+        this.spxShowSearch = input(false);
+        this.spxShowValidationMessages = input(false);
+        this.spxStep = input();
+        this.spxSuggestions = input([]);
+        this.spxType = input(SpxInputTypeEnum.text);
+        this.spxValidators = input();
+        this.spxCapitalize = input(false);
+        this.value = signal({ value: null, description: null });
+        this.spxClear = output();
+        this.spxEdit = output();
+        this.spxHelp = output();
+        this.spxSearch = output();
+        this.spxBlur = output();
+        this.floatInput = viewChild("spxInputFloat");
+        this.numberInput = viewChild("spxInputNumber");
+        this.textInput = viewChild("spxInputText");
+        this.timeInput = viewChild("spxInputTime");
+        this.radioInput = viewChild("spxInputRadio");
+        this.dateInput = viewChild("spxInputDate");
+        this.spxElementId = signal(0);
+        this.selectedInputService = inject(SelectedInputService);
         this.onChange = () => { };
         this.onTouched = () => { };
     }
-    handleBlur() {
-        this.spxBlur.emit();
+    handleSpxElementIdSet(id) {
+        this.spxElementId.set(id);
+        this.selectedInputServiceSubscription = this.selectedInputService.isBlurred$(id).subscribe((isBlurred) => {
+            if (isBlurred) {
+                this.spxBlur.emit();
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.selectedInputServiceSubscription) {
+            this.selectedInputServiceSubscription.unsubscribe();
+        }
     }
     handleChange(event) {
-        this.value = event;
-        this.spxChange.emit(this.value);
+        this.value.set(event);
     }
     handleClear() {
         this.spxClear.emit();
-        this.spxFocused = true;
         this.passFocusToControl();
-        this.value = {
-            description: null,
+        this.handleChangeEvent({
             value: null,
-        };
-        this.spxChange.emit(this.value);
-    }
-    handleFocus() {
-        this.spxFocus.emit();
-        this.spxFocused = true;
+        });
+        this.dateInput()?.handleClear();
+        this.floatInput()?.handleClear();
     }
     handleSearch() {
         this.spxSearch.emit();
     }
-    setFocusIn() {
-        setTimeout(() => {
-            this.spxFocused = true;
-            this.passFocusToControl();
-        }, 0);
-    }
-    setFocusOut() {
-        setTimeout(() => {
-            this.spxFocused = false;
-            if (this.spxType === SpxInputTypeEnum.radio) {
-                this.radioInput?.spxFocusOut();
-            }
-        }, 0);
-    }
     handleEdit() {
         this.spxEdit.emit();
-        this.spxFocused = true;
     }
     handleHelp() {
         this.spxHelp.emit();
-        this.spxFocused = true;
+    }
+    setFocusIn() {
+        setTimeout(() => {
+            this.passFocusToControl();
+        }, 0);
     }
     passFocusToControl() {
-        switch (this.spxType) {
+        switch (this.spxType()) {
             case SpxInputTypeEnum.autocomplete:
             case SpxInputTypeEnum.text:
             case SpxInputTypeEnum.overlayNumber:
-                this.textInput?.spxSetFocus();
+                this.textInput()?.spxSetFocus();
                 break;
             case SpxInputTypeEnum.number:
-                this.numberInput?.spxSetFocus();
+                this.numberInput()?.spxSetFocus();
                 break;
             case SpxInputTypeEnum.radio:
-                this.radioInput?.spxFocusIn();
                 break;
             case SpxInputTypeEnum.time:
-                this.timeInput?.spxSetFocus();
+                this.timeInput()?.spxSetFocus();
                 break;
         }
     }
     writeValue(value) {
-        this.value = this.lastValue = value; // hier komt initiele waarde van formcontrol binnen
+        if (value === null)
+            return;
+        this.value.set(value); // hier komt initiele waarde van formcontrol binnen
+        this.lastValue = value;
     }
     handleChangeEvent(value) {
         if (value !== this.lastValue) {
             this.lastValue = value;
             this.onChange(value);
         }
+        this.writeValue(value);
     }
     _handleBlurEvent() {
         this.onTouched();
@@ -1472,131 +932,19 @@ class SpxInputComponent {
         this.onTouched = fn;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: false, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClear: "spxClear", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch", spxBlur: "spxBlur" }, 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>
-      @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"] }] }); }
+        ], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\r\n    [spxLabel]=\"this.spxLabel()\"\r\n    [spxReadonly]=\"this.spxReadonly()\"\r\n    [spxRequired]=\"this.spxRequired()\"\r\n    [spxValue]=\"this.value()\"\r\n    [spxShowHelp]=\"this.spxShowHelp()\"\r\n    [spxCompact]=\"this.spxCompact()\"\r\n    [spxShowClear]=\"this.spxShowClear()\"\r\n    [spxShowEdit]=\"this.spxShowEdit()\"\r\n    [spxShowLabel]=\"this.spxShowLabel()\"\r\n    [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\r\n    [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\r\n    (spxClear)=\"this.handleClear()\"\r\n    (spxEdit)=\"this.handleEdit()\"\r\n    (spxHelp)=\"this.handleHelp()\"\r\n    (spxSearch)=\"this.handleSearch()\"\r\n    (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\r\n    >\r\n    <div controls>\r\n      @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' || this.spxType() === 'overlaynumber' || this.spxType() === 'text' || this.spxType() === 'password') {\r\n        <spx-input-text #spxInputText\r\n          [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\r\n          [spxAutofocus]=\"this.spxAutofocus()\"\r\n          [spxCapitalize]=\"this.spxCapitalize()\"\r\n          [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\r\n          [spxName]=\"this.spxName()\"\r\n          [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxSuggestions]=\"this.spxSuggestions()\"\r\n          [spxType]=\"this.spxType()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-text>\r\n      }\r\n      @if (this.spxType() === 'date') {\r\n        <spx-input-date #spxInputDate\r\n          [spxMax]=\"this.spxMax()!\"\r\n          [spxMin]=\"this.spxMin()!\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxSelectDay]=\"this.spxSelectDay()\"\r\n          [spxSelectMonth]=\"this.spxSelectMonth()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [value]=\"value()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [spxAutoFocus]=\"this.spxAutofocus()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-date>\r\n      }\r\n      @if (this.spxType() === 'float') {\r\n        <spx-input-float #spxInputFloat\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxStep]=\"this.spxStep()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [spxAutofocus]=\"this.spxAutofocus()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-float>\r\n      }\r\n      @if (this.spxType() === 'number') {\r\n        <spx-input-number #spxInputNumber\r\n          [spxInputMode]=\"this.spxInputMode()\"\r\n          [spxAutofocus]=\"this.spxAutofocus()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxStep]=\"this.spxStep()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-number>\r\n      }\r\n      @if (this.spxType() === 'radio') {\r\n        <spx-input-radio\r\n          #spxInputRadio\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxShowLabel]=\"this.spxShowLabel()\"\r\n          [spxSuggestions]=\"this.spxSuggestions()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-radio>\r\n      }\r\n      @if (this.spxType() === 'time') {\r\n        <spx-input-time\r\n          #spxInputTime\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-time>\r\n      }\r\n    </div>\r\n    <div validation-messages>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </spx-input-box>", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["spxBlurFromChild", "valueChange"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'spx-input',
-                    host: {
+            args: [{ selector: 'spx-input', host: {
                         '(spxChange)': 'handleChangeEvent($event)'
-                    },
-                    imports: [
+                    }, imports: [
                         SpxInputBoxComponent,
                         SpxInputDateComponent,
                         SpxInputFloatComponent,
@@ -1604,207 +952,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         SpxInputRadioComponent,
                         SpxInputTextComponent,
                         SpxInputTimeComponent
-                    ],
-                    providers: [
+                    ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: SpxInputComponent,
                             multi: true
                         }
-                    ],
-                    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>
-      @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
-            }], spxMax: [{
-                type: Input
-            }], spxMin: [{
-                type: Input
-            }], spxName: [{
-                type: Input
-            }], spxReadonly: [{
-                type: Input
-            }], spxAutocomplete: [{
-                type: Input
-            }], spxAutofocus: [{
-                type: Input
-            }], spxInputMode: [{
-                type: Input
-            }], spxPattern: [{
-                type: Input
-            }], spxRequired: [{
-                type: Input
-            }], spxSelectMonth: [{
-                type: Input
-            }], spxSelectDay: [{
-                type: Input
-            }], spxShowEdit: [{
-                type: Input
-            }], spxShowHelp: [{
-                type: Input
-            }], spxShowLabel: [{
-                type: Input
-            }], spxCompact: [{
-                type: Input
-            }], spxShowClear: [{
-                type: Input
-            }], spxShowSearch: [{
-                type: Input
-            }], spxShowValidationMessages: [{
-                type: Input
-            }], spxStep: [{
-                type: Input
-            }], spxSuggestions: [{
-                type: Input
-            }], spxType: [{
-                type: Input
-            }], spxValidators: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], spxCapitalize: [{
-                type: Input
-            }], spxBlur: [{
-                type: Output
-            }], spxClear: [{
-                type: Output
-            }], spxChange: [{
-                type: Output
-            }], spxFocus: [{
-                type: Output
-            }], spxEdit: [{
-                type: Output
-            }], spxHelp: [{
-                type: Output
-            }], spxSearch: [{
-                type: Output
-            }], floatInput: [{
-                type: ViewChild,
-                args: [SpxInputFloatComponent]
-            }], numberInput: [{
-                type: ViewChild,
-                args: [SpxInputNumberComponent]
-            }], textInput: [{
-                type: ViewChild,
-                args: [SpxInputTextComponent]
-            }], timeInput: [{
-                type: ViewChild,
-                args: [SpxInputTimeComponent]
-            }], radioInput: [{
-                type: ViewChild,
-                args: [SpxInputRadioComponent]
-            }], spxFocused: [{
-                type: Input
-            }], _handleBlurEvent: [{
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\r\n    [spxLabel]=\"this.spxLabel()\"\r\n    [spxReadonly]=\"this.spxReadonly()\"\r\n    [spxRequired]=\"this.spxRequired()\"\r\n    [spxValue]=\"this.value()\"\r\n    [spxShowHelp]=\"this.spxShowHelp()\"\r\n    [spxCompact]=\"this.spxCompact()\"\r\n    [spxShowClear]=\"this.spxShowClear()\"\r\n    [spxShowEdit]=\"this.spxShowEdit()\"\r\n    [spxShowLabel]=\"this.spxShowLabel()\"\r\n    [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\r\n    [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\r\n    (spxClear)=\"this.handleClear()\"\r\n    (spxEdit)=\"this.handleEdit()\"\r\n    (spxHelp)=\"this.handleHelp()\"\r\n    (spxSearch)=\"this.handleSearch()\"\r\n    (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\r\n    >\r\n    <div controls>\r\n      @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' || this.spxType() === 'overlaynumber' || this.spxType() === 'text' || this.spxType() === 'password') {\r\n        <spx-input-text #spxInputText\r\n          [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\r\n          [spxAutofocus]=\"this.spxAutofocus()\"\r\n          [spxCapitalize]=\"this.spxCapitalize()\"\r\n          [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\r\n          [spxName]=\"this.spxName()\"\r\n          [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxSuggestions]=\"this.spxSuggestions()\"\r\n          [spxType]=\"this.spxType()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-text>\r\n      }\r\n      @if (this.spxType() === 'date') {\r\n        <spx-input-date #spxInputDate\r\n          [spxMax]=\"this.spxMax()!\"\r\n          [spxMin]=\"this.spxMin()!\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxSelectDay]=\"this.spxSelectDay()\"\r\n          [spxSelectMonth]=\"this.spxSelectMonth()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [value]=\"value()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [spxAutoFocus]=\"this.spxAutofocus()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-date>\r\n      }\r\n      @if (this.spxType() === 'float') {\r\n        <spx-input-float #spxInputFloat\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxStep]=\"this.spxStep()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [spxAutofocus]=\"this.spxAutofocus()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-float>\r\n      }\r\n      @if (this.spxType() === 'number') {\r\n        <spx-input-number #spxInputNumber\r\n          [spxInputMode]=\"this.spxInputMode()\"\r\n          [spxAutofocus]=\"this.spxAutofocus()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxStep]=\"this.spxStep()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-number>\r\n      }\r\n      @if (this.spxType() === 'radio') {\r\n        <spx-input-radio\r\n          #spxInputRadio\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxShowLabel]=\"this.spxShowLabel()\"\r\n          [spxSuggestions]=\"this.spxSuggestions()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-radio>\r\n      }\r\n      @if (this.spxType() === 'time') {\r\n        <spx-input-time\r\n          #spxInputTime\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-time>\r\n      }\r\n    </div>\r\n    <div validation-messages>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </spx-input-box>" }]
+        }], propDecorators: { _handleBlurEvent: [{
                 type: HostListener,
                 args: ['focusout']
             }] } });