@softpak/components 18.6.1 → 18.6.3

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, HostListener, ViewChild } from '@angular/core';
+import { EventEmitter, Component, Input, Output, HostListener, ViewChild, input, model, output, signal, computed } from '@angular/core';
 import { SpxButtonComponent } from '@softpak/components/spx-button';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -8,8 +8,8 @@ import { fromEvent } from 'rxjs';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
-import { DateTime } from 'luxon';
 import { valuePairToValue, SpxSeverityEnum } from '@softpak/components/spx-helpers';
+import { DateTime } from 'luxon';
 import * as i1$2 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
 
@@ -526,299 +526,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['input', { static: true }]
             }] } });
 
-class SpxInputDateComponent {
-    constructor() {
-        this.spxReadonly = false;
-        this.spxFocused = true;
-        this.spxSelectMonth = true;
-        this.spxSelectDay = true;
-        this.spxChange = new EventEmitter();
-        this.spxFocus = new EventEmitter();
-        this.spxSelectStep = 'years';
-        this.spxInternalValue = {};
-        this.spxSuggestions = {
-            years: [],
-            months: [{
-                    description: 'Jan',
-                    value: 1,
-                }, {
-                    description: 'Feb',
-                    value: 2,
-                }, {
-                    description: 'Mar',
-                    value: 3,
-                }, {
-                    description: 'Apr',
-                    value: 4,
-                }, {
-                    description: 'May',
-                    value: 5,
-                }, {
-                    description: 'Jun',
-                    value: 6,
-                }, {
-                    description: 'Jul',
-                    value: 7,
-                }, {
-                    description: 'Aug',
-                    value: 8,
-                }, {
-                    description: 'Sep',
-                    value: 9,
-                }, {
-                    description: 'Oct',
-                    value: 10,
-                }, {
-                    description: 'Nov',
-                    value: 11,
-                }, {
-                    description: 'Dec',
-                    value: 12,
-                }],
-            days: [],
-        };
-        this.spxWasInternalUpdate = false;
-    }
-    async spxSetFocus() {
-        // this.elYear.focus();
-    }
-    // @Watch('spxValidators') watchSpxValidators(newValue) {
-    //   console.log('validators', newValue);
-    // }
-    // @Watch('value') watchValue(newValue) {
-    //   if (this.spxWasInternalUpdate) {
-    //     this.spxWasInternalUpdate = false;
-    //   } else {
-    //     const parsedValue = DateTime.fromISO(newValue?.value);
-    //     this.spxInternalValue.years = parsedValue.year;
-    //     this.spxInternalValue.months = parsedValue.month;
-    //     this.spxInternalValue.days = parsedValue.day;
-    //     this.spxSelectStep = 'years';
-    //   }
-    // }
-    ngOnInit() {
-        const parsedValue = this.value ? DateTime.fromISO(this.value.value) : DateTime.now();
-        this.suggestYears();
-        this.spxInternalValue.years = parsedValue.year;
-        this.spxInternalValue.months = parsedValue.month;
-        this.spxInternalValue.days = parsedValue.day;
-    }
-    handleDayInput(event) {
-        this.spxInternalValue.days = event.target ? event.target.value : null;
-        this.updateValue();
-    }
-    handleMonthInput(event) {
-        this.spxInternalValue.months = event.target ? event.target.value : null;
-        this.afterMonthChange();
-    }
-    afterMonthChange() {
-        if (this.spxInternalValue.months.toString().length === 2 && this.spxSelectDay && this.spxLastKeyPressed !== 38 && this.spxLastKeyPressed !== 40) {
-            this.elDay?.focus();
-        }
-        this.updateValue();
-    }
-    handleYearInput(event) {
-        this.spxInternalValue.years = event.target ? event.target.value : null;
-        this.afterYearChange();
-    }
-    afterYearChange() {
-        if (this.spxInternalValue.years.toString().length === 4 && this.spxSelectMonth && this.spxLastKeyPressed !== 38 && this.spxLastKeyPressed !== 40) {
-            this.elMonth?.focus();
-        }
-        this.updateValue();
-    }
-    handleInput(event) {
-        this.setValue(event.target ? event.target.value : null);
-    }
-    handleFocus(step) {
-        this.spxSelectStep = step;
-        this.spxFocus.emit();
-    }
-    handleKeyDown(event) {
-        this.spxLastKeyPressed = event.which;
-    }
-    handleSuggestionClick(value) {
-        this.spxLastKeyPressed = null;
-        this.spxInternalValue[this.spxSelectStep] = value;
-        this.updateValue();
-        this.doneWithField();
-    }
-    updateValue() {
-        const concatenatedValue = `${this.spxInternalValue.years ? this.spxInternalValue.years : ``}${this.spxInternalValue.months ? `-${this.spxInternalValue.months < 10 ? `0${this.spxInternalValue.months}` : this.spxInternalValue.months}` : ``}${this.spxInternalValue.days ? `-${this.spxInternalValue.days < 10 ? `0${this.spxInternalValue.days}` : this.spxInternalValue.days}` : ``}`;
-        const parsedValue = DateTime.fromISO(concatenatedValue);
-        this.spxWasInternalUpdate = true;
-        this.value = {
-            description: parsedValue.toISO(),
-            value: parsedValue.toISO(),
-        };
-        this.spxChange.emit(this.value);
-    }
-    doneWithField() {
-        if (this.spxSelectStep === 'days') {
-            this.spxSelectStep = 'years';
-        }
-        else if (this.spxSelectStep === 'months') {
-            this.spxSelectStep = this.spxSelectDay ? 'days' : 'years';
-            this.afterMonthChange();
-        }
-        else if (this.spxSelectStep === 'years') {
-            this.afterYearChange();
-            this.spxSelectStep = this.spxSelectMonth ? 'months' : 'years';
-        }
-    }
-    setValue(value) {
-        this.spxInternalValue = value;
-        const parsed = DateTime.fromISO(value);
-        this.value = {
-            description: parsed.toISO(),
-            value: parsed.toISO(),
-        };
-        this.spxChange.emit(this.value);
-        this.spxWasInternalUpdate = true;
-    }
-    suggestYears() {
-        console.log('suggest years', this.spxMin, this.spxMax);
-        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,
-            });
-        }
-        console.log('suggest years', this.spxSuggestions);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputDateComponent, isStandalone: true, selector: "spx-input-date", inputs: { spxMax: "spxMax", spxMin: "spxMin", spxName: "spxName", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxFocused: "spxFocused", spxSelectMonth: "spxSelectMonth", spxSelectDay: "spxSelectDay", value: "value", spxLastKeyPressed: "spxLastKeyPressed", spxSelectStep: "spxSelectStep", spxInternalValue: "spxInternalValue", spxSuggestions: "spxSuggestions", spxWasInternalUpdate: "spxWasInternalUpdate" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, ngImport: i0, template: `<div class='spx-input-date__controls'>
-    <input
-      class='spx-input-date__input'
-      [attr.value]="this.spxInternalValue.years"
-      (focus)="this.handleFocus('years')"
-      (input)="this.handleYearInput($event)"
-      (keyDown)="this.handleKeyDown($event)"
-      [attr.type]="'number'"
-      [attr.min]="1900"
-      [attr.max]="2100"
-      [attr.step]="1"
-      />
-    <div class='spx-input-date__control-label'>Year</div>
-    @if (this.spxSelectMonth) {
-      <input
-        class='spx-input-date__input'
-        [attr.value]="this.spxInternalValue.months"
-        (focus)="this.handleFocus('months')"
-        (input)="this.handleMonthInput($event)"
-        (keyDown)="this.handleKeyDown($event)"
-        [attr.type]="'number'"
-        [attr.min]="1"
-        [attr.max]="12"
-        [attr.step]="1" />
-    }
-    <div class='spx-input-date__control-label'>Month</div>
-    @if (this.spxSelectDay) {
-      <input
-        class='spx-input-date__input'
-        [attr.value]="this.spxInternalValue.days"
-        (focus)="this.handleFocus('days')"
-        (input)="this.handleDayInput($event)"
-        (keyDown)="this.handleKeyDown($event)"
-        [attr.type]="'number'"
-        [attr.min]="1"
-        [attr.max]="31"
-        [attr.step]="1" />
-      <div class='spx-input-date__control-label'>Days</div>
-    }
-  </div>
-  <div class='spx-input-date__suggestions'>
-    @for (valuePair of spxSuggestions[spxSelectStep]; track valuePair) {
-      <spx-suggestion
-      (click)="this.handleSuggestionClick(valuePair.value)">{{valuePair?.description}}</spx-suggestion>
-    }
-  </div>`, isInline: true, styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"], dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputDateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spx-input-date', standalone: true, imports: [
-                        SpxSuggestionComponent
-                    ], template: `<div class='spx-input-date__controls'>
-    <input
-      class='spx-input-date__input'
-      [attr.value]="this.spxInternalValue.years"
-      (focus)="this.handleFocus('years')"
-      (input)="this.handleYearInput($event)"
-      (keyDown)="this.handleKeyDown($event)"
-      [attr.type]="'number'"
-      [attr.min]="1900"
-      [attr.max]="2100"
-      [attr.step]="1"
-      />
-    <div class='spx-input-date__control-label'>Year</div>
-    @if (this.spxSelectMonth) {
-      <input
-        class='spx-input-date__input'
-        [attr.value]="this.spxInternalValue.months"
-        (focus)="this.handleFocus('months')"
-        (input)="this.handleMonthInput($event)"
-        (keyDown)="this.handleKeyDown($event)"
-        [attr.type]="'number'"
-        [attr.min]="1"
-        [attr.max]="12"
-        [attr.step]="1" />
-    }
-    <div class='spx-input-date__control-label'>Month</div>
-    @if (this.spxSelectDay) {
-      <input
-        class='spx-input-date__input'
-        [attr.value]="this.spxInternalValue.days"
-        (focus)="this.handleFocus('days')"
-        (input)="this.handleDayInput($event)"
-        (keyDown)="this.handleKeyDown($event)"
-        [attr.type]="'number'"
-        [attr.min]="1"
-        [attr.max]="31"
-        [attr.step]="1" />
-      <div class='spx-input-date__control-label'>Days</div>
-    }
-  </div>
-  <div class='spx-input-date__suggestions'>
-    @for (valuePair of spxSuggestions[spxSelectStep]; track valuePair) {
-      <spx-suggestion
-      (click)="this.handleSuggestionClick(valuePair.value)">{{valuePair?.description}}</spx-suggestion>
-    }
-  </div>`, styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"] }]
-        }], propDecorators: { spxMax: [{
-                type: Input
-            }], spxMin: [{
-                type: Input
-            }], spxName: [{
-                type: Input
-            }], spxReadonly: [{
-                type: Input
-            }], spxValidators: [{
-                type: Input
-            }], spxFocused: [{
-                type: Input
-            }], spxSelectMonth: [{
-                type: Input
-            }], spxSelectDay: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], spxChange: [{
-                type: Output
-            }], spxFocus: [{
-                type: Output
-            }], spxLastKeyPressed: [{
-                type: Input
-            }], spxSelectStep: [{
-                type: Input
-            }], spxInternalValue: [{
-                type: Input
-            }], spxSuggestions: [{
-                type: Input
-            }], spxWasInternalUpdate: [{
-                type: Input
-            }] } });
-
 class SpxInputFloatComponent {
     constructor() {
         this.internalValue = {
@@ -1472,6 +1179,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['input', { static: true }]
             }] } });
 
+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.value = model({
+            description: "",
+            value: "",
+        });
+        this.spxChange = output();
+        this.spxFocused = input(true);
+        this.spxFocus = output();
+        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.spxSuggestionC = computed(() => {
+            switch (this.spxSelectedStep()) {
+                case 'months':
+                    return [...this.spxSuggestions().months];
+                case 'days':
+                    return [...this.spxSuggestions().days];
+                default:
+                    return this.spxSuggestions().years;
+            }
+        });
+        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: [], });
+    }
+    onModelChange(newValue, selectedStep) {
+        const parsedValue = +newValue; // Convert to number
+        if (parsedValue == 0)
+            return;
+        switch (selectedStep) {
+            case stepType.years:
+                this.selectedYear.set(parsedValue);
+                break;
+            case stepType.months:
+                this.selectedMonth.set(parsedValue);
+                break;
+            case stepType.days:
+                this.selectedDay.set(parsedValue);
+                break;
+        }
+    }
+    ngOnInit() {
+        this.suggestYears();
+        if (valuePairToValue(this.value)) {
+            const parsedValue = DateTime.fromISO(valuePairToValue(this.value));
+            this.selectedYear.set(parsedValue.year);
+            this.selectedMonth.set(parsedValue.month);
+            this.selectedDay.set(parsedValue.day);
+        }
+    }
+    handleSuggestionClick(value) {
+        switch (this.spxSelectedStep()) {
+            case "years":
+                this.selectedYear.set(value);
+                break;
+            case "months":
+                this.selectedMonth.set(value);
+                break;
+            case "days":
+                this.selectedDay.set(value);
+                break;
+        }
+        this.updateValueAndEmit();
+        this.changeSelectedStep();
+    }
+    updateValueAndEmit() {
+        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() });
+        this.spxChange.emit(this.value());
+    }
+    changeSelectedStep() {
+        switch (this.spxSelectedStep()) {
+            case 'days':
+                this.spxSelectedStep.set(stepType.years);
+                break;
+            case 'months':
+                this.spxSelectedStep.set(this.spxSelectDay() ? stepType.days : stepType.years);
+                break;
+            case 'years':
+                this.spxSelectedStep.set(this.spxSelectMonth() ? stepType.months : stepType.years);
+                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,
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxFocused: { classPropertyName: "spxFocused", publicName: "spxFocused", 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 }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", spxChange: "spxChange", spxFocus: "spxFocus" }, ngImport: i0, template: "<div class='spx-input-date__controls'>\r\n  <input\r\n    class='spx-input-date__input'\r\n    [(ngModel)]=\"selectedYear\"\r\n    [attr.type]=\"'number'\"\r\n    (ngModelChange)=\"onModelChange($event, 'years')\"\r\n    [attr.min]=\"1900\"\r\n    [attr.max]=\"2100\"\r\n    [attr.step]=\"1\"\r\n    />\r\n  <div class='spx-input-date__control-label'>Year</div>\r\n  @if (this.spxSelectMonth()) {\r\n    <input\r\n      class='spx-input-date__input'\r\n      [(ngModel)]=\"selectedMonth\"\r\n      (ngModelChange)=\"onModelChange($event, 'months')\"\r\n      [attr.type]=\"'number'\"\r\n      [attr.min]=\"1\"\r\n      [attr.max]=\"12\"\r\n      [attr.step]=\"1\" />\r\n  }\r\n  <div class='spx-input-date__control-label'>Month</div>\r\n  @if (this.spxSelectDay()) {\r\n    <input\r\n      class='spx-input-date__input'\r\n      [(ngModel)]=\"selectedDay\"\r\n      (ngModelChange)=\"onModelChange($event, 'days')\"\r\n      [attr.type]=\"'number'\"\r\n      [attr.min]=\"1\"\r\n      [attr.max]=\"31\"\r\n      [attr.step]=\"1\" />\r\n    <div class='spx-input-date__control-label'>Days</div>\r\n  }\r\n</div>\r\n<div class='spx-input-date__suggestions'>\r\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\r\n    <spx-suggestion [spxSelected]=\"\r\n    (selectedYear() === valuePair.value) ||\r\n    (selectedMonth() === valuePair.value) ||  \r\n    (selectedDay() === valuePair.value)\"\r\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\r\n  }\r\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spx-input-date', standalone: true, imports: [
+                        SpxSuggestionComponent,
+                        FormsModule
+                    ], template: "<div class='spx-input-date__controls'>\r\n  <input\r\n    class='spx-input-date__input'\r\n    [(ngModel)]=\"selectedYear\"\r\n    [attr.type]=\"'number'\"\r\n    (ngModelChange)=\"onModelChange($event, 'years')\"\r\n    [attr.min]=\"1900\"\r\n    [attr.max]=\"2100\"\r\n    [attr.step]=\"1\"\r\n    />\r\n  <div class='spx-input-date__control-label'>Year</div>\r\n  @if (this.spxSelectMonth()) {\r\n    <input\r\n      class='spx-input-date__input'\r\n      [(ngModel)]=\"selectedMonth\"\r\n      (ngModelChange)=\"onModelChange($event, 'months')\"\r\n      [attr.type]=\"'number'\"\r\n      [attr.min]=\"1\"\r\n      [attr.max]=\"12\"\r\n      [attr.step]=\"1\" />\r\n  }\r\n  <div class='spx-input-date__control-label'>Month</div>\r\n  @if (this.spxSelectDay()) {\r\n    <input\r\n      class='spx-input-date__input'\r\n      [(ngModel)]=\"selectedDay\"\r\n      (ngModelChange)=\"onModelChange($event, 'days')\"\r\n      [attr.type]=\"'number'\"\r\n      [attr.min]=\"1\"\r\n      [attr.max]=\"31\"\r\n      [attr.step]=\"1\" />\r\n    <div class='spx-input-date__control-label'>Days</div>\r\n  }\r\n</div>\r\n<div class='spx-input-date__suggestions'>\r\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\r\n    <spx-suggestion [spxSelected]=\"\r\n    (selectedYear() === valuePair.value) ||\r\n    (selectedMonth() === valuePair.value) ||  \r\n    (selectedDay() === valuePair.value)\"\r\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\r\n  }\r\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"] }]
+        }] });
+
 class SpxInputComponent {
     constructor() {
         this.spxLabel = 'label';
@@ -1634,14 +1498,13 @@ class SpxInputComponent {
           (spxChange)="this.handleChange($event)"
           (spxFocus)="this.handleFocus()"
           [spxFocused]="this.spxFocused"
-          [spxMax]="this.spxMax"
-          [spxMin]="this.spxMin"
-          [spxName]="this.spxName"
+          [spxMax]="this.spxMax!"
+          [spxMin]="this.spxMin!"
           [spxReadonly]="this.spxReadonly"
           [spxSelectDay]="this.spxSelectDay"
           [spxSelectMonth]="this.spxSelectMonth"
           [spxValidators]="this.spxValidators"
-          [value]="this.value"
+          [(value)]="this.value"
         ></spx-input-date>
       }
       @if (this.spxType === 'float') {
@@ -1700,7 +1563,7 @@ class SpxInputComponent {
     <div validation-messages>
       <ng-content></ng-content>
     </div>
-  </spx-input-box>`, isInline: true, dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxFocused", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxValue"], outputs: ["spxClear", "spxSearch", "spxFocus", "spxFocusOut", "spxEdit", "spxHelp"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxName", "spxReadonly", "spxValidators", "spxFocused", "spxSelectMonth", "spxSelectDay", "value", "spxLastKeyPressed", "spxSelectStep", "spxInternalValue", "spxSuggestions", "spxWasInternalUpdate"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxWasInternalUpdate", "tick"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxFocused", "spxShowLabel", "spxReadonly", "spxSuggestions", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }] }); }
+  </spx-input-box>`, isInline: true, dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxFocused", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxValue"], outputs: ["spxClear", "spxSearch", "spxFocus", "spxFocusOut", "spxEdit", "spxHelp"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "value", "spxFocused", "spxSelectDay", "spxSelectMonth", "spxSuggestions"], outputs: ["valueChange", "spxChange", "spxFocus"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxWasInternalUpdate", "tick"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxFocused", "spxShowLabel", "spxReadonly", "spxSuggestions", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputComponent, decorators: [{
             type: Component,
@@ -1770,14 +1633,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
           (spxChange)="this.handleChange($event)"
           (spxFocus)="this.handleFocus()"
           [spxFocused]="this.spxFocused"
-          [spxMax]="this.spxMax"
-          [spxMin]="this.spxMin"
-          [spxName]="this.spxName"
+          [spxMax]="this.spxMax!"
+          [spxMin]="this.spxMin!"
           [spxReadonly]="this.spxReadonly"
           [spxSelectDay]="this.spxSelectDay"
           [spxSelectMonth]="this.spxSelectMonth"
           [spxValidators]="this.spxValidators"
-          [value]="this.value"
+          [(value)]="this.value"
         ></spx-input-date>
       }
       @if (this.spxType === 'float') {