@softpak/components 0.0.0-beta.1 → 0.0.0-beta.100

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

@@ -1,54 +1,41 @@
-import { NgIf, NgFor } from '@angular/common';
+import { NgIf, NgFor, JsonPipe } 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;
-    }
-    // @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() {
+    handleFocusIn(ev) {
         this.spxFocused = true;
     }
+    handleFocusOut(ev) {
+        console.log('focusout', ev.composedPath());
+        this.spxFocusOut.emit();
+    }
+    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 +43,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"
+    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($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"
@@ -78,33 +82,34 @@ class SpxInputBoxComponent {
       </div>
       <ng-content select="[controls]"></ng-content>
     </div>
-    <div class="flex-none p-0.5 gap-3">
+    <div class="flex flex-none gap-1 p-1">
       <spx-button
         *ngIf="this.spxShowEdit"
         (spxClick)="onEdit()"
         [spxFullHeight]="true"
         [spxSize]="'xl'"
-        [spxTabIndex]="-1"
         [spxType]="'button'">
-        <fa-icon [icon]="faEdit" class="block h-4 w-4 text-xl"></fa-icon>
+        <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
       </spx-button>
       <spx-button
         *ngIf="this.spxShowHelp"
         (spxClick)="onHelp()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
-        <fa-icon [icon]="faQuestion" class="block h-4 w-4 text-xl"></fa-icon>
+        <fa-icon [icon]="faQuestion" class="block text-xl"></fa-icon>
       </spx-button>
       <spx-button
         *ngIf="this.spxShowSearch"
         (spxClick)="onSearch()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
-        <fa-icon [icon]="faSearch" class="block h-4 w-4 text-xl"></fa-icon>
+        <fa-icon [icon]="faSearch" class="block text-xl"></fa-icon>
       </spx-button>
       <spx-button
         *ngIf="this.spxShowClear"
@@ -114,11 +119,11 @@ class SpxInputBoxComponent {
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
-        <fa-icon [icon]="faTimes" class="block h-4 w-4 text-xl"></fa-icon>
+        <fa-icon [icon]="faTimes" class="block text-xl"></fa-icon>
       </spx-button>
     </div>
   </div>
-  <div class="bg-red-600 rounded-b text-white p-3">
+  <div *ngIf="this.spxShowValidationMessages" class="bg-red-600 rounded-b text-white p-3">
     <ng-content select="[validation-messages]"></ng-content>
   </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
 }
@@ -132,7 +137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         SpxButtonComponent,
                         FontAwesomeModule,
                     ],
-                    template: `<div class="flex rounded w-full"
+                    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"
@@ -153,33 +158,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
       </div>
       <ng-content select="[controls]"></ng-content>
     </div>
-    <div class="flex-none p-0.5 gap-3">
+    <div class="flex flex-none gap-1 p-1">
       <spx-button
         *ngIf="this.spxShowEdit"
         (spxClick)="onEdit()"
         [spxFullHeight]="true"
         [spxSize]="'xl'"
-        [spxTabIndex]="-1"
         [spxType]="'button'">
-        <fa-icon [icon]="faEdit" class="block h-4 w-4 text-xl"></fa-icon>
+        <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
       </spx-button>
       <spx-button
         *ngIf="this.spxShowHelp"
         (spxClick)="onHelp()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
-        <fa-icon [icon]="faQuestion" class="block h-4 w-4 text-xl"></fa-icon>
+        <fa-icon [icon]="faQuestion" class="block text-xl"></fa-icon>
       </spx-button>
       <spx-button
         *ngIf="this.spxShowSearch"
         (spxClick)="onSearch()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
-        <fa-icon [icon]="faSearch" class="block h-4 w-4 text-xl"></fa-icon>
+        <fa-icon [icon]="faSearch" class="block text-xl"></fa-icon>
       </spx-button>
       <spx-button
         *ngIf="this.spxShowClear"
@@ -189,15 +195,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
-        <fa-icon [icon]="faTimes" class="block h-4 w-4 text-xl"></fa-icon>
+        <fa-icon [icon]="faTimes" class="block text-xl"></fa-icon>
       </spx-button>
     </div>
   </div>
-  <div class="bg-red-600 rounded-b text-white p-3">
+  <div *ngIf="this.spxShowValidationMessages" class="bg-red-600 rounded-b text-white p-3">
     <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 +227,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 +237,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Output
             }], spxHelp: [{
                 type: Output
-            }], spxFocused: [{
+            }], handleFocusIn: [{
+                type: HostListener,
+                args: ['focusout', ["$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) {
+        console.log('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">
+    {{ this.spxSuggestions | json }}
+  <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"
+        [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"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); }
+}
+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,
+                        JsonPipe,
+                    ],
+                    template: `<div class="relative text-black">
+    {{ this.spxSuggestions | json }}
+  <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"
+        [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 {
@@ -247,7 +355,7 @@ class SpxInputTextComponent {
         this.spxWasInternalUpdate = false;
     }
     async spxSetFocus() {
-        // this.elInput.focus();
+        this.inputRef?.nativeElement?.focus();
     }
     componentDidLoad() {
         if (this.spxAutofocus) {
@@ -279,9 +387,13 @@ 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">
+    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"
+    [class.cursor-not-allowed]="this.spxReadonly"
     [class.uppercase]="this.spxCapitalize"
     [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
     [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
@@ -289,27 +401,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,
@@ -320,10 +423,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         NgIf,
                         NgFor,
                         SpxButtonComponent,
+                        SpxDropdownComponent,
+                        JsonPipe,
                     ],
-                    template: `<div class="relative">
+                    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"
+    [class.cursor-not-allowed]="this.spxReadonly"
     [class.uppercase]="this.spxCapitalize"
     [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
     [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
@@ -331,26 +440,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: [{
@@ -383,6 +483,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 {
@@ -962,6 +1065,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';
@@ -977,7 +1094,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();
@@ -990,9 +1107,6 @@ class SpxInputComponent {
         this.onChange = () => { };
         this.onTouched = () => { };
     }
-    async spxSetFocus() {
-        this.passFocusToControl();
-    }
     handleBlur() {
         this.spxBlur.emit();
     }
@@ -1001,6 +1115,7 @@ class SpxInputComponent {
         this.spxChange.emit(this.value);
     }
     handleClear() {
+        this.spxClear.emit();
         this.spxFocused = true;
         this.passFocusToControl();
         this.value = {
@@ -1010,6 +1125,7 @@ class SpxInputComponent {
         this.spxChange.emit(this.value);
     }
     handleFocus() {
+        this.spxFocus.emit();
         this.spxFocused = true;
         // this.elBox.spxSetFocus();
     }
@@ -1024,15 +1140,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) {
@@ -1049,9 +1174,6 @@ class SpxInputComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    setDisabledState(isDisabled) {
-        this.spxReadonly = isDisabled;
-    }
     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: [
             {
@@ -1059,7 +1181,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"
@@ -1075,10 +1198,13 @@ 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'"
+      (spxBlurFromChild)="this.handleBlur()"
+      (spxChange)="this.handleChange($event)"
+      (spxFocus)="this.handleFocus()"
       [spxAutofocus]="this.spxAutofocus"
       [spxCapitalize]="this.spxCapitalize"
       [spxFocused]="this.spxFocused"
@@ -1090,12 +1216,11 @@ class SpxInputComponent {
       [spxType]="this.spxType"
       [spxValidators]="this.spxValidators"
       [value]="this.value"
-      (spxBlurFromChild)="this.handleBlur()"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
       ></spx-input-text>
     <spx-input-date
       *ngIf="this.spxType === 'date'"
+      (spxChange)="this.handleChange($event)"
+      (spxFocus)="this.handleFocus()"
       [spxFocused]="this.spxFocused"
       [spxMax]="this.spxMax"
       [spxMin]="this.spxMin"
@@ -1105,11 +1230,11 @@ class SpxInputComponent {
       [spxSelectMonth]="this.spxSelectMonth"
       [spxValidators]="this.spxValidators"
       [value]="this.value"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
     ></spx-input-date>
     <spx-input-float
       *ngIf="this.spxType === 'float'"
+      (spxChange)="this.handleChange($event)"
+      (spxFocus)="this.handleFocus()"
       [spxAutofocus]="this.spxAutofocus"
       [spxFocused]="this.spxFocused"
       [spxName]="this.spxName"
@@ -1117,38 +1242,36 @@ class SpxInputComponent {
       [spxStep]="this.spxStep"
       [spxValidators]="this.spxValidators"
       [value]="this.value"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
     ></spx-input-float>
     <spx-input-number
       *ngIf="this.spxType === 'number'"
-      [spxStep]="this.spxStep"
+      (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"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      (spxReadonly)="this.spxReadonly"
       [value]="this.value"
     ></spx-input-number>
     <spx-input-radio
       *ngIf="this.spxType === 'radio'"
+      (spxChange)="this.handleChange($event)"
+      (spxFocus)="this.handleFocus()"
       [spxFocused]="this.spxFocused"
       [spxName]="this.spxName"
+      [spxReadonly]="this.spxReadonly"
       [spxSuggestions]="this.spxSuggestions"
       [spxValidators]="this.spxValidators"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      (spxReadonly)="this.spxReadonly"
       [value]="this.value"
     ></spx-input-radio>
   </div>
   <div validation-messages>
     <ng-content></ng-content>
   </div>
-</spx-input-box>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["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,
@@ -1175,6 +1298,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"
@@ -1190,10 +1314,13 @@ 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'"
+      (spxBlurFromChild)="this.handleBlur()"
+      (spxChange)="this.handleChange($event)"
+      (spxFocus)="this.handleFocus()"
       [spxAutofocus]="this.spxAutofocus"
       [spxCapitalize]="this.spxCapitalize"
       [spxFocused]="this.spxFocused"
@@ -1205,12 +1332,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
       [spxType]="this.spxType"
       [spxValidators]="this.spxValidators"
       [value]="this.value"
-      (spxBlurFromChild)="this.handleBlur()"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
       ></spx-input-text>
     <spx-input-date
       *ngIf="this.spxType === 'date'"
+      (spxChange)="this.handleChange($event)"
+      (spxFocus)="this.handleFocus()"
       [spxFocused]="this.spxFocused"
       [spxMax]="this.spxMax"
       [spxMin]="this.spxMin"
@@ -1220,11 +1346,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
       [spxSelectMonth]="this.spxSelectMonth"
       [spxValidators]="this.spxValidators"
       [value]="this.value"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
     ></spx-input-date>
     <spx-input-float
       *ngIf="this.spxType === 'float'"
+      (spxChange)="this.handleChange($event)"
+      (spxFocus)="this.handleFocus()"
       [spxAutofocus]="this.spxAutofocus"
       [spxFocused]="this.spxFocused"
       [spxName]="this.spxName"
@@ -1232,31 +1358,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
       [spxStep]="this.spxStep"
       [spxValidators]="this.spxValidators"
       [value]="this.value"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
     ></spx-input-float>
     <spx-input-number
       *ngIf="this.spxType === 'number'"
-      [spxStep]="this.spxStep"
+      (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"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      (spxReadonly)="this.spxReadonly"
       [value]="this.value"
     ></spx-input-number>
     <spx-input-radio
       *ngIf="this.spxType === 'radio'"
+      (spxChange)="this.handleChange($event)"
+      (spxFocus)="this.handleFocus()"
       [spxFocused]="this.spxFocused"
       [spxName]="this.spxName"
+      [spxReadonly]="this.spxReadonly"
       [spxSuggestions]="this.spxSuggestions"
       [spxValidators]="this.spxValidators"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      (spxReadonly)="this.spxReadonly"
       [value]="this.value"
     ></spx-input-radio>
   </div>
@@ -1325,6 +1449,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: [{
@@ -1336,5 +1463,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