@softpak/components 20.5.0 → 20.5.2

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, computed, input, model, output, signal, HostListener, ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
+import { Injectable, inject, computed, input, model, output, signal, HostListener, ChangeDetectionStrategy, Component, viewChild, EventEmitter, ViewChildren, Output } from '@angular/core';
 import { SpxButtonComponent } from '@softpak/components/spx-button';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -10,8 +10,8 @@ import { SpxSeverityEnum, valuePairToValue } from '@softpak/components/spx-helpe
 import * as i1$1 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgClass } from '@angular/common';
-import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
 import { DateTime } from 'luxon';
+import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
 import * as i1$2 from '@ionic/angular/standalone';
 import { IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
@@ -182,6 +182,8 @@ var SpxInputTypeEnum;
 (function (SpxInputTypeEnum) {
     SpxInputTypeEnum["autocomplete"] = "autocomplete";
     SpxInputTypeEnum["button"] = "button";
+    SpxInputTypeEnum["cycle"] = "cycle";
+    SpxInputTypeEnum["cycleNumeric"] = "cycleNumeric";
     SpxInputTypeEnum["date"] = "date";
     SpxInputTypeEnum["float"] = "float";
     SpxInputTypeEnum["hidden"] = "hidden";
@@ -258,15 +260,378 @@ class SpxInputTextComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputTextComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\n  <input #input class=\"font-bold text-lg w-full outline-none\" autocomplete=\"off\" spellcheck=\"false\"\n    [attr.autocomplete]=\"this.spxAutocomplete()\" [attr.autofocus]=\"this.spxAutofocus()\"\n    [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"this.spxPattern()\" [attr.name]=\"this.spxName()\"\n    [attr.type]=\"this.spxType()\" [class.bg-white]=\"!this.spxReadonly()\" [class.bg-gray-300]=\"this.spxReadonly()\"\n    [class.cursor-not-allowed]=\"this.spxReadonly()\" [class.uppercase]=\"this.spxCapitalize()\"\n    [disabled]=\"this.mappedReadonly()\" [ngModel]=\"\n      this.value()?.description\n        ? this.value()?.description\n        : this.value()?.value\n    \" (ngModelChange)=\"this.handleChange($event)\" />\n  @if (this.value()?.description && this.value()?.value &&\n  this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n  <span>{{ this.value()?.value }}</span>\n  } @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType()\n  === 'overlaynumber')) {\n  <spx-dropdown [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\n  </spx-dropdown>\n  } @if (this.spxSpeedDial()) {\n  <div class=\"flex flex-wrap gap-3\">\n    @for (speedDial of this.spxSpeedDial(); track $index) {\n    <button class=\"px-3 px-1\" [ngClass]=\"'bg-' + speedDial.backgroundColor\" (click)=\"doSelect(speedDial)\">\n      {{ speedDial.valuePair.description }}\n    </button>\n    }\n  </div>\n  }\n</div>", dependencies: [{ kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spx-input-text', imports: [
+                        SpxDropdownComponent,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        NgClass,
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\n  <input #input class=\"font-bold text-lg w-full outline-none\" autocomplete=\"off\" spellcheck=\"false\"\n    [attr.autocomplete]=\"this.spxAutocomplete()\" [attr.autofocus]=\"this.spxAutofocus()\"\n    [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"this.spxPattern()\" [attr.name]=\"this.spxName()\"\n    [attr.type]=\"this.spxType()\" [class.bg-white]=\"!this.spxReadonly()\" [class.bg-gray-300]=\"this.spxReadonly()\"\n    [class.cursor-not-allowed]=\"this.spxReadonly()\" [class.uppercase]=\"this.spxCapitalize()\"\n    [disabled]=\"this.mappedReadonly()\" [ngModel]=\"\n      this.value()?.description\n        ? this.value()?.description\n        : this.value()?.value\n    \" (ngModelChange)=\"this.handleChange($event)\" />\n  @if (this.value()?.description && this.value()?.value &&\n  this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n  <span>{{ this.value()?.value }}</span>\n  } @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType()\n  === 'overlaynumber')) {\n  <spx-dropdown [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\n  </spx-dropdown>\n  } @if (this.spxSpeedDial()) {\n  <div class=\"flex flex-wrap gap-3\">\n    @for (speedDial of this.spxSpeedDial(); track $index) {\n    <button class=\"px-3 px-1\" [ngClass]=\"'bg-' + speedDial.backgroundColor\" (click)=\"doSelect(speedDial)\">\n      {{ speedDial.valuePair.description }}\n    </button>\n    }\n  </div>\n  }\n</div>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+// {
+//     defaultFocusPosition: 3,
+//     fieldPattern: '[0-9]*',
+//     focusOrder: [3, 4, 5, 6, 0, 1, 2],
+//     length: 7,
+//     requiredPositions: [false, false, false, true, true, true, true]
+//   }
+
+class SpxInputCycleComponent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.mappedReadonly = computed(() => this.spxReadonly() ? true : false, ...(ngDevMode ? [{ debugName: "mappedReadonly" }] : []));
+        this.spxSpeedDial = input([], ...(ngDevMode ? [{ debugName: "spxSpeedDial" }] : []));
+        this.spxName = input(...(ngDevMode ? [undefined, { debugName: "spxName" }] : []));
+        this.spxAutofocus = input(false, ...(ngDevMode ? [{ debugName: "spxAutofocus" }] : []));
+        this.spxAutocomplete = input(...(ngDevMode ? [undefined, { debugName: "spxAutocomplete" }] : []));
+        this.spxCycleConfig = input.required(...(ngDevMode ? [{ debugName: "spxCycleConfig" }] : []));
+        this.spxInputMode = input(...(ngDevMode ? [undefined, { debugName: "spxInputMode" }] : []));
+        this.spxReadonly = input(undefined, ...(ngDevMode ? [{ debugName: "spxReadonly" }] : []));
+        this.spxValidators = input(...(ngDevMode ? [undefined, { debugName: "spxValidators" }] : []));
+        this.spxCapitalize = input(false, ...(ngDevMode ? [{ debugName: "spxCapitalize" }] : []));
+        this.spxSeverity = computed(() => this.value()?.description, ...(ngDevMode ? [{ debugName: "spxSeverity" }] : []));
+        this.spxType = input(SpxInputTypeEnum.text, ...(ngDevMode ? [{ debugName: "spxType" }] : []));
+        this.spxWasInternalUpdate = input(false, ...(ngDevMode ? [{ debugName: "spxWasInternalUpdate" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.spxElementId = input(...(ngDevMode ? [undefined, { debugName: "spxElementId" }] : []));
+        this.selectedInputService = inject(SelectedInputService);
+        this.spxIsFocused = signal(false, ...(ngDevMode ? [{ debugName: "spxIsFocused" }] : []));
+        this.inputRef = viewChild.required('input');
+        this.severityError = SpxSeverityEnum.error;
+        this.severitySuccess = SpxSeverityEnum.success;
+        this.severityWarning = SpxSeverityEnum.warning;
+        this.completeInput = new EventEmitter();
+    }
+    ngOnInit() {
+        this.componentDidLoad();
+        const length = this.spxCycleConfig().length;
+        this.values = Array(length).fill('');
+        if (valuePairToValue(this.value())) {
+            valuePairToValue(this.value()).split('').forEach((char, index) => {
+                if (this.values[index] !== undefined) {
+                    this.values[index] = char;
+                }
+            });
+        }
+    }
+    ngAfterViewInit() {
+        if (this.spxAutofocus()) {
+            this.spxSetFocus();
+        }
+    }
+    spxSetFocus() {
+        const defaultFocusPosition = this.spxCycleConfig().defaultFocusPosition;
+        setTimeout(() => this.focusInput(defaultFocusPosition));
+    }
+    componentDidLoad() {
+        // if (this.spxAutofocus()) {
+        //   this.spxSetFocus();
+        // }
+    }
+    handleChange(event) {
+        this.value.set(event);
+    }
+    onFocus(index) {
+        const input = this.inputBoxes.toArray()[index]?.nativeElement;
+        if (input?.value) {
+            setTimeout(() => input.select(), 0);
+        }
+    }
+    onInput(index, event) {
+        const inputEl = event.target;
+        const raw = inputEl.value;
+        const char = raw.slice(-1); // neem laatste teken
+        if (!this.values) {
+            return;
+        }
+        this.values[index] = char;
+        inputEl.value = char; // vervang inhoud expliciet
+        this.focusInput(this.nextIndex(index));
+        this.checkEmitCondition();
+    }
+    nextIndex(currentIndex) {
+        const focusOrder = this.spxCycleConfig().focusOrder;
+        const next = focusOrder[focusOrder.indexOf(currentIndex) + 1];
+        return next % this.spxCycleConfig().length;
+    }
+    focusInput(index) {
+        const input = this.inputBoxes.toArray()[index]?.nativeElement;
+        if (input) {
+            input.focus();
+            // Selecteer de tekst als er al iets in staat
+            if (input.value) {
+                // Delay is nodig om select() te laten werken in sommige browsers
+                setTimeout(() => input.select(), 0);
+            }
+        }
+    }
+    checkEmitCondition() {
+        const requiredPositions = this.spxCycleConfig().requiredPositions;
+        const completed = this.values.filter((_, index) => requiredPositions[index] === true).every(val => val !== '');
+        if (completed) {
+            this.handleChange({
+                description: SpxSeverityEnum.warning,
+                value: this.values.join('').toUpperCase(),
+            });
+        }
+    }
+    writeValue(valuePair) {
+        console.log(valuePair);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputCycleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SpxInputCycleComponent, isStandalone: true, selector: "spx-input-cycle", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxCycleConfig: { classPropertyName: "spxCycleConfig", publicName: "spxCycleConfig", isSignal: true, isRequired: true, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completeInput: "completeInput" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "inputBoxes", predicate: ["inputBox"], descendants: true }], ngImport: i0, template: "<div class=\"relative text-black flex gap-2 w-full\">\n  @for (val of values; track $index) {\n  <input #inputBox type=\"text\" maxlength=\"1\" pattern=\"\\d*\" [value]=\"val\" (focus)=\"onFocus($index)\"\n    (input)=\"onInput($index, $event)\" [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"spxCycleConfig().fieldPattern\"\n    [class.opacity-50]=\"spxCycleConfig().requiredPositions[$index] === false\"\n    [class.bg-sky-100]=\"!this.spxReadonly() && !this.spxSeverity()\"\n    [class.bg-red-100]=\"!this.spxReadonly() && this.spxSeverity() === severityError\"\n    [class.bg-amber-100]=\"!this.spxReadonly() && this.spxSeverity() === severityWarning\"\n    [class.bg-teal-100]=\"!this.spxReadonly() && this.spxSeverity() === severitySuccess\"\n    [class.bg-gray-300]=\"this.spxReadonly()\" [class.cursor-not-allowed]=\"this.spxReadonly()\"\n    [class.uppercase]=\"this.spxCapitalize()\" [disabled]=\"this.mappedReadonly()\"\n    class=\"rounded text-center p-3 font-bold text-lg w-full\" />\n  }\n</div>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputCycleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spx-input-cycle', imports: [
+                        ReactiveFormsModule,
+                        FormsModule,
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black flex gap-2 w-full\">\n  @for (val of values; track $index) {\n  <input #inputBox type=\"text\" maxlength=\"1\" pattern=\"\\d*\" [value]=\"val\" (focus)=\"onFocus($index)\"\n    (input)=\"onInput($index, $event)\" [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"spxCycleConfig().fieldPattern\"\n    [class.opacity-50]=\"spxCycleConfig().requiredPositions[$index] === false\"\n    [class.bg-sky-100]=\"!this.spxReadonly() && !this.spxSeverity()\"\n    [class.bg-red-100]=\"!this.spxReadonly() && this.spxSeverity() === severityError\"\n    [class.bg-amber-100]=\"!this.spxReadonly() && this.spxSeverity() === severityWarning\"\n    [class.bg-teal-100]=\"!this.spxReadonly() && this.spxSeverity() === severitySuccess\"\n    [class.bg-gray-300]=\"this.spxReadonly()\" [class.cursor-not-allowed]=\"this.spxReadonly()\"\n    [class.uppercase]=\"this.spxCapitalize()\" [disabled]=\"this.mappedReadonly()\"\n    class=\"rounded text-center p-3 font-bold text-lg w-full\" />\n  }\n</div>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { completeInput: [{
+                type: Output
+            }], inputBoxes: [{
+                type: ViewChildren,
+                args: ['inputBox']
+            }] } });
+
+var stepType;
+(function (stepType) {
+    stepType["years"] = "years";
+    stepType["months"] = "months";
+    stepType["days"] = "days";
+})(stepType || (stepType = {}));
+class SpxInputDateComponent {
+    constructor() {
+        this.spxMax = input.required(...(ngDevMode ? [{ debugName: "spxMax" }] : []));
+        this.spxMin = input.required(...(ngDevMode ? [{ debugName: "spxMin" }] : []));
+        this.spxReadonly = input(...(ngDevMode ? [undefined, { debugName: "spxReadonly" }] : []));
+        this.spxValidators = input(...(ngDevMode ? [undefined, { debugName: "spxValidators" }] : []));
+        this.spxAutoFocus = input(false, ...(ngDevMode ? [{ debugName: "spxAutoFocus" }] : []));
+        this.value = model({
+            description: "",
+            value: "",
+        }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.spxSelectedStep = signal(stepType.years, ...(ngDevMode ? [{ debugName: "spxSelectedStep" }] : []));
+        this.spxSelectDay = input(false, ...(ngDevMode ? [{ debugName: "spxSelectDay" }] : []));
+        this.spxSelectMonth = input(true, ...(ngDevMode ? [{ debugName: "spxSelectMonth" }] : []));
+        this.selectedYear = signal(null, ...(ngDevMode ? [{ debugName: "selectedYear" }] : []));
+        this.selectedMonth = signal(null, ...(ngDevMode ? [{ debugName: "selectedMonth" }] : []));
+        this.selectedDay = signal(null, ...(ngDevMode ? [{ debugName: "selectedDay" }] : []));
+        this.yearInputComponent = viewChild.required(stepType.years);
+        this.monthInputComponent = viewChild.required(stepType.months);
+        this.dayInputComponent = viewChild.required(stepType.days);
+        this.spxElementId = input(...(ngDevMode ? [undefined, { debugName: "spxElementId" }] : []));
+        this.selectedInputService = inject(SelectedInputService);
+        this.spxIsFocused = signal(false, ...(ngDevMode ? [{ debugName: "spxIsFocused" }] : []));
+        this.isInternalUpdate = signal(false, ...(ngDevMode ? [{ debugName: "isInternalUpdate" }] : []));
+        this.spxSuggestionC = computed(() => {
+            switch (this.spxSelectedStep()) {
+                case stepType.years:
+                    return this.spxSuggestions().years;
+                case stepType.months:
+                    return [...this.spxSuggestions().months];
+                case stepType.days:
+                    return [...this.spxSuggestions().days];
+            }
+        }, ...(ngDevMode ? [{ debugName: "spxSuggestionC" }] : []));
+        this.spxSuggestions = input({
+            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: [],
+        }, ...(ngDevMode ? [{ debugName: "spxSuggestions" }] : []));
+    }
+    handleFocus(selectedStep) {
+        switch (selectedStep) {
+            case stepType.years:
+                this.spxSelectedStep.set(stepType.years);
+                this.yearInputComponent().nativeElement.focus();
+                break;
+            case stepType.months:
+                this.spxSelectedStep.set(stepType.months);
+                this.monthInputComponent().nativeElement.focus();
+                break;
+            case stepType.days:
+                this.spxSelectedStep.set(stepType.days);
+                this.dayInputComponent().nativeElement.focus();
+                break;
+        }
+    }
+    onModelChange(newValue, selectedStep) {
+        this.isInternalUpdate.set(true);
+        const parsedValue = +newValue; // Convert to number
+        if (parsedValue == 0)
+            return;
+        switch (selectedStep) {
+            case stepType.years:
+                this.selectedYear.set(parsedValue);
+                if (parsedValue > 999) {
+                    this.spxSelectedStep.set(stepType.months);
+                    this.monthInputComponent().nativeElement.focus();
+                }
+                break;
+            case stepType.months:
+                this.selectedMonth.set(parsedValue);
+                break;
+            case stepType.days:
+                this.selectedDay.set(parsedValue);
+                break;
+        }
+        this.updateValueAndEmit();
+        this.isInternalUpdate.set(false);
+    }
+    ngOnInit() {
+        this.suggestYears();
+        this.setValue();
+        if (this.spxAutoFocus()) {
+            this.handleFocus("years");
+        }
+        // Filter updates based on focus state
+        this.selectedInputService.focusedElement$
+            .pipe(filter((focusedId) => focusedId === this.spxElementId()))
+            .subscribe(() => {
+            this.spxIsFocused.set(true); // Update only if focused
+            this.handleFocus(this.spxSelectedStep());
+        });
+    }
+    ngOnChanges() {
+        if (!this.isInternalUpdate()) {
+            this.setValue();
+        }
+    }
+    setValue() {
+        if (valuePairToValue(this.value())) {
+            const parsedValue = DateTime.fromISO(valuePairToValue(this.value()));
+            if (this.selectedYear() && this.selectedYear() < 999) {
+                return;
+            }
+            this.selectedYear.set(parsedValue.year);
+            this.selectedMonth.set(parsedValue.month);
+            this.selectedDay.set(parsedValue.day);
+        }
+    }
+    handleSuggestionClick(value) {
+        switch (this.spxSelectedStep()) {
+            case stepType.years:
+                this.selectedYear.set(value);
+                break;
+            case stepType.months:
+                this.selectedMonth.set(value);
+                break;
+            case stepType.days:
+                this.selectedDay.set(value);
+                break;
+        }
+        this.updateValueAndEmit();
+        this.changeSelectedStep();
+    }
+    // Handle keyboard navigation (Tab and Shift + Tab)
+    handleTabKey(event) {
+        if (event.key === 'Tab') {
+            this.changeSelectedStep();
+            event.preventDefault(); // Prevent default tab behavior
+        }
+    }
+    updateValueAndEmit() {
+        if (this.selectedYear() && this.selectedMonth()) {
+            const concatenatedValue = `${this.selectedYear() ? this.selectedYear() : ``}${this.selectedMonth() ? `${this.selectedMonth() < 10 ? `0${this.selectedMonth()}` : this.selectedMonth()}` : ``}${this.selectedDay() ? `-${this.selectedDay() < 10 ? `0${this.selectedDay()}` : this.selectedDay()}` : ``}`;
+            const parsedValue = DateTime.fromISO(concatenatedValue);
+            this.value.set({ value: parsedValue.toISO(), description: parsedValue.toISO() });
+        }
+    }
+    changeSelectedStep() {
+        switch (this.spxSelectedStep()) {
+            case stepType.years:
+                if (this.spxSelectMonth()) {
+                    this.spxSelectedStep.set(stepType.months);
+                    this.monthInputComponent().nativeElement.focus();
+                }
+                else {
+                    this.spxSelectedStep.set(stepType.years);
+                    this.yearInputComponent().nativeElement.focus();
+                }
+                break;
+            case stepType.months:
+                if (this.spxSelectDay()) {
+                    this.spxSelectedStep.set(stepType.days);
+                    this.dayInputComponent().nativeElement.focus();
+                }
+                else {
+                    this.spxSelectedStep.set(stepType.years);
+                    this.yearInputComponent().nativeElement.focus();
+                }
+                break;
+            case stepType.days:
+                this.spxSelectedStep.set(stepType.years);
+                this.yearInputComponent().nativeElement.focus();
+                break;
+        }
+    }
+    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,
+            });
+        }
+    }
+    handleClear() {
+        this.spxSelectedStep.set(stepType.years);
+        this.selectedYear.set(null);
+        this.selectedMonth.set(null);
+        this.selectedDay.set(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SpxInputDateComponent, isStandalone: true, selector: "spx-input-date", inputs: { spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: true, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: true, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxAutoFocus: { classPropertyName: "spxAutoFocus", publicName: "spxAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown": "handleTabKey($event)" } }, viewQueries: [{ propertyName: "yearInputComponent", first: true, predicate: stepType.years, descendants: true, isSignal: true }, { propertyName: "monthInputComponent", first: true, predicate: stepType.months, descendants: true, isSignal: true }, { propertyName: "dayInputComponent", first: true, predicate: stepType.days, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class='spx-input-date__controls'>\n  <input #years\n    class='spx-input-date__input'\n    [ngModel]=\"selectedYear()\"\n    (ngModelChange)=\"onModelChange($event, 'years')\"\n    [attr.type]=\"'number'\"\n    (click)=\"this.handleFocus('years')\"\n    [attr.min]=\"1900\"\n    [attr.max]=\"2100\"\n    [attr.step]=\"1\"\n    />\n  <div class='spx-input-date__control-label'>Year</div>\n  @if (this.spxSelectMonth()) {\n    <input #months\n      class='spx-input-date__input'\n      [ngModel]=\"selectedMonth()\"\n      (ngModelChange)=\"onModelChange($event, 'months')\"\n      (click)=\"this.handleFocus('months')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"12\"\n      [attr.step]=\"1\" />\n  }\n  <div class='spx-input-date__control-label'>Month</div>\n  @if (this.spxSelectDay()) {\n    <input #days\n      class='spx-input-date__input'\n      [ngModel]=\"selectedDay()\"\n      (ngModelChange)=\"onModelChange($event, 'days')\"\n      (click)=\"this.handleFocus('days')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"31\"\n      [attr.step]=\"1\" />\n    <div class='spx-input-date__control-label'>Days</div>\n  }\n</div>\n<div class='spx-input-date__suggestions'>\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\n    <spx-suggestion [spxSelected]=\"\n    (selectedYear() === valuePair.value && this.spxSelectedStep() === 'years') ||\n    (selectedMonth() === valuePair.value && this.spxSelectedStep() === 'months') ||  \n    (selectedDay() === valuePair.value && this.spxSelectedStep() === 'days')\"\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\n  }\n</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"], dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-input-text', imports: [
-                        SpxDropdownComponent,
-                        ReactiveFormsModule,
-                        FormsModule,
-                        NgClass,
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\n  <input #input class=\"font-bold text-lg w-full outline-none\" autocomplete=\"off\" spellcheck=\"false\"\n    [attr.autocomplete]=\"this.spxAutocomplete()\" [attr.autofocus]=\"this.spxAutofocus()\"\n    [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"this.spxPattern()\" [attr.name]=\"this.spxName()\"\n    [attr.type]=\"this.spxType()\" [class.bg-white]=\"!this.spxReadonly()\" [class.bg-gray-300]=\"this.spxReadonly()\"\n    [class.cursor-not-allowed]=\"this.spxReadonly()\" [class.uppercase]=\"this.spxCapitalize()\"\n    [disabled]=\"this.mappedReadonly()\" [ngModel]=\"\n      this.value()?.description\n        ? this.value()?.description\n        : this.value()?.value\n    \" (ngModelChange)=\"this.handleChange($event)\" />\n  @if (this.value()?.description && this.value()?.value &&\n  this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n  <span>{{ this.value()?.value }}</span>\n  } @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType()\n  === 'overlaynumber')) {\n  <spx-dropdown [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\n  </spx-dropdown>\n  } @if (this.spxSpeedDial()) {\n  <div class=\"flex flex-wrap gap-3\">\n    @for (speedDial of this.spxSpeedDial(); track $index) {\n    <button class=\"px-3 px-1\" [ngClass]=\"'bg-' + speedDial.backgroundColor\" (click)=\"doSelect(speedDial)\">\n      {{ speedDial.valuePair.description }}\n    </button>\n    }\n  </div>\n  }\n</div>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+            args: [{ selector: 'spx-input-date', standalone: true, imports: [
+                        SpxSuggestionComponent,
+                        FormsModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class='spx-input-date__controls'>\n  <input #years\n    class='spx-input-date__input'\n    [ngModel]=\"selectedYear()\"\n    (ngModelChange)=\"onModelChange($event, 'years')\"\n    [attr.type]=\"'number'\"\n    (click)=\"this.handleFocus('years')\"\n    [attr.min]=\"1900\"\n    [attr.max]=\"2100\"\n    [attr.step]=\"1\"\n    />\n  <div class='spx-input-date__control-label'>Year</div>\n  @if (this.spxSelectMonth()) {\n    <input #months\n      class='spx-input-date__input'\n      [ngModel]=\"selectedMonth()\"\n      (ngModelChange)=\"onModelChange($event, 'months')\"\n      (click)=\"this.handleFocus('months')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"12\"\n      [attr.step]=\"1\" />\n  }\n  <div class='spx-input-date__control-label'>Month</div>\n  @if (this.spxSelectDay()) {\n    <input #days\n      class='spx-input-date__input'\n      [ngModel]=\"selectedDay()\"\n      (ngModelChange)=\"onModelChange($event, 'days')\"\n      (click)=\"this.handleFocus('days')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"31\"\n      [attr.step]=\"1\" />\n    <div class='spx-input-date__control-label'>Days</div>\n  }\n</div>\n<div class='spx-input-date__suggestions'>\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\n    <spx-suggestion [spxSelected]=\"\n    (selectedYear() === valuePair.value && this.spxSelectedStep() === 'years') ||\n    (selectedMonth() === valuePair.value && this.spxSelectedStep() === 'months') ||  \n    (selectedDay() === valuePair.value && this.spxSelectedStep() === 'days')\"\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\n  }\n</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"] }]
+        }], propDecorators: { handleTabKey: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
 
 class SpxInputFloatComponent {
     constructor() {
@@ -613,243 +978,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
             args: [{ selector: 'spx-input-time', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\n  <div class=\"flex items-center justify-around gap-3\">\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('hours')\">{{ formattedHour() ?? '--' }}</div>\n    <div class=\"text-gray text-xl\">:</div>\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('minutes')\">{{ formattedMinute() ?? '--' }}</div>\n  </div>\n</div>", styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.ModalController }] });
 
-var stepType;
-(function (stepType) {
-    stepType["years"] = "years";
-    stepType["months"] = "months";
-    stepType["days"] = "days";
-})(stepType || (stepType = {}));
-class SpxInputDateComponent {
-    constructor() {
-        this.spxMax = input.required(...(ngDevMode ? [{ debugName: "spxMax" }] : []));
-        this.spxMin = input.required(...(ngDevMode ? [{ debugName: "spxMin" }] : []));
-        this.spxReadonly = input(...(ngDevMode ? [undefined, { debugName: "spxReadonly" }] : []));
-        this.spxValidators = input(...(ngDevMode ? [undefined, { debugName: "spxValidators" }] : []));
-        this.spxAutoFocus = input(false, ...(ngDevMode ? [{ debugName: "spxAutoFocus" }] : []));
-        this.value = model({
-            description: "",
-            value: "",
-        }, ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.spxSelectedStep = signal(stepType.years, ...(ngDevMode ? [{ debugName: "spxSelectedStep" }] : []));
-        this.spxSelectDay = input(false, ...(ngDevMode ? [{ debugName: "spxSelectDay" }] : []));
-        this.spxSelectMonth = input(true, ...(ngDevMode ? [{ debugName: "spxSelectMonth" }] : []));
-        this.selectedYear = signal(null, ...(ngDevMode ? [{ debugName: "selectedYear" }] : []));
-        this.selectedMonth = signal(null, ...(ngDevMode ? [{ debugName: "selectedMonth" }] : []));
-        this.selectedDay = signal(null, ...(ngDevMode ? [{ debugName: "selectedDay" }] : []));
-        this.yearInputComponent = viewChild.required(stepType.years);
-        this.monthInputComponent = viewChild.required(stepType.months);
-        this.dayInputComponent = viewChild.required(stepType.days);
-        this.spxElementId = input(...(ngDevMode ? [undefined, { debugName: "spxElementId" }] : []));
-        this.selectedInputService = inject(SelectedInputService);
-        this.spxIsFocused = signal(false, ...(ngDevMode ? [{ debugName: "spxIsFocused" }] : []));
-        this.isInternalUpdate = signal(false, ...(ngDevMode ? [{ debugName: "isInternalUpdate" }] : []));
-        this.spxSuggestionC = computed(() => {
-            switch (this.spxSelectedStep()) {
-                case stepType.years:
-                    return this.spxSuggestions().years;
-                case stepType.months:
-                    return [...this.spxSuggestions().months];
-                case stepType.days:
-                    return [...this.spxSuggestions().days];
-            }
-        }, ...(ngDevMode ? [{ debugName: "spxSuggestionC" }] : []));
-        this.spxSuggestions = input({
-            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: [],
-        }, ...(ngDevMode ? [{ debugName: "spxSuggestions" }] : []));
-    }
-    handleFocus(selectedStep) {
-        switch (selectedStep) {
-            case stepType.years:
-                this.spxSelectedStep.set(stepType.years);
-                this.yearInputComponent().nativeElement.focus();
-                break;
-            case stepType.months:
-                this.spxSelectedStep.set(stepType.months);
-                this.monthInputComponent().nativeElement.focus();
-                break;
-            case stepType.days:
-                this.spxSelectedStep.set(stepType.days);
-                this.dayInputComponent().nativeElement.focus();
-                break;
-        }
-    }
-    onModelChange(newValue, selectedStep) {
-        this.isInternalUpdate.set(true);
-        const parsedValue = +newValue; // Convert to number
-        if (parsedValue == 0)
-            return;
-        switch (selectedStep) {
-            case stepType.years:
-                this.selectedYear.set(parsedValue);
-                if (parsedValue > 999) {
-                    this.spxSelectedStep.set(stepType.months);
-                    this.monthInputComponent().nativeElement.focus();
-                }
-                break;
-            case stepType.months:
-                this.selectedMonth.set(parsedValue);
-                break;
-            case stepType.days:
-                this.selectedDay.set(parsedValue);
-                break;
-        }
-        this.updateValueAndEmit();
-        this.isInternalUpdate.set(false);
-    }
-    ngOnInit() {
-        this.suggestYears();
-        this.setValue();
-        if (this.spxAutoFocus()) {
-            this.handleFocus("years");
-        }
-        // Filter updates based on focus state
-        this.selectedInputService.focusedElement$
-            .pipe(filter((focusedId) => focusedId === this.spxElementId()))
-            .subscribe(() => {
-            this.spxIsFocused.set(true); // Update only if focused
-            this.handleFocus(this.spxSelectedStep());
-        });
-    }
-    ngOnChanges() {
-        if (!this.isInternalUpdate()) {
-            this.setValue();
-        }
-    }
-    setValue() {
-        if (valuePairToValue(this.value())) {
-            const parsedValue = DateTime.fromISO(valuePairToValue(this.value()));
-            if (this.selectedYear() && this.selectedYear() < 999) {
-                return;
-            }
-            this.selectedYear.set(parsedValue.year);
-            this.selectedMonth.set(parsedValue.month);
-            this.selectedDay.set(parsedValue.day);
-        }
-    }
-    handleSuggestionClick(value) {
-        switch (this.spxSelectedStep()) {
-            case stepType.years:
-                this.selectedYear.set(value);
-                break;
-            case stepType.months:
-                this.selectedMonth.set(value);
-                break;
-            case stepType.days:
-                this.selectedDay.set(value);
-                break;
-        }
-        this.updateValueAndEmit();
-        this.changeSelectedStep();
-    }
-    // Handle keyboard navigation (Tab and Shift + Tab)
-    handleTabKey(event) {
-        if (event.key === 'Tab') {
-            this.changeSelectedStep();
-            event.preventDefault(); // Prevent default tab behavior
-        }
-    }
-    updateValueAndEmit() {
-        if (this.selectedYear() && this.selectedMonth()) {
-            const concatenatedValue = `${this.selectedYear() ? this.selectedYear() : ``}${this.selectedMonth() ? `${this.selectedMonth() < 10 ? `0${this.selectedMonth()}` : this.selectedMonth()}` : ``}${this.selectedDay() ? `-${this.selectedDay() < 10 ? `0${this.selectedDay()}` : this.selectedDay()}` : ``}`;
-            const parsedValue = DateTime.fromISO(concatenatedValue);
-            this.value.set({ value: parsedValue.toISO(), description: parsedValue.toISO() });
-        }
-    }
-    changeSelectedStep() {
-        switch (this.spxSelectedStep()) {
-            case stepType.years:
-                if (this.spxSelectMonth()) {
-                    this.spxSelectedStep.set(stepType.months);
-                    this.monthInputComponent().nativeElement.focus();
-                }
-                else {
-                    this.spxSelectedStep.set(stepType.years);
-                    this.yearInputComponent().nativeElement.focus();
-                }
-                break;
-            case stepType.months:
-                if (this.spxSelectDay()) {
-                    this.spxSelectedStep.set(stepType.days);
-                    this.dayInputComponent().nativeElement.focus();
-                }
-                else {
-                    this.spxSelectedStep.set(stepType.years);
-                    this.yearInputComponent().nativeElement.focus();
-                }
-                break;
-            case stepType.days:
-                this.spxSelectedStep.set(stepType.years);
-                this.yearInputComponent().nativeElement.focus();
-                break;
-        }
-    }
-    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,
-            });
-        }
-    }
-    handleClear() {
-        this.spxSelectedStep.set(stepType.years);
-        this.selectedYear.set(null);
-        this.selectedMonth.set(null);
-        this.selectedDay.set(null);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SpxInputDateComponent, isStandalone: true, selector: "spx-input-date", inputs: { spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: true, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: true, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxAutoFocus: { classPropertyName: "spxAutoFocus", publicName: "spxAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown": "handleTabKey($event)" } }, viewQueries: [{ propertyName: "yearInputComponent", first: true, predicate: stepType.years, descendants: true, isSignal: true }, { propertyName: "monthInputComponent", first: true, predicate: stepType.months, descendants: true, isSignal: true }, { propertyName: "dayInputComponent", first: true, predicate: stepType.days, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class='spx-input-date__controls'>\n  <input #years\n    class='spx-input-date__input'\n    [ngModel]=\"selectedYear()\"\n    (ngModelChange)=\"onModelChange($event, 'years')\"\n    [attr.type]=\"'number'\"\n    (click)=\"this.handleFocus('years')\"\n    [attr.min]=\"1900\"\n    [attr.max]=\"2100\"\n    [attr.step]=\"1\"\n    />\n  <div class='spx-input-date__control-label'>Year</div>\n  @if (this.spxSelectMonth()) {\n    <input #months\n      class='spx-input-date__input'\n      [ngModel]=\"selectedMonth()\"\n      (ngModelChange)=\"onModelChange($event, 'months')\"\n      (click)=\"this.handleFocus('months')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"12\"\n      [attr.step]=\"1\" />\n  }\n  <div class='spx-input-date__control-label'>Month</div>\n  @if (this.spxSelectDay()) {\n    <input #days\n      class='spx-input-date__input'\n      [ngModel]=\"selectedDay()\"\n      (ngModelChange)=\"onModelChange($event, 'days')\"\n      (click)=\"this.handleFocus('days')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"31\"\n      [attr.step]=\"1\" />\n    <div class='spx-input-date__control-label'>Days</div>\n  }\n</div>\n<div class='spx-input-date__suggestions'>\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\n    <spx-suggestion [spxSelected]=\"\n    (selectedYear() === valuePair.value && this.spxSelectedStep() === 'years') ||\n    (selectedMonth() === valuePair.value && this.spxSelectedStep() === 'months') ||  \n    (selectedDay() === valuePair.value && this.spxSelectedStep() === 'days')\"\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\n  }\n</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"], dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputDateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spx-input-date', standalone: true, imports: [
-                        SpxSuggestionComponent,
-                        FormsModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class='spx-input-date__controls'>\n  <input #years\n    class='spx-input-date__input'\n    [ngModel]=\"selectedYear()\"\n    (ngModelChange)=\"onModelChange($event, 'years')\"\n    [attr.type]=\"'number'\"\n    (click)=\"this.handleFocus('years')\"\n    [attr.min]=\"1900\"\n    [attr.max]=\"2100\"\n    [attr.step]=\"1\"\n    />\n  <div class='spx-input-date__control-label'>Year</div>\n  @if (this.spxSelectMonth()) {\n    <input #months\n      class='spx-input-date__input'\n      [ngModel]=\"selectedMonth()\"\n      (ngModelChange)=\"onModelChange($event, 'months')\"\n      (click)=\"this.handleFocus('months')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"12\"\n      [attr.step]=\"1\" />\n  }\n  <div class='spx-input-date__control-label'>Month</div>\n  @if (this.spxSelectDay()) {\n    <input #days\n      class='spx-input-date__input'\n      [ngModel]=\"selectedDay()\"\n      (ngModelChange)=\"onModelChange($event, 'days')\"\n      (click)=\"this.handleFocus('days')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"31\"\n      [attr.step]=\"1\" />\n    <div class='spx-input-date__control-label'>Days</div>\n  }\n</div>\n<div class='spx-input-date__suggestions'>\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\n    <spx-suggestion [spxSelected]=\"\n    (selectedYear() === valuePair.value && this.spxSelectedStep() === 'years') ||\n    (selectedMonth() === valuePair.value && this.spxSelectedStep() === 'months') ||  \n    (selectedDay() === valuePair.value && this.spxSelectedStep() === 'days')\"\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\n  }\n</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"] }]
-        }], propDecorators: { handleTabKey: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-
 class SpxInputComponent {
     constructor() {
         this.mappedName = computed(() => this.spxName() ?? undefined, ...(ngDevMode ? [{ debugName: "mappedName" }] : []));
@@ -880,6 +1008,7 @@ class SpxInputComponent {
         this.spxType = input(SpxInputTypeEnum.text, ...(ngDevMode ? [{ debugName: "spxType" }] : []));
         this.spxValidators = input(...(ngDevMode ? [undefined, { debugName: "spxValidators" }] : []));
         this.spxCapitalize = input(false, ...(ngDevMode ? [{ debugName: "spxCapitalize" }] : []));
+        this.spxCycleConfig = input(...(ngDevMode ? [undefined, { debugName: "spxCycleConfig" }] : []));
         this.value = signal({ value: null, description: null }, ...(ngDevMode ? [{ debugName: "value" }] : []));
         this.spxClear = output();
         this.spxEdit = output();
@@ -892,6 +1021,7 @@ class SpxInputComponent {
         this.timeInput = viewChild("spxInputTime", ...(ngDevMode ? [{ debugName: "timeInput" }] : []));
         this.radioInput = viewChild("spxInputRadio", ...(ngDevMode ? [{ debugName: "radioInput" }] : []));
         this.dateInput = viewChild("spxInputDate", ...(ngDevMode ? [{ debugName: "dateInput" }] : []));
+        this.cycleInput = viewChild("spxInputCycle", ...(ngDevMode ? [{ debugName: "cycleInput" }] : []));
         this.spxElementId = signal(0, ...(ngDevMode ? [{ debugName: "spxElementId" }] : []));
         this.selectedInputService = inject(SelectedInputService);
         this.onChange = () => { };
@@ -947,6 +1077,10 @@ class SpxInputComponent {
             case SpxInputTypeEnum.overlayNumber:
                 this.textInput()?.spxSetFocus();
                 break;
+            case SpxInputTypeEnum.cycle:
+            case SpxInputTypeEnum.cycleNumeric:
+                this.cycleInput()?.spxSetFocus();
+                break;
             case SpxInputTypeEnum.number:
                 this.numberInput()?.spxSetFocus();
                 break;
@@ -981,13 +1115,13 @@ class SpxInputComponent {
         this.onTouched = fn;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: false, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClear: "spxClear", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch", spxBlur: "spxBlur" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: false, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxCycleConfig: { classPropertyName: "spxCycleConfig", publicName: "spxCycleConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClear: "spxClear", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch", spxBlur: "spxBlur" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: SpxInputComponent,
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\n  (spxClear)=\"this.handleClear()\"\n  (spxEdit)=\"this.handleEdit()\"\n  (spxHelp)=\"this.handleHelp()\"\n  (spxSearch)=\"this.handleSearch()\"\n  (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n  [spxAlert]=\"this.spxAlert()\"\n  [spxCompact]=\"this.spxCompact()\"\n  [spxLabel]=\"this.spxLabel()\"\n  [spxName]=\"this.mappedName()\"\n  [spxReadonly]=\"this.spxReadonly()\"\n  [spxRequired]=\"this.spxRequired()\"\n  [spxShowClear]=\"this.spxShowClear()\"\n  [spxShowEdit]=\"this.spxShowEdit()\"\n  [spxShowHelp]=\"this.spxShowHelp()\"\n  [spxShowLabel]=\"this.spxShowLabel()\"\n  [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n  [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n  [spxValue]=\"this.value()\"\n>\n  <div controls>\n    @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n    this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n    this.spxType() === 'password') {\n    <spx-input-text\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n      [spxSpeedDial]=\"this.spxSpeedDial()\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxCapitalize]=\"this.spxCapitalize()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n      [spxName]=\"this.mappedName()\"\n      [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxType]=\"this.spxType()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputText\n    ></spx-input-text>\n    } @if (this.spxType() === 'date') {\n    <spx-input-date\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutoFocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxMax]=\"this.spxMax()!\"\n      [spxMin]=\"this.spxMin()!\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSelectDay]=\"this.spxSelectDay()\"\n      [spxSelectMonth]=\"this.spxSelectMonth()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputDate\n    ></spx-input-date>\n    } @if (this.spxType() === 'float') {\n    <spx-input-float\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputFloat\n    ></spx-input-float>\n    } @if (this.spxType() === 'number') {\n    <spx-input-number\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxInputMode()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputNumber\n    ></spx-input-number>\n    } @if (this.spxType() === 'radio') {\n    <spx-input-radio\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxShowLabel]=\"this.spxShowLabel()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputRadio\n    ></spx-input-radio>\n    } @if (this.spxType() === 'time') {\n    <spx-input-time\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputTime\n    ></spx-input-time>\n    }\n  </div>\n  <div validation-messages>\n    <ng-content></ng-content>\n  </div>\n</spx-input-box>\n", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxName", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxAlert", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxSpeedDial", "spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }, { propertyName: "cycleInput", first: true, predicate: ["spxInputCycle"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\n  (spxClear)=\"this.handleClear()\"\n  (spxEdit)=\"this.handleEdit()\"\n  (spxHelp)=\"this.handleHelp()\"\n  (spxSearch)=\"this.handleSearch()\"\n  (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n  [spxAlert]=\"this.spxAlert()\"\n  [spxCompact]=\"this.spxCompact()\"\n  [spxLabel]=\"this.spxLabel()\"\n  [spxName]=\"this.mappedName()\"\n  [spxReadonly]=\"this.spxReadonly()\"\n  [spxRequired]=\"this.spxRequired()\"\n  [spxShowClear]=\"this.spxShowClear()\"\n  [spxShowEdit]=\"this.spxShowEdit()\"\n  [spxShowHelp]=\"this.spxShowHelp()\"\n  [spxShowLabel]=\"this.spxShowLabel()\"\n  [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n  [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n  [spxValue]=\"this.value()\"\n>\n  <div controls>\n    @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n    this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n    this.spxType() === 'password') {\n    <spx-input-text\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n      [spxSpeedDial]=\"this.spxSpeedDial()\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxCapitalize]=\"this.spxCapitalize()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n      [spxName]=\"this.mappedName()\"\n      [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxType]=\"this.spxType()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputText\n    ></spx-input-text>\n    } @if (this.spxType() === 'cycle' || this.spxType() === 'cycleNumeric') {\n    <spx-input-cycle\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxCycleConfig]=\"this.spxCycleConfig()!\"\n      [spxSpeedDial]=\"this.spxSpeedDial()\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxCapitalize]=\"this.spxCapitalize()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxType() === 'cycleNumeric' ? 'numeric' : 'text'\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxType]=\"this.spxType()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputText\n    ></spx-input-cycle>\n    } @if (this.spxType() === 'date') {\n    <spx-input-date\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutoFocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxMax]=\"this.spxMax()!\"\n      [spxMin]=\"this.spxMin()!\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSelectDay]=\"this.spxSelectDay()\"\n      [spxSelectMonth]=\"this.spxSelectMonth()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputDate\n    ></spx-input-date>\n    } @if (this.spxType() === 'float') {\n    <spx-input-float\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputFloat\n    ></spx-input-float>\n    } @if (this.spxType() === 'number') {\n    <spx-input-number\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxInputMode()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputNumber\n    ></spx-input-number>\n    } @if (this.spxType() === 'radio') {\n    <spx-input-radio\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxShowLabel]=\"this.spxShowLabel()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputRadio\n    ></spx-input-radio>\n    } @if (this.spxType() === 'time') {\n    <spx-input-time\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputTime\n    ></spx-input-time>\n    }\n  </div>\n  <div validation-messages>\n    <ng-content></ng-content>\n  </div>\n</spx-input-box>\n", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxName", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxAlert", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputCycleComponent, selector: "spx-input-cycle", inputs: ["spxSpeedDial", "spxName", "spxAutofocus", "spxAutocomplete", "spxCycleConfig", "spxInputMode", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange", "completeInput"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxSpeedDial", "spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputComponent, decorators: [{
             type: Component,
@@ -995,6 +1129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                         '(spxChange)': 'handleChangeEvent($event)'
                     }, imports: [
                         SpxInputBoxComponent,
+                        SpxInputCycleComponent,
                         SpxInputDateComponent,
                         SpxInputFloatComponent,
                         SpxInputNumberComponent,
@@ -1007,7 +1142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                             useExisting: SpxInputComponent,
                             multi: true
                         }
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\n  (spxClear)=\"this.handleClear()\"\n  (spxEdit)=\"this.handleEdit()\"\n  (spxHelp)=\"this.handleHelp()\"\n  (spxSearch)=\"this.handleSearch()\"\n  (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n  [spxAlert]=\"this.spxAlert()\"\n  [spxCompact]=\"this.spxCompact()\"\n  [spxLabel]=\"this.spxLabel()\"\n  [spxName]=\"this.mappedName()\"\n  [spxReadonly]=\"this.spxReadonly()\"\n  [spxRequired]=\"this.spxRequired()\"\n  [spxShowClear]=\"this.spxShowClear()\"\n  [spxShowEdit]=\"this.spxShowEdit()\"\n  [spxShowHelp]=\"this.spxShowHelp()\"\n  [spxShowLabel]=\"this.spxShowLabel()\"\n  [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n  [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n  [spxValue]=\"this.value()\"\n>\n  <div controls>\n    @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n    this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n    this.spxType() === 'password') {\n    <spx-input-text\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n      [spxSpeedDial]=\"this.spxSpeedDial()\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxCapitalize]=\"this.spxCapitalize()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n      [spxName]=\"this.mappedName()\"\n      [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxType]=\"this.spxType()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputText\n    ></spx-input-text>\n    } @if (this.spxType() === 'date') {\n    <spx-input-date\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutoFocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxMax]=\"this.spxMax()!\"\n      [spxMin]=\"this.spxMin()!\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSelectDay]=\"this.spxSelectDay()\"\n      [spxSelectMonth]=\"this.spxSelectMonth()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputDate\n    ></spx-input-date>\n    } @if (this.spxType() === 'float') {\n    <spx-input-float\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputFloat\n    ></spx-input-float>\n    } @if (this.spxType() === 'number') {\n    <spx-input-number\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxInputMode()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputNumber\n    ></spx-input-number>\n    } @if (this.spxType() === 'radio') {\n    <spx-input-radio\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxShowLabel]=\"this.spxShowLabel()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputRadio\n    ></spx-input-radio>\n    } @if (this.spxType() === 'time') {\n    <spx-input-time\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputTime\n    ></spx-input-time>\n    }\n  </div>\n  <div validation-messages>\n    <ng-content></ng-content>\n  </div>\n</spx-input-box>\n" }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\n  (spxClear)=\"this.handleClear()\"\n  (spxEdit)=\"this.handleEdit()\"\n  (spxHelp)=\"this.handleHelp()\"\n  (spxSearch)=\"this.handleSearch()\"\n  (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n  [spxAlert]=\"this.spxAlert()\"\n  [spxCompact]=\"this.spxCompact()\"\n  [spxLabel]=\"this.spxLabel()\"\n  [spxName]=\"this.mappedName()\"\n  [spxReadonly]=\"this.spxReadonly()\"\n  [spxRequired]=\"this.spxRequired()\"\n  [spxShowClear]=\"this.spxShowClear()\"\n  [spxShowEdit]=\"this.spxShowEdit()\"\n  [spxShowHelp]=\"this.spxShowHelp()\"\n  [spxShowLabel]=\"this.spxShowLabel()\"\n  [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n  [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n  [spxValue]=\"this.value()\"\n>\n  <div controls>\n    @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n    this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n    this.spxType() === 'password') {\n    <spx-input-text\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n      [spxSpeedDial]=\"this.spxSpeedDial()\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxCapitalize]=\"this.spxCapitalize()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n      [spxName]=\"this.mappedName()\"\n      [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxType]=\"this.spxType()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputText\n    ></spx-input-text>\n    } @if (this.spxType() === 'cycle' || this.spxType() === 'cycleNumeric') {\n    <spx-input-cycle\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxCycleConfig]=\"this.spxCycleConfig()!\"\n      [spxSpeedDial]=\"this.spxSpeedDial()\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxCapitalize]=\"this.spxCapitalize()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxType() === 'cycleNumeric' ? 'numeric' : 'text'\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxType]=\"this.spxType()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputText\n    ></spx-input-cycle>\n    } @if (this.spxType() === 'date') {\n    <spx-input-date\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutoFocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxMax]=\"this.spxMax()!\"\n      [spxMin]=\"this.spxMin()!\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxSelectDay]=\"this.spxSelectDay()\"\n      [spxSelectMonth]=\"this.spxSelectMonth()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputDate\n    ></spx-input-date>\n    } @if (this.spxType() === 'float') {\n    <spx-input-float\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputFloat\n    ></spx-input-float>\n    } @if (this.spxType() === 'number') {\n    <spx-input-number\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxInputMode()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputNumber\n    ></spx-input-number>\n    } @if (this.spxType() === 'radio') {\n    <spx-input-radio\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxShowLabel]=\"this.spxShowLabel()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputRadio\n    ></spx-input-radio>\n    } @if (this.spxType() === 'time') {\n    <spx-input-time\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxName]=\"this.mappedName()\"\n      [spxReadonly]=\"this.mappedReadonly()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputTime\n    ></spx-input-time>\n    }\n  </div>\n  <div validation-messages>\n    <ng-content></ng-content>\n  </div>\n</spx-input-box>\n" }]
         }], propDecorators: { _handleBlurEvent: [{
                 type: HostListener,
                 args: ['focusout']