@softpak/components 19.5.0-beta.1 → 19.5.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/softpak-components-spx-check-digit.mjs +1 -1
- package/fesm2022/softpak-components-spx-check-digit.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-form-view.mjs +2 -2
- package/fesm2022/softpak-components-spx-form-view.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-inputs.mjs +47 -26
- package/fesm2022/softpak-components-spx-inputs.mjs.map +1 -1
- package/package.json +36 -36
- package/spx-inputs/input.service.d.ts +1 -0
- package/spx-inputs/spx-input-box/spx-input-box.component.d.ts +1 -2
- package/spx-inputs/spx-input-text/spx-input-text.component.d.ts +1 -2
- package/spx-inputs/spx-input.component.d.ts +7 -1
- package/tailwind.css +1 -1
|
@@ -4,7 +4,7 @@ import { SpxButtonComponent } from '@softpak/components/spx-button';
|
|
|
4
4
|
import * as i1 from '@fortawesome/angular-fontawesome';
|
|
5
5
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
6
6
|
import { faEdit, faSearch, faQuestion, faTimes, faXmark } from '@fortawesome/free-solid-svg-icons';
|
|
7
|
-
import { BehaviorSubject, map,
|
|
7
|
+
import { BehaviorSubject, map, pairwise, filter, fromEvent } from 'rxjs';
|
|
8
8
|
import * as i1$1 from '@angular/forms';
|
|
9
9
|
import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
10
10
|
import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
|
|
@@ -20,9 +20,23 @@ class SelectedInputService {
|
|
|
20
20
|
this.focusedElement$ = this.focusedElement.asObservable(); // Observable for the comparison result
|
|
21
21
|
}
|
|
22
22
|
isFocused$(id) {
|
|
23
|
-
return this.focusedElement$.pipe(map((focusedId) =>
|
|
23
|
+
return this.focusedElement$.pipe(map((focusedId) => {
|
|
24
|
+
return focusedId === id;
|
|
25
|
+
}) // Emit true/false if the element is focused
|
|
24
26
|
);
|
|
25
27
|
}
|
|
28
|
+
isBlurred$(id) {
|
|
29
|
+
return this.focusedElement$.pipe(pairwise(), // Emit both the previous and current value as a tuple
|
|
30
|
+
filter(([previous]) => {
|
|
31
|
+
// console.log("PREVIOUS:" + previous);
|
|
32
|
+
// console.log("NEXT: " + current);
|
|
33
|
+
// console.log("CURRENT ID: " + id)
|
|
34
|
+
return previous === id;
|
|
35
|
+
}), // Only proceed if the previous value matches the ID
|
|
36
|
+
map(([, current]) => {
|
|
37
|
+
return current === null;
|
|
38
|
+
}));
|
|
39
|
+
}
|
|
26
40
|
getSelectedElementId() {
|
|
27
41
|
return this.focusedElement.value; // Access the value directly from BehaviorSubject
|
|
28
42
|
}
|
|
@@ -66,16 +80,6 @@ class SpxInputBoxComponent {
|
|
|
66
80
|
this.spxIsFocused = signal(false);
|
|
67
81
|
this.spxSetIdInParent = output();
|
|
68
82
|
}
|
|
69
|
-
// Update the service when this input gains focus
|
|
70
|
-
onFocus() {
|
|
71
|
-
if (this.selectedInputService.getSelectedElementId() != this.id()) {
|
|
72
|
-
this.selectedInputService.setSelectedElementId(this.id());
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
// Clear the selection when this input loses focus
|
|
76
|
-
onBlur() {
|
|
77
|
-
this.selectedInputService.setSelectedElementId(null);
|
|
78
|
-
}
|
|
79
83
|
ngOnInit() {
|
|
80
84
|
this.id.set(Math.random());
|
|
81
85
|
this.spxSetIdInParent.emit(this.id());
|
|
@@ -88,6 +92,9 @@ class SpxInputBoxComponent {
|
|
|
88
92
|
this.selectedInputService.setSelectedElementId(this.id());
|
|
89
93
|
}
|
|
90
94
|
}
|
|
95
|
+
handleFocusOut(ev) {
|
|
96
|
+
this.selectedInputService.setSelectedElementId(null);
|
|
97
|
+
}
|
|
91
98
|
onClear() {
|
|
92
99
|
this.spxClear.emit();
|
|
93
100
|
}
|
|
@@ -101,7 +108,7 @@ class SpxInputBoxComponent {
|
|
|
101
108
|
this.spxHelp.emit();
|
|
102
109
|
}
|
|
103
110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
104
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxValue: "spxValueChange", spxClear: "spxClear", spxSearch: "spxSearch", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSetIdInParent: "spxSetIdInParent" }, host: { listeners: { "
|
|
111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxValue: "spxValueChange", spxClear: "spxClear", spxSearch: "spxSearch", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSetIdInParent: "spxSetIdInParent" }, host: { listeners: { "click": "handleFocusIn()", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-3\"\r\n [class.rounded-none]=\"this.spxShowValidationMessages()\"\r\n [class.rounded-t]=\"this.spxShowValidationMessages()\"\r\n [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.bg-white]=\"!this.spxReadonly()\"\r\n [class.bg-gray-300]=\"this.spxReadonly()\"\r\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n \r\n >\r\n <div class=\"flex-auto p-3\"\r\n [class.p-0]=\"this.spxCompact()\"\r\n [class.flex]=\"this.spxCompact()\"\r\n [class.items-center]=\"this.spxCompact()\">\r\n @if (this.spxShowLabel()) {\r\n <div class=\"font-bold text-sm mb-1 text-gray-800\"\r\n [class.mb-0]=\"this.spxCompact()\"\r\n [class.px-3]=\"this.spxCompact()\">\r\n {{this.spxLabel()}} @if (spxRequired()) {\r\n <span class=\"text-red-800\">*</span>\r\n }\r\n </div>\r\n }\r\n\r\n <ng-content select=\"[controls]\"></ng-content>\r\n </div>\r\n <div class=\"flex flex-none gap-1 p-1\">\r\n @if (this.spxShowEdit()) {\r\n <spx-button\r\n (spxClick)=\"onEdit()\"\r\n [spxFullHeight]=\"true\"\r\n [spxSize]=\"'xl'\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n @if (this.spxShowHelp()) {\r\n <spx-button\r\n (spxClick)=\"onHelp()\"\r\n [spxFullHeight]=\"true\"\r\n [spxDisabled]=\"this.spxReadonly()\"\r\n [spxSize]=\"'xl'\"\r\n [spxTabIndex]=\"-1\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n @if (this.spxShowSearch()) {\r\n <spx-button\r\n (spxClick)=\"onSearch()\"\r\n [spxFullHeight]=\"true\"\r\n [spxDisabled]=\"this.spxReadonly()\"\r\n [spxSize]=\"'xl'\"\r\n [spxTabIndex]=\"-1\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n @if (this.spxShowClear()) {\r\n <spx-button\r\n (spxClick)=\"onClear()\"\r\n [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\r\n [spxFullHeight]=\"true\"\r\n [spxSize]=\"'xl'\"\r\n [spxTabIndex]=\"-1\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n </div>\r\n </div>\r\n @if (this.spxShowValidationMessages()) {\r\n <div class=\"bg-red-600 rounded-b text-white p-3\">\r\n <ng-content select=\"[validation-messages]\"></ng-content>\r\n </div>\r\n }", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
105
112
|
}
|
|
106
113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
|
|
107
114
|
type: Component,
|
|
@@ -109,12 +116,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
109
116
|
SpxButtonComponent,
|
|
110
117
|
FontAwesomeModule
|
|
111
118
|
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
112
|
-
"(
|
|
113
|
-
"(click)": "onFocus()"
|
|
119
|
+
"(click)": "handleFocusIn()"
|
|
114
120
|
}, template: "<div class=\"flex rounded w-full gap-3\"\r\n [class.rounded-none]=\"this.spxShowValidationMessages()\"\r\n [class.rounded-t]=\"this.spxShowValidationMessages()\"\r\n [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.bg-white]=\"!this.spxReadonly()\"\r\n [class.bg-gray-300]=\"this.spxReadonly()\"\r\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n \r\n >\r\n <div class=\"flex-auto p-3\"\r\n [class.p-0]=\"this.spxCompact()\"\r\n [class.flex]=\"this.spxCompact()\"\r\n [class.items-center]=\"this.spxCompact()\">\r\n @if (this.spxShowLabel()) {\r\n <div class=\"font-bold text-sm mb-1 text-gray-800\"\r\n [class.mb-0]=\"this.spxCompact()\"\r\n [class.px-3]=\"this.spxCompact()\">\r\n {{this.spxLabel()}} @if (spxRequired()) {\r\n <span class=\"text-red-800\">*</span>\r\n }\r\n </div>\r\n }\r\n\r\n <ng-content select=\"[controls]\"></ng-content>\r\n </div>\r\n <div class=\"flex flex-none gap-1 p-1\">\r\n @if (this.spxShowEdit()) {\r\n <spx-button\r\n (spxClick)=\"onEdit()\"\r\n [spxFullHeight]=\"true\"\r\n [spxSize]=\"'xl'\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n @if (this.spxShowHelp()) {\r\n <spx-button\r\n (spxClick)=\"onHelp()\"\r\n [spxFullHeight]=\"true\"\r\n [spxDisabled]=\"this.spxReadonly()\"\r\n [spxSize]=\"'xl'\"\r\n [spxTabIndex]=\"-1\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n @if (this.spxShowSearch()) {\r\n <spx-button\r\n (spxClick)=\"onSearch()\"\r\n [spxFullHeight]=\"true\"\r\n [spxDisabled]=\"this.spxReadonly()\"\r\n [spxSize]=\"'xl'\"\r\n [spxTabIndex]=\"-1\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n @if (this.spxShowClear()) {\r\n <spx-button\r\n (spxClick)=\"onClear()\"\r\n [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\r\n [spxFullHeight]=\"true\"\r\n [spxSize]=\"'xl'\"\r\n [spxTabIndex]=\"-1\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n </div>\r\n </div>\r\n @if (this.spxShowValidationMessages()) {\r\n <div class=\"bg-red-600 rounded-b text-white p-3\">\r\n <ng-content select=\"[validation-messages]\"></ng-content>\r\n </div>\r\n }" }]
|
|
115
121
|
}], propDecorators: { handleFocusIn: [{
|
|
116
122
|
type: HostListener,
|
|
117
123
|
args: ['focusin', ["$event"]]
|
|
124
|
+
}], handleFocusOut: [{
|
|
125
|
+
type: HostListener,
|
|
126
|
+
args: ['focusout', ["$event"]]
|
|
118
127
|
}] } });
|
|
119
128
|
|
|
120
129
|
class SpxDropdownComponent {
|
|
@@ -222,15 +231,12 @@ class SpxInputTextComponent {
|
|
|
222
231
|
this.spxSetFocus();
|
|
223
232
|
}
|
|
224
233
|
}
|
|
225
|
-
handleChange(
|
|
226
|
-
this.value.set({ ...this.value(), value: $event });
|
|
227
|
-
this.valueChange.emit(this.value()); // Emit the updated value to the parent
|
|
228
|
-
}
|
|
229
|
-
handleDescriptionInput(event) {
|
|
234
|
+
handleChange(event) {
|
|
230
235
|
this.value.set({
|
|
231
236
|
description: event.target ? event.target.value : null,
|
|
232
237
|
value: event.target ? event.target.value : null,
|
|
233
238
|
});
|
|
239
|
+
this.valueChange.emit(this.value()); // Emit the updated value to the parent
|
|
234
240
|
}
|
|
235
241
|
handleSuggestionClick(value) {
|
|
236
242
|
if (!this.spxReadonly()) {
|
|
@@ -238,7 +244,7 @@ class SpxInputTextComponent {
|
|
|
238
244
|
}
|
|
239
245
|
}
|
|
240
246
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
241
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxBlurFromChild: "spxBlurFromChild", value: "valueChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\r\n <input\r\n #input\r\n class=\"font-bold text-lg w-full outline-none\"\r\n autocomplete=\"off\"\r\n spellcheck=\"false\"\r\n [class.bg-white]=\"!this.spxReadonly()\"\r\n [class.bg-gray-300]=\"this.spxReadonly()\"\r\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n [class.uppercase]=\"this.spxCapitalize()\"\r\n [attr.autocomplete]=\"this.spxAutocomplete()\"\r\n [attr.autofocus]=\"this.spxAutofocus()\"\r\n [attr.disabled]=\"this.spxReadonly()\"\r\n [attr.inputMode]=\"this.spxInputMode()\"\r\n [attr.pattern]=\"this.spxPattern()\"\r\n [attr.name]=\"this.spxName()\"\r\n [attr.type]=\"this.spxType()\"\r\n [ngModel]=\"value().value\"\r\n (ngModelChange)=\"this.handleChange($event)\"\r\n />\r\n\r\n @if (this.value().description && this.value().value && this.value().description?.valueOf() !== this.value().value?.valueOf()) {\r\n <span>{{this.value().value}}</span>\r\n }\r\n @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType() === 'overlaynumber')) {\r\n <spx-dropdown\r\n [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\r\n </spx-dropdown>\r\n }\r\n</div>", dependencies: [{ kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
247
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxBlurFromChild: "spxBlurFromChild", value: "valueChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\r\n <input\r\n #input\r\n class=\"font-bold text-lg w-full outline-none\"\r\n autocomplete=\"off\"\r\n spellcheck=\"false\"\r\n [class.bg-white]=\"!this.spxReadonly()\"\r\n [class.bg-gray-300]=\"this.spxReadonly()\"\r\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n [class.uppercase]=\"this.spxCapitalize()\"\r\n [attr.autocomplete]=\"this.spxAutocomplete()\"\r\n [attr.autofocus]=\"this.spxAutofocus()\"\r\n [attr.disabled]=\"this.spxReadonly()\"\r\n [attr.inputMode]=\"this.spxInputMode()\"\r\n [attr.pattern]=\"this.spxPattern()\"\r\n [attr.name]=\"this.spxName()\"\r\n [attr.type]=\"this.spxType()\"\r\n [ngModel]=\"this.value().description ? this.value().description : this.value().value\"\r\n (ngModelChange)=\"this.handleChange($event)\"\r\n />\r\n\r\n @if (this.value().description && this.value().value && this.value().description?.valueOf() !== this.value().value?.valueOf()) {\r\n <span>{{this.value().value}}</span>\r\n }\r\n @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType() === 'overlaynumber')) {\r\n <spx-dropdown\r\n [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\r\n </spx-dropdown>\r\n }\r\n</div>", dependencies: [{ kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
242
248
|
}
|
|
243
249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTextComponent, decorators: [{
|
|
244
250
|
type: Component,
|
|
@@ -246,7 +252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
246
252
|
SpxDropdownComponent,
|
|
247
253
|
ReactiveFormsModule,
|
|
248
254
|
FormsModule
|
|
249
|
-
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\r\n <input\r\n #input\r\n class=\"font-bold text-lg w-full outline-none\"\r\n autocomplete=\"off\"\r\n spellcheck=\"false\"\r\n [class.bg-white]=\"!this.spxReadonly()\"\r\n [class.bg-gray-300]=\"this.spxReadonly()\"\r\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n [class.uppercase]=\"this.spxCapitalize()\"\r\n [attr.autocomplete]=\"this.spxAutocomplete()\"\r\n [attr.autofocus]=\"this.spxAutofocus()\"\r\n [attr.disabled]=\"this.spxReadonly()\"\r\n [attr.inputMode]=\"this.spxInputMode()\"\r\n [attr.pattern]=\"this.spxPattern()\"\r\n [attr.name]=\"this.spxName()\"\r\n [attr.type]=\"this.spxType()\"\r\n [ngModel]=\"value().value\"\r\n (ngModelChange)=\"this.handleChange($event)\"\r\n />\r\n\r\n @if (this.value().description && this.value().value && this.value().description?.valueOf() !== this.value().value?.valueOf()) {\r\n <span>{{this.value().value}}</span>\r\n }\r\n @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType() === 'overlaynumber')) {\r\n <spx-dropdown\r\n [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\r\n </spx-dropdown>\r\n }\r\n</div>" }]
|
|
255
|
+
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\r\n <input\r\n #input\r\n class=\"font-bold text-lg w-full outline-none\"\r\n autocomplete=\"off\"\r\n spellcheck=\"false\"\r\n [class.bg-white]=\"!this.spxReadonly()\"\r\n [class.bg-gray-300]=\"this.spxReadonly()\"\r\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n [class.uppercase]=\"this.spxCapitalize()\"\r\n [attr.autocomplete]=\"this.spxAutocomplete()\"\r\n [attr.autofocus]=\"this.spxAutofocus()\"\r\n [attr.disabled]=\"this.spxReadonly()\"\r\n [attr.inputMode]=\"this.spxInputMode()\"\r\n [attr.pattern]=\"this.spxPattern()\"\r\n [attr.name]=\"this.spxName()\"\r\n [attr.type]=\"this.spxType()\"\r\n [ngModel]=\"this.value().description ? this.value().description : this.value().value\"\r\n (ngModelChange)=\"this.handleChange($event)\"\r\n />\r\n\r\n @if (this.value().description && this.value().value && this.value().description?.valueOf() !== this.value().value?.valueOf()) {\r\n <span>{{this.value().value}}</span>\r\n }\r\n @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType() === 'overlaynumber')) {\r\n <spx-dropdown\r\n [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\r\n </spx-dropdown>\r\n }\r\n</div>" }]
|
|
250
256
|
}] });
|
|
251
257
|
|
|
252
258
|
class SpxInputFloatComponent {
|
|
@@ -281,7 +287,7 @@ class SpxInputFloatComponent {
|
|
|
281
287
|
this.spxIsFocused.set(true); // Update only if focused
|
|
282
288
|
this.spxSetFocus();
|
|
283
289
|
}
|
|
284
|
-
else if (focusedId !== this.spxElementId()) {
|
|
290
|
+
else if (focusedId !== this.spxElementId() && focusedId != null) {
|
|
285
291
|
this.spxIsFocused.set(false);
|
|
286
292
|
}
|
|
287
293
|
});
|
|
@@ -832,6 +838,7 @@ class SpxInputComponent {
|
|
|
832
838
|
this.spxEdit = output();
|
|
833
839
|
this.spxHelp = output();
|
|
834
840
|
this.spxSearch = output();
|
|
841
|
+
this.spxBlur = output();
|
|
835
842
|
this.floatInput = viewChild("spxInputFloat");
|
|
836
843
|
this.numberInput = viewChild("spxInputNumber");
|
|
837
844
|
this.textInput = viewChild("spxInputText");
|
|
@@ -839,9 +846,23 @@ class SpxInputComponent {
|
|
|
839
846
|
this.radioInput = viewChild("spxInputRadio");
|
|
840
847
|
this.dateInput = viewChild("spxInputDate");
|
|
841
848
|
this.spxElementId = signal(0);
|
|
849
|
+
this.selectedInputService = inject(SelectedInputService);
|
|
842
850
|
this.onChange = () => { };
|
|
843
851
|
this.onTouched = () => { };
|
|
844
852
|
}
|
|
853
|
+
handleSpxElementIdSet(id) {
|
|
854
|
+
this.spxElementId.set(id);
|
|
855
|
+
this.selectedInputServiceSubscription = this.selectedInputService.isBlurred$(id).subscribe((isBlurred) => {
|
|
856
|
+
if (isBlurred) {
|
|
857
|
+
this.spxBlur.emit();
|
|
858
|
+
}
|
|
859
|
+
});
|
|
860
|
+
}
|
|
861
|
+
ngOnDestroy() {
|
|
862
|
+
if (this.selectedInputServiceSubscription) {
|
|
863
|
+
this.selectedInputServiceSubscription.unsubscribe();
|
|
864
|
+
}
|
|
865
|
+
}
|
|
845
866
|
handleChange(event) {
|
|
846
867
|
this.value.set(event);
|
|
847
868
|
}
|
|
@@ -908,13 +929,13 @@ class SpxInputComponent {
|
|
|
908
929
|
this.onTouched = fn;
|
|
909
930
|
}
|
|
910
931
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
911
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: false, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClear: "spxClear", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
|
|
932
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: false, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClear: "spxClear", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch", spxBlur: "spxBlur" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
|
|
912
933
|
{
|
|
913
934
|
provide: NG_VALUE_ACCESSOR,
|
|
914
935
|
useExisting: SpxInputComponent,
|
|
915
936
|
multi: true
|
|
916
937
|
}
|
|
917
|
-
], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\r\n [spxLabel]=\"this.spxLabel()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxRequired]=\"this.spxRequired()\"\r\n [spxValue]=\"this.value()\"\r\n [spxShowHelp]=\"this.spxShowHelp()\"\r\n [spxCompact]=\"this.spxCompact()\"\r\n [spxShowClear]=\"this.spxShowClear()\"\r\n [spxShowEdit]=\"this.spxShowEdit()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\r\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\r\n (spxClear)=\"this.handleClear()\"\r\n (spxEdit)=\"this.handleEdit()\"\r\n (spxHelp)=\"this.handleHelp()\"\r\n (spxSearch)=\"this.handleSearch()\"\r\n (spxSetIdInParent)=\"
|
|
938
|
+
], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\r\n [spxLabel]=\"this.spxLabel()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxRequired]=\"this.spxRequired()\"\r\n [spxValue]=\"this.value()\"\r\n [spxShowHelp]=\"this.spxShowHelp()\"\r\n [spxCompact]=\"this.spxCompact()\"\r\n [spxShowClear]=\"this.spxShowClear()\"\r\n [spxShowEdit]=\"this.spxShowEdit()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\r\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\r\n (spxClear)=\"this.handleClear()\"\r\n (spxEdit)=\"this.handleEdit()\"\r\n (spxHelp)=\"this.handleHelp()\"\r\n (spxSearch)=\"this.handleSearch()\"\r\n (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\r\n >\r\n <div controls>\r\n @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' || this.spxType() === 'overlaynumber' || this.spxType() === 'text' || this.spxType() === 'password') {\r\n <spx-input-text #spxInputText\r\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxCapitalize]=\"this.spxCapitalize()\"\r\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\r\n [spxName]=\"this.spxName()\"\r\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxSuggestions]=\"this.spxSuggestions()\"\r\n [spxType]=\"this.spxType()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-text>\r\n }\r\n @if (this.spxType() === 'date') {\r\n <spx-input-date #spxInputDate\r\n [spxMax]=\"this.spxMax()!\"\r\n [spxMin]=\"this.spxMin()!\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxSelectDay]=\"this.spxSelectDay()\"\r\n [spxSelectMonth]=\"this.spxSelectMonth()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [spxAutoFocus]=\"this.spxAutofocus()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-date>\r\n }\r\n @if (this.spxType() === 'float') {\r\n <spx-input-float #spxInputFloat\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxStep]=\"this.spxStep()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-float>\r\n }\r\n @if (this.spxType() === 'number') {\r\n <spx-input-number #spxInputNumber\r\n [spxInputMode]=\"this.spxInputMode()\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxStep]=\"this.spxStep()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-number>\r\n }\r\n @if (this.spxType() === 'radio') {\r\n <spx-input-radio\r\n #spxInputRadio\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxSuggestions]=\"this.spxSuggestions()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-radio>\r\n }\r\n @if (this.spxType() === 'time') {\r\n <spx-input-time\r\n #spxInputTime\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-time>\r\n }\r\n </div>\r\n <div validation-messages>\r\n <ng-content></ng-content>\r\n </div>\r\n </spx-input-box>", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["spxBlurFromChild", "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 }); }
|
|
918
939
|
}
|
|
919
940
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputComponent, decorators: [{
|
|
920
941
|
type: Component,
|
|
@@ -934,7 +955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
934
955
|
useExisting: SpxInputComponent,
|
|
935
956
|
multi: true
|
|
936
957
|
}
|
|
937
|
-
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\r\n [spxLabel]=\"this.spxLabel()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxRequired]=\"this.spxRequired()\"\r\n [spxValue]=\"this.value()\"\r\n [spxShowHelp]=\"this.spxShowHelp()\"\r\n [spxCompact]=\"this.spxCompact()\"\r\n [spxShowClear]=\"this.spxShowClear()\"\r\n [spxShowEdit]=\"this.spxShowEdit()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\r\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\r\n (spxClear)=\"this.handleClear()\"\r\n (spxEdit)=\"this.handleEdit()\"\r\n (spxHelp)=\"this.handleHelp()\"\r\n (spxSearch)=\"this.handleSearch()\"\r\n (spxSetIdInParent)=\"
|
|
958
|
+
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\r\n [spxLabel]=\"this.spxLabel()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxRequired]=\"this.spxRequired()\"\r\n [spxValue]=\"this.value()\"\r\n [spxShowHelp]=\"this.spxShowHelp()\"\r\n [spxCompact]=\"this.spxCompact()\"\r\n [spxShowClear]=\"this.spxShowClear()\"\r\n [spxShowEdit]=\"this.spxShowEdit()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\r\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\r\n (spxClear)=\"this.handleClear()\"\r\n (spxEdit)=\"this.handleEdit()\"\r\n (spxHelp)=\"this.handleHelp()\"\r\n (spxSearch)=\"this.handleSearch()\"\r\n (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\r\n >\r\n <div controls>\r\n @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' || this.spxType() === 'overlaynumber' || this.spxType() === 'text' || this.spxType() === 'password') {\r\n <spx-input-text #spxInputText\r\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxCapitalize]=\"this.spxCapitalize()\"\r\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\r\n [spxName]=\"this.spxName()\"\r\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxSuggestions]=\"this.spxSuggestions()\"\r\n [spxType]=\"this.spxType()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-text>\r\n }\r\n @if (this.spxType() === 'date') {\r\n <spx-input-date #spxInputDate\r\n [spxMax]=\"this.spxMax()!\"\r\n [spxMin]=\"this.spxMin()!\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxSelectDay]=\"this.spxSelectDay()\"\r\n [spxSelectMonth]=\"this.spxSelectMonth()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [spxAutoFocus]=\"this.spxAutofocus()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-date>\r\n }\r\n @if (this.spxType() === 'float') {\r\n <spx-input-float #spxInputFloat\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxStep]=\"this.spxStep()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-float>\r\n }\r\n @if (this.spxType() === 'number') {\r\n <spx-input-number #spxInputNumber\r\n [spxInputMode]=\"this.spxInputMode()\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxStep]=\"this.spxStep()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-number>\r\n }\r\n @if (this.spxType() === 'radio') {\r\n <spx-input-radio\r\n #spxInputRadio\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxSuggestions]=\"this.spxSuggestions()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-radio>\r\n }\r\n @if (this.spxType() === 'time') {\r\n <spx-input-time\r\n #spxInputTime\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-time>\r\n }\r\n </div>\r\n <div validation-messages>\r\n <ng-content></ng-content>\r\n </div>\r\n </spx-input-box>" }]
|
|
938
959
|
}], propDecorators: { _handleBlurEvent: [{
|
|
939
960
|
type: HostListener,
|
|
940
961
|
args: ['focusout']
|