@softpak/components 20.4.1 → 20.5.1

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';
 
@@ -42,10 +42,10 @@ class SelectedInputService {
     setSelectedElementId(id) {
         this.focusedElement.next(id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SelectedInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SelectedInputService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectedInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectedInputService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SelectedInputService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectedInputService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root', // Ensure the service is available globally
@@ -60,27 +60,27 @@ class SpxInputBoxComponent {
         this.faQuestion = faQuestion;
         this.faTimes = faTimes;
         this.SpxSeverity = SpxSeverityEnum;
-        this.clearButtonName = computed(() => this.spxName() ? `${this.spxName()}__clear_button` : undefined);
-        this.searchButtonName = computed(() => this.spxName() ? `${this.spxName()}__search_button` : undefined);
-        this.spxCompact = input();
-        this.spxLabel = input();
-        this.spxName = input();
-        this.spxReadonly = input(false);
-        this.spxRequired = input();
-        this.spxShowClear = input(true);
-        this.spxShowEdit = input();
-        this.spxShowHelp = input();
-        this.spxShowLabel = input(true);
-        this.spxShowSearch = input();
-        this.spxShowValidationMessages = input();
-        this.spxAlert = input();
-        this.spxValue = model();
+        this.clearButtonName = computed(() => this.spxName() ? `${this.spxName()}__clear_button` : undefined, ...(ngDevMode ? [{ debugName: "clearButtonName" }] : []));
+        this.searchButtonName = computed(() => this.spxName() ? `${this.spxName()}__search_button` : undefined, ...(ngDevMode ? [{ debugName: "searchButtonName" }] : []));
+        this.spxCompact = input(...(ngDevMode ? [undefined, { debugName: "spxCompact" }] : []));
+        this.spxLabel = input(...(ngDevMode ? [undefined, { debugName: "spxLabel" }] : []));
+        this.spxName = input(...(ngDevMode ? [undefined, { debugName: "spxName" }] : []));
+        this.spxReadonly = input(false, ...(ngDevMode ? [{ debugName: "spxReadonly" }] : []));
+        this.spxRequired = input(...(ngDevMode ? [undefined, { debugName: "spxRequired" }] : []));
+        this.spxShowClear = input(true, ...(ngDevMode ? [{ debugName: "spxShowClear" }] : []));
+        this.spxShowEdit = input(...(ngDevMode ? [undefined, { debugName: "spxShowEdit" }] : []));
+        this.spxShowHelp = input(...(ngDevMode ? [undefined, { debugName: "spxShowHelp" }] : []));
+        this.spxShowLabel = input(true, ...(ngDevMode ? [{ debugName: "spxShowLabel" }] : []));
+        this.spxShowSearch = input(...(ngDevMode ? [undefined, { debugName: "spxShowSearch" }] : []));
+        this.spxShowValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "spxShowValidationMessages" }] : []));
+        this.spxAlert = input(...(ngDevMode ? [undefined, { debugName: "spxAlert" }] : []));
+        this.spxValue = model(...(ngDevMode ? [undefined, { debugName: "spxValue" }] : []));
         this.spxClear = output();
         this.spxSearch = output();
         this.spxEdit = output();
         this.spxHelp = output();
-        this.id = signal(0);
-        this.spxIsFocused = signal(false);
+        this.id = signal(0, ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.spxIsFocused = signal(false, ...(ngDevMode ? [{ debugName: "spxIsFocused" }] : []));
         this.spxSetIdInParent = output();
     }
     ngOnInit() {
@@ -110,10 +110,10 @@ class SpxInputBoxComponent {
     onHelp() {
         this.spxHelp.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", 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 }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", 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 }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxValue: "spxValueChange", spxClear: "spxClear", spxSearch: "spxSearch", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSetIdInParent: "spxSetIdInParent" }, host: { listeners: { "click": "handleFocusIn()", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-3\"\n  [class.rounded-none]=\"this.spxShowValidationMessages()\"\n  [class.rounded-t]=\"this.spxShowValidationMessages()\"\n  [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.bg-white]=\"!this.spxReadonly()\"\n  [class.bg-gray-300]=\"this.spxReadonly()\"\n  [class.cursor-not-allowed]=\"this.spxReadonly()\"\n  \n  >\n  <div class=\"flex-auto p-3\"\n    [class.p-0]=\"this.spxCompact()\"\n    [class.flex]=\"this.spxCompact()\"\n    [class.items-center]=\"this.spxCompact()\">\n    @if (this.spxShowLabel()) {\n      <div class=\"font-bold text-sm mb-1 text-gray-800\"\n        [class.mb-0]=\"this.spxCompact()\"\n        [class.px-3]=\"this.spxCompact()\">\n        {{this.spxLabel()}} @if (spxRequired()) {\n        <span class=\"text-red-800\">*</span>\n      }\n    </div>\n  }\n\n  <ng-content select=\"[controls]\"></ng-content>\n</div>\n<div class=\"flex flex-none gap-1 p-1\">\n  @if (this.spxShowEdit()) {\n    <spx-button\n      (spxClick)=\"onEdit()\"\n      [spxFullHeight]=\"true\"\n      [spxSize]=\"'xl'\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowHelp()) {\n    <spx-button\n      (spxClick)=\"onHelp()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowSearch()) {\n    <spx-button\n      (spxClick)=\"onSearch()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxName]=\"searchButtonName()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowClear()) {\n    <spx-button\n      (spxClick)=\"onClear()\"\n      [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n      [spxFullHeight]=\"true\"\n      [spxName]=\"clearButtonName()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n</div>\n</div>\n@if (this.spxShowValidationMessages()) {\n  <div class=\"bg-red-600 rounded-b text-white p-3\">\n    <ng-content select=\"[validation-messages]\"></ng-content>\n  </div>\n}\n@else if (this.spxAlert()) {\n  <div  [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\n  [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\n  [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\n  [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\n  [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\"\n  class=\"rounded-b text-white p-3\">\n  <div>\n    {{this.spxAlert()?.text}}\n  </div>\n</div>\n}", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", 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 }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", 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 }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxValue: "spxValueChange", spxClear: "spxClear", spxSearch: "spxSearch", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSetIdInParent: "spxSetIdInParent" }, host: { listeners: { "click": "handleFocusIn()", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-3\"\n  [class.rounded-none]=\"this.spxShowValidationMessages()\"\n  [class.rounded-t]=\"this.spxShowValidationMessages()\"\n  [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.bg-white]=\"!this.spxReadonly()\"\n  [class.bg-gray-300]=\"this.spxReadonly()\"\n  [class.cursor-not-allowed]=\"this.spxReadonly()\"\n  \n  >\n  <div class=\"flex-auto p-3\"\n    [class.p-0]=\"this.spxCompact()\"\n    [class.flex]=\"this.spxCompact()\"\n    [class.items-center]=\"this.spxCompact()\">\n    @if (this.spxShowLabel()) {\n      <div class=\"font-bold text-sm mb-1 text-gray-800\"\n        [class.mb-0]=\"this.spxCompact()\"\n        [class.px-3]=\"this.spxCompact()\">\n        {{this.spxLabel()}} @if (spxRequired()) {\n        <span class=\"text-red-800\">*</span>\n      }\n    </div>\n  }\n\n  <ng-content select=\"[controls]\"></ng-content>\n</div>\n<div class=\"flex flex-none gap-1 p-1\">\n  @if (this.spxShowEdit()) {\n    <spx-button\n      (spxClick)=\"onEdit()\"\n      [spxFullHeight]=\"true\"\n      [spxSize]=\"'xl'\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowHelp()) {\n    <spx-button\n      (spxClick)=\"onHelp()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowSearch()) {\n    <spx-button\n      (spxClick)=\"onSearch()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxName]=\"searchButtonName()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowClear()) {\n    <spx-button\n      (spxClick)=\"onClear()\"\n      [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n      [spxFullHeight]=\"true\"\n      [spxName]=\"clearButtonName()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n</div>\n</div>\n@if (this.spxShowValidationMessages()) {\n  <div class=\"bg-red-600 rounded-b text-white p-3\">\n    <ng-content select=\"[validation-messages]\"></ng-content>\n  </div>\n}\n@else if (this.spxAlert()) {\n  <div  [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\n  [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\n  [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\n  [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\n  [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\"\n  class=\"rounded-b text-white p-3\">\n  <div>\n    {{this.spxAlert()?.text}}\n  </div>\n</div>\n}", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-input-box', imports: [
                         SpxButtonComponent,
@@ -132,8 +132,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
 
 class SpxDropdownComponent {
     constructor() {
-        this.focusPosition = signal(0);
-        this.spxSuggestions = input([]);
+        this.focusPosition = signal(0, ...(ngDevMode ? [{ debugName: "focusPosition" }] : []));
+        this.spxSuggestions = input([], ...(ngDevMode ? [{ debugName: "spxSuggestions" }] : []));
         this.spxSelect = output();
     }
     ngOnInit() {
@@ -168,10 +168,10 @@ class SpxDropdownComponent {
         this.focusPosition.set(0);
         this.spxSelect.emit(valuePair);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative text-black\">\n  <div\n    class=\"absolute bg-gray-100 left-0 right-0 z-20\">\n    @for (valuePair of this.spxSuggestions(); track valuePair; let i = $index) {\n      <button\n        class=\"text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left\"\n        [class.bg-gray-100]=\"i === this.focusPosition()\"\n        [class.bg-white]=\"i !== this.focusPosition()\"\n        (click)=\"this.handleSuggestionClick(valuePair)\"\n        [attr.tabindex]=\"-1\"\n        [attr.type]=\"'button'\">\n        <div class=\"flex-1 p-1 font-bold text-lg\">{{valuePair?.description}}</div>\n        <spx-button (spxClick)=\"this.handleSuggestionClick(valuePair)\" [spxType]=\"'button'\" [spxTabIndex]=\"-1\">Select</spx-button>\n      </button>\n    }\n  </div>\n</div>", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative text-black\">\n  <div\n    class=\"absolute bg-gray-100 left-0 right-0 z-20\">\n    @for (valuePair of this.spxSuggestions(); track valuePair; let i = $index) {\n      <button\n        class=\"text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left\"\n        [class.bg-gray-100]=\"i === this.focusPosition()\"\n        [class.bg-white]=\"i !== this.focusPosition()\"\n        (click)=\"this.handleSuggestionClick(valuePair)\"\n        [attr.tabindex]=\"-1\"\n        [attr.type]=\"'button'\">\n        <div class=\"flex-1 p-1 font-bold text-lg\">{{valuePair?.description}}</div>\n        <spx-button (spxClick)=\"this.handleSuggestionClick(valuePair)\" [spxType]=\"'button'\" [spxTabIndex]=\"-1\">Select</spx-button>\n      </button>\n    }\n  </div>\n</div>", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         SpxButtonComponent
@@ -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";
@@ -199,23 +201,23 @@ var SpxInputTypeEnum;
 class SpxInputTextComponent {
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
-        this.mappedReadonly = computed(() => this.spxReadonly() ? true : false);
-        this.spxSpeedDial = input([]);
-        this.spxName = input();
-        this.spxAutofocus = input(false);
-        this.spxAutocomplete = input();
-        this.spxInputMode = input();
-        this.spxPattern = input();
-        this.spxSuggestions = input([]);
-        this.spxReadonly = input(undefined);
-        this.spxValidators = input();
-        this.spxCapitalize = input(false);
-        this.spxType = input(SpxInputTypeEnum.text);
-        this.spxWasInternalUpdate = input(false);
-        this.value = model();
-        this.spxElementId = input();
+        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.spxInputMode = input(...(ngDevMode ? [undefined, { debugName: "spxInputMode" }] : []));
+        this.spxPattern = input(...(ngDevMode ? [undefined, { debugName: "spxPattern" }] : []));
+        this.spxSuggestions = input([], ...(ngDevMode ? [{ debugName: "spxSuggestions" }] : []));
+        this.spxReadonly = input(undefined, ...(ngDevMode ? [{ debugName: "spxReadonly" }] : []));
+        this.spxValidators = input(...(ngDevMode ? [undefined, { debugName: "spxValidators" }] : []));
+        this.spxCapitalize = input(false, ...(ngDevMode ? [{ debugName: "spxCapitalize" }] : []));
+        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);
+        this.spxIsFocused = signal(false, ...(ngDevMode ? [{ debugName: "spxIsFocused" }] : []));
         this.inputRef = viewChild.required('input');
     }
     ngOnInit() {
@@ -255,10 +257,10 @@ class SpxInputTextComponent {
             this.spxSetFocus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputTextComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", 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 }); }
+    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.0.1", 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,
@@ -268,26 +270,389 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
                     ], 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 (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-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() {
         this.internalValue = signal({
             first: null,
             second: null,
-        });
-        this.mappedReadonly = computed(() => this.spxReadonly() ? true : false);
-        this.spxName = input();
-        this.spxAutofocus = input(false);
-        this.spxElementId = input();
-        this.spxReadonly = input(undefined);
-        this.spxValidators = input();
-        this.spxStep = input();
-        this.value = model.required();
-        this.spxWasInternalUpdate = input(false);
+        }, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+        this.mappedReadonly = computed(() => this.spxReadonly() ? true : false, ...(ngDevMode ? [{ debugName: "mappedReadonly" }] : []));
+        this.spxName = input(...(ngDevMode ? [undefined, { debugName: "spxName" }] : []));
+        this.spxAutofocus = input(false, ...(ngDevMode ? [{ debugName: "spxAutofocus" }] : []));
+        this.spxElementId = input(...(ngDevMode ? [undefined, { debugName: "spxElementId" }] : []));
+        this.spxReadonly = input(undefined, ...(ngDevMode ? [{ debugName: "spxReadonly" }] : []));
+        this.spxValidators = input(...(ngDevMode ? [undefined, { debugName: "spxValidators" }] : []));
+        this.spxStep = input(...(ngDevMode ? [undefined, { debugName: "spxStep" }] : []));
+        this.value = model.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.spxWasInternalUpdate = input(false, ...(ngDevMode ? [{ debugName: "spxWasInternalUpdate" }] : []));
         this.selectedInputService = inject(SelectedInputService);
-        this.spxIsFocused = signal(false);
-        this.firstInputRef = viewChild('firstInputRef');
-        this.secondInputRef = viewChild('secondInputRef');
-        this.isInternalUpdate = signal(false);
+        this.spxIsFocused = signal(false, ...(ngDevMode ? [{ debugName: "spxIsFocused" }] : []));
+        this.firstInputRef = viewChild('firstInputRef', ...(ngDevMode ? [{ debugName: "firstInputRef" }] : []));
+        this.secondInputRef = viewChild('secondInputRef', ...(ngDevMode ? [{ debugName: "secondInputRef" }] : []));
+        this.isInternalUpdate = signal(false, ...(ngDevMode ? [{ debugName: "isInternalUpdate" }] : []));
     }
     spxSetFocus() {
         this.firstInputRef()?.nativeElement?.focus();
@@ -353,10 +718,10 @@ class SpxInputFloatComponent {
     isNumeric(value) {
         return /^[+-]?\d+(\.\d+)?$/.test(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputFloatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.1", type: SpxInputFloatComponent, isStandalone: true, selector: "spx-input-float", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", 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 }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "firstInputRef", first: true, predicate: ["firstInputRef"], descendants: true, isSignal: true }, { propertyName: "secondInputRef", first: true, predicate: ["secondInputRef"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-end\">\n  <input\n    #firstInputRef\n    class=\"spx-input-float__input\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [attr.pattern]=\"'-?[0-9]*'\"\n    [attr.step]=\"1\"\n    [attr.type]=\"'text'\"\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n    [disabled]=\"this.mappedReadonly()\"\n    [ngModel]=\"this.internalValue().first ? this.internalValue().first : undefined\"\n    (ngModelChange)=\"this.handleInput($event, 1)\" />\n  <span class=\"text-black font-bold text-2xl mx-4\">,</span>\n  <input #secondInputRef\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    class=\"spx-input-float__input\"\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [ngModel]=\"this.internalValue().second ? this.internalValue().second : undefined\"\n    (ngModelChange)=\"this.handleInput($event, 2)\"\n    [attr.step]=\"1\"\n    [attr.type]=\"'text'\"\n    [attr.pattern]=\"'[0-9]*'\"\n    [disabled]=\"this.mappedReadonly()\" />\n</div>", styles: [":host{display:block}.spx-input-float__input{border:1px solid #333333;border-radius:8px;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));flex:1;font-size:20px;font-weight:700;padding:8px;width:100%}.spx-input-float__input:focus{outline:none}\n"], dependencies: [{ 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputFloatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: SpxInputFloatComponent, isStandalone: true, selector: "spx-input-float", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", 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 }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "firstInputRef", first: true, predicate: ["firstInputRef"], descendants: true, isSignal: true }, { propertyName: "secondInputRef", first: true, predicate: ["secondInputRef"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-end\">\n  <input\n    #firstInputRef\n    class=\"spx-input-float__input\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [attr.pattern]=\"'-?[0-9]*'\"\n    [attr.step]=\"1\"\n    [attr.type]=\"'text'\"\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n    [disabled]=\"this.mappedReadonly()\"\n    [ngModel]=\"this.internalValue().first ? this.internalValue().first : undefined\"\n    (ngModelChange)=\"this.handleInput($event, 1)\" />\n  <span class=\"text-black font-bold text-2xl mx-4\">,</span>\n  <input #secondInputRef\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    class=\"spx-input-float__input\"\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [ngModel]=\"this.internalValue().second ? this.internalValue().second : undefined\"\n    (ngModelChange)=\"this.handleInput($event, 2)\"\n    [attr.step]=\"1\"\n    [attr.type]=\"'text'\"\n    [attr.pattern]=\"'[0-9]*'\"\n    [disabled]=\"this.mappedReadonly()\" />\n</div>", styles: [":host{display:block}.spx-input-float__input{border:1px solid #333333;border-radius:8px;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));flex:1;font-size:20px;font-weight:700;padding:8px;width:100%}.spx-input-float__input:focus{outline:none}\n"], dependencies: [{ 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.0.1", ngImport: i0, type: SpxInputFloatComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputFloatComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-input-float', imports: [
                         FormsModule,
@@ -365,17 +730,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
 
 class SpxInputNumberComponent {
     constructor() {
-        this.mappedReadonly = computed(() => this.spxReadonly() ? true : false);
-        this.spxName = input();
-        this.spxAutofocus = input(false);
-        this.spxInputMode = input();
-        this.spxReadonly = input(undefined);
-        this.spxValidators = input();
-        this.spxFocused = input(true);
-        this.spxStep = input();
-        this.value = model.required();
+        this.mappedReadonly = computed(() => this.spxReadonly() ? true : false, ...(ngDevMode ? [{ debugName: "mappedReadonly" }] : []));
+        this.spxName = input(...(ngDevMode ? [undefined, { debugName: "spxName" }] : []));
+        this.spxAutofocus = input(false, ...(ngDevMode ? [{ debugName: "spxAutofocus" }] : []));
+        this.spxInputMode = input(...(ngDevMode ? [undefined, { debugName: "spxInputMode" }] : []));
+        this.spxReadonly = input(undefined, ...(ngDevMode ? [{ debugName: "spxReadonly" }] : []));
+        this.spxValidators = input(...(ngDevMode ? [undefined, { debugName: "spxValidators" }] : []));
+        this.spxFocused = input(true, ...(ngDevMode ? [{ debugName: "spxFocused" }] : []));
+        this.spxStep = input(...(ngDevMode ? [undefined, { debugName: "spxStep" }] : []));
+        this.value = model.required(...(ngDevMode ? [{ debugName: "value" }] : []));
         this.inputRef = viewChild.required('input');
-        this.spxElementId = input();
+        this.spxElementId = input(...(ngDevMode ? [undefined, { debugName: "spxElementId" }] : []));
         this.selectedInputService = inject(SelectedInputService);
     }
     ngOnInit() {
@@ -397,27 +762,27 @@ class SpxInputNumberComponent {
             this.spxSetFocus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.1", type: SpxInputNumberComponent, isStandalone: true, selector: "spx-input-number", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", 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 }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxFocused: { classPropertyName: "spxFocused", publicName: "spxFocused", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, 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=\"spx-input-number__controls\">\n  <input\n    #input\n    class=\"spx-input-number__input\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [class.spx-input-number--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [attr.inputMode]=\"this.spxInputMode() ? this.spxInputMode() : undefined\"\n    [attr.step]=\"this.spxStep() ? this.spxStep() : undefined\"\n    [attr.type]=\"'number'\"\n    [disabled]=\"this.mappedReadonly()\"\n    [ngModel]=\"this.value() ? this.value().value : undefined\"\n    (ngModelChange)=\"this.handleChange($event)\" />\n</div>  ", styles: [":host{display:block}.spx-input-number__input{border:0;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}.spx-input-number__input:focus{outline:none}.spx-input-number__value{color:#0009;font-size:14px}\n"], dependencies: [{ 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: SpxInputNumberComponent, isStandalone: true, selector: "spx-input-number", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", 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 }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxFocused: { classPropertyName: "spxFocused", publicName: "spxFocused", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, 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=\"spx-input-number__controls\">\n  <input\n    #input\n    class=\"spx-input-number__input\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [class.spx-input-number--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [attr.inputMode]=\"this.spxInputMode() ? this.spxInputMode() : undefined\"\n    [attr.step]=\"this.spxStep() ? this.spxStep() : undefined\"\n    [attr.type]=\"'number'\"\n    [disabled]=\"this.mappedReadonly()\"\n    [ngModel]=\"this.value() ? this.value().value : undefined\"\n    (ngModelChange)=\"this.handleChange($event)\" />\n</div>  ", styles: [":host{display:block}.spx-input-number__input{border:0;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}.spx-input-number__input:focus{outline:none}.spx-input-number__value{color:#0009;font-size:14px}\n"], dependencies: [{ 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.0.1", ngImport: i0, type: SpxInputNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputNumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-input-number', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "<div class=\"spx-input-number__controls\">\n  <input\n    #input\n    class=\"spx-input-number__input\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [class.spx-input-number--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [attr.inputMode]=\"this.spxInputMode() ? this.spxInputMode() : undefined\"\n    [attr.step]=\"this.spxStep() ? this.spxStep() : undefined\"\n    [attr.type]=\"'number'\"\n    [disabled]=\"this.mappedReadonly()\"\n    [ngModel]=\"this.value() ? this.value().value : undefined\"\n    (ngModelChange)=\"this.handleChange($event)\" />\n</div>  ", styles: [":host{display:block}.spx-input-number__input{border:0;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}.spx-input-number__input:focus{outline:none}.spx-input-number__value{color:#0009;font-size:14px}\n"] }]
         }] });
 
 class SpxInputRadioComponent {
     constructor() {
-        this.cachedSuggestions = signal([]);
-        this.focusPosition = signal(0);
-        this.spxName = input();
-        this.spxValidators = input();
-        this.spxShowLabel = input(true);
-        this.spxReadonly = input(undefined);
-        this.spxSuggestions = input([]);
-        this.value = model();
+        this.cachedSuggestions = signal([], ...(ngDevMode ? [{ debugName: "cachedSuggestions" }] : []));
+        this.focusPosition = signal(0, ...(ngDevMode ? [{ debugName: "focusPosition" }] : []));
+        this.spxName = input(...(ngDevMode ? [undefined, { debugName: "spxName" }] : []));
+        this.spxValidators = input(...(ngDevMode ? [undefined, { debugName: "spxValidators" }] : []));
+        this.spxShowLabel = input(true, ...(ngDevMode ? [{ debugName: "spxShowLabel" }] : []));
+        this.spxReadonly = input(undefined, ...(ngDevMode ? [{ debugName: "spxReadonly" }] : []));
+        this.spxSuggestions = input([], ...(ngDevMode ? [{ debugName: "spxSuggestions" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
         this.selectedInputService = inject(SelectedInputService);
-        this.spxElementId = input();
-        this.spxIsFocused = signal(false);
+        this.spxElementId = input(...(ngDevMode ? [undefined, { debugName: "spxElementId" }] : []));
+        this.spxIsFocused = signal(false, ...(ngDevMode ? [{ debugName: "spxIsFocused" }] : []));
     }
     ngOnInit() {
         this.selectedInputService.focusedElement$
@@ -482,10 +847,10 @@ class SpxInputRadioComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", 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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid grid-cols-2 gap-2\" [class.mt-3]=\"this.spxShowLabel()\">\n  @for (valuePair of this.cachedSuggestions(); track valuePair; let i = $index) {\n    <spx-suggestion\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSelected]=\"this.value()?.value === valuePair?.value\"\n      [spxTabbable]=\"this.focusPosition() === i\"\n      [spxFocused]=\"(this.focusPosition() === i && this.spxIsFocused())\"\n      (click)=\"this.handleSuggestionClick(valuePair)\">\n      {{valuePair?.description}}\n    </spx-suggestion>\n  }\n</div>", dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", 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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid grid-cols-2 gap-2\" [class.mt-3]=\"this.spxShowLabel()\">\n  @for (valuePair of this.cachedSuggestions(); track valuePair; let i = $index) {\n    <spx-suggestion\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSelected]=\"this.value()?.value === valuePair?.value\"\n      [spxTabbable]=\"this.focusPosition() === i\"\n      [spxFocused]=\"(this.focusPosition() === i && this.spxIsFocused())\"\n      (click)=\"this.handleSuggestionClick(valuePair)\">\n      {{valuePair?.description}}\n    </spx-suggestion>\n  }\n</div>", dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-input-radio', standalone: true, imports: [
                         SpxSuggestionComponent
@@ -495,12 +860,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
 class SpxInputTimeModalComponent {
     constructor(modalController) {
         this.modalController = modalController;
-        this.view = input.required();
-        this.value = input.required();
+        this.view = input.required(...(ngDevMode ? [{ debugName: "view" }] : []));
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
         this.change = output();
         this.faXmark = faXmark;
-        this.hourOptions = signal(Array.from({ length: 24 }, (_, i) => i)); // 0 to 23
-        this.minuteOptions = signal(Array.from({ length: 12 }, (_, i) => i * 5)); // Minutes in incrementen van 5
+        this.hourOptions = signal(Array.from({ length: 24 }, (_, i) => i), ...(ngDevMode ? [{ debugName: "hourOptions" }] : [])); // 0 to 23
+        this.minuteOptions = signal(Array.from({ length: 12 }, (_, i) => i * 5), ...(ngDevMode ? [{ debugName: "minuteOptions" }] : [])); // Minutes in incrementen van 5
         this.typeError = SpxSeverityEnum.error;
         this.hourOptions().push(this.hourOptions().shift());
         this.minuteOptions().push(this.minuteOptions().shift());
@@ -512,10 +877,10 @@ class SpxInputTimeModalComponent {
         this.change.emit(value);
         this.modalController.dismiss(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputTimeModalComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SpxInputTimeModalComponent, isStandalone: true, selector: "spx-input-time-modal", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ion-title>Select {{view()}}</ion-title>\n    <ion-buttons slot=\"end\">\n      <spx-button [spxSeverity]=\"typeError\" (spxClick)=\"closeDialog()\">\n        <fa-icon [icon]=\"faXmark\"></fa-icon>\n      </spx-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content class=\"ion-padding bg-white\">\n  <!-- Uren -->\n  <div class=\"custom-bg grid grid-cols-1 gap-3\">\n    @if (view() === 'hours') {\n      <div class=\"flex-wrap gap-2\">\n        <div class=\"grid grid-cols-3 md:grid-cols-4 gap-3\">\n          @for (hour of hourOptions(); track hour) {\n            <div  class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === hour\" (click)=\"onChange(hour)\">\n              {{ hour }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <!-- Minuten -->\n    @if (view() === 'minutes') {\n      <div class=\"grid grid-cols-1 gap-3\">\n        <div class=\"grid grid-cols-4 md:grid-cols-5 gap-3\">\n          @for (minute of minuteOptions(); track minute) {\n            <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === minute\" (click)=\"onChange(minute)\">\n              {{ minute }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ion-content>", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputTimeModalComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SpxInputTimeModalComponent, isStandalone: true, selector: "spx-input-time-modal", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ion-title>Select {{view()}}</ion-title>\n    <ion-buttons slot=\"end\">\n      <spx-button [spxSeverity]=\"typeError\" (spxClick)=\"closeDialog()\">\n        <fa-icon [icon]=\"faXmark\"></fa-icon>\n      </spx-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content class=\"ion-padding bg-white\">\n  <!-- Uren -->\n  <div class=\"custom-bg grid grid-cols-1 gap-3\">\n    @if (view() === 'hours') {\n      <div class=\"flex-wrap gap-2\">\n        <div class=\"grid grid-cols-3 md:grid-cols-4 gap-3\">\n          @for (hour of hourOptions(); track hour) {\n            <div  class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === hour\" (click)=\"onChange(hour)\">\n              {{ hour }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <!-- Minuten -->\n    @if (view() === 'minutes') {\n      <div class=\"grid grid-cols-1 gap-3\">\n        <div class=\"grid grid-cols-4 md:grid-cols-5 gap-3\">\n          @for (minute of minuteOptions(); track minute) {\n            <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === minute\" (click)=\"onChange(minute)\">\n              {{ minute }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ion-content>", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-input-time-modal', imports: [
                         FontAwesomeModule,
@@ -531,23 +896,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
 class SpxInputTimeComponent {
     constructor(modalController) {
         this.modalController = modalController;
-        this.spxName = input();
-        this.spxAutofocus = input(false);
-        this.spxInputMode = input();
-        this.spxPattern = input();
-        this.spxSuggestions = input([]);
-        this.spxReadonly = input(undefined);
-        this.spxValidators = input();
-        this.spxCapitalize = input(false);
-        this.value = model.required();
+        this.spxName = input(...(ngDevMode ? [undefined, { debugName: "spxName" }] : []));
+        this.spxAutofocus = input(false, ...(ngDevMode ? [{ debugName: "spxAutofocus" }] : []));
+        this.spxInputMode = input(...(ngDevMode ? [undefined, { debugName: "spxInputMode" }] : []));
+        this.spxPattern = input(...(ngDevMode ? [undefined, { debugName: "spxPattern" }] : []));
+        this.spxSuggestions = input([], ...(ngDevMode ? [{ debugName: "spxSuggestions" }] : []));
+        this.spxReadonly = input(undefined, ...(ngDevMode ? [{ debugName: "spxReadonly" }] : []));
+        this.spxValidators = input(...(ngDevMode ? [undefined, { debugName: "spxValidators" }] : []));
+        this.spxCapitalize = input(false, ...(ngDevMode ? [{ debugName: "spxCapitalize" }] : []));
+        this.value = model.required(...(ngDevMode ? [{ debugName: "value" }] : []));
         this.inputRef = viewChild.required('input');
         this.severitySuccess = SpxSeverityEnum.success;
-        this.selectedHour = signal(null);
-        this.selectedMinute = signal(null);
-        this.formattedHour = computed(() => this.selectedHour() !== null && this.selectedHour() < 10 ? `0${this.selectedHour()}` : this.selectedHour());
-        this.formattedMinute = computed(() => this.selectedMinute() !== null && this.selectedMinute() < 10 ? `0${this.selectedMinute()}` : this.selectedMinute());
-        this.hour = computed(() => this.value()?.value ? DateTime.fromISO(this.value().value).hour : null);
-        this.minute = computed(() => this.value()?.value ? DateTime.fromISO(this.value().value).minute : null);
+        this.selectedHour = signal(null, ...(ngDevMode ? [{ debugName: "selectedHour" }] : []));
+        this.selectedMinute = signal(null, ...(ngDevMode ? [{ debugName: "selectedMinute" }] : []));
+        this.formattedHour = computed(() => this.selectedHour() !== null && this.selectedHour() < 10 ? `0${this.selectedHour()}` : this.selectedHour(), ...(ngDevMode ? [{ debugName: "formattedHour" }] : []));
+        this.formattedMinute = computed(() => this.selectedMinute() !== null && this.selectedMinute() < 10 ? `0${this.selectedMinute()}` : this.selectedMinute(), ...(ngDevMode ? [{ debugName: "formattedMinute" }] : []));
+        this.hour = computed(() => this.value()?.value ? DateTime.fromISO(this.value().value).hour : null, ...(ngDevMode ? [{ debugName: "hour" }] : []));
+        this.minute = computed(() => this.value()?.value ? DateTime.fromISO(this.value().value).minute : null, ...(ngDevMode ? [{ debugName: "minute" }] : []));
     }
     ngOnInit() {
         this.componentDidLoad();
@@ -605,294 +970,59 @@ class SpxInputTimeComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputTimeComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.1", type: SpxInputTimeComponent, isStandalone: true, selector: "spx-input-time", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", 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 }, 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, 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  <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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputTimeComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: SpxInputTimeComponent, isStandalone: true, selector: "spx-input-time", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", 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 }, 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, 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  <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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputTimeComponent, decorators: [{
             type: Component,
             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();
-        this.spxMin = input.required();
-        this.spxReadonly = input();
-        this.spxValidators = input();
-        this.spxAutoFocus = input(false);
-        this.value = model({
-            description: "",
-            value: "",
-        });
-        this.spxSelectedStep = signal(stepType.years);
-        this.spxSelectDay = input(false);
-        this.spxSelectMonth = input(true);
-        this.selectedYear = signal(null);
-        this.selectedMonth = signal(null);
-        this.selectedDay = signal(null);
-        this.yearInputComponent = viewChild.required(stepType.years);
-        this.monthInputComponent = viewChild.required(stepType.months);
-        this.dayInputComponent = viewChild.required(stepType.days);
-        this.spxElementId = input();
-        this.selectedInputService = inject(SelectedInputService);
-        this.spxIsFocused = signal(false);
-        this.isInternalUpdate = signal(false);
-        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];
-            }
-        });
-        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: [],
-        });
-    }
-    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.0.1", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", 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.0.1", 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);
-        this.mappedReadonly = computed(() => this.spxReadonly() === true ? true : undefined);
-        this.spxSpeedDial = input([]);
-        this.spxLabel = input('label');
-        this.spxMax = input();
-        this.spxMin = input();
-        this.spxName = input();
-        this.spxReadonly = input(false);
-        this.spxAutocomplete = input();
-        this.spxAutofocus = input(false);
-        this.spxInputMode = input();
-        this.spxPattern = input();
-        this.spxRequired = input(false);
-        this.spxSelectMonth = input(true);
-        this.spxSelectDay = input(true);
-        this.spxShowEdit = input(false);
-        this.spxShowHelp = input(false);
-        this.spxShowLabel = input(true);
-        this.spxCompact = input(false);
-        this.spxShowClear = input(true);
-        this.spxShowSearch = input(false);
-        this.spxAlert = input();
-        this.spxShowValidationMessages = input(false);
-        this.spxStep = input();
-        this.spxSuggestions = input([]);
-        this.spxType = input(SpxInputTypeEnum.text);
-        this.spxValidators = input();
-        this.spxCapitalize = input(false);
-        this.value = signal({ value: null, description: null });
+        this.mappedName = computed(() => this.spxName() ?? undefined, ...(ngDevMode ? [{ debugName: "mappedName" }] : []));
+        this.mappedReadonly = computed(() => this.spxReadonly() === true ? true : undefined, ...(ngDevMode ? [{ debugName: "mappedReadonly" }] : []));
+        this.spxSpeedDial = input([], ...(ngDevMode ? [{ debugName: "spxSpeedDial" }] : []));
+        this.spxLabel = input('label', ...(ngDevMode ? [{ debugName: "spxLabel" }] : []));
+        this.spxMax = input(...(ngDevMode ? [undefined, { debugName: "spxMax" }] : []));
+        this.spxMin = input(...(ngDevMode ? [undefined, { debugName: "spxMin" }] : []));
+        this.spxName = input(...(ngDevMode ? [undefined, { debugName: "spxName" }] : []));
+        this.spxReadonly = input(false, ...(ngDevMode ? [{ debugName: "spxReadonly" }] : []));
+        this.spxAutocomplete = input(...(ngDevMode ? [undefined, { debugName: "spxAutocomplete" }] : []));
+        this.spxAutofocus = input(false, ...(ngDevMode ? [{ debugName: "spxAutofocus" }] : []));
+        this.spxInputMode = input(...(ngDevMode ? [undefined, { debugName: "spxInputMode" }] : []));
+        this.spxPattern = input(...(ngDevMode ? [undefined, { debugName: "spxPattern" }] : []));
+        this.spxRequired = input(false, ...(ngDevMode ? [{ debugName: "spxRequired" }] : []));
+        this.spxSelectMonth = input(true, ...(ngDevMode ? [{ debugName: "spxSelectMonth" }] : []));
+        this.spxSelectDay = input(true, ...(ngDevMode ? [{ debugName: "spxSelectDay" }] : []));
+        this.spxShowEdit = input(false, ...(ngDevMode ? [{ debugName: "spxShowEdit" }] : []));
+        this.spxShowHelp = input(false, ...(ngDevMode ? [{ debugName: "spxShowHelp" }] : []));
+        this.spxShowLabel = input(true, ...(ngDevMode ? [{ debugName: "spxShowLabel" }] : []));
+        this.spxCompact = input(false, ...(ngDevMode ? [{ debugName: "spxCompact" }] : []));
+        this.spxShowClear = input(true, ...(ngDevMode ? [{ debugName: "spxShowClear" }] : []));
+        this.spxShowSearch = input(false, ...(ngDevMode ? [{ debugName: "spxShowSearch" }] : []));
+        this.spxAlert = input(...(ngDevMode ? [undefined, { debugName: "spxAlert" }] : []));
+        this.spxShowValidationMessages = input(false, ...(ngDevMode ? [{ debugName: "spxShowValidationMessages" }] : []));
+        this.spxStep = input(...(ngDevMode ? [undefined, { debugName: "spxStep" }] : []));
+        this.spxSuggestions = input([], ...(ngDevMode ? [{ debugName: "spxSuggestions" }] : []));
+        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();
         this.spxHelp = output();
         this.spxSearch = output();
         this.spxBlur = output();
-        this.floatInput = viewChild("spxInputFloat");
-        this.numberInput = viewChild("spxInputNumber");
-        this.textInput = viewChild("spxInputText");
-        this.timeInput = viewChild("spxInputTime");
-        this.radioInput = viewChild("spxInputRadio");
-        this.dateInput = viewChild("spxInputDate");
-        this.spxElementId = signal(0);
+        this.floatInput = viewChild("spxInputFloat", ...(ngDevMode ? [{ debugName: "floatInput" }] : []));
+        this.numberInput = viewChild("spxInputNumber", ...(ngDevMode ? [{ debugName: "numberInput" }] : []));
+        this.textInput = viewChild("spxInputText", ...(ngDevMode ? [{ debugName: "textInput" }] : []));
+        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 = () => { };
         this.onTouched = () => { };
@@ -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;
@@ -980,21 +1114,22 @@ class SpxInputComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", 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.ɵ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 }, 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.0.1", ngImport: i0, type: SpxInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SpxInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-input', host: {
                         '(spxChange)': 'handleChangeEvent($event)'
                     }, imports: [
                         SpxInputBoxComponent,
+                        SpxInputCycleComponent,
                         SpxInputDateComponent,
                         SpxInputFloatComponent,
                         SpxInputNumberComponent,
@@ -1007,7 +1142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", 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']