@softpak/components 0.0.0-beta.7 → 0.0.0-beta.71

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

@@ -0,0 +1,170 @@
+import { NgIf, NgFor, JsonPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { SpxFormSectionComponent } from '@softpak/components/spx-form-section';
+import { SpxInputTypeEnum, SpxInputComponent } from '@softpak/components/spx-inputs';
+import { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';
+import * as i1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+class SpxFormViewComponent {
+    onBlur(field) {
+        return;
+    }
+    getRawValidators(formControl) {
+        // eslint-disable-next-line no-underscore-dangle
+        return formControl._rawValidators;
+    }
+    hasRequiredField(abstractControl) {
+        if (abstractControl.validator) {
+            const validator = abstractControl.validator({});
+            if (validator && validator['required']) {
+                return true;
+            }
+        }
+        if (abstractControl['controls']) {
+            for (const controlName in abstractControl['controls']) {
+                if (abstractControl['controls'][controlName]) {
+                    if (this.hasRequiredField(abstractControl['controls'][controlName])) {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    }
+    static initialFormValue(sections) {
+        const formObject = {};
+        sections.forEach(section => {
+            section.fields.forEach(field => {
+                formObject[field.key] = [field.defaultValue ? field.defaultValue() : null, field.validators ? [...field.validators()] : []];
+            });
+        });
+        return formObject;
+    }
+    static createForm(formBuilder, sections) {
+        return formBuilder.group(this.initialFormValue(sections));
+    }
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.typeAutocomplete = SpxInputTypeEnum.autocomplete;
+        this.typeFloat = SpxInputTypeEnum.float;
+        this.typeNumber = SpxInputTypeEnum.number;
+        this.typeRadio = SpxInputTypeEnum.radio;
+        this.typeText = SpxInputTypeEnum.text;
+        this.typeNumericKeyboard = SpxInputTypeEnum.textNumericKeyboard;
+        this.typeOverlay = SpxInputTypeEnum.overlay;
+        this.typeOverlayNumber = SpxInputTypeEnum.overlayNumber;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxFormViewComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxFormViewComponent, isStandalone: true, selector: "spx-form-view", inputs: { spxFormGroup: "spxFormGroup", spxSections: "spxSections", spxSuggestions: "spxSuggestions" }, ngImport: i0, template: `<spx-form-section
+    *ngFor="let spxSection of spxSections; let spxSectionIndex = index;"
+    [spxShowTitle]="!spxSection.showTitle || spxSection.showTitle()"
+    [spxIndex]="spxSectionIndex + 1"
+    [spxTitle]="spxSection.title ? spxSection.title() : undefined">
+    <ng-container *ngFor="let spxField of spxSection.fields; let spxFieldIndex = index;">
+      <ng-container *ngIf="spxField.show === undefined || spxField.show()">
+        <spx-input
+          *ngIf="spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard"
+          [formControl]="$any(this.spxFormGroup.get(spxField.key))"
+          [spxAutofocus]="spxField.autofocus ? spxField.autofocus() : false"
+          [spxCapitalize]="spxField.capitalize ? spxField.capitalize() : false"
+          [spxLabel]="(spxField.label ? spxField.label() : spxField.key) | capitalize"
+          [spxPattern]="spxField.type() === typeNumericKeyboard ? '\\d*' : undefined"
+          [spxReadonly]="spxField.readonly ? spxField.readonly() : false"
+          [spxRequired]="hasRequiredField(this.spxFormGroup.get(spxField.key)!)"
+          [spxShowHelp]="false"
+          [spxShowValidationMessages]="this.spxFormGroup.get(spxField.key)! && this.spxFormGroup.get(spxField.key)!.errors && this.spxFormGroup.get(spxField.key)!.touched"
+          [spxStep]="spxField.step ? spxField.step() : undefined"
+          [spxType]="spxField.type()"
+          [spxValidators]="getRawValidators(this.spxFormGroup.get(spxField.key)!)"
+          [spxSuggestions]="spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions[spxField.key]"
+          (spxBlur)="onBlur(spxField)">
+        </spx-input>
+
+        <spx-input
+          *ngIf="spxField.type() === typeRadio"
+          [formControl]="$any(this.spxFormGroup.get(spxField.key))"
+          [spxLabel]="(spxField.label ? spxField.label() : spxField.key) | capitalize"
+          [spxReadonly]="spxField.readonly ? spxField.readonly() : false"
+          [spxRequired]="hasRequiredField(this.spxFormGroup.get(spxField.key)!)"
+          [spxShowHelp]="false"
+          [spxShowValidationMessages]="this.spxFormGroup.get(spxField.key)! && this.spxFormGroup.get(spxField.key)!.errors && this.spxFormGroup.get(spxField.key)!.touched"
+          [spxSuggestions]="spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions[spxField.key]"
+          [spxType]="typeRadio"
+          [spxValidators]="getRawValidators(this.spxFormGroup.get(spxField.key)!)">
+        </spx-input>
+      </ng-container>
+    </ng-container>
+  </spx-form-section>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxFormSectionComponent, selector: "spx-form-section", inputs: ["spxIndex", "spxIndexSecondary", "spxTitle", "spxShowTitle"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxCompact", "spxShowClear", "spxShowSearch", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "value", "spxCapitalize", "spxFocused"], outputs: ["spxBlur", "spxClear", "spxChange", "spxFocus", "spxEdit", "spxHelp", "spxSearch"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxFormViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'spx-form-view',
+                    standalone: true,
+                    imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        JsonPipe,
+                        NgIf,
+                        NgFor,
+                        SpxCapitalizePipe,
+                        SpxFormSectionComponent,
+                        SpxInputComponent,
+                    ],
+                    template: `<spx-form-section
+    *ngFor="let spxSection of spxSections; let spxSectionIndex = index;"
+    [spxShowTitle]="!spxSection.showTitle || spxSection.showTitle()"
+    [spxIndex]="spxSectionIndex + 1"
+    [spxTitle]="spxSection.title ? spxSection.title() : undefined">
+    <ng-container *ngFor="let spxField of spxSection.fields; let spxFieldIndex = index;">
+      <ng-container *ngIf="spxField.show === undefined || spxField.show()">
+        <spx-input
+          *ngIf="spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard"
+          [formControl]="$any(this.spxFormGroup.get(spxField.key))"
+          [spxAutofocus]="spxField.autofocus ? spxField.autofocus() : false"
+          [spxCapitalize]="spxField.capitalize ? spxField.capitalize() : false"
+          [spxLabel]="(spxField.label ? spxField.label() : spxField.key) | capitalize"
+          [spxPattern]="spxField.type() === typeNumericKeyboard ? '\\d*' : undefined"
+          [spxReadonly]="spxField.readonly ? spxField.readonly() : false"
+          [spxRequired]="hasRequiredField(this.spxFormGroup.get(spxField.key)!)"
+          [spxShowHelp]="false"
+          [spxShowValidationMessages]="this.spxFormGroup.get(spxField.key)! && this.spxFormGroup.get(spxField.key)!.errors && this.spxFormGroup.get(spxField.key)!.touched"
+          [spxStep]="spxField.step ? spxField.step() : undefined"
+          [spxType]="spxField.type()"
+          [spxValidators]="getRawValidators(this.spxFormGroup.get(spxField.key)!)"
+          [spxSuggestions]="spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions[spxField.key]"
+          (spxBlur)="onBlur(spxField)">
+        </spx-input>
+
+        <spx-input
+          *ngIf="spxField.type() === typeRadio"
+          [formControl]="$any(this.spxFormGroup.get(spxField.key))"
+          [spxLabel]="(spxField.label ? spxField.label() : spxField.key) | capitalize"
+          [spxReadonly]="spxField.readonly ? spxField.readonly() : false"
+          [spxRequired]="hasRequiredField(this.spxFormGroup.get(spxField.key)!)"
+          [spxShowHelp]="false"
+          [spxShowValidationMessages]="this.spxFormGroup.get(spxField.key)! && this.spxFormGroup.get(spxField.key)!.errors && this.spxFormGroup.get(spxField.key)!.touched"
+          [spxSuggestions]="spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions[spxField.key]"
+          [spxType]="typeRadio"
+          [spxValidators]="getRawValidators(this.spxFormGroup.get(spxField.key)!)">
+        </spx-input>
+      </ng-container>
+    </ng-container>
+  </spx-form-section>`,
+                }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { spxFormGroup: [{
+                type: Input
+            }], spxSections: [{
+                type: Input
+            }], spxSuggestions: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SpxFormViewComponent };
+//# sourceMappingURL=softpak-components-spx-form-view.mjs.map

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,36 @@
 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 { 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 +38,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 +83,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 +90,7 @@ class SpxInputBoxComponent {
         *ngIf="this.spxShowHelp"
         (spxClick)="onHelp()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
@@ -101,6 +100,7 @@ class SpxInputBoxComponent {
         *ngIf="this.spxShowSearch"
         (spxClick)="onSearch()"
         [spxFullHeight]="true"
+        [spxDisabled]="this.spxReadonly"
         [spxSize]="'xl'"
         [spxTabIndex]="-1"
         [spxType]="'button'">
@@ -159,7 +159,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 +166,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 +176,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 +198,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 +222,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 +232,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Output
             }], spxHelp: [{
                 type: Output
-            }], spxFocused: [{
-                type: Input
+            }], handleFocusOut: [{
+                type: HostListener,
+                args: ['focusout']
+            }], handleWindowClick: [{
+                type: HostListener,
+                args: ['document:click', ["$event"]]
             }] } });
 
 class SpxInputTextComponent {
@@ -247,7 +254,7 @@ class SpxInputTextComponent {
         this.spxWasInternalUpdate = false;
     }
     async spxSetFocus() {
-        // this.elInput.focus();
+        this.inputRef?.nativeElement?.focus();
     }
     componentDidLoad() {
         if (this.spxAutofocus) {
@@ -279,8 +286,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,7 +300,7 @@ 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()"
@@ -326,6 +334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                     ],
                     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,7 +346,7 @@ 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()"
@@ -389,6 +398,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 +980,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 +1009,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,7 +1022,7 @@ class SpxInputComponent {
         this.onChange = () => { };
         this.onTouched = () => { };
     }
-    async spxSetFocus() {
+    spxSetFocus() {
         this.passFocusToControl();
     }
     handleBlur() {
@@ -1007,6 +1033,7 @@ class SpxInputComponent {
         this.spxChange.emit(this.value);
     }
     handleClear() {
+        this.spxClear.emit();
         this.spxFocused = true;
         this.passFocusToControl();
         this.value = {
@@ -1016,6 +1043,7 @@ class SpxInputComponent {
         this.spxChange.emit(this.value);
     }
     handleFocus() {
+        this.spxFocus.emit();
         this.spxFocused = true;
         // this.elBox.spxSetFocus();
     }
@@ -1030,15 +1058,22 @@ 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.text:
+                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 +1097,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 +1114,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 +1187,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 +1214,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 +1230,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 +1365,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 +1379,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