@softpak/components 0.0.0-beta.1

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

@@ -0,0 +1,1340 @@
+import { NgIf, NgFor } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, HostListener } 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 { 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() {
+        this.spxFocused = true;
+    }
+    onClear() {
+        this.spxClear.emit();
+    }
+    onSearch() {
+        this.spxSearchOutput.emit();
+    }
+    onEdit() {
+        this.spxEdit.emit();
+    }
+    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"
+    [class.rounded-none]="this.spxShowValidationMessages"
+    [class.rounded-t]="this.spxShowValidationMessages"
+    [class.outline-none]="this.spxFocused && !this.spxReadonly"
+    [class.ring-2]="this.spxFocused && !this.spxReadonly"
+    [class.ring-offset-2]="this.spxFocused && !this.spxReadonly"
+    [class.ring-blue-500]="this.spxFocused && !this.spxReadonly"
+    [class.bg-white]="!this.spxReadonly"
+    [class.bg-gray-300]="this.spxReadonly"
+    [class.cursor-not-allowed]="this.spxReadonly">
+    <div class="flex-auto p-3"
+      [class.p-0]="this.spxCompact"
+      [class.flex]="this.spxCompact"
+      [class.items-center]="this.spxCompact">
+      <div class="text-sm mb-1 text-gray-800"
+        [class.mb-0]="this.spxCompact"
+        [class.px-3]="this.spxCompact">
+        {{this.spxLabel}} <span *ngIf="spxRequired" class="text-red-800">*</span>
+      </div>
+      <ng-content select="[controls]"></ng-content>
+    </div>
+    <div class="flex-none p-0.5 gap-3">
+      <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>
+      </spx-button>
+      <spx-button
+        *ngIf="this.spxShowHelp"
+        (spxClick)="onHelp()"
+        [spxFullHeight]="true"
+        [spxSize]="'xl'"
+        [spxTabIndex]="-1"
+        [spxType]="'button'">
+        <fa-icon [icon]="faQuestion" class="block h-4 w-4 text-xl"></fa-icon>
+      </spx-button>
+      <spx-button
+        *ngIf="this.spxShowSearch"
+        (spxClick)="onSearch()"
+        [spxFullHeight]="true"
+        [spxSize]="'xl'"
+        [spxTabIndex]="-1"
+        [spxType]="'button'">
+        <fa-icon [icon]="faSearch" class="block h-4 w-4 text-xl"></fa-icon>
+      </spx-button>
+      <spx-button
+        *ngIf="this.spxShowClear"
+        (spxClick)="onClear()"
+        [spxDisabled]="this.spxReadonly || !this.spxValue?.value"
+        [spxFullHeight]="true"
+        [spxSize]="'xl'"
+        [spxTabIndex]="-1"
+        [spxType]="'button'">
+        <fa-icon [icon]="faTimes" class="block h-4 w-4 text-xl"></fa-icon>
+      </spx-button>
+    </div>
+  </div>
+  <div 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'spx-input-box',
+                    standalone: true,
+                    imports: [
+                        NgIf,
+                        SpxButtonComponent,
+                        FontAwesomeModule,
+                    ],
+                    template: `<div class="flex rounded w-full"
+    [class.rounded-none]="this.spxShowValidationMessages"
+    [class.rounded-t]="this.spxShowValidationMessages"
+    [class.outline-none]="this.spxFocused && !this.spxReadonly"
+    [class.ring-2]="this.spxFocused && !this.spxReadonly"
+    [class.ring-offset-2]="this.spxFocused && !this.spxReadonly"
+    [class.ring-blue-500]="this.spxFocused && !this.spxReadonly"
+    [class.bg-white]="!this.spxReadonly"
+    [class.bg-gray-300]="this.spxReadonly"
+    [class.cursor-not-allowed]="this.spxReadonly">
+    <div class="flex-auto p-3"
+      [class.p-0]="this.spxCompact"
+      [class.flex]="this.spxCompact"
+      [class.items-center]="this.spxCompact">
+      <div class="text-sm mb-1 text-gray-800"
+        [class.mb-0]="this.spxCompact"
+        [class.px-3]="this.spxCompact">
+        {{this.spxLabel}} <span *ngIf="spxRequired" class="text-red-800">*</span>
+      </div>
+      <ng-content select="[controls]"></ng-content>
+    </div>
+    <div class="flex-none p-0.5 gap-3">
+      <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>
+      </spx-button>
+      <spx-button
+        *ngIf="this.spxShowHelp"
+        (spxClick)="onHelp()"
+        [spxFullHeight]="true"
+        [spxSize]="'xl'"
+        [spxTabIndex]="-1"
+        [spxType]="'button'">
+        <fa-icon [icon]="faQuestion" class="block h-4 w-4 text-xl"></fa-icon>
+      </spx-button>
+      <spx-button
+        *ngIf="this.spxShowSearch"
+        (spxClick)="onSearch()"
+        [spxFullHeight]="true"
+        [spxSize]="'xl'"
+        [spxTabIndex]="-1"
+        [spxType]="'button'">
+        <fa-icon [icon]="faSearch" class="block h-4 w-4 text-xl"></fa-icon>
+      </spx-button>
+      <spx-button
+        *ngIf="this.spxShowClear"
+        (spxClick)="onClear()"
+        [spxDisabled]="this.spxReadonly || !this.spxValue?.value"
+        [spxFullHeight]="true"
+        [spxSize]="'xl'"
+        [spxTabIndex]="-1"
+        [spxType]="'button'">
+        <fa-icon [icon]="faTimes" class="block h-4 w-4 text-xl"></fa-icon>
+      </spx-button>
+    </div>
+  </div>
+  <div class="bg-red-600 rounded-b text-white p-3">
+    <ng-content select="[validation-messages]"></ng-content>
+  </div>`,
+                }]
+        }], propDecorators: { spxLabel: [{
+                type: Input
+            }], spxRequired: [{
+                type: Input
+            }], spxReadonly: [{
+                type: Input
+            }], spxShowHelp: [{
+                type: Input
+            }], spxCompact: [{
+                type: Input
+            }], spxShowClear: [{
+                type: Input
+            }], spxShowEdit: [{
+                type: Input
+            }], spxShowSearch: [{
+                type: Input
+            }], spxShowValidationMessages: [{
+                type: Input
+            }], spxValue: [{
+                type: Input
+            }], spxClear: [{
+                type: Output
+            }], spxSearchOutput: [{
+                type: Output
+            }], spxFocus: [{
+                type: Output
+            }], spxFocusOut: [{
+                type: Output
+            }], spxEdit: [{
+                type: Output
+            }], spxHelp: [{
+                type: Output
+            }], spxFocused: [{
+                type: Input
+            }] } });
+
+class SpxInputTextComponent {
+    constructor() {
+        this.spxAutofocus = false;
+        this.spxSuggestions = [];
+        this.spxReadonly = false;
+        this.spxCapitalize = false;
+        this.spxFocused = true;
+        this.spxType = 'text';
+        this.spxBlurFromChild = new EventEmitter();
+        this.spxChange = new EventEmitter();
+        this.spxFocus = new EventEmitter();
+        this.spxWasInternalUpdate = false;
+    }
+    async spxSetFocus() {
+        // this.elInput.focus();
+    }
+    componentDidLoad() {
+        if (this.spxAutofocus) {
+            this.spxFocus.emit();
+            this.spxSetFocus();
+        }
+    }
+    handleBlur() {
+        this.spxBlurFromChild.emit();
+    }
+    handleFocus() {
+        this.spxFocus.emit();
+    }
+    handleDescriptionInput(event) {
+        this.value = {
+            description: event.target ? event.target.value : null,
+            value: event.target ? event.target.value : null,
+        };
+        this.spxChange.emit(this.value);
+    }
+    handleSuggestionClick(value) {
+        if (!this.spxReadonly) {
+            this.value = value;
+            this.spxChange.emit(this.value);
+            this.spxFocused = false;
+        }
+    }
+    handleKeyUp() {
+        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">
+  <input
+    class="font-bold text-lg w-full outline-none"
+    [class.uppercase]="this.spxCapitalize"
+    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
+    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
+    [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
+    [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"
+    (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
+    *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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputTextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'spx-input-text',
+                    standalone: true,
+                    imports: [
+                        NgIf,
+                        NgFor,
+                        SpxButtonComponent,
+                    ],
+                    template: `<div class="relative">
+  <input
+    class="font-bold text-lg w-full outline-none"
+    [class.uppercase]="this.spxCapitalize"
+    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
+    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
+    [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
+    [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"
+    (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
+    *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>`,
+                }]
+        }], propDecorators: { spxName: [{
+                type: Input
+            }], spxAutofocus: [{
+                type: Input
+            }], spxInputMode: [{
+                type: Input
+            }], spxPattern: [{
+                type: Input
+            }], spxSuggestions: [{
+                type: Input
+            }], spxReadonly: [{
+                type: Input
+            }], spxValidators: [{
+                type: Input
+            }], spxCapitalize: [{
+                type: Input
+            }], spxFocused: [{
+                type: Input
+            }], spxType: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], spxBlurFromChild: [{
+                type: Output
+            }], spxChange: [{
+                type: Output
+            }], spxFocus: [{
+                type: Output
+            }], spxWasInternalUpdate: [{
+                type: Input
+            }] } });
+
+class SpxInputDateComponent {
+    async spxSetFocus() {
+        // this.elYear.focus();
+    }
+    // @Watch('spxValidators') watchSpxValidators(newValue) {
+    //   console.log('validators', newValue);
+    // }
+    // @Watch('value') watchValue(newValue) {
+    //   if (this.spxWasInternalUpdate) {
+    //     this.spxWasInternalUpdate = false;
+    //   } else {
+    //     const parsedValue = DateTime.fromISO(newValue?.value);
+    //     this.spxInternalValue.years = parsedValue.year;
+    //     this.spxInternalValue.months = parsedValue.month;
+    //     this.spxInternalValue.days = parsedValue.day;
+    //     this.spxSelectStep = 'years';
+    //   }
+    // }
+    constructor() {
+        this.spxReadonly = false;
+        this.spxFocused = true;
+        this.spxSelectMonth = true;
+        this.spxSelectDay = true;
+        this.spxChange = new EventEmitter();
+        this.spxFocus = new EventEmitter();
+        this.spxSelectStep = 'years';
+        this.spxInternalValue = {};
+        this.spxSuggestions = {
+            years: [],
+            months: [{
+                    description: 'Jan',
+                    value: 1,
+                }, {
+                    description: 'Feb',
+                    value: 2,
+                }, {
+                    description: 'Mar',
+                    value: 3,
+                }, {
+                    description: 'Apr',
+                    value: 4,
+                }, {
+                    description: 'May',
+                    value: 5,
+                }, {
+                    description: 'Jun',
+                    value: 6,
+                }, {
+                    description: 'Jul',
+                    value: 7,
+                }, {
+                    description: 'Aug',
+                    value: 8,
+                }, {
+                    description: 'Sep',
+                    value: 9,
+                }, {
+                    description: 'Oct',
+                    value: 10,
+                }, {
+                    description: 'Nov',
+                    value: 11,
+                }, {
+                    description: 'Dec',
+                    value: 12,
+                }],
+            days: [],
+        };
+        this.spxWasInternalUpdate = false;
+        this.suggestYears();
+    }
+    componentWillLoad() {
+        const parsedValue = this.value ? DateTime.fromISO(this.value.value) : DateTime.now();
+        this.spxInternalValue.years = parsedValue.year;
+        this.spxInternalValue.months = parsedValue.month;
+        this.spxInternalValue.days = parsedValue.day;
+    }
+    handleDayInput(event) {
+        this.spxInternalValue.days = event.target ? event.target.value : null;
+        this.updateValue();
+    }
+    handleMonthInput(event) {
+        this.spxInternalValue.months = event.target ? event.target.value : null;
+        this.afterMonthChange();
+    }
+    afterMonthChange() {
+        if (this.spxInternalValue.months.toString().length === 2 && this.spxSelectDay && this.spxLastKeyPressed !== 38 && this.spxLastKeyPressed !== 40) {
+            // this.elDay!.focus();
+        }
+        this.updateValue();
+    }
+    handleYearInput(event) {
+        this.spxInternalValue.years = event.target ? event.target.value : null;
+        this.afterYearChange();
+    }
+    afterYearChange() {
+        if (this.spxInternalValue.years.toString().length === 4 && this.spxSelectMonth && this.spxLastKeyPressed !== 38 && this.spxLastKeyPressed !== 40) {
+            // this.elMonth!.focus();
+        }
+        this.updateValue();
+    }
+    handleInput(event) {
+        this.setValue(event.target ? event.target.value : null);
+    }
+    handleFocus(step) {
+        this.spxSelectStep = step;
+        this.spxFocus.emit();
+    }
+    handleKeyDown(event) {
+        this.spxLastKeyPressed = event.which;
+    }
+    handleSuggestionClick(value) {
+        this.spxLastKeyPressed = null;
+        this.spxInternalValue[this.spxSelectStep] = value;
+        this.updateValue();
+        this.doneWithField();
+    }
+    updateValue() {
+        const concatenatedValue = `${this.spxInternalValue.years ? this.spxInternalValue.years : ``}${this.spxInternalValue.months ? `-${this.spxInternalValue.months < 10 ? `0${this.spxInternalValue.months}` : this.spxInternalValue.months}` : ``}${this.spxInternalValue.days ? `-${this.spxInternalValue.days < 10 ? `0${this.spxInternalValue.days}` : this.spxInternalValue.days}` : ``}`;
+        const parsedValue = DateTime.fromISO(concatenatedValue);
+        this.spxWasInternalUpdate = true;
+        this.value = {
+            description: parsedValue.toISO(),
+            value: parsedValue.toISO(),
+        };
+        this.spxChange.emit(this.value);
+    }
+    doneWithField() {
+        if (this.spxSelectStep === 'days') {
+            this.spxSelectStep = 'years';
+        }
+        else if (this.spxSelectStep === 'months') {
+            this.spxSelectStep = this.spxSelectDay ? 'days' : 'years';
+            this.afterMonthChange();
+        }
+        else if (this.spxSelectStep === 'years') {
+            this.afterYearChange();
+            this.spxSelectStep = this.spxSelectMonth ? 'months' : 'years';
+        }
+    }
+    setValue(value) {
+        this.spxInternalValue = value;
+        const parsed = DateTime.fromISO(value);
+        this.value = {
+            description: parsed.toISO(),
+            value: parsed.toISO(),
+        };
+        this.spxChange.emit(this.value);
+        this.spxWasInternalUpdate = true;
+    }
+    suggestYears() {
+        this.spxSuggestions.years = [];
+        for (let year = DateTime.fromISO(this.spxMin).year; year <= DateTime.fromISO(this.spxMax).year; year++) {
+            this.spxSuggestions.years.push({
+                description: `'${year.toString().substring(2, 4)}`,
+                value: year,
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputDateComponent, isStandalone: true, selector: "spx-input-date", inputs: { spxMax: "spxMax", spxMin: "spxMin", spxName: "spxName", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxFocused: "spxFocused", spxSelectMonth: "spxSelectMonth", spxSelectDay: "spxSelectDay", value: "value", spxLastKeyPressed: "spxLastKeyPressed", spxSelectStep: "spxSelectStep", spxInternalValue: "spxInternalValue", spxSuggestions: "spxSuggestions", spxWasInternalUpdate: "spxWasInternalUpdate" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, ngImport: i0, template: `<div class='spx-input-date__controls'>
+  <input
+    class='spx-input-date__input'
+    [attr.value]="this.spxInternalValue.years"
+    (focus)="this.handleFocus('years')"
+    (input)="this.handleYearInput($event)"
+    (keyDown)="this.handleKeyDown($event)"
+    [attr.type]="'number'"
+    [attr.min]="1900"
+    [attr.max]="2100"
+    [attr.step]="1"
+  />
+  <div class='spx-input-date__control-label'>Year</div>
+    <input
+      *ngIf="this.spxSelectMonth"
+      class='spx-input-date__input'
+      [attr.value]="this.spxInternalValue.months"
+      (focus)="this.handleFocus('months')"
+      (input)="this.handleMonthInput($event)"
+      (keyDown)="this.handleKeyDown($event)"
+      [attr.type]="'number'"
+      [attr.min]="1"
+      [attr.max]="12"
+      [attr.step]="1" />
+      <div class='spx-input-date__control-label'>Month</div>
+    <input
+      *ngIf="this.spxSelectDay"
+      class='spx-input-date__input'
+      [attr.value]="this.spxInternalValue.days"
+      (focus)="this.handleFocus('days')"
+      (input)="this.handleDayInput($event)"
+      (keyDown)="this.handleKeyDown($event)"
+      [attr.type]="'number'"
+      [attr.min]="1"
+      [attr.max]="31"
+      [attr.step]="1" />
+      <div class='spx-input-date__control-label'>Days</div>
+</div>
+<div class='spx-input-date__suggestions'>
+  <spx-suggestion 
+  *ngFor="let valuePair of spxSuggestions[spxSelectStep]"  
+  (click)="this.handleSuggestionClick(valuePair.value)">{{valuePair?.description}}</spx-suggestion>
+</div>`, isInline: true, styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxSelected"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spx-input-date', standalone: true, imports: [
+                        NgIf,
+                        NgFor,
+                        SpxButtonComponent,
+                        SpxSuggestionComponent
+                    ], template: `<div class='spx-input-date__controls'>
+  <input
+    class='spx-input-date__input'
+    [attr.value]="this.spxInternalValue.years"
+    (focus)="this.handleFocus('years')"
+    (input)="this.handleYearInput($event)"
+    (keyDown)="this.handleKeyDown($event)"
+    [attr.type]="'number'"
+    [attr.min]="1900"
+    [attr.max]="2100"
+    [attr.step]="1"
+  />
+  <div class='spx-input-date__control-label'>Year</div>
+    <input
+      *ngIf="this.spxSelectMonth"
+      class='spx-input-date__input'
+      [attr.value]="this.spxInternalValue.months"
+      (focus)="this.handleFocus('months')"
+      (input)="this.handleMonthInput($event)"
+      (keyDown)="this.handleKeyDown($event)"
+      [attr.type]="'number'"
+      [attr.min]="1"
+      [attr.max]="12"
+      [attr.step]="1" />
+      <div class='spx-input-date__control-label'>Month</div>
+    <input
+      *ngIf="this.spxSelectDay"
+      class='spx-input-date__input'
+      [attr.value]="this.spxInternalValue.days"
+      (focus)="this.handleFocus('days')"
+      (input)="this.handleDayInput($event)"
+      (keyDown)="this.handleKeyDown($event)"
+      [attr.type]="'number'"
+      [attr.min]="1"
+      [attr.max]="31"
+      [attr.step]="1" />
+      <div class='spx-input-date__control-label'>Days</div>
+</div>
+<div class='spx-input-date__suggestions'>
+  <spx-suggestion 
+  *ngFor="let valuePair of spxSuggestions[spxSelectStep]"  
+  (click)="this.handleSuggestionClick(valuePair.value)">{{valuePair?.description}}</spx-suggestion>
+</div>`, styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { spxMax: [{
+                type: Input
+            }], spxMin: [{
+                type: Input
+            }], spxName: [{
+                type: Input
+            }], spxReadonly: [{
+                type: Input
+            }], spxValidators: [{
+                type: Input
+            }], spxFocused: [{
+                type: Input
+            }], spxSelectMonth: [{
+                type: Input
+            }], spxSelectDay: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], spxChange: [{
+                type: Output
+            }], spxFocus: [{
+                type: Output
+            }], spxLastKeyPressed: [{
+                type: Input
+            }], spxSelectStep: [{
+                type: Input
+            }], spxInternalValue: [{
+                type: Input
+            }], spxSuggestions: [{
+                type: Input
+            }], spxWasInternalUpdate: [{
+                type: Input
+            }] } });
+
+class SpxInputFloatComponent {
+    constructor() {
+        // private elFirstInput?: HTMLElement;
+        // private elSecondInput?: HTMLElement;
+        this.internalValue = {
+            first: null,
+            second: null,
+        };
+        this.spxAutofocus = false;
+        this.spxReadonly = false;
+        this.spxFocused = true;
+        this.spxChange = new EventEmitter();
+        this.spxFocus = new EventEmitter();
+        this.spxWasInternalUpdate = false;
+        this.tick = {};
+    }
+    async spxSetFocus() {
+        // this.elFirstInput.focus();
+    }
+    // @Watch('value') onValueChanged(newValue: SpxValuePair<any>, _oldValue: SpxValuePair<any>) {
+    //   this.handleSetValue(newValue);
+    // }
+    componentDidLoad() {
+        if (this.spxAutofocus) {
+            this.spxFocus.emit();
+            this.spxSetFocus();
+        }
+        this.handleSetValue(this.value);
+    }
+    handleFocus() {
+        this.spxFocus.emit();
+    }
+    handleSetValue(newValue) {
+        if (this.isNumeric(newValue?.value)) {
+            this.internalValue = {
+                first: Math.floor(parseFloat(newValue?.value)),
+                second: newValue?.value?.split ? newValue?.value.split('.')[1] : 0,
+            };
+        }
+        else {
+            this.internalValue = {
+                first: null,
+                second: null,
+            };
+        }
+        this.tick = {};
+    }
+    handleInput(event, position) {
+        this.internalValue = {
+            first: position === 1 ? (event.target ? event.target.value : null) : this.internalValue.first,
+            second: position === 2 ? (event.target ? event.target.value : null) : this.internalValue.second,
+        };
+        let result;
+        if (this.internalValue.first === null && this.internalValue.second === null) {
+            result = null;
+        }
+        else {
+            result = `${this.internalValue.first ? this.internalValue.first : 0}.${this.internalValue.second ? this.internalValue.second : 0}`;
+        }
+        this.value = {
+            description: result,
+            value: result,
+        };
+        this.spxChange.emit(this.value);
+    }
+    isNumeric(value) {
+        return /^[+-]?\d+(\.\d+)?$/.test(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputFloatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputFloatComponent, isStandalone: true, selector: "spx-input-float", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxFocused: "spxFocused", spxStep: "spxStep", value: "value", spxWasInternalUpdate: "spxWasInternalUpdate", tick: "tick" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, ngImport: i0, template: `<div class="flex items-end">
+  <input
+    class="spx-input-float__input"
+    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
+    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
+    [attr.pattern]="'[0-9]*'"
+    [attr.step]="1"
+    [attr.type]="'text'"
+    [attr.value]="this.internalValue?.first ? this.internalValue?.first : undefined"
+    [class.spx-input-float--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
+    (focus)="this.handleFocus()"
+    (input)="this.handleInput($event, 1)" />
+  <span class="text-black font-bold text-2xl mx-4">,</span>
+  <input
+    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
+    class="spx-input-float__input"
+    [class.spx-input-float--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
+    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
+    [attr.value]="this.internalValue?.second ? this.internalValue?.second : undefined"
+    (focus)="this.handleFocus()"
+    (input)="this.handleInput($event, 2)"
+    [attr.step]="1"
+    [attr.type]="'text'"
+    [attr.pattern]="'[0-9]*'" />
+</div>`, isInline: true, styles: [":host{display:block}.spx-input-float__input{border:1px solid #333333;border-radius:8px;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));flex:1;font-size:20px;font-weight:700;padding:8px;width:100%}.spx-input-float__input:focus{outline:none}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputFloatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spx-input-float', standalone: true, imports: [
+                        NgIf,
+                        NgFor,
+                        SpxButtonComponent,
+                    ], template: `<div class="flex items-end">
+  <input
+    class="spx-input-float__input"
+    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
+    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
+    [attr.pattern]="'[0-9]*'"
+    [attr.step]="1"
+    [attr.type]="'text'"
+    [attr.value]="this.internalValue?.first ? this.internalValue?.first : undefined"
+    [class.spx-input-float--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
+    (focus)="this.handleFocus()"
+    (input)="this.handleInput($event, 1)" />
+  <span class="text-black font-bold text-2xl mx-4">,</span>
+  <input
+    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
+    class="spx-input-float__input"
+    [class.spx-input-float--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
+    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
+    [attr.value]="this.internalValue?.second ? this.internalValue?.second : undefined"
+    (focus)="this.handleFocus()"
+    (input)="this.handleInput($event, 2)"
+    [attr.step]="1"
+    [attr.type]="'text'"
+    [attr.pattern]="'[0-9]*'" />
+</div>`, styles: [":host{display:block}.spx-input-float__input{border:1px solid #333333;border-radius:8px;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));flex:1;font-size:20px;font-weight:700;padding:8px;width:100%}.spx-input-float__input:focus{outline:none}\n"] }]
+        }], propDecorators: { spxName: [{
+                type: Input
+            }], spxAutofocus: [{
+                type: Input
+            }], spxReadonly: [{
+                type: Input
+            }], spxValidators: [{
+                type: Input
+            }], spxFocused: [{
+                type: Input
+            }], spxStep: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], spxChange: [{
+                type: Output
+            }], spxFocus: [{
+                type: Output
+            }], spxWasInternalUpdate: [{
+                type: Input
+            }], tick: [{
+                type: Input
+            }] } });
+
+class SpxInputNumberComponent {
+    constructor() {
+        this.spxAutofocus = false;
+        this.spxReadonly = false;
+        this.spxFocused = true;
+        this.spxChange = new EventEmitter();
+        this.spxFocus = new EventEmitter();
+        this.spxWasInternalUpdate = false;
+    }
+    async spxSetFocus() {
+        // this.elInput.focus();
+    }
+    componentDidLoad() {
+        if (this.spxAutofocus) {
+            this.spxFocus.emit();
+            this.spxSetFocus();
+        }
+    }
+    handleFocus() {
+        this.spxFocus.emit();
+    }
+    handleInput(event) {
+        this.value = {
+            description: event.target ? event.target.value : null,
+            value: event.target ? event.target.value : null,
+        };
+        this.spxChange.emit(this.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputNumberComponent, isStandalone: true, selector: "spx-input-number", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxFocused: "spxFocused", spxStep: "spxStep", value: "value" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, ngImport: i0, template: `<div class="spx-input-number__controls">
+  <input
+    class="spx-input-number__input"
+    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
+    [class.spx-input-number--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
+    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
+    [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
+    [attr.value]="this.value?.value ? this.value?.value : undefined"
+    [attr.step]="this.spxStep ? this.spxStep : undefined"
+    [attr.type]="'number'"
+    (focus)="this.handleFocus()"
+    (input)="this.handleInput($event)" />
+</div>`, isInline: true, styles: [":host{display:block}.spx-input-number__input{border:0;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}.spx-input-number__input:focus{outline:none}.spx-input-number__value{color:#0009;font-size:14px}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputNumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spx-input-number', standalone: true, imports: [], template: `<div class="spx-input-number__controls">
+  <input
+    class="spx-input-number__input"
+    [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
+    [class.spx-input-number--readonly]="this.spxReadonly ? this.spxReadonly : undefined"
+    [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
+    [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
+    [attr.value]="this.value?.value ? this.value?.value : undefined"
+    [attr.step]="this.spxStep ? this.spxStep : undefined"
+    [attr.type]="'number'"
+    (focus)="this.handleFocus()"
+    (input)="this.handleInput($event)" />
+</div>`, styles: [":host{display:block}.spx-input-number__input{border:0;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}.spx-input-number__input:focus{outline:none}.spx-input-number__value{color:#0009;font-size:14px}\n"] }]
+        }], propDecorators: { spxName: [{
+                type: Input
+            }], spxAutofocus: [{
+                type: Input
+            }], spxInputMode: [{
+                type: Input
+            }], spxReadonly: [{
+                type: Input
+            }], spxValidators: [{
+                type: Input
+            }], spxFocused: [{
+                type: Input
+            }], spxStep: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], spxChange: [{
+                type: Output
+            }], spxFocus: [{
+                type: Output
+            }] } });
+
+class SpxInputRadioComponent {
+    constructor() {
+        this.spxFocused = true;
+        this.spxReadonly = false;
+        this.spxSuggestions = [];
+        this.spxChange = new EventEmitter();
+        this.spxFocus = new EventEmitter();
+        this.spxWasInternalUpdate = false;
+    }
+    async spxSetFocus() {
+        // this.elYear.focus();
+    }
+    handleSuggestionClick(value) {
+        this.value = value;
+        this.spxChange.emit(this.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: "spxName", spxValidators: "spxValidators", spxFocused: "spxFocused", spxReadonly: "spxReadonly", spxSuggestions: "spxSuggestions", value: "value" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, ngImport: i0, template: `<div class="spx-input-radio__suggestions">
+    <spx-suggestion
+      *ngFor="let valuePair of this.spxSuggestions"
+      [spxDisabled]="this.spxReadonly"
+      [spxSelected]="this.value?.value === this.valuePair?.value"
+      (click)="this.spxReadonly ? undefined : this.handleSuggestionClick(valuePair)">
+      {{this.valuePair?.description}}
+    </spx-suggestion>
+</div>`, isInline: true, styles: [":host{display:block}.spx-input-radio__suggestions{display:grid;grid-gap:8px;grid-template-columns:repeat(2,1fr);margin-top:8px}.spx-input-radio--readonly{background-color:transparent;border:0;box-sizing:border-box;font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxSelected"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spx-input-radio', standalone: true, imports: [
+                        NgFor,
+                        SpxSuggestionComponent,
+                    ], template: `<div class="spx-input-radio__suggestions">
+    <spx-suggestion
+      *ngFor="let valuePair of this.spxSuggestions"
+      [spxDisabled]="this.spxReadonly"
+      [spxSelected]="this.value?.value === this.valuePair?.value"
+      (click)="this.spxReadonly ? undefined : this.handleSuggestionClick(valuePair)">
+      {{this.valuePair?.description}}
+    </spx-suggestion>
+</div>`, styles: [":host{display:block}.spx-input-radio__suggestions{display:grid;grid-gap:8px;grid-template-columns:repeat(2,1fr);margin-top:8px}.spx-input-radio--readonly{background-color:transparent;border:0;box-sizing:border-box;font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}\n"] }]
+        }], propDecorators: { spxName: [{
+                type: Input
+            }], spxValidators: [{
+                type: Input
+            }], spxFocused: [{
+                type: Input
+            }], spxReadonly: [{
+                type: Input
+            }], spxSuggestions: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], spxChange: [{
+                type: Output
+            }], spxFocus: [{
+                type: Output
+            }] } });
+
+class SpxInputComponent {
+    constructor() {
+        this.spxLabel = 'label';
+        this.spxReadonly = false;
+        this.spxAutofocus = false;
+        this.spxRequired = false;
+        this.spxSelectMonth = true;
+        this.spxSelectDay = true;
+        this.spxShowEdit = false;
+        this.spxShowHelp = false;
+        this.spxCompact = false;
+        this.spxShowClear = true;
+        this.spxShowSearch = false;
+        this.spxShowValidationMessages = false;
+        this.spxSuggestions = [];
+        this.spxType = 'text';
+        this.spxCapitalize = false;
+        this.spxBlur = new EventEmitter();
+        this.spxClear = new EventEmitter();
+        this.spxChange = new EventEmitter();
+        this.spxFocus = new EventEmitter();
+        this.spxEdit = new EventEmitter();
+        this.spxHelp = new EventEmitter();
+        this.spxSearch = new EventEmitter();
+        this.spxFocused = false;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    async spxSetFocus() {
+        this.passFocusToControl();
+    }
+    handleBlur() {
+        this.spxBlur.emit();
+    }
+    handleChange(event) {
+        this.value = event;
+        this.spxChange.emit(this.value);
+    }
+    handleClear() {
+        this.spxFocused = true;
+        this.passFocusToControl();
+        this.value = {
+            description: null,
+            value: null,
+        };
+        this.spxChange.emit(this.value);
+    }
+    handleFocus() {
+        this.spxFocused = true;
+        // this.elBox.spxSetFocus();
+    }
+    handleSearch() {
+        this.spxSearch.emit();
+    }
+    setFocus() {
+        this.spxFocused = true;
+        this.passFocusToControl();
+    }
+    setFocusOut() {
+        this.spxFocused = false;
+    }
+    handleEdit() {
+        this.spxFocused = true;
+    }
+    handleHelp() {
+        this.spxFocused = true;
+    }
+    passFocusToControl() {
+    }
+    writeValue(value) {
+        this.value = this.lastValue = value == null ? '' : value;
+    }
+    handleChangeEvent(value) {
+        if (value !== this.lastValue) {
+            this.lastValue = value;
+            this.onChange(value);
+        }
+    }
+    _handleBlurEvent() {
+        this.onTouched();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SpxInputComponent,
+                multi: true
+            }
+        ], ngImport: i0, template: `<spx-input-box
+  [spxLabel]="this.spxLabel"
+  [spxReadonly]="this.spxReadonly"
+  [spxRequired]="this.spxRequired"
+  [spxValue]="this.value"
+  [spxShowHelp]="this.spxShowHelp"
+  [spxCompact]="this.spxCompact"
+  [spxShowClear]="this.spxShowClear"
+  [spxShowEdit]="this.spxShowEdit"
+  [spxShowSearch]="this.spxShowSearch ? this.spxShowSearch : this.spxType === 'autocomplete'"
+  [spxShowValidationMessages]="this.spxShowValidationMessages"
+  (spxClear)="this.handleClear()"
+  (spxEdit)="this.handleEdit()"
+  (spxHelp)="this.handleHelp()"
+  (spxFocus)="this.setFocus()"
+  (spxFocusOut)="this.setFocusOut()"
+  (spxSearchOutput)="this.handleSearch()">
+  <div controls>
+    <spx-input-text
+      *ngIf="this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password'"
+      [spxAutofocus]="this.spxAutofocus"
+      [spxCapitalize]="this.spxCapitalize"
+      [spxFocused]="this.spxFocused"
+      [spxInputMode]="this.spxType === 'overlaynumber' ? 'numeric' : this.spxInputMode"
+      [spxName]="this.spxName"
+      [spxPattern]="this.spxType === 'overlaynumber' ? '[0-9]*' : this.spxPattern"
+      [spxReadonly]="this.spxReadonly"
+      [spxSuggestions]="this.spxSuggestions"
+      [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'"
+      [spxFocused]="this.spxFocused"
+      [spxMax]="this.spxMax"
+      [spxMin]="this.spxMin"
+      [spxName]="this.spxName"
+      [spxReadonly]="this.spxReadonly"
+      [spxSelectDay]="this.spxSelectDay"
+      [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'"
+      [spxAutofocus]="this.spxAutofocus"
+      [spxFocused]="this.spxFocused"
+      [spxName]="this.spxName"
+      [spxReadonly]="this.spxReadonly"
+      [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"
+      [spxAutofocus]="this.spxAutofocus"
+      [spxFocused]="this.spxFocused"
+      [spxInputMode]="this.spxInputMode"
+      [spxName]="this.spxName"
+      [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'"
+      [spxFocused]="this.spxFocused"
+      [spxName]="this.spxName"
+      [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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'spx-input',
+                    standalone: true,
+                    host: {
+                        '(spxChange)': 'handleChangeEvent($event)'
+                    },
+                    imports: [
+                        NgIf,
+                        SpxInputBoxComponent,
+                        SpxInputDateComponent,
+                        SpxInputFloatComponent,
+                        SpxInputNumberComponent,
+                        SpxInputRadioComponent,
+                        SpxInputTextComponent,
+                    ],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SpxInputComponent,
+                            multi: true
+                        }
+                    ],
+                    template: `<spx-input-box
+  [spxLabel]="this.spxLabel"
+  [spxReadonly]="this.spxReadonly"
+  [spxRequired]="this.spxRequired"
+  [spxValue]="this.value"
+  [spxShowHelp]="this.spxShowHelp"
+  [spxCompact]="this.spxCompact"
+  [spxShowClear]="this.spxShowClear"
+  [spxShowEdit]="this.spxShowEdit"
+  [spxShowSearch]="this.spxShowSearch ? this.spxShowSearch : this.spxType === 'autocomplete'"
+  [spxShowValidationMessages]="this.spxShowValidationMessages"
+  (spxClear)="this.handleClear()"
+  (spxEdit)="this.handleEdit()"
+  (spxHelp)="this.handleHelp()"
+  (spxFocus)="this.setFocus()"
+  (spxFocusOut)="this.setFocusOut()"
+  (spxSearchOutput)="this.handleSearch()">
+  <div controls>
+    <spx-input-text
+      *ngIf="this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password'"
+      [spxAutofocus]="this.spxAutofocus"
+      [spxCapitalize]="this.spxCapitalize"
+      [spxFocused]="this.spxFocused"
+      [spxInputMode]="this.spxType === 'overlaynumber' ? 'numeric' : this.spxInputMode"
+      [spxName]="this.spxName"
+      [spxPattern]="this.spxType === 'overlaynumber' ? '[0-9]*' : this.spxPattern"
+      [spxReadonly]="this.spxReadonly"
+      [spxSuggestions]="this.spxSuggestions"
+      [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'"
+      [spxFocused]="this.spxFocused"
+      [spxMax]="this.spxMax"
+      [spxMin]="this.spxMin"
+      [spxName]="this.spxName"
+      [spxReadonly]="this.spxReadonly"
+      [spxSelectDay]="this.spxSelectDay"
+      [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'"
+      [spxAutofocus]="this.spxAutofocus"
+      [spxFocused]="this.spxFocused"
+      [spxName]="this.spxName"
+      [spxReadonly]="this.spxReadonly"
+      [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"
+      [spxAutofocus]="this.spxAutofocus"
+      [spxFocused]="this.spxFocused"
+      [spxInputMode]="this.spxInputMode"
+      [spxName]="this.spxName"
+      [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'"
+      [spxFocused]="this.spxFocused"
+      [spxName]="this.spxName"
+      [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>`,
+                }]
+        }], propDecorators: { spxLabel: [{
+                type: Input
+            }], spxMax: [{
+                type: Input
+            }], spxMin: [{
+                type: Input
+            }], spxName: [{
+                type: Input
+            }], spxReadonly: [{
+                type: Input
+            }], spxAutofocus: [{
+                type: Input
+            }], spxInputMode: [{
+                type: Input
+            }], spxPattern: [{
+                type: Input
+            }], spxRequired: [{
+                type: Input
+            }], spxSelectMonth: [{
+                type: Input
+            }], spxSelectDay: [{
+                type: Input
+            }], spxShowEdit: [{
+                type: Input
+            }], spxShowHelp: [{
+                type: Input
+            }], spxCompact: [{
+                type: Input
+            }], spxShowClear: [{
+                type: Input
+            }], spxShowSearch: [{
+                type: Input
+            }], spxShowValidationMessages: [{
+                type: Input
+            }], spxStep: [{
+                type: Input
+            }], spxSuggestions: [{
+                type: Input
+            }], spxType: [{
+                type: Input
+            }], spxValidators: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], spxCapitalize: [{
+                type: Input
+            }], spxBlur: [{
+                type: Output
+            }], spxClear: [{
+                type: Output
+            }], spxChange: [{
+                type: Output
+            }], spxFocus: [{
+                type: Output
+            }], spxEdit: [{
+                type: Output
+            }], spxHelp: [{
+                type: Output
+            }], spxSearch: [{
+                type: Output
+            }], spxFocused: [{
+                type: Input
+            }], _handleBlurEvent: [{
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SpxInputBoxComponent, SpxInputComponent, SpxInputTextComponent };
+//# sourceMappingURL=softpak-components-spx-inputs.mjs.map