@softpak/components 0.0.0-beta.8 → 0.0.0-beta.81

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

@@ -1,54 +1,37 @@
 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';
-import { faEdit, faSearch, faQuestion, faTimes } from '@fortawesome/free-solid-svg-icons';
+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';
 
 class SpxInputBoxComponent {
-    constructor() {
-        this.faEdit = faEdit;
-        this.faSearch = faSearch;
-        this.faQuestion = faQuestion;
-        this.faTimes = faTimes;
-        this.spxReadonly = false;
-        this.spxShowClear = true;
-        this.spxClear = new EventEmitter();
-        this.spxSearchOutput = new EventEmitter();
-        this.spxFocus = new EventEmitter();
-        this.spxFocusOut = new EventEmitter();
-        this.spxEdit = new EventEmitter();
-        this.spxHelp = new EventEmitter();
-        this.spxFocused = false;
+    handleFocusOut() {
+        this.spxFocusOut.emit();
     }
-    // @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;
+    handleWindowClick(ev) {
+        if (ev.composedPath().includes(this.elRef.nativeElement)) {
+            if (!this.spxFocused) {
+                this.spxFocus.emit();
+            }
+        }
+        else {
+            this.spxFocused = false;
+        }
     }
     onClear() {
         this.spxClear.emit();
     }
     onSearch() {
-        this.spxSearchOutput.emit();
+        this.spxSearch.emit();
     }
     onEdit() {
         this.spxEdit.emit();
@@ -56,8 +39,25 @@ class SpxInputBoxComponent {
     onHelp() {
         this.spxHelp.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", spxSearchOutput: "spxSearchOutput", spxFocus: "spxFocus", spxFocusOut: "spxFocusOut", spxEdit: "spxEdit", spxHelp: "spxHelp" }, ngImport: i0, template: `<div class="flex rounded w-full gap-3"
+    constructor(elRef) {
+        this.elRef = elRef;
+        this.faEdit = faEdit;
+        this.faSearch = faSearch;
+        this.faQuestion = faQuestion;
+        this.faTimes = faTimes;
+        // @Element() el: HTMLElement;
+        this.spxFocused = false;
+        this.spxReadonly = false;
+        this.spxShowClear = 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();
+    }
+    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: { spxFocused: "spxFocused", spxLabel: "spxLabel", spxRequired: "spxRequired", spxReadonly: "spxReadonly", spxShowHelp: "spxShowHelp", spxCompact: "spxCompact", spxShowClear: "spxShowClear", spxShowEdit: "spxShowEdit", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxValue: "spxValue" }, outputs: { spxClear: "spxClear", spxSearch: "spxSearch", spxFocus: "spxFocus", spxFocusOut: "spxFocusOut", spxEdit: "spxEdit", spxHelp: "spxHelp" }, host: { listeners: { "focusout": "handleFocusOut()", "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"
@@ -84,7 +84,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>
@@ -92,6 +91,7 @@ class SpxInputBoxComponent {
         *ngIf="this.spxShowHelp"
         (spxClick)="onHelp()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
@@ -101,6 +101,7 @@ class SpxInputBoxComponent {
         *ngIf="this.spxShowSearch"
         (spxClick)="onSearch()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
@@ -159,7 +160,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>
@@ -167,6 +167,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'">
@@ -176,6 +177,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'">
@@ -197,7 +199,9 @@ 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: { spxFocused: [{
+                type: Input
+            }], spxLabel: [{
                 type: Input
             }], spxRequired: [{
                 type: Input
@@ -219,7 +223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }], spxClear: [{
                 type: Output
-            }], spxSearchOutput: [{
+            }], spxSearch: [{
                 type: Output
             }], spxFocus: [{
                 type: Output
@@ -229,8 +233,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Output
             }], spxHelp: [{
                 type: Output
-            }], spxFocused: [{
+            }], handleFocusOut: [{
+                type: HostListener,
+                args: ['focusout']
+            }], 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) => {
+            console.log(event.key);
+            if (event.key === 'ArrowUp' && this.focusPosition > 0) {
+                this.focusPosition--;
+                event.preventDefault();
+            }
+            if (event.key === 'ArrowDown' && this.focusPosition < this.spxSuggestions.length) {
+                this.focusPosition++;
+                event.preventDefault();
+            }
+            if (event.key === 'Enter' && this.focusPosition > 0) {
+                this.select(this.spxSuggestions.at(this.focusPosition - 1));
+                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">
+      <div
+        *ngFor="let valuePair of this.spxSuggestions; let i = index"
+        class="text-black block w-full p-2 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center"
+        [class.bg-gray-100]="i === this.focusPosition"
+        (click)="this.handleSuggestionClick(valuePair)"
+        [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: 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">
+      <div
+        *ngFor="let valuePair of this.spxSuggestions; let i = index"
+        class="text-black block w-full p-2 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center"
+        [class.bg-gray-100]="i === this.focusPosition"
+        (click)="this.handleSuggestionClick(valuePair)"
+        [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>`,
+                }]
+        }], propDecorators: { spxSuggestions: [{
                 type: Input
+            }], spxSelect: [{
+                type: Output
             }] } });
 
 class SpxInputTextComponent {
@@ -247,7 +341,7 @@ class SpxInputTextComponent {
         this.spxWasInternalUpdate = false;
     }
     async spxSetFocus() {
-        // this.elInput.focus();
+        this.inputRef?.nativeElement?.focus();
     }
     componentDidLoad() {
         if (this.spxAutofocus) {
@@ -279,8 +373,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"
@@ -292,27 +387,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,
@@ -323,9 +409,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"
@@ -337,26 +425,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: [{
@@ -389,6 +468,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 {
@@ -968,6 +1050,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Output
             }] } });
 
+var SpxInputTypeEnum;
+(function (SpxInputTypeEnum) {
+    SpxInputTypeEnum["autocomplete"] = "autocomplete";
+    SpxInputTypeEnum["date"] = "date";
+    SpxInputTypeEnum["float"] = "float";
+    SpxInputTypeEnum["overlay"] = "overlay";
+    SpxInputTypeEnum["overlayNumber"] = "overlaynumber";
+    SpxInputTypeEnum["radio"] = "radio";
+    SpxInputTypeEnum["number"] = "number";
+    SpxInputTypeEnum["password"] = "password";
+    SpxInputTypeEnum["text"] = "text";
+    SpxInputTypeEnum["textNumericKeyboard"] = "textNumericKeyboard";
+})(SpxInputTypeEnum || (SpxInputTypeEnum = {}));
+
 class SpxInputComponent {
     constructor() {
         this.spxLabel = 'label';
@@ -983,7 +1079,7 @@ class SpxInputComponent {
         this.spxShowSearch = false;
         this.spxShowValidationMessages = false;
         this.spxSuggestions = [];
-        this.spxType = 'text';
+        this.spxType = SpxInputTypeEnum.text;
         this.spxCapitalize = false;
         this.spxBlur = new EventEmitter();
         this.spxClear = new EventEmitter();
@@ -996,9 +1092,6 @@ class SpxInputComponent {
         this.onChange = () => { };
         this.onTouched = () => { };
     }
-    async spxSetFocus() {
-        this.passFocusToControl();
-    }
     handleBlur() {
         this.spxBlur.emit();
     }
@@ -1007,6 +1100,7 @@ class SpxInputComponent {
         this.spxChange.emit(this.value);
     }
     handleClear() {
+        this.spxClear.emit();
         this.spxFocused = true;
         this.passFocusToControl();
         this.value = {
@@ -1016,6 +1110,7 @@ class SpxInputComponent {
         this.spxChange.emit(this.value);
     }
     handleFocus() {
+        this.spxFocus.emit();
         this.spxFocused = true;
         // this.elBox.spxSetFocus();
     }
@@ -1030,15 +1125,24 @@ class SpxInputComponent {
         this.spxFocused = false;
     }
     handleEdit() {
+        this.spxEdit.emit();
         this.spxFocused = true;
     }
     handleHelp() {
+        this.spxHelp.emit();
         this.spxFocused = true;
     }
     passFocusToControl() {
+        switch (this.spxType) {
+            case SpxInputTypeEnum.autocomplete:
+            case SpxInputTypeEnum.text:
+            case SpxInputTypeEnum.overlayNumber:
+                this.textInput?.spxSetFocus();
+                break;
+        }
     }
     writeValue(value) {
-        this.value = this.lastValue = value == null ? '' : value;
+        this.value = this.lastValue = value;
     }
     handleChangeEvent(value) {
         if (value !== this.lastValue) {
@@ -1062,7 +1166,8 @@ class SpxInputComponent {
                 useExisting: SpxInputComponent,
                 multi: true
             }
-        ], ngImport: i0, template: `<spx-input-box
+        ], viewQueries: [{ propertyName: "textInput", first: true, predicate: SpxInputTextComponent, descendants: true }], ngImport: i0, template: `<spx-input-box
+  [spxFocused]="this.spxFocused"
   [spxLabel]="this.spxLabel"
   [spxReadonly]="this.spxReadonly"
   [spxRequired]="this.spxRequired"
@@ -1078,7 +1183,7 @@ class SpxInputComponent {
   (spxHelp)="this.handleHelp()"
   (spxFocus)="this.setFocus()"
   (spxFocusOut)="this.setFocusOut()"
-  (spxSearchOutput)="this.handleSearch()">
+  (spxSearch)="this.handleSearch()">
   <div controls>
     <spx-input-text
       *ngIf="this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password'"
@@ -1151,7 +1256,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", "spxSearchOutput", "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: ["spxFocused", "spxLabel", "spxRequired", "spxReadonly", "spxShowHelp", "spxCompact", "spxShowClear", "spxShowEdit", "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", "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,
@@ -1178,6 +1283,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"
@@ -1193,7 +1299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
   (spxHelp)="this.handleHelp()"
   (spxFocus)="this.setFocus()"
   (spxFocusOut)="this.setFocusOut()"
-  (spxSearchOutput)="this.handleSearch()">
+  (spxSearch)="this.handleSearch()">
   <div controls>
     <spx-input-text
       *ngIf="this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password'"
@@ -1328,6 +1434,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Output
             }], spxSearch: [{
                 type: Output
+            }], textInput: [{
+                type: ViewChild,
+                args: [SpxInputTextComponent]
             }], spxFocused: [{
                 type: Input
             }], _handleBlurEvent: [{
@@ -1339,5 +1448,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SpxInputBoxComponent, SpxInputComponent, SpxInputTextComponent };
+export { SpxInputBoxComponent, SpxInputComponent, SpxInputTextComponent, SpxInputTypeEnum };
 //# sourceMappingURL=softpak-components-spx-inputs.mjs.map