@softpak/components 0.0.0-beta.17 → 0.0.0-beta.171

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

@@ -1,6 +1,6 @@
 import { NgIf, NgFor } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, HostListener } from '@angular/core';
+import { EventEmitter, Component, Input, Output, HostListener, ViewChild } from '@angular/core';
 import { SpxButtonComponent } from '@softpak/components/spx-button';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -8,59 +8,72 @@ import { faEdit } from '@fortawesome/free-solid-svg-icons/faEdit';
 import { faQuestion } from '@fortawesome/free-solid-svg-icons/faQuestion';
 import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import { fromEvent } from 'rxjs';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
 import { DateTime } from 'luxon';
+import { valuePairToValue } from '@softpak/components/spx-helpers';
 
 class SpxInputBoxComponent {
-    constructor() {
+    handleFocusIn(ev) {
+        this.emitFocusIn();
+    }
+    handleFocusOut(ev) {
+        const thisEl = this.elRef.nativeElement;
+        const relatedElement = ev.relatedTarget;
+        if (!relatedElement || !thisEl.contains(relatedElement)) {
+            this.emitFocusOut();
+        }
+    }
+    handleWindowClick(ev) {
+        if (ev.composedPath().includes(this.elRef.nativeElement)) {
+            this.emitFocusIn();
+        }
+        else {
+            this.emitFocusOut();
+        }
+    }
+    onClear() {
+        this.spxClear.emit();
+    }
+    onSearch() {
+        this.spxSearch.emit();
+    }
+    onEdit() {
+        this.spxEdit.emit();
+    }
+    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();
-        this.spxFocused = false;
-    }
-    // @Listen('focusout', { capture: true })
-    // handleFocusOut() {
-    //   this.spxFocused = false;
-    //   this.spxFocusOut.emit();
-    // }
-    // @Listen('click', { target: 'window' })
-    // handleWindowClick(ev) {
-    //   if (ev.composedPath().includes(this.el)) {
-    //     if (!this.spxFocused) {
-    //       this.spxFocused = true;
-    //       this.spxFocus.emit();
-    //     }
-    //   } else {
-    //     this.spxFocused = false;
-    //   }
-    // }
-    async spxSetFocus() {
-        this.spxFocused = true;
-    }
-    onClear() {
-        this.spxClear.emit();
-    }
-    onSearch() {
-        this.spxSearch.emit();
     }
-    onEdit() {
-        this.spxEdit.emit();
+    emitFocusIn() {
+        if (!this.spxFocused) {
+            this.spxFocus.emit();
+        }
     }
-    onHelp() {
-        this.spxHelp.emit();
+    emitFocusOut() {
+        if (this.spxFocused) {
+            this.spxFocusOut.emit();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxLabel: "spxLabel", spxRequired: "spxRequired", spxReadonly: "spxReadonly", spxShowHelp: "spxShowHelp", spxCompact: "spxCompact", spxShowClear: "spxShowClear", spxShowEdit: "spxShowEdit", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxValue: "spxValue", spxFocused: "spxFocused" }, outputs: { spxClear: "spxClear", spxSearch: "spxSearch", spxFocus: "spxFocus", spxFocusOut: "spxFocusOut", spxEdit: "spxEdit", spxHelp: "spxHelp" }, ngImport: i0, template: `<div class="flex rounded w-full gap-3"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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"
@@ -74,7 +87,7 @@ class SpxInputBoxComponent {
       [class.p-0]="this.spxCompact"
       [class.flex]="this.spxCompact"
       [class.items-center]="this.spxCompact">
-      <div class="text-sm mb-1 text-gray-800"
+      <div *ngIf="this.spxShowLabel" class="font-bold text-sm mb-1 text-gray-800"
         [class.mb-0]="this.spxCompact"
         [class.px-3]="this.spxCompact">
         {{this.spxLabel}} <span *ngIf="spxRequired" class="text-red-800">*</span>
@@ -87,7 +100,6 @@ class SpxInputBoxComponent {
         (spxClick)="onEdit()"
         [spxFullHeight]="true"
         [spxSize]="'xl'"
-        [spxTabIndex]="-1"
         [spxType]="'button'">
         <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
       </spx-button>
@@ -95,6 +107,7 @@ class SpxInputBoxComponent {
         *ngIf="this.spxShowHelp"
         (spxClick)="onHelp()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
@@ -104,6 +117,7 @@ class SpxInputBoxComponent {
         *ngIf="this.spxShowSearch"
         (spxClick)="onSearch()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
@@ -149,7 +163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
       [class.p-0]="this.spxCompact"
       [class.flex]="this.spxCompact"
       [class.items-center]="this.spxCompact">
-      <div class="text-sm mb-1 text-gray-800"
+      <div *ngIf="this.spxShowLabel" class="font-bold text-sm mb-1 text-gray-800"
         [class.mb-0]="this.spxCompact"
         [class.px-3]="this.spxCompact">
         {{this.spxLabel}} <span *ngIf="spxRequired" class="text-red-800">*</span>
@@ -162,7 +176,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
         (spxClick)="onEdit()"
         [spxFullHeight]="true"
         [spxSize]="'xl'"
-        [spxTabIndex]="-1"
         [spxType]="'button'">
         <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
       </spx-button>
@@ -170,6 +183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
         *ngIf="this.spxShowHelp"
         (spxClick)="onHelp()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
@@ -179,6 +193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
         *ngIf="this.spxShowSearch"
         (spxClick)="onSearch()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
@@ -200,20 +215,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
     <ng-content select="[validation-messages]"></ng-content>
   </div>`,
                 }]
-        }], propDecorators: { spxLabel: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { spxCompact: [{
                 type: Input
-            }], spxRequired: [{
+            }], spxFocused: [{
                 type: Input
-            }], spxReadonly: [{
+            }], spxLabel: [{
                 type: Input
-            }], spxShowHelp: [{
+            }], spxReadonly: [{
                 type: Input
-            }], spxCompact: [{
+            }], spxRequired: [{
                 type: Input
             }], spxShowClear: [{
                 type: Input
             }], spxShowEdit: [{
                 type: Input
+            }], spxShowHelp: [{
+                type: Input
+            }], spxShowLabel: [{
+                type: Input
             }], spxShowSearch: [{
                 type: Input
             }], spxShowValidationMessages: [{
@@ -232,8 +251,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Output
             }], spxHelp: [{
                 type: Output
-            }], spxFocused: [{
+            }], 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();
+    }
+    ngOnInit() {
+        this.listenToKeyUp();
+    }
+    ngOnChanges(changes) {
+        this.focusPosition = 0;
+    }
+    ngOnDestroy() {
+        this.subscriptionKeyUp?.unsubscribe();
+    }
+    handleSuggestionClick(valuePair) {
+        this.select(valuePair);
+    }
+    listenToKeyUp() {
+        this.subscriptionKeyUp = fromEvent(window, 'keyup').subscribe((event) => {
+            if (event.key === 'ArrowUp' && this.focusPosition > 0) {
+                this.focusPosition = this.focusPosition - 1;
+                event.preventDefault();
+            }
+            if (event.key === 'ArrowDown' && this.focusPosition < this.spxSuggestions.length - 1) {
+                this.focusPosition = this.focusPosition + 1;
+                event.preventDefault();
+            }
+            if (event.key === 'Enter' && this.spxSuggestions.length > 0) {
+                this.select(this.spxSuggestions.at(this.focusPosition));
+                event.preventDefault();
+            }
+        });
+    }
+    select(valuePair) {
+        this.focusPosition = 0;
+        this.spxSelect.emit(valuePair);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: "spxSuggestions" }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: `<div class="relative text-black">
+  <div
+    class="absolute bg-gray-100 left-0 right-0 z-20">
+      <button
+        *ngFor="let valuePair of this.spxSuggestions; let i = index"
+        class="text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left"
+        [class.bg-gray-100]="i === this.focusPosition"
+        [class.bg-white]="i !== this.focusPosition"
+        (click)="this.handleSuggestionClick(valuePair)"
+        [attr.tabindex]="-1"
+        [attr.type]="'button'">
+        <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
+      <spx-button (spxClick)="this.handleSuggestionClick(valuePair)" [spxType]="'button'" [spxTabIndex]="-1">Select</spx-button>
+    </button>
+  </div>
+</div>`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxDropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'spx-dropdown',
+                    standalone: true,
+                    imports: [
+                        NgIf,
+                        NgFor,
+                        SpxButtonComponent,
+                    ],
+                    template: `<div class="relative text-black">
+  <div
+    class="absolute bg-gray-100 left-0 right-0 z-20">
+      <button
+        *ngFor="let valuePair of this.spxSuggestions; let i = index"
+        class="text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left"
+        [class.bg-gray-100]="i === this.focusPosition"
+        [class.bg-white]="i !== this.focusPosition"
+        (click)="this.handleSuggestionClick(valuePair)"
+        [attr.tabindex]="-1"
+        [attr.type]="'button'">
+        <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
+      <spx-button (spxClick)="this.handleSuggestionClick(valuePair)" [spxType]="'button'" [spxTabIndex]="-1">Select</spx-button>
+    </button>
+  </div>
+</div>`,
+                }]
+        }], propDecorators: { spxSuggestions: [{
                 type: Input
+            }], spxSelect: [{
+                type: Output
             }] } });
 
 class SpxInputTextComponent {
@@ -249,8 +364,8 @@ class SpxInputTextComponent {
         this.spxFocus = new EventEmitter();
         this.spxWasInternalUpdate = false;
     }
-    async spxSetFocus() {
-        // this.elInput.focus();
+    spxSetFocus() {
+        this.inputRef?.nativeElement?.focus();
     }
     componentDidLoad() {
         if (this.spxAutofocus) {
@@ -282,8 +397,9 @@ class SpxInputTextComponent {
         this.spxFocused = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxSuggestions: "spxSuggestions", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused", spxType: "spxType", value: "value", spxWasInternalUpdate: "spxWasInternalUpdate" }, outputs: { spxBlurFromChild: "spxBlurFromChild", spxChange: "spxChange", spxFocus: "spxFocus" }, ngImport: i0, template: `<div class="relative text-black">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxSuggestions: "spxSuggestions", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused", spxType: "spxType", value: "value", spxWasInternalUpdate: "spxWasInternalUpdate" }, outputs: { spxBlurFromChild: "spxBlurFromChild", spxChange: "spxChange", spxFocus: "spxFocus" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<div class="relative text-black">
   <input
+    #input
     class="font-bold text-lg w-full outline-none"
     [class.bg-white]="!this.spxReadonly"
     [class.bg-gray-300]="this.spxReadonly"
@@ -295,27 +411,18 @@ class SpxInputTextComponent {
     [attr.pattern]="this.spxPattern ? this.spxPattern : undefined"
     [attr.name]="this.spxName"
     [attr.type]="this.spxType"
-    [attr.value]="this.value?.description ? this.value?.description : this.value?.value"
+    [value]="this.value?.description ? this.value?.description : this.value?.value"
     (blur)="this.handleBlur()"
     (keyUp)="this.handleKeyUp()"
     (focus)="this.handleFocus()"
     (input)="this.handleDescriptionInput($event)"
   />
   <span *ngIf="this.value?.description && this.value?.value && this.value?.description?.valueOf() !== this.value?.value?.valueOf()">{{this.value?.value}}</span>
-  <div
+  <spx-dropdown
     *ngIf="this.spxFocused && (this.spxType === 'overlay' || this.spxType === 'overlaynumber')"
-    class="absolute bg-gray-100 left-0 right-0 z-20">
-      <div
-        *ngFor="let valuePair of this.spxSuggestions"
-        class="text-black block w-full p-2 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 flex items-center"
-        (click)="this.handleSuggestionClick($event)"
-        [attr.tabindex]="0"
-      >
-      <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
-        <spx-button spxType="button">Select</spx-button>
-      </div>
-  </div>
-</div>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }] }); }
+    [spxSuggestions]="this.spxSuggestions" (spxSelect)="this.handleSuggestionClick($event)">
+  </spx-dropdown>
+</div>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputTextComponent, decorators: [{
             type: Component,
@@ -326,9 +433,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         NgIf,
                         NgFor,
                         SpxButtonComponent,
+                        SpxDropdownComponent,
                     ],
                     template: `<div class="relative text-black">
   <input
+    #input
     class="font-bold text-lg w-full outline-none"
     [class.bg-white]="!this.spxReadonly"
     [class.bg-gray-300]="this.spxReadonly"
@@ -340,26 +449,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
     [attr.pattern]="this.spxPattern ? this.spxPattern : undefined"
     [attr.name]="this.spxName"
     [attr.type]="this.spxType"
-    [attr.value]="this.value?.description ? this.value?.description : this.value?.value"
+    [value]="this.value?.description ? this.value?.description : this.value?.value"
     (blur)="this.handleBlur()"
     (keyUp)="this.handleKeyUp()"
     (focus)="this.handleFocus()"
     (input)="this.handleDescriptionInput($event)"
   />
   <span *ngIf="this.value?.description && this.value?.value && this.value?.description?.valueOf() !== this.value?.value?.valueOf()">{{this.value?.value}}</span>
-  <div
+  <spx-dropdown
     *ngIf="this.spxFocused && (this.spxType === 'overlay' || this.spxType === 'overlaynumber')"
-    class="absolute bg-gray-100 left-0 right-0 z-20">
-      <div
-        *ngFor="let valuePair of this.spxSuggestions"
-        class="text-black block w-full p-2 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 flex items-center"
-        (click)="this.handleSuggestionClick($event)"
-        [attr.tabindex]="0"
-      >
-      <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
-        <spx-button spxType="button">Select</spx-button>
-      </div>
-  </div>
+    [spxSuggestions]="this.spxSuggestions" (spxSelect)="this.handleSuggestionClick($event)">
+  </spx-dropdown>
 </div>`,
                 }]
         }], propDecorators: { spxName: [{
@@ -392,6 +492,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Output
             }], spxWasInternalUpdate: [{
                 type: Input
+            }], inputRef: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
             }] } });
 
 class SpxInputDateComponent {
@@ -596,7 +699,7 @@ class SpxInputDateComponent {
   <spx-suggestion 
   *ngFor="let valuePair of spxSuggestions[spxSelectStep]"  
   (click)="this.handleSuggestionClick(valuePair.value)">{{valuePair?.description}}</spx-suggestion>
-</div>`, isInline: true, styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxSelected"] }] }); }
+</div>`, isInline: true, styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputDateComponent, decorators: [{
             type: Component,
@@ -698,8 +801,8 @@ class SpxInputFloatComponent {
         this.spxWasInternalUpdate = false;
         this.tick = {};
     }
-    async spxSetFocus() {
-        // this.elFirstInput.focus();
+    spxSetFocus() {
+        this.firstInputRef?.nativeElement?.focus();
     }
     // @Watch('value') onValueChanged(newValue: SpxValuePair<any>, _oldValue: SpxValuePair<any>) {
     //   this.handleSetValue(newValue);
@@ -751,8 +854,9 @@ class SpxInputFloatComponent {
         return /^[+-]?\d+(\.\d+)?$/.test(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputFloatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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" }, ngImport: i0, template: `<div class="flex items-end">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputFloatComponent, isStandalone: true, selector: "spx-input-float", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxFocused: "spxFocused", spxStep: "spxStep", value: "value", spxWasInternalUpdate: "spxWasInternalUpdate", tick: "tick" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, viewQueries: [{ propertyName: "firstInputRef", first: true, predicate: ["firstInputRef"], descendants: true, static: true }], ngImport: i0, template: `<div class="flex items-end">
   <input
+    #firstInputRef
     class="spx-input-float__input"
     [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
     [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
@@ -785,6 +889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         SpxButtonComponent,
                     ], 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"
@@ -830,6 +935,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }], tick: [{
                 type: Input
+            }], firstInputRef: [{
+                type: ViewChild,
+                args: ['firstInputRef', { static: true }]
             }] } });
 
 class SpxInputNumberComponent {
@@ -841,8 +949,8 @@ class SpxInputNumberComponent {
         this.spxFocus = new EventEmitter();
         this.spxWasInternalUpdate = false;
     }
-    async spxSetFocus() {
-        // this.elInput.focus();
+    spxSetFocus() {
+        this.inputRef?.nativeElement?.focus();
     }
     componentDidLoad() {
         if (this.spxAutofocus) {
@@ -861,8 +969,9 @@ class SpxInputNumberComponent {
         this.spxChange.emit(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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" }, ngImport: i0, template: `<div class="spx-input-number__controls">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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"
@@ -879,6 +988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             type: Component,
             args: [{ selector: 'spx-input-number', standalone: true, 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"
@@ -910,55 +1020,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Output
             }], spxFocus: [{
                 type: Output
+            }], inputRef: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
             }] } });
 
 class SpxInputRadioComponent {
     constructor() {
-        this.spxFocused = true;
+        this.focusPosition = 0;
+        this.spxFocused = false;
+        this.spxShowLabel = true;
         this.spxReadonly = false;
         this.spxSuggestions = [];
         this.spxChange = new EventEmitter();
         this.spxFocus = new EventEmitter();
-        this.spxWasInternalUpdate = false;
     }
-    async spxSetFocus() {
-        // this.elYear.focus();
+    spxFocusIn() {
+        this.listenToKeys();
+        this.determineFocusPosition();
     }
-    handleSuggestionClick(value) {
-        this.value = value;
-        this.spxChange.emit(this.value);
+    spxFocusOut() {
+        this.subscriptionKeyDown?.unsubscribe();
+        this.subscriptionKeyUp?.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if ((changes['spxSuggestions'] && changes['spxSuggestions'].previousValue !== changes['spxSuggestions'].currentValue) ||
+            (changes['value'] && changes['value'].previousValue !== changes['value'].currentValue)) {
+            this.determineFocusPosition();
+        }
+    }
+    handleSuggestionClick(valuePair) {
+        if (this.spxReadonly) {
+            console.log('spxInputRadio: clicked, but readonly');
+        }
+        else {
+            console.log('spxInputRadio: clicked');
+            this.select(valuePair);
+        }
+    }
+    determineFocusPosition() {
+        if (this.value && this.spxSuggestions?.length) {
+            const index = this.spxSuggestions.findIndex(valuePair => valuePairToValue(valuePair) === valuePairToValue(this.value));
+            this.focusPosition = index >= 0 ? index : 0;
+        }
+        else {
+            this.focusPosition = 0;
+        }
+    }
+    select(valuePair) {
+        this.focusPosition = 0;
+        this.value = valuePair;
+        this.spxChange.emit(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));
+                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));
+                event.preventDefault();
+            }
+        });
+        this.subscriptionKeyDown = fromEvent(window, 'keydown').subscribe((event) => {
+            if (event.key === 'ArrowDown' ||
+                event.key === 'ArrowLeft' ||
+                event.key === 'ArrowRight' ||
+                event.key === 'ArrowUp') {
+                event.preventDefault();
+            }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: "spxName", spxValidators: "spxValidators", spxFocused: "spxFocused", spxReadonly: "spxReadonly", spxSuggestions: "spxSuggestions", value: "value" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, ngImport: i0, template: `<div class="spx-input-radio__suggestions">
-    <spx-suggestion
-      *ngFor="let valuePair of this.spxSuggestions"
-      [spxDisabled]="this.spxReadonly"
-      [spxSelected]="this.value?.value === this.valuePair?.value"
-      (click)="this.spxReadonly ? undefined : this.handleSuggestionClick(valuePair)">
-      {{this.valuePair?.description}}
-    </spx-suggestion>
-</div>`, isInline: true, styles: [":host{display:block}.spx-input-radio__suggestions{display:grid;grid-gap:8px;grid-template-columns:repeat(2,1fr);margin-top:8px}.spx-input-radio--readonly{background-color:transparent;border:0;box-sizing:border-box;font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: "spxName", spxValidators: "spxValidators", spxFocused: "spxFocused", spxShowLabel: "spxShowLabel", spxReadonly: "spxReadonly", spxSuggestions: "spxSuggestions", value: "value" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, usesOnChanges: true, ngImport: i0, template: `<div class="grid grid-cols-2 gap-2" [class.mt-3]="this.spxShowLabel">
+      <spx-suggestion
+        *ngFor="let valuePair of this.spxSuggestions; let i = index"
+        [spxDisabled]="this.spxReadonly"
+        [spxFocused]="this.spxFocused && i === this.focusPosition"
+        [spxSelected]="this.value?.value === this.valuePair?.value"
+        [spxTabbable]="this.focusPosition === i"
+        (pointerdown)="this.handleSuggestionClick(valuePair)">
+        {{this.valuePair?.description}}
+      </spx-suggestion>
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-input-radio', standalone: true, imports: [
+            args: [{
+                    selector: 'spx-input-radio',
+                    standalone: true,
+                    imports: [
                         NgFor,
                         SpxSuggestionComponent,
-                    ], template: `<div class="spx-input-radio__suggestions">
-    <spx-suggestion
-      *ngFor="let valuePair of this.spxSuggestions"
-      [spxDisabled]="this.spxReadonly"
-      [spxSelected]="this.value?.value === this.valuePair?.value"
-      (click)="this.spxReadonly ? undefined : this.handleSuggestionClick(valuePair)">
-      {{this.valuePair?.description}}
-    </spx-suggestion>
-</div>`, styles: [":host{display:block}.spx-input-radio__suggestions{display:grid;grid-gap:8px;grid-template-columns:repeat(2,1fr);margin-top:8px}.spx-input-radio--readonly{background-color:transparent;border:0;box-sizing:border-box;font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}\n"] }]
+                    ],
+                    template: `<div class="grid grid-cols-2 gap-2" [class.mt-3]="this.spxShowLabel">
+      <spx-suggestion
+        *ngFor="let valuePair of this.spxSuggestions; let i = index"
+        [spxDisabled]="this.spxReadonly"
+        [spxFocused]="this.spxFocused && i === this.focusPosition"
+        [spxSelected]="this.value?.value === this.valuePair?.value"
+        [spxTabbable]="this.focusPosition === i"
+        (pointerdown)="this.handleSuggestionClick(valuePair)">
+        {{this.valuePair?.description}}
+      </spx-suggestion>
+    </div>`,
+                }]
         }], propDecorators: { spxName: [{
                 type: Input
             }], spxValidators: [{
                 type: Input
             }], spxFocused: [{
                 type: Input
+            }], spxShowLabel: [{
+                type: Input
             }], spxReadonly: [{
                 type: Input
             }], spxSuggestions: [{
@@ -982,6 +1159,7 @@ var SpxInputTypeEnum;
     SpxInputTypeEnum["number"] = "number";
     SpxInputTypeEnum["password"] = "password";
     SpxInputTypeEnum["text"] = "text";
+    SpxInputTypeEnum["textNumericKeyboard"] = "textNumericKeyboard";
 })(SpxInputTypeEnum || (SpxInputTypeEnum = {}));
 
 class SpxInputComponent {
@@ -994,6 +1172,7 @@ class SpxInputComponent {
         this.spxSelectDay = true;
         this.spxShowEdit = false;
         this.spxShowHelp = false;
+        this.spxShowLabel = true;
         this.spxCompact = false;
         this.spxShowClear = true;
         this.spxShowSearch = false;
@@ -1012,9 +1191,6 @@ class SpxInputComponent {
         this.onChange = () => { };
         this.onTouched = () => { };
     }
-    spxSetFocus() {
-        this.passFocusToControl();
-    }
     handleBlur() {
         this.spxBlur.emit();
     }
@@ -1035,17 +1211,19 @@ class SpxInputComponent {
     handleFocus() {
         this.spxFocus.emit();
         this.spxFocused = true;
-        // this.elBox.spxSetFocus();
     }
     handleSearch() {
         this.spxSearch.emit();
     }
-    setFocus() {
+    setFocusIn() {
         this.spxFocused = true;
         this.passFocusToControl();
     }
     setFocusOut() {
         this.spxFocused = false;
+        if (this.spxType === SpxInputTypeEnum.radio) {
+            this.radioInput?.spxFocusOut();
+        }
     }
     handleEdit() {
         this.spxEdit.emit();
@@ -1056,9 +1234,22 @@ class SpxInputComponent {
         this.spxFocused = true;
     }
     passFocusToControl() {
+        switch (this.spxType) {
+            case SpxInputTypeEnum.autocomplete:
+            case SpxInputTypeEnum.text:
+            case SpxInputTypeEnum.overlayNumber:
+                this.textInput?.spxSetFocus();
+                break;
+            case SpxInputTypeEnum.number:
+                this.numberInput?.spxSetFocus();
+                break;
+            case SpxInputTypeEnum.radio:
+                this.radioInput?.spxFocusIn();
+                break;
+        }
     }
     writeValue(value) {
-        this.value = this.lastValue = value == null ? '' : value;
+        this.value = this.lastValue = value;
     }
     handleChangeEvent(value) {
         if (value !== this.lastValue) {
@@ -1076,13 +1267,14 @@ class SpxInputComponent {
         this.onTouched = fn;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxLabel: "spxLabel", spxMax: "spxMax", spxMin: "spxMin", spxName: "spxName", spxReadonly: "spxReadonly", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxRequired: "spxRequired", spxSelectMonth: "spxSelectMonth", spxSelectDay: "spxSelectDay", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", 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: "14.0.0", version: "17.1.2", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxLabel: "spxLabel", spxMax: "spxMax", spxMin: "spxMin", spxName: "spxName", spxReadonly: "spxReadonly", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxRequired: "spxRequired", spxSelectMonth: "spxSelectMonth", spxSelectDay: "spxSelectDay", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxShowLabel: "spxShowLabel", spxCompact: "spxCompact", spxShowClear: "spxShowClear", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxStep: "spxStep", spxSuggestions: "spxSuggestions", spxType: "spxType", spxValidators: "spxValidators", value: "value", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused" }, outputs: { spxBlur: "spxBlur", spxClear: "spxClear", spxChange: "spxChange", spxFocus: "spxFocus", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: SpxInputComponent,
                 multi: true
             }
-        ], ngImport: i0, template: `<spx-input-box
+        ], 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: "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"
@@ -1091,12 +1283,13 @@ class SpxInputComponent {
   [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.setFocus()"
+  (spxFocus)="this.setFocusIn()"
   (spxFocusOut)="this.setFocusOut()"
   (spxSearch)="this.handleSearch()">
   <div controls>
@@ -1157,12 +1350,14 @@ class SpxInputComponent {
       [value]="this.value"
     ></spx-input-number>
     <spx-input-radio
+      #radioInput
       *ngIf="this.spxType === 'radio'"
       (spxChange)="this.handleChange($event)"
       (spxFocus)="this.handleFocus()"
       [spxFocused]="this.spxFocused"
       [spxName]="this.spxName"
       [spxReadonly]="this.spxReadonly"
+      [spxShowLabel]="this.spxShowLabel"
       [spxSuggestions]="this.spxSuggestions"
       [spxValidators]="this.spxValidators"
       [value]="this.value"
@@ -1171,7 +1366,7 @@ class SpxInputComponent {
   <div validation-messages>
     <ng-content></ng-content>
   </div>
-</spx-input-box>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxLabel", "spxRequired", "spxReadonly", "spxShowHelp", "spxCompact", "spxShowClear", "spxShowEdit", "spxShowSearch", "spxShowValidationMessages", "spxValue", "spxFocused"], outputs: ["spxClear", "spxSearch", "spxFocus", "spxFocusOut", "spxEdit", "spxHelp"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxName", "spxReadonly", "spxValidators", "spxFocused", "spxSelectMonth", "spxSelectDay", "value", "spxLastKeyPressed", "spxSelectStep", "spxInternalValue", "spxSuggestions", "spxWasInternalUpdate"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxWasInternalUpdate", "tick"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxFocused", "spxReadonly", "spxSuggestions", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }] }); }
+</spx-input-box>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxFocused", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxValue"], outputs: ["spxClear", "spxSearch", "spxFocus", "spxFocusOut", "spxEdit", "spxHelp"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxName", "spxReadonly", "spxValidators", "spxFocused", "spxSelectMonth", "spxSelectDay", "value", "spxLastKeyPressed", "spxSelectStep", "spxInternalValue", "spxSuggestions", "spxWasInternalUpdate"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxWasInternalUpdate", "tick"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxFocused", "spxShowLabel", "spxReadonly", "spxSuggestions", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputComponent, decorators: [{
             type: Component,
@@ -1198,6 +1393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         }
                     ],
                     template: `<spx-input-box
+  [spxFocused]="this.spxFocused"
   [spxLabel]="this.spxLabel"
   [spxReadonly]="this.spxReadonly"
   [spxRequired]="this.spxRequired"
@@ -1206,12 +1402,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
   [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.setFocus()"
+  (spxFocus)="this.setFocusIn()"
   (spxFocusOut)="this.setFocusOut()"
   (spxSearch)="this.handleSearch()">
   <div controls>
@@ -1272,12 +1469,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
       [value]="this.value"
     ></spx-input-number>
     <spx-input-radio
+      #radioInput
       *ngIf="this.spxType === 'radio'"
       (spxChange)="this.handleChange($event)"
       (spxFocus)="this.handleFocus()"
       [spxFocused]="this.spxFocused"
       [spxName]="this.spxName"
       [spxReadonly]="this.spxReadonly"
+      [spxShowLabel]="this.spxShowLabel"
       [spxSuggestions]="this.spxSuggestions"
       [spxValidators]="this.spxValidators"
       [value]="this.value"
@@ -1314,6 +1513,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }], spxShowHelp: [{
                 type: Input
+            }], spxShowLabel: [{
+                type: Input
             }], spxCompact: [{
                 type: Input
             }], spxShowClear: [{
@@ -1348,6 +1549,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Output
             }], spxSearch: [{
                 type: Output
+            }], floatInput: [{
+                type: ViewChild,
+                args: [SpxInputFloatComponent]
+            }], numberInput: [{
+                type: ViewChild,
+                args: [SpxInputNumberComponent]
+            }], textInput: [{
+                type: ViewChild,
+                args: [SpxInputTextComponent]
+            }], radioInput: [{
+                type: ViewChild,
+                args: [SpxInputRadioComponent]
             }], spxFocused: [{
                 type: Input
             }], _handleBlurEvent: [{