@softpak/components 21.3.18 → 21.3.19

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

@@ -10,11 +10,11 @@ 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 { DateTime } from 'luxon';
-import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
 import { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';
 import { TranslatePipe } from '@ngx-translate/core';
 import { spxTextSelect } from '@softpak/components/spx-translate';
+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';
 
@@ -329,6 +329,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 //     requiredPositions: [false, false, false, true, true, true, true]
 //   }
 
+class SpxInputCheckboxComponent {
+    constructor() {
+        this.spxReadonly = input(false, ...(ngDevMode ? [{ debugName: "spxReadonly" }] : []));
+        this.spxText = input(...(ngDevMode ? [undefined, { debugName: "spxText" }] : []));
+        this.spxIcon = input(...(ngDevMode ? [undefined, { debugName: "spxIcon" }] : []));
+        this.spxIconClass = input(...(ngDevMode ? [undefined, { debugName: "spxIconClass" }] : []));
+        this.spxBgClass = input(...(ngDevMode ? [undefined, { debugName: "spxBgClass" }] : []));
+        this.spxSelectedBgClass = input(...(ngDevMode ? [undefined, { debugName: "spxSelectedBgClass" }] : []));
+        this.spxTextSelect = spxTextSelect;
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.faCheck = faCheck;
+    }
+    get checked() {
+        return this.value()?.value === true;
+    }
+    toggle() {
+        if (this.spxReadonly())
+            return;
+        this.value.set({ value: !this.checked });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SpxInputCheckboxComponent, isStandalone: true, selector: "spx-input-checkbox", inputs: { spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxText: { classPropertyName: "spxText", publicName: "spxText", isSignal: true, isRequired: false, transformFunction: null }, spxIcon: { classPropertyName: "spxIcon", publicName: "spxIcon", isSignal: true, isRequired: false, transformFunction: null }, spxIconClass: { classPropertyName: "spxIconClass", publicName: "spxIconClass", isSignal: true, isRequired: false, transformFunction: null }, spxBgClass: { classPropertyName: "spxBgClass", publicName: "spxBgClass", isSignal: true, isRequired: false, transformFunction: null }, spxSelectedBgClass: { classPropertyName: "spxSelectedBgClass", publicName: "spxSelectedBgClass", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"flex items-center gap-3 w-full rounded p-3 text-sm text-gray-900 outline-none text-left relative overflow-hidden\"\n  [class.bg-sky-100]=\"!spxReadonly() && !checked && !spxBgClass()\"\n  [class.hover:bg-sky-300]=\"!spxReadonly()\"\n  [class.active:bg-sky-300]=\"!spxReadonly()\"\n  [class.bg-gray-200]=\"spxReadonly()\"\n  [class.cursor-not-allowed]=\"spxReadonly()\"\n  [class.opacity-60]=\"spxReadonly()\"\n  [ngClass]=\"(!spxReadonly() && checked && spxSelectedBgClass()) ? spxSelectedBgClass()! : ((!spxReadonly() && !checked && spxBgClass()) ? spxBgClass()! : '')\"\n  (click)=\"toggle()\"\n>\n  <span\n    class=\"flex-none flex items-center justify-center w-5 h-5 rounded border-2\"\n    [class.border-teal-500]=\"checked\"\n    [class.bg-teal-500]=\"checked\"\n    [class.border-gray-400]=\"!checked\"\n    [class.bg-white]=\"!checked\"\n  >\n    @if (checked) {\n      <fa-icon [icon]=\"faCheck\" class=\"text-white text-xs\"></fa-icon>\n    }\n  </span>\n  @if (spxText()) {\n    <span>{{ spxText() }}</span>\n  } @else {\n    <span>{{ spxTextSelect | translate | capitalize }}</span>\n  }\n  @if (spxIcon()) {\n    <fa-icon [icon]=\"spxIcon()!\" class=\"absolute right-2 top-1/2 -translate-y-1/2 text-lg opacity-30\" [ngClass]=\"spxIconClass() ?? ''\"></fa-icon>\n  }\n</button>\n", dependencies: [{ kind: "component", type: 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spx-input-checkbox', standalone: true, imports: [
+                        FaIconComponent,
+                        NgClass,
+                        SpxCapitalizePipe,
+                        TranslatePipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  class=\"flex items-center gap-3 w-full rounded p-3 text-sm text-gray-900 outline-none text-left relative overflow-hidden\"\n  [class.bg-sky-100]=\"!spxReadonly() && !checked && !spxBgClass()\"\n  [class.hover:bg-sky-300]=\"!spxReadonly()\"\n  [class.active:bg-sky-300]=\"!spxReadonly()\"\n  [class.bg-gray-200]=\"spxReadonly()\"\n  [class.cursor-not-allowed]=\"spxReadonly()\"\n  [class.opacity-60]=\"spxReadonly()\"\n  [ngClass]=\"(!spxReadonly() && checked && spxSelectedBgClass()) ? spxSelectedBgClass()! : ((!spxReadonly() && !checked && spxBgClass()) ? spxBgClass()! : '')\"\n  (click)=\"toggle()\"\n>\n  <span\n    class=\"flex-none flex items-center justify-center w-5 h-5 rounded border-2\"\n    [class.border-teal-500]=\"checked\"\n    [class.bg-teal-500]=\"checked\"\n    [class.border-gray-400]=\"!checked\"\n    [class.bg-white]=\"!checked\"\n  >\n    @if (checked) {\n      <fa-icon [icon]=\"faCheck\" class=\"text-white text-xs\"></fa-icon>\n    }\n  </span>\n  @if (spxText()) {\n    <span>{{ spxText() }}</span>\n  } @else {\n    <span>{{ spxTextSelect | translate | capitalize }}</span>\n  }\n  @if (spxIcon()) {\n    <fa-icon [icon]=\"spxIcon()!\" class=\"absolute right-2 top-1/2 -translate-y-1/2 text-lg opacity-30\" [ngClass]=\"spxIconClass() ?? ''\"></fa-icon>\n  }\n</button>\n" }]
+        }], propDecorators: { spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxText: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxText", required: false }] }], spxIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxIcon", required: false }] }], spxIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxIconClass", required: false }] }], spxBgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxBgClass", required: false }] }], spxSelectedBgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSelectedBgClass", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
 class SpxInputCycleComponent {
     setT(fn, ms = 0) {
         const id = window.setTimeout(() => {
@@ -918,7 +951,7 @@ class SpxInputDateComponent {
         this.selectedDay.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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", "spxIcon", "spxIconClass", "spxBgClass"] }, { 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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", "spxIcon", "spxIconClass", "spxBgClass", "spxSelectedBgClass"] }, { 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: "21.1.0", ngImport: i0, type: SpxInputDateComponent, decorators: [{
             type: Component,
@@ -1150,47 +1183,15 @@ class SpxInputRadioComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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      [spxIcon]=\"valuePair?.icon\"\n      [spxIconClass]=\"valuePair?.iconClass\"\n      [spxBgClass]=\"valuePair?.bgClass\"\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", "spxIcon", "spxIconClass", "spxBgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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      [spxIcon]=\"valuePair?.icon\"\n      [spxIconClass]=\"valuePair?.iconClass\"\n      [spxBgClass]=\"valuePair?.bgClass\"\n      [spxSelectedBgClass]=\"valuePair?.selectedBgClass\"\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", "spxIcon", "spxIconClass", "spxBgClass", "spxSelectedBgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-input-radio', standalone: true, imports: [
                         SpxSuggestionComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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      [spxIcon]=\"valuePair?.icon\"\n      [spxIconClass]=\"valuePair?.iconClass\"\n      [spxBgClass]=\"valuePair?.bgClass\"\n      (click)=\"this.handleSuggestionClick(valuePair)\">\n      {{valuePair?.description}}\n    </spx-suggestion>\n  }\n</div>" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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      [spxIcon]=\"valuePair?.icon\"\n      [spxIconClass]=\"valuePair?.iconClass\"\n      [spxBgClass]=\"valuePair?.bgClass\"\n      [spxSelectedBgClass]=\"valuePair?.selectedBgClass\"\n      (click)=\"this.handleSuggestionClick(valuePair)\">\n      {{valuePair?.description}}\n    </spx-suggestion>\n  }\n</div>" }]
         }], propDecorators: { spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxShowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowLabel", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSuggestions", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], spxElementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxElementId", required: false }] }] } });
 
-class SpxInputCheckboxComponent {
-    constructor() {
-        this.spxReadonly = input(false, ...(ngDevMode ? [{ debugName: "spxReadonly" }] : []));
-        this.spxText = input(...(ngDevMode ? [undefined, { debugName: "spxText" }] : []));
-        this.spxIcon = input(...(ngDevMode ? [undefined, { debugName: "spxIcon" }] : []));
-        this.spxIconClass = input(...(ngDevMode ? [undefined, { debugName: "spxIconClass" }] : []));
-        this.spxBgClass = input(...(ngDevMode ? [undefined, { debugName: "spxBgClass" }] : []));
-        this.spxTextSelect = spxTextSelect;
-        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
-        this.faCheck = faCheck;
-    }
-    get checked() {
-        return this.value()?.value === true;
-    }
-    toggle() {
-        if (this.spxReadonly())
-            return;
-        this.value.set({ value: !this.checked });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SpxInputCheckboxComponent, isStandalone: true, selector: "spx-input-checkbox", inputs: { spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxText: { classPropertyName: "spxText", publicName: "spxText", isSignal: true, isRequired: false, transformFunction: null }, spxIcon: { classPropertyName: "spxIcon", publicName: "spxIcon", isSignal: true, isRequired: false, transformFunction: null }, spxIconClass: { classPropertyName: "spxIconClass", publicName: "spxIconClass", isSignal: true, isRequired: false, transformFunction: null }, spxBgClass: { classPropertyName: "spxBgClass", publicName: "spxBgClass", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"flex items-center gap-3 w-full rounded p-3 text-sm text-gray-900 outline-none text-left relative overflow-hidden\"\n  [class.bg-sky-100]=\"!spxReadonly() && !spxBgClass()\"\n  [class.hover:bg-sky-300]=\"!spxReadonly()\"\n  [class.active:bg-sky-300]=\"!spxReadonly()\"\n  [class.bg-gray-200]=\"spxReadonly()\"\n  [class.cursor-not-allowed]=\"spxReadonly()\"\n  [class.opacity-60]=\"spxReadonly()\"\n  [ngClass]=\"(!spxReadonly() && spxBgClass()) ? spxBgClass()! : ''\"\n  (click)=\"toggle()\"\n>\n  <span\n    class=\"flex-none flex items-center justify-center w-5 h-5 rounded border-2\"\n    [class.border-teal-500]=\"checked\"\n    [class.bg-teal-500]=\"checked\"\n    [class.border-gray-400]=\"!checked\"\n    [class.bg-white]=\"!checked\"\n  >\n    @if (checked) {\n      <fa-icon [icon]=\"faCheck\" class=\"text-white text-xs\"></fa-icon>\n    }\n  </span>\n  @if (spxText()) {\n    <span>{{ spxText() }}</span>\n  } @else {\n    <span>{{ spxTextSelect | translate | capitalize }}</span>\n  }\n  @if (spxIcon()) {\n    <fa-icon [icon]=\"spxIcon()!\" class=\"absolute right-2 top-1/2 -translate-y-1/2 text-lg opacity-30\" [ngClass]=\"spxIconClass() ?? ''\"></fa-icon>\n  }\n</button>\n", dependencies: [{ kind: "component", type: 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spx-input-checkbox', standalone: true, imports: [
-                        FaIconComponent,
-                        NgClass,
-                        SpxCapitalizePipe,
-                        TranslatePipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  class=\"flex items-center gap-3 w-full rounded p-3 text-sm text-gray-900 outline-none text-left relative overflow-hidden\"\n  [class.bg-sky-100]=\"!spxReadonly() && !spxBgClass()\"\n  [class.hover:bg-sky-300]=\"!spxReadonly()\"\n  [class.active:bg-sky-300]=\"!spxReadonly()\"\n  [class.bg-gray-200]=\"spxReadonly()\"\n  [class.cursor-not-allowed]=\"spxReadonly()\"\n  [class.opacity-60]=\"spxReadonly()\"\n  [ngClass]=\"(!spxReadonly() && spxBgClass()) ? spxBgClass()! : ''\"\n  (click)=\"toggle()\"\n>\n  <span\n    class=\"flex-none flex items-center justify-center w-5 h-5 rounded border-2\"\n    [class.border-teal-500]=\"checked\"\n    [class.bg-teal-500]=\"checked\"\n    [class.border-gray-400]=\"!checked\"\n    [class.bg-white]=\"!checked\"\n  >\n    @if (checked) {\n      <fa-icon [icon]=\"faCheck\" class=\"text-white text-xs\"></fa-icon>\n    }\n  </span>\n  @if (spxText()) {\n    <span>{{ spxText() }}</span>\n  } @else {\n    <span>{{ spxTextSelect | translate | capitalize }}</span>\n  }\n  @if (spxIcon()) {\n    <fa-icon [icon]=\"spxIcon()!\" class=\"absolute right-2 top-1/2 -translate-y-1/2 text-lg opacity-30\" [ngClass]=\"spxIconClass() ?? ''\"></fa-icon>\n  }\n</button>\n" }]
-        }], propDecorators: { spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxText: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxText", required: false }] }], spxIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxIcon", required: false }] }], spxIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxIconClass", required: false }] }], spxBgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxBgClass", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
-
 class SpxInputTimeModalComponent {
     constructor(modalController) {
         this.modalController = modalController;
@@ -1351,6 +1352,7 @@ class SpxInputComponent {
         this.spxCheckboxIcon = input(...(ngDevMode ? [undefined, { debugName: "spxCheckboxIcon" }] : []));
         this.spxCheckboxIconClass = input(...(ngDevMode ? [undefined, { debugName: "spxCheckboxIconClass" }] : []));
         this.spxCheckboxBgClass = input(...(ngDevMode ? [undefined, { debugName: "spxCheckboxBgClass" }] : []));
+        this.spxCheckboxSelectedBgClass = input(...(ngDevMode ? [undefined, { debugName: "spxCheckboxSelectedBgClass" }] : []));
         this.value = signal({ value: null, description: null }, ...(ngDevMode ? [{ debugName: "value" }] : []));
         this.spxClear = output();
         this.spxEdit = output();
@@ -1481,13 +1483,13 @@ class SpxInputComponent {
         this.onTouched = fn;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }, spxLeftIcon: { classPropertyName: "spxLeftIcon", publicName: "spxLeftIcon", 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 }, spxCheckboxText: { classPropertyName: "spxCheckboxText", publicName: "spxCheckboxText", isSignal: true, isRequired: false, transformFunction: null }, spxCheckboxIcon: { classPropertyName: "spxCheckboxIcon", publicName: "spxCheckboxIcon", isSignal: true, isRequired: false, transformFunction: null }, spxCheckboxIconClass: { classPropertyName: "spxCheckboxIconClass", publicName: "spxCheckboxIconClass", isSignal: true, isRequired: false, transformFunction: null }, spxCheckboxBgClass: { classPropertyName: "spxCheckboxBgClass", publicName: "spxCheckboxBgClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClear: "spxClear", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch", spxBlur: "spxBlur" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }, spxLeftIcon: { classPropertyName: "spxLeftIcon", publicName: "spxLeftIcon", 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 }, spxCheckboxText: { classPropertyName: "spxCheckboxText", publicName: "spxCheckboxText", isSignal: true, isRequired: false, transformFunction: null }, spxCheckboxIcon: { classPropertyName: "spxCheckboxIcon", publicName: "spxCheckboxIcon", isSignal: true, isRequired: false, transformFunction: null }, spxCheckboxIconClass: { classPropertyName: "spxCheckboxIconClass", publicName: "spxCheckboxIconClass", isSignal: true, isRequired: false, transformFunction: null }, spxCheckboxBgClass: { classPropertyName: "spxCheckboxBgClass", publicName: "spxCheckboxBgClass", isSignal: true, isRequired: false, transformFunction: null }, spxCheckboxSelectedBgClass: { classPropertyName: "spxCheckboxSelectedBgClass", publicName: "spxCheckboxSelectedBgClass", 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 }, { 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  [spxLeftIcon]=\"this.spxLeftIcon()\"\n  [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\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  <ng-content select=\"[spxInputLeftIcon]\"></ng-content>\n  <div controls>\n    @if (this.showInputText()) {\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      [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\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.showInputCycle()) {\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.showInputDate()) {\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.showInputFloat()) {\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.showInputNumber()) {\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.showInputRadio()) {\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.showInputTime()) {\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    } @if (this.showInputCheckbox()) {\n    <spx-input-checkbox\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxText]=\"this.spxCheckboxText()\"\n      [spxIcon]=\"this.spxCheckboxIcon()\"\n      [spxIconClass]=\"this.spxCheckboxIconClass()\"\n      [spxBgClass]=\"this.spxCheckboxBgClass()\"\n      [value]=\"value()\"\n      #spxInputCheckbox\n    ></spx-input-checkbox>\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", "spxLeftIcon", "spxMatchButtonXlHeight", "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: SpxInputCheckboxComponent, selector: "spx-input-checkbox", inputs: ["spxReadonly", "spxText", "spxIcon", "spxIconClass", "spxBgClass", "value"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxSpeedDial", "spxName", "spxMatchButtonXlHeight", "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  [spxLeftIcon]=\"this.spxLeftIcon()\"\n  [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\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  <ng-content select=\"[spxInputLeftIcon]\"></ng-content>\n  <div controls>\n    @if (this.showInputText()) {\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      [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\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.showInputCycle()) {\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.showInputDate()) {\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.showInputFloat()) {\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.showInputNumber()) {\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.showInputRadio()) {\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.showInputTime()) {\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    } @if (this.showInputCheckbox()) {\n    <spx-input-checkbox\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxText]=\"this.spxCheckboxText()\"\n      [spxIcon]=\"this.spxCheckboxIcon()\"\n      [spxIconClass]=\"this.spxCheckboxIconClass()\"\n      [spxBgClass]=\"this.spxCheckboxBgClass()\"\n      [spxSelectedBgClass]=\"this.spxCheckboxSelectedBgClass()\"\n      [value]=\"value()\"\n      #spxInputCheckbox\n    ></spx-input-checkbox>\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", "spxLeftIcon", "spxMatchButtonXlHeight", "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: SpxInputCheckboxComponent, selector: "spx-input-checkbox", inputs: ["spxReadonly", "spxText", "spxIcon", "spxIconClass", "spxBgClass", "spxSelectedBgClass", "value"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxSpeedDial", "spxName", "spxMatchButtonXlHeight", "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: "21.1.0", ngImport: i0, type: SpxInputComponent, decorators: [{
             type: Component,
@@ -1510,8 +1512,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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  [spxLeftIcon]=\"this.spxLeftIcon()\"\n  [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\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  <ng-content select=\"[spxInputLeftIcon]\"></ng-content>\n  <div controls>\n    @if (this.showInputText()) {\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      [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\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.showInputCycle()) {\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.showInputDate()) {\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.showInputFloat()) {\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.showInputNumber()) {\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.showInputRadio()) {\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.showInputTime()) {\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    } @if (this.showInputCheckbox()) {\n    <spx-input-checkbox\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxText]=\"this.spxCheckboxText()\"\n      [spxIcon]=\"this.spxCheckboxIcon()\"\n      [spxIconClass]=\"this.spxCheckboxIconClass()\"\n      [spxBgClass]=\"this.spxCheckboxBgClass()\"\n      [value]=\"value()\"\n      #spxInputCheckbox\n    ></spx-input-checkbox>\n    }\n  </div>\n  <div validation-messages>\n    <ng-content></ng-content>\n  </div>\n</spx-input-box>\n" }]
-        }], propDecorators: { spxSpeedDial: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSpeedDial", required: false }] }], spxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLabel", required: false }] }], spxMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMax", required: false }] }], spxMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMin", required: false }] }], spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutocomplete", required: false }] }], spxAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutofocus", required: false }] }], spxInputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxInputMode", required: false }] }], spxPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxPattern", required: false }] }], spxRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxRequired", required: false }] }], spxSelectMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSelectMonth", required: false }] }], spxSelectDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSelectDay", required: false }] }], spxShowEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowEdit", required: false }] }], spxShowHelp: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowHelp", required: false }] }], spxLeftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLeftIcon", required: false }] }], spxShowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowLabel", required: false }] }], spxCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCompact", required: false }] }], spxShowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowClear", required: false }] }], spxShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowSearch", required: false }] }], spxAlert: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAlert", required: false }] }], spxShowValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowValidationMessages", required: false }] }], spxStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxStep", required: false }] }], spxSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSuggestions", required: false }] }], spxType: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxType", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxCapitalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCapitalize", required: false }] }], spxCycleConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCycleConfig", required: false }] }], spxCheckboxText: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxText", required: false }] }], spxCheckboxIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxIcon", required: false }] }], spxCheckboxIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxIconClass", required: false }] }], spxCheckboxBgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxBgClass", required: false }] }], spxClear: [{ type: i0.Output, args: ["spxClear"] }], spxEdit: [{ type: i0.Output, args: ["spxEdit"] }], spxHelp: [{ type: i0.Output, args: ["spxHelp"] }], spxSearch: [{ type: i0.Output, args: ["spxSearch"] }], spxBlur: [{ type: i0.Output, args: ["spxBlur"] }], floatInput: [{ type: i0.ViewChild, args: ["spxInputFloat", { isSignal: true }] }], numberInput: [{ type: i0.ViewChild, args: ["spxInputNumber", { isSignal: true }] }], textInput: [{ type: i0.ViewChild, args: ["spxInputText", { isSignal: true }] }], timeInput: [{ type: i0.ViewChild, args: ["spxInputTime", { isSignal: true }] }], radioInput: [{ type: i0.ViewChild, args: ["spxInputRadio", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["spxInputDate", { isSignal: true }] }], cycleInput: [{ type: i0.ViewChild, args: ["spxInputCycle", { isSignal: true }] }], _handleBlurEvent: [{
+                    ], 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  [spxLeftIcon]=\"this.spxLeftIcon()\"\n  [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\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  <ng-content select=\"[spxInputLeftIcon]\"></ng-content>\n  <div controls>\n    @if (this.showInputText()) {\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      [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\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.showInputCycle()) {\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.showInputDate()) {\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.showInputFloat()) {\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.showInputNumber()) {\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.showInputRadio()) {\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.showInputTime()) {\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    } @if (this.showInputCheckbox()) {\n    <spx-input-checkbox\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxText]=\"this.spxCheckboxText()\"\n      [spxIcon]=\"this.spxCheckboxIcon()\"\n      [spxIconClass]=\"this.spxCheckboxIconClass()\"\n      [spxBgClass]=\"this.spxCheckboxBgClass()\"\n      [spxSelectedBgClass]=\"this.spxCheckboxSelectedBgClass()\"\n      [value]=\"value()\"\n      #spxInputCheckbox\n    ></spx-input-checkbox>\n    }\n  </div>\n  <div validation-messages>\n    <ng-content></ng-content>\n  </div>\n</spx-input-box>\n" }]
+        }], propDecorators: { spxSpeedDial: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSpeedDial", required: false }] }], spxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLabel", required: false }] }], spxMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMax", required: false }] }], spxMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMin", required: false }] }], spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutocomplete", required: false }] }], spxAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutofocus", required: false }] }], spxInputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxInputMode", required: false }] }], spxPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxPattern", required: false }] }], spxRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxRequired", required: false }] }], spxSelectMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSelectMonth", required: false }] }], spxSelectDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSelectDay", required: false }] }], spxShowEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowEdit", required: false }] }], spxShowHelp: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowHelp", required: false }] }], spxLeftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLeftIcon", required: false }] }], spxShowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowLabel", required: false }] }], spxCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCompact", required: false }] }], spxShowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowClear", required: false }] }], spxShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowSearch", required: false }] }], spxAlert: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAlert", required: false }] }], spxShowValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowValidationMessages", required: false }] }], spxStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxStep", required: false }] }], spxSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSuggestions", required: false }] }], spxType: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxType", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxCapitalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCapitalize", required: false }] }], spxCycleConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCycleConfig", required: false }] }], spxCheckboxText: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxText", required: false }] }], spxCheckboxIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxIcon", required: false }] }], spxCheckboxIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxIconClass", required: false }] }], spxCheckboxBgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxBgClass", required: false }] }], spxCheckboxSelectedBgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxSelectedBgClass", required: false }] }], spxClear: [{ type: i0.Output, args: ["spxClear"] }], spxEdit: [{ type: i0.Output, args: ["spxEdit"] }], spxHelp: [{ type: i0.Output, args: ["spxHelp"] }], spxSearch: [{ type: i0.Output, args: ["spxSearch"] }], spxBlur: [{ type: i0.Output, args: ["spxBlur"] }], floatInput: [{ type: i0.ViewChild, args: ["spxInputFloat", { isSignal: true }] }], numberInput: [{ type: i0.ViewChild, args: ["spxInputNumber", { isSignal: true }] }], textInput: [{ type: i0.ViewChild, args: ["spxInputText", { isSignal: true }] }], timeInput: [{ type: i0.ViewChild, args: ["spxInputTime", { isSignal: true }] }], radioInput: [{ type: i0.ViewChild, args: ["spxInputRadio", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["spxInputDate", { isSignal: true }] }], cycleInput: [{ type: i0.ViewChild, args: ["spxInputCycle", { isSignal: true }] }], _handleBlurEvent: [{
                 type: HostListener,
                 args: ['focusout']
             }] } });