@softpak/components 0.0.0-beta.11 → 0.0.0-beta.110

package/fesm2022/softpak-components-spx-form-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"softpak-components-spx-form-view.mjs","sources":["../../../../projects/softpak/components/spx-form-view/spx-form-view.component.ts","../../../../projects/softpak/components/spx-form-view/softpak-components-spx-form-view.ts"],"sourcesContent":["import { JsonPipe, NgFor, NgIf } from '@angular/common';\nimport { Component, Input } from '@angular/core';\nimport { SpxFormSectionI } from './spx-form-section.interface';\nimport { SpxFormSectionComponent } from '@softpak/components/spx-form-section';\nimport { SpxInputComponent, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\nimport { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';\nimport { AbstractControl, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SpxFormFieldI } from './spx-form-field.interface';\n\n@Component({\n  selector: 'spx-form-view',\n  standalone: true,\n  imports: [\n    FormsModule,\n    ReactiveFormsModule,\n    JsonPipe,\n    NgIf,\n    NgFor,\n    SpxCapitalizePipe,\n    SpxFormSectionComponent,\n    SpxInputComponent,\n  ],\n  template: `<spx-form-section\n    *ngFor=\"let spxSection of spxSections; let spxSectionIndex = index;\"\n    [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\n    [spxIndex]=\"spxSectionIndex + 1\"\n    [spxTitle]=\"spxSection.title ? spxSection.title() : undefined\">\n    <ng-container *ngFor=\"let spxField of spxSection.fields; let spxFieldIndex = index;\">\n      <ng-container *ngIf=\"spxField.show === undefined || spxField.show()\">\n        <spx-input\n          *ngIf=\"spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard\"\n          [formControl]=\"$any(this.spxFormGroup.get(spxField.key))\"\n          [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\n          [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\n          [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | capitalize\"\n          [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\n          [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n          [spxRequired]=\"hasRequiredField(this.spxFormGroup.get(spxField.key)!)\"\n          [spxShowHelp]=\"false\"\n          [spxShowValidationMessages]=\"this.spxFormGroup.get(spxField.key)! && this.spxFormGroup.get(spxField.key)!.errors && this.spxFormGroup.get(spxField.key)!.touched\"\n          [spxStep]=\"spxField.step ? spxField.step() : undefined\"\n          [spxType]=\"spxField.type()\"\n          [spxValidators]=\"getRawValidators(this.spxFormGroup.get(spxField.key)!)\"\n          [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions[spxField.key]\"\n          (spxBlur)=\"onBlur(spxField)\">\n        </spx-input>\n\n        <spx-input\n          *ngIf=\"spxField.type() === typeRadio\"\n          [formControl]=\"$any(this.spxFormGroup.get(spxField.key))\"\n          [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | capitalize\"\n          [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n          [spxRequired]=\"hasRequiredField(this.spxFormGroup.get(spxField.key)!)\"\n          [spxShowHelp]=\"false\"\n          [spxShowValidationMessages]=\"this.spxFormGroup.get(spxField.key)! && this.spxFormGroup.get(spxField.key)!.errors && this.spxFormGroup.get(spxField.key)!.touched\"\n          [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions[spxField.key]\"\n          [spxType]=\"typeRadio\"\n          [spxValidators]=\"getRawValidators(this.spxFormGroup.get(spxField.key)!)\">\n        </spx-input>\n      </ng-container>\n    </ng-container>\n  </spx-form-section>`,\n})\nexport class SpxFormViewComponent {\n  @Input() spxFormGroup!: FormGroup;\n  @Input() spxSections!: SpxFormSectionI[];\n  @Input() spxSuggestions!: any;\n\n  typeAutocomplete = SpxInputTypeEnum.autocomplete;\n  typeFloat = SpxInputTypeEnum.float;\n  typeNumber = SpxInputTypeEnum.number;\n  typeRadio = SpxInputTypeEnum.radio;\n  typeText = SpxInputTypeEnum.text;\n  typeNumericKeyboard = SpxInputTypeEnum.textNumericKeyboard;\n  typeOverlay = SpxInputTypeEnum.overlay;\n  typeOverlayNumber = SpxInputTypeEnum.overlayNumber;\n\n  onBlur(field: SpxFormFieldI) {\n    return;\n  }\n\n  getRawValidators(formControl: AbstractControl) {\n    // eslint-disable-next-line no-underscore-dangle\n    return (formControl as any)._rawValidators;\n  }\n\n  hasRequiredField(abstractControl: AbstractControl): boolean {\n    if (abstractControl.validator) {\n      const validator = abstractControl.validator({} as AbstractControl);\n      if (validator && validator['required']) {\n        return true;\n      }\n    }\n    if ((abstractControl as any)['controls']) {\n      for (const controlName in (abstractControl as any)['controls']) {\n        if ((abstractControl as any)['controls'][controlName]) {\n          if (this.hasRequiredField((abstractControl as any)['controls'][controlName])) {\n            return true;\n          }\n        }\n      }\n    }\n    return false;\n  }\n\n  static initialFormValue(sections: SpxFormSectionI[]) {\n    const formObject: any = {};\n    sections.forEach(section => {\n      section.fields.forEach(field => {\n        formObject[field.key] = [field.defaultValue ? field.defaultValue() : null, field.validators ? [...field.validators()] : []];\n      });\n    });\n    return formObject;\n  }\n\n  static createForm(formBuilder: FormBuilder, sections: SpxFormSectionI[]): FormGroup {\n    return formBuilder.group(this.initialFormValue(sections));\n  }\n\n  constructor(readonly formBuilder: FormBuilder) {\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,54 +1,44 @@
 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;
-    }
-    // @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) {
+        const thisEl = this.elRef.nativeElement;
+        const relatedElement = ev.relatedTarget;
+        if (!relatedElement || !thisEl.contains(relatedElement)) {
+            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 +46,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: { "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"
@@ -84,7 +91,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 +98,7 @@ class SpxInputBoxComponent {
         *ngIf="this.spxShowHelp"
         (spxClick)="onHelp()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
@@ -101,6 +108,7 @@ class SpxInputBoxComponent {
         *ngIf="this.spxShowSearch"
         (spxClick)="onSearch()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
@@ -159,7 +167,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 +174,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 +184,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 +206,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 +230,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 +240,105 @@ 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) {
+        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">
+  <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 {
@@ -247,7 +355,7 @@ class SpxInputTextComponent {
         this.spxWasInternalUpdate = false;
     }
     async spxSetFocus() {
-        // this.elInput.focus();
+        this.inputRef?.nativeElement?.focus();
     }
     componentDidLoad() {
         if (this.spxAutofocus) {
@@ -279,8 +387,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 +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,
@@ -323,9 +423,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 +439,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 +482,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 +1064,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 +1093,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 +1106,6 @@ class SpxInputComponent {
         this.onChange = () => { };
         this.onTouched = () => { };
     }
-    async spxSetFocus() {
-        this.passFocusToControl();
-    }
     handleBlur() {
         this.spxBlur.emit();
     }
@@ -1040,9 +1147,16 @@ class SpxInputComponent {
         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) {
@@ -1066,7 +1180,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"
@@ -1082,7 +1197,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'"
@@ -1155,7 +1270,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,
@@ -1182,6 +1297,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"
@@ -1197,7 +1313,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'"
@@ -1332,6 +1448,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: [{
@@ -1343,5 +1462,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