@softpak/components 0.3.7 → 18.1.0

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.
Files changed (67) hide show
  1. package/esm2022/spx-alert/spx-alert.component.mjs +53 -43
  2. package/esm2022/spx-app-expiry/spx-app-expiry.component.mjs +57 -40
  3. package/esm2022/spx-app-update/spx-app-update.component.mjs +61 -55
  4. package/esm2022/spx-card/spx-card-item.component.mjs +37 -31
  5. package/esm2022/spx-card/spx-card-line.component.mjs +63 -40
  6. package/esm2022/spx-card/spx-card.component.mjs +52 -49
  7. package/esm2022/spx-change-details/spx-change-details.component.mjs +3 -5
  8. package/esm2022/spx-channel-selection/src/spx-welcome.component.mjs +3 -6
  9. package/esm2022/spx-check-digit/spx-check-digit.component.mjs +4 -7
  10. package/esm2022/spx-form-section/spx-form-section.component.mjs +19 -14
  11. package/esm2022/spx-form-view/spx-autocomplete-search.component.mjs +3 -5
  12. package/esm2022/spx-form-view/spx-form-view.component.mjs +141 -131
  13. package/esm2022/spx-inputs/spx-dropdown.component.mjs +35 -36
  14. package/esm2022/spx-inputs/spx-input-box.component.mjs +143 -125
  15. package/esm2022/spx-inputs/spx-input-date.component.mjs +84 -81
  16. package/esm2022/spx-inputs/spx-input-float.component.mjs +2 -5
  17. package/esm2022/spx-inputs/spx-input-radio.component.mjs +25 -25
  18. package/esm2022/spx-inputs/spx-input-text.component.mjs +65 -61
  19. package/esm2022/spx-inputs/spx-input-time-modal.component.mjs +73 -60
  20. package/esm2022/spx-inputs/spx-input-time.component.mjs +2 -5
  21. package/esm2022/spx-inputs/spx-input.component.mjs +223 -213
  22. package/esm2022/spx-navigation/spx-home-tile.component.mjs +40 -37
  23. package/esm2022/spx-navigation/spx-navigation.component.mjs +6 -10
  24. package/esm2022/spx-number-check/spx-number-check.component.mjs +47 -41
  25. package/esm2022/spx-patch/spx-patch.component.mjs +27 -21
  26. package/esm2022/spx-spinner/spx-spinner.component.mjs +143 -142
  27. package/esm2022/spx-stock-info/spx-stock-info.component.mjs +6 -9
  28. package/esm2022/spx-toaster/src/spx-toaster.component.mjs +91 -96
  29. package/esm2022/spx-update/src/spx-update-info.component.mjs +3 -5
  30. package/esm2022/spx-validation/spx-validate-control.component.mjs +4 -7
  31. package/fesm2022/softpak-components-spx-alert.mjs +52 -42
  32. package/fesm2022/softpak-components-spx-alert.mjs.map +1 -1
  33. package/fesm2022/softpak-components-spx-app-expiry.mjs +56 -39
  34. package/fesm2022/softpak-components-spx-app-expiry.mjs.map +1 -1
  35. package/fesm2022/softpak-components-spx-app-update.mjs +60 -54
  36. package/fesm2022/softpak-components-spx-app-update.mjs.map +1 -1
  37. package/fesm2022/softpak-components-spx-card.mjs +148 -115
  38. package/fesm2022/softpak-components-spx-card.mjs.map +1 -1
  39. package/fesm2022/softpak-components-spx-change-details.mjs +2 -4
  40. package/fesm2022/softpak-components-spx-change-details.mjs.map +1 -1
  41. package/fesm2022/softpak-components-spx-channel-selection.mjs +2 -5
  42. package/fesm2022/softpak-components-spx-channel-selection.mjs.map +1 -1
  43. package/fesm2022/softpak-components-spx-check-digit.mjs +3 -6
  44. package/fesm2022/softpak-components-spx-check-digit.mjs.map +1 -1
  45. package/fesm2022/softpak-components-spx-form-section.mjs +18 -13
  46. package/fesm2022/softpak-components-spx-form-section.mjs.map +1 -1
  47. package/fesm2022/softpak-components-spx-form-view.mjs +142 -133
  48. package/fesm2022/softpak-components-spx-form-view.mjs.map +1 -1
  49. package/fesm2022/softpak-components-spx-inputs.mjs +643 -594
  50. package/fesm2022/softpak-components-spx-inputs.mjs.map +1 -1
  51. package/fesm2022/softpak-components-spx-navigation.mjs +44 -44
  52. package/fesm2022/softpak-components-spx-navigation.mjs.map +1 -1
  53. package/fesm2022/softpak-components-spx-number-check.mjs +46 -40
  54. package/fesm2022/softpak-components-spx-number-check.mjs.map +1 -1
  55. package/fesm2022/softpak-components-spx-patch.mjs +26 -20
  56. package/fesm2022/softpak-components-spx-patch.mjs.map +1 -1
  57. package/fesm2022/softpak-components-spx-spinner.mjs +142 -141
  58. package/fesm2022/softpak-components-spx-spinner.mjs.map +1 -1
  59. package/fesm2022/softpak-components-spx-stock-info.mjs +5 -8
  60. package/fesm2022/softpak-components-spx-stock-info.mjs.map +1 -1
  61. package/fesm2022/softpak-components-spx-toaster.mjs +90 -95
  62. package/fesm2022/softpak-components-spx-toaster.mjs.map +1 -1
  63. package/fesm2022/softpak-components-spx-update.mjs +2 -4
  64. package/fesm2022/softpak-components-spx-update.mjs.map +1 -1
  65. package/fesm2022/softpak-components-spx-validation.mjs +3 -6
  66. package/fesm2022/softpak-components-spx-validation.mjs.map +1 -1
  67. package/package.json +12 -12
package/fesm2022/softpak-components-spx-inputs.mjs CHANGED
@@ -1,4 +1,3 @@
1
- import { NgIf, NgFor } from '@angular/common';
2
1
  import * as i0 from '@angular/core';
3
2
  import { EventEmitter, Component, Input, Output, HostListener, ViewChild } from '@angular/core';
4
3
  import { SpxButtonComponent } from '@softpak/components/spx-button';
@@ -72,71 +71,81 @@ class SpxInputBoxComponent {
72
71
  }
73
72
  }
74
73
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
75
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: "spxCompact", spxFocused: "spxFocused", spxLabel: "spxLabel", spxReadonly: "spxReadonly", spxRequired: "spxRequired", spxShowClear: "spxShowClear", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxShowLabel: "spxShowLabel", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxValue: "spxValue" }, outputs: { spxClear: "spxClear", spxSearch: "spxSearch", spxFocus: "spxFocus", spxFocusOut: "spxFocusOut", spxEdit: "spxEdit", spxHelp: "spxHelp" }, host: { listeners: { "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)", "document:click": "handleWindowClick($event)" } }, ngImport: i0, template: `<div class="flex rounded w-full gap-3"
76
- [class.rounded-none]="this.spxShowValidationMessages"
77
- [class.rounded-t]="this.spxShowValidationMessages"
78
- [class.outline-none]="this.spxFocused && !this.spxReadonly"
79
- [class.ring-2]="this.spxFocused && !this.spxReadonly"
80
- [class.ring-offset-2]="this.spxFocused && !this.spxReadonly"
81
- [class.ring-blue-500]="this.spxFocused && !this.spxReadonly"
82
- [class.bg-white]="!this.spxReadonly"
83
- [class.bg-gray-300]="this.spxReadonly"
84
- [class.cursor-not-allowed]="this.spxReadonly">
85
- <div class="flex-auto p-3"
86
- [class.p-0]="this.spxCompact"
87
- [class.flex]="this.spxCompact"
88
- [class.items-center]="this.spxCompact">
89
- <div *ngIf="this.spxShowLabel" class="font-bold text-sm mb-1 text-gray-800"
90
- [class.mb-0]="this.spxCompact"
91
- [class.px-3]="this.spxCompact">
92
- {{this.spxLabel}} <span *ngIf="spxRequired" class="text-red-800">*</span>
93
- </div>
74
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: "spxCompact", spxFocused: "spxFocused", spxLabel: "spxLabel", spxReadonly: "spxReadonly", spxRequired: "spxRequired", spxShowClear: "spxShowClear", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxShowLabel: "spxShowLabel", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxValue: "spxValue" }, outputs: { spxClear: "spxClear", spxSearch: "spxSearch", spxFocus: "spxFocus", spxFocusOut: "spxFocusOut", spxEdit: "spxEdit", spxHelp: "spxHelp" }, host: { listeners: { "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)", "document:click": "handleWindowClick($event)" } }, ngImport: i0, template: `<div class="flex rounded w-full gap-3"
75
+ [class.rounded-none]="this.spxShowValidationMessages"
76
+ [class.rounded-t]="this.spxShowValidationMessages"
77
+ [class.outline-none]="this.spxFocused && !this.spxReadonly"
78
+ [class.ring-2]="this.spxFocused && !this.spxReadonly"
79
+ [class.ring-offset-2]="this.spxFocused && !this.spxReadonly"
80
+ [class.ring-blue-500]="this.spxFocused && !this.spxReadonly"
81
+ [class.bg-white]="!this.spxReadonly"
82
+ [class.bg-gray-300]="this.spxReadonly"
83
+ [class.cursor-not-allowed]="this.spxReadonly">
84
+ <div class="flex-auto p-3"
85
+ [class.p-0]="this.spxCompact"
86
+ [class.flex]="this.spxCompact"
87
+ [class.items-center]="this.spxCompact">
88
+ @if (this.spxShowLabel) {
89
+ <div class="font-bold text-sm mb-1 text-gray-800"
90
+ [class.mb-0]="this.spxCompact"
91
+ [class.px-3]="this.spxCompact">
92
+ {{this.spxLabel}} @if (spxRequired) {
93
+ <span class="text-red-800">*</span>
94
+ }
95
+ </div>
96
+ }
94
97
  <ng-content select="[controls]"></ng-content>
95
98
  </div>
96
99
  <div class="flex flex-none gap-1 p-1">
97
- <spx-button
98
- *ngIf="this.spxShowEdit"
99
- (spxClick)="onEdit()"
100
- [spxFullHeight]="true"
101
- [spxSize]="'xl'"
102
- [spxType]="'button'">
103
- <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
104
- </spx-button>
105
- <spx-button
106
- *ngIf="this.spxShowHelp"
107
- (spxClick)="onHelp()"
108
- [spxFullHeight]="true"
109
- [spxDisabled]="this.spxReadonly"
110
- [spxSize]="'xl'"
111
- [spxTabIndex]="-1"
112
- [spxType]="'button'">
113
- <fa-icon [icon]="faQuestion" class="block text-xl"></fa-icon>
114
- </spx-button>
115
- <spx-button
116
- *ngIf="this.spxShowSearch"
117
- (spxClick)="onSearch()"
118
- [spxFullHeight]="true"
119
- [spxDisabled]="this.spxReadonly"
120
- [spxSize]="'xl'"
121
- [spxTabIndex]="-1"
122
- [spxType]="'button'">
123
- <fa-icon [icon]="faSearch" class="block text-xl"></fa-icon>
124
- </spx-button>
125
- <spx-button
126
- *ngIf="this.spxShowClear"
127
- (spxClick)="onClear()"
128
- [spxDisabled]="this.spxReadonly || !this.spxValue?.value"
129
- [spxFullHeight]="true"
130
- [spxSize]="'xl'"
131
- [spxTabIndex]="-1"
132
- [spxType]="'button'">
133
- <fa-icon [icon]="faTimes" class="block text-xl"></fa-icon>
134
- </spx-button>
100
+ @if (this.spxShowEdit) {
101
+ <spx-button
102
+ (spxClick)="onEdit()"
103
+ [spxFullHeight]="true"
104
+ [spxSize]="'xl'"
105
+ [spxType]="'button'">
106
+ <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
107
+ </spx-button>
108
+ }
109
+ @if (this.spxShowHelp) {
110
+ <spx-button
111
+ (spxClick)="onHelp()"
112
+ [spxFullHeight]="true"
113
+ [spxDisabled]="this.spxReadonly"
114
+ [spxSize]="'xl'"
115
+ [spxTabIndex]="-1"
116
+ [spxType]="'button'">
117
+ <fa-icon [icon]="faQuestion" class="block text-xl"></fa-icon>
118
+ </spx-button>
119
+ }
120
+ @if (this.spxShowSearch) {
121
+ <spx-button
122
+ (spxClick)="onSearch()"
123
+ [spxFullHeight]="true"
124
+ [spxDisabled]="this.spxReadonly"
125
+ [spxSize]="'xl'"
126
+ [spxTabIndex]="-1"
127
+ [spxType]="'button'">
128
+ <fa-icon [icon]="faSearch" class="block text-xl"></fa-icon>
129
+ </spx-button>
130
+ }
131
+ @if (this.spxShowClear) {
132
+ <spx-button
133
+ (spxClick)="onClear()"
134
+ [spxDisabled]="this.spxReadonly || !this.spxValue?.value"
135
+ [spxFullHeight]="true"
136
+ [spxSize]="'xl'"
137
+ [spxTabIndex]="-1"
138
+ [spxType]="'button'">
139
+ <fa-icon [icon]="faTimes" class="block text-xl"></fa-icon>
140
+ </spx-button>
141
+ }
135
142
  </div>
136
- </div>
137
- <div *ngIf="this.spxShowValidationMessages" class="bg-red-600 rounded-b text-white p-3">
138
- <ng-content select="[validation-messages]"></ng-content>
139
- </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
143
+ </div>
144
+ @if (this.spxShowValidationMessages) {
145
+ <div class="bg-red-600 rounded-b text-white p-3">
146
+ <ng-content select="[validation-messages]"></ng-content>
147
+ </div>
148
+ }`, isInline: true, 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"] }] }); }
140
149
  }
141
150
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
142
151
  type: Component,
@@ -144,75 +153,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
144
153
  selector: 'spx-input-box',
145
154
  standalone: true,
146
155
  imports: [
147
- NgIf,
148
156
  SpxButtonComponent,
149
- FontAwesomeModule,
157
+ FontAwesomeModule
150
158
  ],
151
159
  template: `<div class="flex rounded w-full gap-3"
152
- [class.rounded-none]="this.spxShowValidationMessages"
153
- [class.rounded-t]="this.spxShowValidationMessages"
154
- [class.outline-none]="this.spxFocused && !this.spxReadonly"
155
- [class.ring-2]="this.spxFocused && !this.spxReadonly"
156
- [class.ring-offset-2]="this.spxFocused && !this.spxReadonly"
157
- [class.ring-blue-500]="this.spxFocused && !this.spxReadonly"
158
- [class.bg-white]="!this.spxReadonly"
159
- [class.bg-gray-300]="this.spxReadonly"
160
- [class.cursor-not-allowed]="this.spxReadonly">
161
- <div class="flex-auto p-3"
162
- [class.p-0]="this.spxCompact"
163
- [class.flex]="this.spxCompact"
164
- [class.items-center]="this.spxCompact">
165
- <div *ngIf="this.spxShowLabel" class="font-bold text-sm mb-1 text-gray-800"
166
- [class.mb-0]="this.spxCompact"
167
- [class.px-3]="this.spxCompact">
168
- {{this.spxLabel}} <span *ngIf="spxRequired" class="text-red-800">*</span>
169
- </div>
160
+ [class.rounded-none]="this.spxShowValidationMessages"
161
+ [class.rounded-t]="this.spxShowValidationMessages"
162
+ [class.outline-none]="this.spxFocused && !this.spxReadonly"
163
+ [class.ring-2]="this.spxFocused && !this.spxReadonly"
164
+ [class.ring-offset-2]="this.spxFocused && !this.spxReadonly"
165
+ [class.ring-blue-500]="this.spxFocused && !this.spxReadonly"
166
+ [class.bg-white]="!this.spxReadonly"
167
+ [class.bg-gray-300]="this.spxReadonly"
168
+ [class.cursor-not-allowed]="this.spxReadonly">
169
+ <div class="flex-auto p-3"
170
+ [class.p-0]="this.spxCompact"
171
+ [class.flex]="this.spxCompact"
172
+ [class.items-center]="this.spxCompact">
173
+ @if (this.spxShowLabel) {
174
+ <div class="font-bold text-sm mb-1 text-gray-800"
175
+ [class.mb-0]="this.spxCompact"
176
+ [class.px-3]="this.spxCompact">
177
+ {{this.spxLabel}} @if (spxRequired) {
178
+ <span class="text-red-800">*</span>
179
+ }
180
+ </div>
181
+ }
170
182
  <ng-content select="[controls]"></ng-content>
171
183
  </div>
172
184
  <div class="flex flex-none gap-1 p-1">
173
- <spx-button
174
- *ngIf="this.spxShowEdit"
175
- (spxClick)="onEdit()"
176
- [spxFullHeight]="true"
177
- [spxSize]="'xl'"
178
- [spxType]="'button'">
179
- <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
180
- </spx-button>
181
- <spx-button
182
- *ngIf="this.spxShowHelp"
183
- (spxClick)="onHelp()"
184
- [spxFullHeight]="true"
185
- [spxDisabled]="this.spxReadonly"
186
- [spxSize]="'xl'"
187
- [spxTabIndex]="-1"
188
- [spxType]="'button'">
189
- <fa-icon [icon]="faQuestion" class="block text-xl"></fa-icon>
190
- </spx-button>
191
- <spx-button
192
- *ngIf="this.spxShowSearch"
193
- (spxClick)="onSearch()"
194
- [spxFullHeight]="true"
195
- [spxDisabled]="this.spxReadonly"
196
- [spxSize]="'xl'"
197
- [spxTabIndex]="-1"
198
- [spxType]="'button'">
199
- <fa-icon [icon]="faSearch" class="block text-xl"></fa-icon>
200
- </spx-button>
201
- <spx-button
202
- *ngIf="this.spxShowClear"
203
- (spxClick)="onClear()"
204
- [spxDisabled]="this.spxReadonly || !this.spxValue?.value"
205
- [spxFullHeight]="true"
206
- [spxSize]="'xl'"
207
- [spxTabIndex]="-1"
208
- [spxType]="'button'">
209
- <fa-icon [icon]="faTimes" class="block text-xl"></fa-icon>
210
- </spx-button>
185
+ @if (this.spxShowEdit) {
186
+ <spx-button
187
+ (spxClick)="onEdit()"
188
+ [spxFullHeight]="true"
189
+ [spxSize]="'xl'"
190
+ [spxType]="'button'">
191
+ <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
192
+ </spx-button>
193
+ }
194
+ @if (this.spxShowHelp) {
195
+ <spx-button
196
+ (spxClick)="onHelp()"
197
+ [spxFullHeight]="true"
198
+ [spxDisabled]="this.spxReadonly"
199
+ [spxSize]="'xl'"
200
+ [spxTabIndex]="-1"
201
+ [spxType]="'button'">
202
+ <fa-icon [icon]="faQuestion" class="block text-xl"></fa-icon>
203
+ </spx-button>
204
+ }
205
+ @if (this.spxShowSearch) {
206
+ <spx-button
207
+ (spxClick)="onSearch()"
208
+ [spxFullHeight]="true"
209
+ [spxDisabled]="this.spxReadonly"
210
+ [spxSize]="'xl'"
211
+ [spxTabIndex]="-1"
212
+ [spxType]="'button'">
213
+ <fa-icon [icon]="faSearch" class="block text-xl"></fa-icon>
214
+ </spx-button>
215
+ }
216
+ @if (this.spxShowClear) {
217
+ <spx-button
218
+ (spxClick)="onClear()"
219
+ [spxDisabled]="this.spxReadonly || !this.spxValue?.value"
220
+ [spxFullHeight]="true"
221
+ [spxSize]="'xl'"
222
+ [spxTabIndex]="-1"
223
+ [spxType]="'button'">
224
+ <fa-icon [icon]="faTimes" class="block text-xl"></fa-icon>
225
+ </spx-button>
226
+ }
211
227
  </div>
212
- </div>
213
- <div *ngIf="this.spxShowValidationMessages" class="bg-red-600 rounded-b text-white p-3">
214
- <ng-content select="[validation-messages]"></ng-content>
215
- </div>`,
228
+ </div>
229
+ @if (this.spxShowValidationMessages) {
230
+ <div class="bg-red-600 rounded-b text-white p-3">
231
+ <ng-content select="[validation-messages]"></ng-content>
232
+ </div>
233
+ }`,
216
234
  }]
217
235
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { spxCompact: [{
218
236
  type: Input
@@ -300,22 +318,23 @@ class SpxDropdownComponent {
300
318
  this.spxSelect.emit(valuePair);
301
319
  }
302
320
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
303
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: "spxSuggestions" }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: `<div class="relative text-black">
304
- <div
305
- class="absolute bg-gray-100 left-0 right-0 z-20">
306
- <button
307
- *ngFor="let valuePair of this.spxSuggestions; let i = index"
308
- class="text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left"
309
- [class.bg-gray-100]="i === this.focusPosition"
310
- [class.bg-white]="i !== this.focusPosition"
311
- (click)="this.handleSuggestionClick(valuePair)"
312
- [attr.tabindex]="-1"
313
- [attr.type]="'button'">
314
- <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
315
- <spx-button (spxClick)="this.handleSuggestionClick(valuePair)" [spxType]="'button'" [spxTabIndex]="-1">Select</spx-button>
316
- </button>
317
- </div>
318
- </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }] }); }
321
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: "spxSuggestions" }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: `<div class="relative text-black">
322
+ <div
323
+ class="absolute bg-gray-100 left-0 right-0 z-20">
324
+ @for (valuePair of this.spxSuggestions; track valuePair; let i = $index) {
325
+ <button
326
+ class="text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left"
327
+ [class.bg-gray-100]="i === this.focusPosition"
328
+ [class.bg-white]="i !== this.focusPosition"
329
+ (click)="this.handleSuggestionClick(valuePair)"
330
+ [attr.tabindex]="-1"
331
+ [attr.type]="'button'">
332
+ <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
333
+ <spx-button (spxClick)="this.handleSuggestionClick(valuePair)" [spxType]="'button'" [spxTabIndex]="-1">Select</spx-button>
334
+ </button>
335
+ }
336
+ </div>
337
+ </div>`, isInline: true, dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }] }); }
319
338
  }
320
339
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxDropdownComponent, decorators: [{
321
340
  type: Component,
@@ -323,26 +342,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
323
342
  selector: 'spx-dropdown',
324
343
  standalone: true,
325
344
  imports: [
326
- NgIf,
327
- NgFor,
328
- SpxButtonComponent,
345
+ SpxButtonComponent
329
346
  ],
330
347
  template: `<div class="relative text-black">
331
- <div
332
- class="absolute bg-gray-100 left-0 right-0 z-20">
333
- <button
334
- *ngFor="let valuePair of this.spxSuggestions; let i = index"
335
- class="text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left"
336
- [class.bg-gray-100]="i === this.focusPosition"
337
- [class.bg-white]="i !== this.focusPosition"
338
- (click)="this.handleSuggestionClick(valuePair)"
339
- [attr.tabindex]="-1"
340
- [attr.type]="'button'">
341
- <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
342
- <spx-button (spxClick)="this.handleSuggestionClick(valuePair)" [spxType]="'button'" [spxTabIndex]="-1">Select</spx-button>
343
- </button>
344
- </div>
345
- </div>`,
348
+ <div
349
+ class="absolute bg-gray-100 left-0 right-0 z-20">
350
+ @for (valuePair of this.spxSuggestions; track valuePair; let i = $index) {
351
+ <button
352
+ class="text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left"
353
+ [class.bg-gray-100]="i === this.focusPosition"
354
+ [class.bg-white]="i !== this.focusPosition"
355
+ (click)="this.handleSuggestionClick(valuePair)"
356
+ [attr.tabindex]="-1"
357
+ [attr.type]="'button'">
358
+ <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
359
+ <spx-button (spxClick)="this.handleSuggestionClick(valuePair)" [spxType]="'button'" [spxTabIndex]="-1">Select</spx-button>
360
+ </button>
361
+ }
362
+ </div>
363
+ </div>`,
346
364
  }]
347
365
  }], propDecorators: { spxSuggestions: [{
348
366
  type: Input
@@ -396,35 +414,38 @@ class SpxInputTextComponent {
396
414
  this.spxFocused = true;
397
415
  }
398
416
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
399
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxAutocomplete: "spxAutocomplete", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxSuggestions: "spxSuggestions", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused", spxType: "spxType", value: "value", spxWasInternalUpdate: "spxWasInternalUpdate" }, outputs: { spxBlurFromChild: "spxBlurFromChild", spxChange: "spxChange", spxFocus: "spxFocus" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<div class="relative text-black">
400
- <input
401
- #input
402
- class="font-bold text-lg w-full outline-none"
403
- autocomplete="off"
404
- spellcheck="false"
405
- [class.bg-white]="!this.spxReadonly"
406
- [class.bg-gray-300]="this.spxReadonly"
407
- [class.cursor-not-allowed]="this.spxReadonly"
408
- [class.uppercase]="this.spxCapitalize"
409
- [attr.autocomplete]="this.spxAutocomplete ? this.spxAutocomplete : undefined"
410
- [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
411
- [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
412
- [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
413
- [attr.pattern]="this.spxPattern ? this.spxPattern : undefined"
414
- [attr.name]="this.spxName"
415
- [attr.type]="this.spxType"
416
- [value]="this.value?.description ? this.value?.description : this.value?.value"
417
- (blur)="this.handleBlur()"
418
- (keyUp)="this.handleKeyUp()"
419
- (focus)="this.handleFocus()"
420
- (input)="this.handleDescriptionInput($event)"
421
- />
422
- <span *ngIf="this.value?.description && this.value?.value && this.value?.description?.valueOf() !== this.value?.value?.valueOf()">{{this.value?.value}}</span>
423
- <spx-dropdown
424
- *ngIf="this.spxFocused && (this.spxType === 'overlay' || this.spxType === 'overlaynumber')"
425
- [spxSuggestions]="this.spxSuggestions" (spxSelect)="this.handleSuggestionClick($event)">
426
- </spx-dropdown>
427
- </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }] }); }
417
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxAutocomplete: "spxAutocomplete", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxSuggestions: "spxSuggestions", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused", spxType: "spxType", value: "value", spxWasInternalUpdate: "spxWasInternalUpdate" }, outputs: { spxBlurFromChild: "spxBlurFromChild", spxChange: "spxChange", spxFocus: "spxFocus" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<div class="relative text-black">
418
+ <input
419
+ #input
420
+ class="font-bold text-lg w-full outline-none"
421
+ autocomplete="off"
422
+ spellcheck="false"
423
+ [class.bg-white]="!this.spxReadonly"
424
+ [class.bg-gray-300]="this.spxReadonly"
425
+ [class.cursor-not-allowed]="this.spxReadonly"
426
+ [class.uppercase]="this.spxCapitalize"
427
+ [attr.autocomplete]="this.spxAutocomplete ? this.spxAutocomplete : undefined"
428
+ [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
429
+ [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
430
+ [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
431
+ [attr.pattern]="this.spxPattern ? this.spxPattern : undefined"
432
+ [attr.name]="this.spxName"
433
+ [attr.type]="this.spxType"
434
+ [value]="this.value?.description ? this.value?.description : this.value?.value"
435
+ (blur)="this.handleBlur()"
436
+ (keyUp)="this.handleKeyUp()"
437
+ (focus)="this.handleFocus()"
438
+ (input)="this.handleDescriptionInput($event)"
439
+ />
440
+ @if (this.value?.description && this.value?.value && this.value?.description?.valueOf() !== this.value?.value?.valueOf()) {
441
+ <span>{{this.value?.value}}</span>
442
+ }
443
+ @if (this.spxFocused && (this.spxType === 'overlay' || this.spxType === 'overlaynumber')) {
444
+ <spx-dropdown
445
+ [spxSuggestions]="this.spxSuggestions" (spxSelect)="this.handleSuggestionClick($event)">
446
+ </spx-dropdown>
447
+ }
448
+ </div>`, isInline: true, dependencies: [{ kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }] }); }
428
449
  }
429
450
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputTextComponent, decorators: [{
430
451
  type: Component,
@@ -432,38 +453,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
432
453
  selector: 'spx-input-text',
433
454
  standalone: true,
434
455
  imports: [
435
- NgIf,
436
- SpxDropdownComponent,
456
+ SpxDropdownComponent
437
457
  ],
438
458
  template: `<div class="relative text-black">
439
- <input
440
- #input
441
- class="font-bold text-lg w-full outline-none"
442
- autocomplete="off"
443
- spellcheck="false"
444
- [class.bg-white]="!this.spxReadonly"
445
- [class.bg-gray-300]="this.spxReadonly"
446
- [class.cursor-not-allowed]="this.spxReadonly"
447
- [class.uppercase]="this.spxCapitalize"
448
- [attr.autocomplete]="this.spxAutocomplete ? this.spxAutocomplete : undefined"
449
- [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
450
- [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
451
- [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
452
- [attr.pattern]="this.spxPattern ? this.spxPattern : undefined"
453
- [attr.name]="this.spxName"
454
- [attr.type]="this.spxType"
455
- [value]="this.value?.description ? this.value?.description : this.value?.value"
456
- (blur)="this.handleBlur()"
457
- (keyUp)="this.handleKeyUp()"
458
- (focus)="this.handleFocus()"
459
- (input)="this.handleDescriptionInput($event)"
460
- />
461
- <span *ngIf="this.value?.description && this.value?.value && this.value?.description?.valueOf() !== this.value?.value?.valueOf()">{{this.value?.value}}</span>
462
- <spx-dropdown
463
- *ngIf="this.spxFocused && (this.spxType === 'overlay' || this.spxType === 'overlaynumber')"
464
- [spxSuggestions]="this.spxSuggestions" (spxSelect)="this.handleSuggestionClick($event)">
465
- </spx-dropdown>
466
- </div>`,
459
+ <input
460
+ #input
461
+ class="font-bold text-lg w-full outline-none"
462
+ autocomplete="off"
463
+ spellcheck="false"
464
+ [class.bg-white]="!this.spxReadonly"
465
+ [class.bg-gray-300]="this.spxReadonly"
466
+ [class.cursor-not-allowed]="this.spxReadonly"
467
+ [class.uppercase]="this.spxCapitalize"
468
+ [attr.autocomplete]="this.spxAutocomplete ? this.spxAutocomplete : undefined"
469
+ [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
470
+ [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
471
+ [attr.inputMode]="this.spxInputMode ? this.spxInputMode : undefined"
472
+ [attr.pattern]="this.spxPattern ? this.spxPattern : undefined"
473
+ [attr.name]="this.spxName"
474
+ [attr.type]="this.spxType"
475
+ [value]="this.value?.description ? this.value?.description : this.value?.value"
476
+ (blur)="this.handleBlur()"
477
+ (keyUp)="this.handleKeyUp()"
478
+ (focus)="this.handleFocus()"
479
+ (input)="this.handleDescriptionInput($event)"
480
+ />
481
+ @if (this.value?.description && this.value?.value && this.value?.description?.valueOf() !== this.value?.value?.valueOf()) {
482
+ <span>{{this.value?.value}}</span>
483
+ }
484
+ @if (this.spxFocused && (this.spxType === 'overlay' || this.spxType === 'overlaynumber')) {
485
+ <spx-dropdown
486
+ [spxSuggestions]="this.spxSuggestions" (spxSelect)="this.handleSuggestionClick($event)">
487
+ </spx-dropdown>
488
+ }
489
+ </div>`,
467
490
  }]
468
491
  }], propDecorators: { spxName: [{
469
492
  type: Input
@@ -662,100 +685,104 @@ class SpxInputDateComponent {
662
685
  }
663
686
  }
664
687
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
665
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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'>
666
- <input
667
- class='spx-input-date__input'
668
- [attr.value]="this.spxInternalValue.years"
669
- (focus)="this.handleFocus('years')"
670
- (input)="this.handleYearInput($event)"
671
- (keyDown)="this.handleKeyDown($event)"
672
- [attr.type]="'number'"
673
- [attr.min]="1900"
674
- [attr.max]="2100"
675
- [attr.step]="1"
676
- />
677
- <div class='spx-input-date__control-label'>Year</div>
678
- <input
679
- *ngIf="this.spxSelectMonth"
680
- class='spx-input-date__input'
681
- [attr.value]="this.spxInternalValue.months"
682
- (focus)="this.handleFocus('months')"
683
- (input)="this.handleMonthInput($event)"
684
- (keyDown)="this.handleKeyDown($event)"
685
- [attr.type]="'number'"
686
- [attr.min]="1"
687
- [attr.max]="12"
688
- [attr.step]="1" />
689
- <div class='spx-input-date__control-label'>Month</div>
688
+ 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'>
690
689
  <input
691
- *ngIf="this.spxSelectDay"
692
690
  class='spx-input-date__input'
693
- [attr.value]="this.spxInternalValue.days"
694
- (focus)="this.handleFocus('days')"
695
- (input)="this.handleDayInput($event)"
691
+ [attr.value]="this.spxInternalValue.years"
692
+ (focus)="this.handleFocus('years')"
693
+ (input)="this.handleYearInput($event)"
696
694
  (keyDown)="this.handleKeyDown($event)"
697
695
  [attr.type]="'number'"
698
- [attr.min]="1"
699
- [attr.max]="31"
700
- [attr.step]="1" />
701
- <div class='spx-input-date__control-label'>Days</div>
702
- </div>
703
- <div class='spx-input-date__suggestions'>
704
- <spx-suggestion
705
- *ngFor="let valuePair of spxSuggestions[spxSelectStep]"
706
- (click)="this.handleSuggestionClick(valuePair.value)">{{valuePair?.description}}</spx-suggestion>
707
- </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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }] }); }
696
+ [attr.min]="1900"
697
+ [attr.max]="2100"
698
+ [attr.step]="1"
699
+ />
700
+ <div class='spx-input-date__control-label'>Year</div>
701
+ @if (this.spxSelectMonth) {
702
+ <input
703
+ class='spx-input-date__input'
704
+ [attr.value]="this.spxInternalValue.months"
705
+ (focus)="this.handleFocus('months')"
706
+ (input)="this.handleMonthInput($event)"
707
+ (keyDown)="this.handleKeyDown($event)"
708
+ [attr.type]="'number'"
709
+ [attr.min]="1"
710
+ [attr.max]="12"
711
+ [attr.step]="1" />
712
+ }
713
+ <div class='spx-input-date__control-label'>Month</div>
714
+ @if (this.spxSelectDay) {
715
+ <input
716
+ class='spx-input-date__input'
717
+ [attr.value]="this.spxInternalValue.days"
718
+ (focus)="this.handleFocus('days')"
719
+ (input)="this.handleDayInput($event)"
720
+ (keyDown)="this.handleKeyDown($event)"
721
+ [attr.type]="'number'"
722
+ [attr.min]="1"
723
+ [attr.max]="31"
724
+ [attr.step]="1" />
725
+ }
726
+ <div class='spx-input-date__control-label'>Days</div>
727
+ </div>
728
+ <div class='spx-input-date__suggestions'>
729
+ @for (valuePair of spxSuggestions[spxSelectStep]; track valuePair) {
730
+ <spx-suggestion
731
+ (click)="this.handleSuggestionClick(valuePair.value)">{{valuePair?.description}}</spx-suggestion>
732
+ }
733
+ </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"] }] }); }
708
734
  }
709
735
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputDateComponent, decorators: [{
710
736
  type: Component,
711
737
  args: [{ selector: 'spx-input-date', standalone: true, imports: [
712
- NgIf,
713
- NgFor,
714
738
  SpxButtonComponent,
715
739
  SpxSuggestionComponent
716
740
  ], template: `<div class='spx-input-date__controls'>
717
- <input
718
- class='spx-input-date__input'
719
- [attr.value]="this.spxInternalValue.years"
720
- (focus)="this.handleFocus('years')"
721
- (input)="this.handleYearInput($event)"
722
- (keyDown)="this.handleKeyDown($event)"
723
- [attr.type]="'number'"
724
- [attr.min]="1900"
725
- [attr.max]="2100"
726
- [attr.step]="1"
727
- />
728
- <div class='spx-input-date__control-label'>Year</div>
729
- <input
730
- *ngIf="this.spxSelectMonth"
731
- class='spx-input-date__input'
732
- [attr.value]="this.spxInternalValue.months"
733
- (focus)="this.handleFocus('months')"
734
- (input)="this.handleMonthInput($event)"
735
- (keyDown)="this.handleKeyDown($event)"
736
- [attr.type]="'number'"
737
- [attr.min]="1"
738
- [attr.max]="12"
739
- [attr.step]="1" />
740
- <div class='spx-input-date__control-label'>Month</div>
741
741
  <input
742
- *ngIf="this.spxSelectDay"
743
742
  class='spx-input-date__input'
744
- [attr.value]="this.spxInternalValue.days"
745
- (focus)="this.handleFocus('days')"
746
- (input)="this.handleDayInput($event)"
743
+ [attr.value]="this.spxInternalValue.years"
744
+ (focus)="this.handleFocus('years')"
745
+ (input)="this.handleYearInput($event)"
747
746
  (keyDown)="this.handleKeyDown($event)"
748
747
  [attr.type]="'number'"
749
- [attr.min]="1"
750
- [attr.max]="31"
751
- [attr.step]="1" />
752
- <div class='spx-input-date__control-label'>Days</div>
753
- </div>
754
- <div class='spx-input-date__suggestions'>
755
- <spx-suggestion
756
- *ngFor="let valuePair of spxSuggestions[spxSelectStep]"
757
- (click)="this.handleSuggestionClick(valuePair.value)">{{valuePair?.description}}</spx-suggestion>
758
- </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"] }]
748
+ [attr.min]="1900"
749
+ [attr.max]="2100"
750
+ [attr.step]="1"
751
+ />
752
+ <div class='spx-input-date__control-label'>Year</div>
753
+ @if (this.spxSelectMonth) {
754
+ <input
755
+ class='spx-input-date__input'
756
+ [attr.value]="this.spxInternalValue.months"
757
+ (focus)="this.handleFocus('months')"
758
+ (input)="this.handleMonthInput($event)"
759
+ (keyDown)="this.handleKeyDown($event)"
760
+ [attr.type]="'number'"
761
+ [attr.min]="1"
762
+ [attr.max]="12"
763
+ [attr.step]="1" />
764
+ }
765
+ <div class='spx-input-date__control-label'>Month</div>
766
+ @if (this.spxSelectDay) {
767
+ <input
768
+ class='spx-input-date__input'
769
+ [attr.value]="this.spxInternalValue.days"
770
+ (focus)="this.handleFocus('days')"
771
+ (input)="this.handleDayInput($event)"
772
+ (keyDown)="this.handleKeyDown($event)"
773
+ [attr.type]="'number'"
774
+ [attr.min]="1"
775
+ [attr.max]="31"
776
+ [attr.step]="1" />
777
+ }
778
+ <div class='spx-input-date__control-label'>Days</div>
779
+ </div>
780
+ <div class='spx-input-date__suggestions'>
781
+ @for (valuePair of spxSuggestions[spxSelectStep]; track valuePair) {
782
+ <spx-suggestion
783
+ (click)="this.handleSuggestionClick(valuePair.value)">{{valuePair?.description}}</spx-suggestion>
784
+ }
785
+ </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"] }]
759
786
  }], ctorParameters: () => [], propDecorators: { spxMax: [{
760
787
  type: Input
761
788
  }], spxMin: [{
@@ -889,9 +916,7 @@ class SpxInputFloatComponent {
889
916
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputFloatComponent, decorators: [{
890
917
  type: Component,
891
918
  args: [{ selector: 'spx-input-float', standalone: true, imports: [
892
- NgIf,
893
- NgFor,
894
- SpxButtonComponent,
919
+ SpxButtonComponent
895
920
  ], template: `<div class="flex items-end">
896
921
  <input
897
922
  #firstInputRef
@@ -1100,17 +1125,18 @@ class SpxInputRadioComponent {
1100
1125
  });
1101
1126
  }
1102
1127
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1103
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: "spxName", spxValidators: "spxValidators", spxFocused: "spxFocused", spxShowLabel: "spxShowLabel", spxReadonly: "spxReadonly", spxSuggestions: "spxSuggestions", value: "value" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, usesOnChanges: true, ngImport: i0, template: `<div class="grid grid-cols-2 gap-2" [class.mt-3]="this.spxShowLabel">
1104
- <spx-suggestion
1105
- *ngFor="let valuePair of this.cachedSuggestions; let i = index"
1106
- [spxDisabled]="this.spxReadonly"
1107
- [spxFocused]="this.spxFocused && i === this.focusPosition"
1108
- [spxSelected]="this.value?.value === valuePair?.value"
1109
- [spxTabbable]="this.focusPosition === i"
1110
- (click)="this.handleSuggestionClick($event, valuePair)">
1111
- {{valuePair?.description}}
1112
- </spx-suggestion>
1113
- </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }] }); }
1128
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: "spxName", spxValidators: "spxValidators", spxFocused: "spxFocused", spxShowLabel: "spxShowLabel", spxReadonly: "spxReadonly", spxSuggestions: "spxSuggestions", value: "value" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, usesOnChanges: true, ngImport: i0, template: `<div class="grid grid-cols-2 gap-2" [class.mt-3]="this.spxShowLabel">
1129
+ @for (valuePair of this.cachedSuggestions; track valuePair; let i = $index) {
1130
+ <spx-suggestion
1131
+ [spxDisabled]="this.spxReadonly"
1132
+ [spxFocused]="this.spxFocused && i === this.focusPosition"
1133
+ [spxSelected]="this.value?.value === valuePair?.value"
1134
+ [spxTabbable]="this.focusPosition === i"
1135
+ (click)="this.handleSuggestionClick($event, valuePair)">
1136
+ {{valuePair?.description}}
1137
+ </spx-suggestion>
1138
+ }
1139
+ </div>`, isInline: true, dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }] }); }
1114
1140
  }
1115
1141
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
1116
1142
  type: Component,
@@ -1118,20 +1144,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1118
1144
  selector: 'spx-input-radio',
1119
1145
  standalone: true,
1120
1146
  imports: [
1121
- NgFor,
1122
- SpxSuggestionComponent,
1147
+ SpxSuggestionComponent
1123
1148
  ],
1124
1149
  template: `<div class="grid grid-cols-2 gap-2" [class.mt-3]="this.spxShowLabel">
1125
- <spx-suggestion
1126
- *ngFor="let valuePair of this.cachedSuggestions; let i = index"
1127
- [spxDisabled]="this.spxReadonly"
1128
- [spxFocused]="this.spxFocused && i === this.focusPosition"
1129
- [spxSelected]="this.value?.value === valuePair?.value"
1130
- [spxTabbable]="this.focusPosition === i"
1131
- (click)="this.handleSuggestionClick($event, valuePair)">
1132
- {{valuePair?.description}}
1133
- </spx-suggestion>
1134
- </div>`,
1150
+ @for (valuePair of this.cachedSuggestions; track valuePair; let i = $index) {
1151
+ <spx-suggestion
1152
+ [spxDisabled]="this.spxReadonly"
1153
+ [spxFocused]="this.spxFocused && i === this.focusPosition"
1154
+ [spxSelected]="this.value?.value === valuePair?.value"
1155
+ [spxTabbable]="this.focusPosition === i"
1156
+ (click)="this.handleSuggestionClick($event, valuePair)">
1157
+ {{valuePair?.description}}
1158
+ </spx-suggestion>
1159
+ }
1160
+ </div>`,
1135
1161
  }]
1136
1162
  }], propDecorators: { spxName: [{
1137
1163
  type: Input
@@ -1190,37 +1216,45 @@ class SpxInputTimeModalComponent {
1190
1216
  this.modalController.dismiss(value);
1191
1217
  }
1192
1218
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputTimeModalComponent, deps: [{ token: i1$1.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
1193
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpxInputTimeModalComponent, isStandalone: true, selector: "spx-input-time-modal", inputs: { view: "view", value: "value" }, outputs: { change: "change" }, ngImport: i0, template: `<ion-header>
1194
- <ion-toolbar>
1195
- <ion-title>Select {{view}}</ion-title>
1196
- <ion-buttons slot="end">
1197
- <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">
1198
- <fa-icon [icon]="faXmark"></fa-icon>
1199
- </spx-button>
1200
- </ion-buttons>
1201
- </ion-toolbar>
1202
- </ion-header>
1203
- <ion-content class="ion-padding bg-white">
1204
- <!-- Uren -->
1205
- <div class="custom-bg grid grid-cols-1 gap-3">
1206
- <div *ngIf="view === 'hours'" class="flex-wrap gap-2">
1207
- <div class="grid grid-cols-3 md:grid-cols-4 gap-3">
1208
- <div *ngFor="let hour of hourOptions" class="text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300" [class.selected]="value === hour" (click)="onChange(hour)">
1209
- {{ hour }}
1219
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputTimeModalComponent, isStandalone: true, selector: "spx-input-time-modal", inputs: { view: "view", value: "value" }, outputs: { change: "change" }, ngImport: i0, template: `<ion-header>
1220
+ <ion-toolbar>
1221
+ <ion-title>Select {{view}}</ion-title>
1222
+ <ion-buttons slot="end">
1223
+ <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">
1224
+ <fa-icon [icon]="faXmark"></fa-icon>
1225
+ </spx-button>
1226
+ </ion-buttons>
1227
+ </ion-toolbar>
1228
+ </ion-header>
1229
+ <ion-content class="ion-padding bg-white">
1230
+ <!-- Uren -->
1231
+ <div class="custom-bg grid grid-cols-1 gap-3">
1232
+ @if (view === 'hours') {
1233
+ <div class="flex-wrap gap-2">
1234
+ <div class="grid grid-cols-3 md:grid-cols-4 gap-3">
1235
+ @for (hour of hourOptions; track hour) {
1236
+ <div class="text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300" [class.selected]="value === hour" (click)="onChange(hour)">
1237
+ {{ hour }}
1238
+ </div>
1239
+ }
1240
+ </div>
1210
1241
  </div>
1211
- </div>
1212
- </div>
1213
- <!-- Minuten -->
1214
- <div *ngIf="view === 'minutes'" class="grid grid-cols-1 gap-3">
1215
- <div class="grid grid-cols-4 md:grid-cols-5 gap-3">
1216
- <div *ngFor="let minute of minuteOptions" class="text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300" [class.selected]="value === minute" (click)="onChange(minute)">
1217
- {{ minute }}
1242
+ }
1243
+ <!-- Minuten -->
1244
+ @if (view === 'minutes') {
1245
+ <div class="grid grid-cols-1 gap-3">
1246
+ <div class="grid grid-cols-4 md:grid-cols-5 gap-3">
1247
+ @for (minute of minuteOptions; track minute) {
1248
+ <div class="text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300" [class.selected]="value === minute" (click)="onChange(minute)">
1249
+ {{ minute }}
1250
+ </div>
1251
+ }
1252
+ </div>
1218
1253
  </div>
1219
- </div>
1254
+ }
1220
1255
  </div>
1221
- </div>
1222
- </ion-content>
1223
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], 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"] }] }); }
1256
+ </ion-content>
1257
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], 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"] }] }); }
1224
1258
  }
1225
1259
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
1226
1260
  type: Component,
@@ -1228,44 +1262,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1228
1262
  selector: 'spx-input-time-modal',
1229
1263
  standalone: true,
1230
1264
  imports: [
1231
- NgIf,
1232
- NgFor,
1233
1265
  IonicModule,
1234
1266
  SpxButtonComponent,
1235
1267
  SpxDropdownComponent,
1236
- FontAwesomeModule,
1268
+ FontAwesomeModule
1237
1269
  ],
1238
1270
  template: `<ion-header>
1239
- <ion-toolbar>
1240
- <ion-title>Select {{view}}</ion-title>
1241
- <ion-buttons slot="end">
1242
- <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">
1243
- <fa-icon [icon]="faXmark"></fa-icon>
1244
- </spx-button>
1245
- </ion-buttons>
1246
- </ion-toolbar>
1247
- </ion-header>
1248
- <ion-content class="ion-padding bg-white">
1249
- <!-- Uren -->
1250
- <div class="custom-bg grid grid-cols-1 gap-3">
1251
- <div *ngIf="view === 'hours'" class="flex-wrap gap-2">
1252
- <div class="grid grid-cols-3 md:grid-cols-4 gap-3">
1253
- <div *ngFor="let hour of hourOptions" class="text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300" [class.selected]="value === hour" (click)="onChange(hour)">
1254
- {{ hour }}
1271
+ <ion-toolbar>
1272
+ <ion-title>Select {{view}}</ion-title>
1273
+ <ion-buttons slot="end">
1274
+ <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">
1275
+ <fa-icon [icon]="faXmark"></fa-icon>
1276
+ </spx-button>
1277
+ </ion-buttons>
1278
+ </ion-toolbar>
1279
+ </ion-header>
1280
+ <ion-content class="ion-padding bg-white">
1281
+ <!-- Uren -->
1282
+ <div class="custom-bg grid grid-cols-1 gap-3">
1283
+ @if (view === 'hours') {
1284
+ <div class="flex-wrap gap-2">
1285
+ <div class="grid grid-cols-3 md:grid-cols-4 gap-3">
1286
+ @for (hour of hourOptions; track hour) {
1287
+ <div class="text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300" [class.selected]="value === hour" (click)="onChange(hour)">
1288
+ {{ hour }}
1289
+ </div>
1290
+ }
1291
+ </div>
1255
1292
  </div>
1256
- </div>
1257
- </div>
1258
- <!-- Minuten -->
1259
- <div *ngIf="view === 'minutes'" class="grid grid-cols-1 gap-3">
1260
- <div class="grid grid-cols-4 md:grid-cols-5 gap-3">
1261
- <div *ngFor="let minute of minuteOptions" class="text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300" [class.selected]="value === minute" (click)="onChange(minute)">
1262
- {{ minute }}
1293
+ }
1294
+ <!-- Minuten -->
1295
+ @if (view === 'minutes') {
1296
+ <div class="grid grid-cols-1 gap-3">
1297
+ <div class="grid grid-cols-4 md:grid-cols-5 gap-3">
1298
+ @for (minute of minuteOptions; track minute) {
1299
+ <div class="text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300" [class.selected]="value === minute" (click)="onChange(minute)">
1300
+ {{ minute }}
1301
+ </div>
1302
+ }
1303
+ </div>
1263
1304
  </div>
1264
- </div>
1305
+ }
1265
1306
  </div>
1266
- </div>
1267
- </ion-content>
1268
- `,
1307
+ </ion-content>
1308
+ `,
1269
1309
  }]
1270
1310
  }], ctorParameters: () => [{ type: i1$1.ModalController }], propDecorators: { view: [{
1271
1311
  type: Input
@@ -1384,11 +1424,9 @@ class SpxInputTimeComponent {
1384
1424
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputTimeComponent, decorators: [{
1385
1425
  type: Component,
1386
1426
  args: [{ selector: 'spx-input-time', standalone: true, imports: [
1387
- NgIf,
1388
- NgFor,
1389
1427
  SpxButtonComponent,
1390
1428
  SpxDropdownComponent,
1391
- IonicModule,
1429
+ IonicModule
1392
1430
  ], template: `<div class="relative text-black">
1393
1431
  <div class="flex items-center justify-around gap-3">
1394
1432
  <div class="grow rounded bg-gray-100 p-3 text-xl text-center font-bold" (click)="openDialog('hours')">{{ formattedHour ?? '--' }}</div>
@@ -1539,117 +1577,123 @@ class SpxInputComponent {
1539
1577
  this.onTouched = fn;
1540
1578
  }
1541
1579
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1542
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxLabel: "spxLabel", spxMax: "spxMax", spxMin: "spxMin", spxName: "spxName", spxReadonly: "spxReadonly", spxAutocomplete: "spxAutocomplete", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxRequired: "spxRequired", spxSelectMonth: "spxSelectMonth", spxSelectDay: "spxSelectDay", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxShowLabel: "spxShowLabel", spxCompact: "spxCompact", spxShowClear: "spxShowClear", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxStep: "spxStep", spxSuggestions: "spxSuggestions", spxType: "spxType", spxValidators: "spxValidators", value: "value", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused" }, outputs: { spxBlur: "spxBlur", spxClear: "spxClear", spxChange: "spxChange", spxFocus: "spxFocus", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
1580
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxLabel: "spxLabel", spxMax: "spxMax", spxMin: "spxMin", spxName: "spxName", spxReadonly: "spxReadonly", spxAutocomplete: "spxAutocomplete", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxRequired: "spxRequired", spxSelectMonth: "spxSelectMonth", spxSelectDay: "spxSelectDay", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxShowLabel: "spxShowLabel", spxCompact: "spxCompact", spxShowClear: "spxShowClear", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxStep: "spxStep", spxSuggestions: "spxSuggestions", spxType: "spxType", spxValidators: "spxValidators", value: "value", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused" }, outputs: { spxBlur: "spxBlur", spxClear: "spxClear", spxChange: "spxChange", spxFocus: "spxFocus", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
1543
1581
  {
1544
1582
  provide: NG_VALUE_ACCESSOR,
1545
1583
  useExisting: SpxInputComponent,
1546
1584
  multi: true
1547
1585
  }
1548
1586
  ], viewQueries: [{ propertyName: "floatInput", first: true, predicate: SpxInputFloatComponent, descendants: true }, { propertyName: "numberInput", first: true, predicate: SpxInputNumberComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: SpxInputTextComponent, descendants: true }, { propertyName: "timeInput", first: true, predicate: SpxInputTimeComponent, descendants: true }, { propertyName: "radioInput", first: true, predicate: SpxInputRadioComponent, descendants: true }], ngImport: i0, template: `<spx-input-box
1549
- [spxFocused]="this.spxFocused"
1550
- [spxLabel]="this.spxLabel"
1551
- [spxReadonly]="this.spxReadonly"
1552
- [spxRequired]="this.spxRequired"
1553
- [spxValue]="this.value"
1554
- [spxShowHelp]="this.spxShowHelp"
1555
- [spxCompact]="this.spxCompact"
1556
- [spxShowClear]="this.spxShowClear"
1557
- [spxShowEdit]="this.spxShowEdit"
1558
- [spxShowLabel]="this.spxShowLabel"
1559
- [spxShowSearch]="this.spxShowSearch ? this.spxShowSearch : this.spxType === 'autocomplete'"
1560
- [spxShowValidationMessages]="this.spxShowValidationMessages"
1561
- (spxClear)="this.handleClear()"
1562
- (spxEdit)="this.handleEdit()"
1563
- (spxHelp)="this.handleHelp()"
1564
- (spxFocus)="this.setFocusIn()"
1565
- (spxFocusOut)="this.setFocusOut()"
1566
- (spxSearch)="this.handleSearch()">
1567
- <div controls>
1568
- <spx-input-text
1569
- *ngIf="this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password'"
1570
- (spxBlurFromChild)="this.handleBlur()"
1571
- (spxChange)="this.handleChange($event)"
1572
- (spxFocus)="this.handleFocus()"
1573
- [spxAutocomplete]="this.spxAutocomplete ? this.spxAutocomplete : undefined"
1574
- [spxAutofocus]="this.spxAutofocus"
1575
- [spxCapitalize]="this.spxCapitalize"
1576
- [spxFocused]="this.spxFocused"
1577
- [spxInputMode]="this.spxType === 'overlaynumber' ? 'numeric' : this.spxInputMode"
1578
- [spxName]="this.spxName"
1579
- [spxPattern]="this.spxType === 'overlaynumber' ? '[0-9]*' : this.spxPattern"
1580
- [spxReadonly]="this.spxReadonly"
1581
- [spxSuggestions]="this.spxSuggestions"
1582
- [spxType]="this.spxType"
1583
- [spxValidators]="this.spxValidators"
1584
- [value]="this.value"
1585
- ></spx-input-text>
1586
- <spx-input-date
1587
- *ngIf="this.spxType === 'date'"
1588
- (spxChange)="this.handleChange($event)"
1589
- (spxFocus)="this.handleFocus()"
1590
- [spxFocused]="this.spxFocused"
1591
- [spxMax]="this.spxMax"
1592
- [spxMin]="this.spxMin"
1593
- [spxName]="this.spxName"
1594
- [spxReadonly]="this.spxReadonly"
1595
- [spxSelectDay]="this.spxSelectDay"
1596
- [spxSelectMonth]="this.spxSelectMonth"
1597
- [spxValidators]="this.spxValidators"
1598
- [value]="this.value"
1599
- ></spx-input-date>
1600
- <spx-input-float
1601
- *ngIf="this.spxType === 'float'"
1602
- (spxChange)="this.handleChange($event)"
1603
- (spxFocus)="this.handleFocus()"
1604
- [spxAutofocus]="this.spxAutofocus"
1605
- [spxFocused]="this.spxFocused"
1606
- [spxName]="this.spxName"
1607
- [spxReadonly]="this.spxReadonly"
1608
- [spxStep]="this.spxStep"
1609
- [spxValidators]="this.spxValidators"
1610
- [value]="this.value"
1611
- ></spx-input-float>
1612
- <spx-input-number
1613
- *ngIf="this.spxType === 'number'"
1614
- (spxChange)="this.handleChange($event)"
1615
- (spxFocus)="this.handleFocus()"
1616
- [spxAutofocus]="this.spxAutofocus"
1617
- [spxFocused]="this.spxFocused"
1618
- [spxInputMode]="this.spxInputMode"
1619
- [spxName]="this.spxName"
1620
- [spxReadonly]="this.spxReadonly"
1621
- [spxStep]="this.spxStep"
1622
- [spxValidators]="this.spxValidators"
1623
- [value]="this.value"
1624
- ></spx-input-number>
1625
- <spx-input-radio
1626
- #radioInput
1627
- *ngIf="this.spxType === 'radio'"
1628
- (spxChange)="this.handleChange($event)"
1629
- [spxFocused]="this.spxFocused"
1630
- [spxName]="this.spxName"
1631
- [spxReadonly]="this.spxReadonly"
1632
- [spxShowLabel]="this.spxShowLabel"
1633
- [spxSuggestions]="this.spxSuggestions"
1634
- [spxValidators]="this.spxValidators"
1635
- [value]="this.value"
1636
- ></spx-input-radio>
1637
- <spx-input-time
1638
- #timeInput
1639
- *ngIf="this.spxType === 'time'"
1640
- (spxChange)="this.handleChange($event)"
1641
- (spxFocus)="this.handleFocus()"
1642
- [spxFocused]="this.spxFocused"
1643
- [spxName]="this.spxName"
1644
- [spxReadonly]="this.spxReadonly"
1645
- [spxValidators]="this.spxValidators"
1646
- [value]="this.value"
1647
- ></spx-input-time>
1648
- </div>
1649
- <div validation-messages>
1650
- <ng-content></ng-content>
1651
- </div>
1652
- </spx-input-box>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
1587
+ [spxFocused]="this.spxFocused"
1588
+ [spxLabel]="this.spxLabel"
1589
+ [spxReadonly]="this.spxReadonly"
1590
+ [spxRequired]="this.spxRequired"
1591
+ [spxValue]="this.value"
1592
+ [spxShowHelp]="this.spxShowHelp"
1593
+ [spxCompact]="this.spxCompact"
1594
+ [spxShowClear]="this.spxShowClear"
1595
+ [spxShowEdit]="this.spxShowEdit"
1596
+ [spxShowLabel]="this.spxShowLabel"
1597
+ [spxShowSearch]="this.spxShowSearch ? this.spxShowSearch : this.spxType === 'autocomplete'"
1598
+ [spxShowValidationMessages]="this.spxShowValidationMessages"
1599
+ (spxClear)="this.handleClear()"
1600
+ (spxEdit)="this.handleEdit()"
1601
+ (spxHelp)="this.handleHelp()"
1602
+ (spxFocus)="this.setFocusIn()"
1603
+ (spxFocusOut)="this.setFocusOut()"
1604
+ (spxSearch)="this.handleSearch()">
1605
+ <div controls>
1606
+ @if (this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password') {
1607
+ <spx-input-text
1608
+ (spxBlurFromChild)="this.handleBlur()"
1609
+ (spxChange)="this.handleChange($event)"
1610
+ (spxFocus)="this.handleFocus()"
1611
+ [spxAutocomplete]="this.spxAutocomplete ? this.spxAutocomplete : undefined"
1612
+ [spxAutofocus]="this.spxAutofocus"
1613
+ [spxCapitalize]="this.spxCapitalize"
1614
+ [spxFocused]="this.spxFocused"
1615
+ [spxInputMode]="this.spxType === 'overlaynumber' ? 'numeric' : this.spxInputMode"
1616
+ [spxName]="this.spxName"
1617
+ [spxPattern]="this.spxType === 'overlaynumber' ? '[0-9]*' : this.spxPattern"
1618
+ [spxReadonly]="this.spxReadonly"
1619
+ [spxSuggestions]="this.spxSuggestions"
1620
+ [spxType]="this.spxType"
1621
+ [spxValidators]="this.spxValidators"
1622
+ [value]="this.value"
1623
+ ></spx-input-text>
1624
+ }
1625
+ @if (this.spxType === 'date') {
1626
+ <spx-input-date
1627
+ (spxChange)="this.handleChange($event)"
1628
+ (spxFocus)="this.handleFocus()"
1629
+ [spxFocused]="this.spxFocused"
1630
+ [spxMax]="this.spxMax"
1631
+ [spxMin]="this.spxMin"
1632
+ [spxName]="this.spxName"
1633
+ [spxReadonly]="this.spxReadonly"
1634
+ [spxSelectDay]="this.spxSelectDay"
1635
+ [spxSelectMonth]="this.spxSelectMonth"
1636
+ [spxValidators]="this.spxValidators"
1637
+ [value]="this.value"
1638
+ ></spx-input-date>
1639
+ }
1640
+ @if (this.spxType === 'float') {
1641
+ <spx-input-float
1642
+ (spxChange)="this.handleChange($event)"
1643
+ (spxFocus)="this.handleFocus()"
1644
+ [spxAutofocus]="this.spxAutofocus"
1645
+ [spxFocused]="this.spxFocused"
1646
+ [spxName]="this.spxName"
1647
+ [spxReadonly]="this.spxReadonly"
1648
+ [spxStep]="this.spxStep"
1649
+ [spxValidators]="this.spxValidators"
1650
+ [value]="this.value"
1651
+ ></spx-input-float>
1652
+ }
1653
+ @if (this.spxType === 'number') {
1654
+ <spx-input-number
1655
+ (spxChange)="this.handleChange($event)"
1656
+ (spxFocus)="this.handleFocus()"
1657
+ [spxAutofocus]="this.spxAutofocus"
1658
+ [spxFocused]="this.spxFocused"
1659
+ [spxInputMode]="this.spxInputMode"
1660
+ [spxName]="this.spxName"
1661
+ [spxReadonly]="this.spxReadonly"
1662
+ [spxStep]="this.spxStep"
1663
+ [spxValidators]="this.spxValidators"
1664
+ [value]="this.value"
1665
+ ></spx-input-number>
1666
+ }
1667
+ @if (this.spxType === 'radio') {
1668
+ <spx-input-radio
1669
+ #radioInput
1670
+ (spxChange)="this.handleChange($event)"
1671
+ [spxFocused]="this.spxFocused"
1672
+ [spxName]="this.spxName"
1673
+ [spxReadonly]="this.spxReadonly"
1674
+ [spxShowLabel]="this.spxShowLabel"
1675
+ [spxSuggestions]="this.spxSuggestions"
1676
+ [spxValidators]="this.spxValidators"
1677
+ [value]="this.value"
1678
+ ></spx-input-radio>
1679
+ }
1680
+ @if (this.spxType === 'time') {
1681
+ <spx-input-time
1682
+ #timeInput
1683
+ (spxChange)="this.handleChange($event)"
1684
+ (spxFocus)="this.handleFocus()"
1685
+ [spxFocused]="this.spxFocused"
1686
+ [spxName]="this.spxName"
1687
+ [spxReadonly]="this.spxReadonly"
1688
+ [spxValidators]="this.spxValidators"
1689
+ [value]="this.value"
1690
+ ></spx-input-time>
1691
+ }
1692
+ </div>
1693
+ <div validation-messages>
1694
+ <ng-content></ng-content>
1695
+ </div>
1696
+ </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"] }] }); }
1653
1697
  }
1654
1698
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputComponent, decorators: [{
1655
1699
  type: Component,
@@ -1660,14 +1704,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1660
1704
  '(spxChange)': 'handleChangeEvent($event)'
1661
1705
  },
1662
1706
  imports: [
1663
- NgIf,
1664
1707
  SpxInputBoxComponent,
1665
1708
  SpxInputDateComponent,
1666
1709
  SpxInputFloatComponent,
1667
1710
  SpxInputNumberComponent,
1668
1711
  SpxInputRadioComponent,
1669
1712
  SpxInputTextComponent,
1670
- SpxInputTimeComponent,
1713
+ SpxInputTimeComponent
1671
1714
  ],
1672
1715
  providers: [
1673
1716
  {
@@ -1677,110 +1720,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1677
1720
  }
1678
1721
  ],
1679
1722
  template: `<spx-input-box
1680
- [spxFocused]="this.spxFocused"
1681
- [spxLabel]="this.spxLabel"
1682
- [spxReadonly]="this.spxReadonly"
1683
- [spxRequired]="this.spxRequired"
1684
- [spxValue]="this.value"
1685
- [spxShowHelp]="this.spxShowHelp"
1686
- [spxCompact]="this.spxCompact"
1687
- [spxShowClear]="this.spxShowClear"
1688
- [spxShowEdit]="this.spxShowEdit"
1689
- [spxShowLabel]="this.spxShowLabel"
1690
- [spxShowSearch]="this.spxShowSearch ? this.spxShowSearch : this.spxType === 'autocomplete'"
1691
- [spxShowValidationMessages]="this.spxShowValidationMessages"
1692
- (spxClear)="this.handleClear()"
1693
- (spxEdit)="this.handleEdit()"
1694
- (spxHelp)="this.handleHelp()"
1695
- (spxFocus)="this.setFocusIn()"
1696
- (spxFocusOut)="this.setFocusOut()"
1697
- (spxSearch)="this.handleSearch()">
1698
- <div controls>
1699
- <spx-input-text
1700
- *ngIf="this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password'"
1701
- (spxBlurFromChild)="this.handleBlur()"
1702
- (spxChange)="this.handleChange($event)"
1703
- (spxFocus)="this.handleFocus()"
1704
- [spxAutocomplete]="this.spxAutocomplete ? this.spxAutocomplete : undefined"
1705
- [spxAutofocus]="this.spxAutofocus"
1706
- [spxCapitalize]="this.spxCapitalize"
1707
- [spxFocused]="this.spxFocused"
1708
- [spxInputMode]="this.spxType === 'overlaynumber' ? 'numeric' : this.spxInputMode"
1709
- [spxName]="this.spxName"
1710
- [spxPattern]="this.spxType === 'overlaynumber' ? '[0-9]*' : this.spxPattern"
1711
- [spxReadonly]="this.spxReadonly"
1712
- [spxSuggestions]="this.spxSuggestions"
1713
- [spxType]="this.spxType"
1714
- [spxValidators]="this.spxValidators"
1715
- [value]="this.value"
1716
- ></spx-input-text>
1717
- <spx-input-date
1718
- *ngIf="this.spxType === 'date'"
1719
- (spxChange)="this.handleChange($event)"
1720
- (spxFocus)="this.handleFocus()"
1721
- [spxFocused]="this.spxFocused"
1722
- [spxMax]="this.spxMax"
1723
- [spxMin]="this.spxMin"
1724
- [spxName]="this.spxName"
1725
- [spxReadonly]="this.spxReadonly"
1726
- [spxSelectDay]="this.spxSelectDay"
1727
- [spxSelectMonth]="this.spxSelectMonth"
1728
- [spxValidators]="this.spxValidators"
1729
- [value]="this.value"
1730
- ></spx-input-date>
1731
- <spx-input-float
1732
- *ngIf="this.spxType === 'float'"
1733
- (spxChange)="this.handleChange($event)"
1734
- (spxFocus)="this.handleFocus()"
1735
- [spxAutofocus]="this.spxAutofocus"
1736
- [spxFocused]="this.spxFocused"
1737
- [spxName]="this.spxName"
1738
- [spxReadonly]="this.spxReadonly"
1739
- [spxStep]="this.spxStep"
1740
- [spxValidators]="this.spxValidators"
1741
- [value]="this.value"
1742
- ></spx-input-float>
1743
- <spx-input-number
1744
- *ngIf="this.spxType === 'number'"
1745
- (spxChange)="this.handleChange($event)"
1746
- (spxFocus)="this.handleFocus()"
1747
- [spxAutofocus]="this.spxAutofocus"
1748
- [spxFocused]="this.spxFocused"
1749
- [spxInputMode]="this.spxInputMode"
1750
- [spxName]="this.spxName"
1751
- [spxReadonly]="this.spxReadonly"
1752
- [spxStep]="this.spxStep"
1753
- [spxValidators]="this.spxValidators"
1754
- [value]="this.value"
1755
- ></spx-input-number>
1756
- <spx-input-radio
1757
- #radioInput
1758
- *ngIf="this.spxType === 'radio'"
1759
- (spxChange)="this.handleChange($event)"
1760
- [spxFocused]="this.spxFocused"
1761
- [spxName]="this.spxName"
1762
- [spxReadonly]="this.spxReadonly"
1763
- [spxShowLabel]="this.spxShowLabel"
1764
- [spxSuggestions]="this.spxSuggestions"
1765
- [spxValidators]="this.spxValidators"
1766
- [value]="this.value"
1767
- ></spx-input-radio>
1768
- <spx-input-time
1769
- #timeInput
1770
- *ngIf="this.spxType === 'time'"
1771
- (spxChange)="this.handleChange($event)"
1772
- (spxFocus)="this.handleFocus()"
1773
- [spxFocused]="this.spxFocused"
1774
- [spxName]="this.spxName"
1775
- [spxReadonly]="this.spxReadonly"
1776
- [spxValidators]="this.spxValidators"
1777
- [value]="this.value"
1778
- ></spx-input-time>
1779
- </div>
1780
- <div validation-messages>
1781
- <ng-content></ng-content>
1782
- </div>
1783
- </spx-input-box>`,
1723
+ [spxFocused]="this.spxFocused"
1724
+ [spxLabel]="this.spxLabel"
1725
+ [spxReadonly]="this.spxReadonly"
1726
+ [spxRequired]="this.spxRequired"
1727
+ [spxValue]="this.value"
1728
+ [spxShowHelp]="this.spxShowHelp"
1729
+ [spxCompact]="this.spxCompact"
1730
+ [spxShowClear]="this.spxShowClear"
1731
+ [spxShowEdit]="this.spxShowEdit"
1732
+ [spxShowLabel]="this.spxShowLabel"
1733
+ [spxShowSearch]="this.spxShowSearch ? this.spxShowSearch : this.spxType === 'autocomplete'"
1734
+ [spxShowValidationMessages]="this.spxShowValidationMessages"
1735
+ (spxClear)="this.handleClear()"
1736
+ (spxEdit)="this.handleEdit()"
1737
+ (spxHelp)="this.handleHelp()"
1738
+ (spxFocus)="this.setFocusIn()"
1739
+ (spxFocusOut)="this.setFocusOut()"
1740
+ (spxSearch)="this.handleSearch()">
1741
+ <div controls>
1742
+ @if (this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password') {
1743
+ <spx-input-text
1744
+ (spxBlurFromChild)="this.handleBlur()"
1745
+ (spxChange)="this.handleChange($event)"
1746
+ (spxFocus)="this.handleFocus()"
1747
+ [spxAutocomplete]="this.spxAutocomplete ? this.spxAutocomplete : undefined"
1748
+ [spxAutofocus]="this.spxAutofocus"
1749
+ [spxCapitalize]="this.spxCapitalize"
1750
+ [spxFocused]="this.spxFocused"
1751
+ [spxInputMode]="this.spxType === 'overlaynumber' ? 'numeric' : this.spxInputMode"
1752
+ [spxName]="this.spxName"
1753
+ [spxPattern]="this.spxType === 'overlaynumber' ? '[0-9]*' : this.spxPattern"
1754
+ [spxReadonly]="this.spxReadonly"
1755
+ [spxSuggestions]="this.spxSuggestions"
1756
+ [spxType]="this.spxType"
1757
+ [spxValidators]="this.spxValidators"
1758
+ [value]="this.value"
1759
+ ></spx-input-text>
1760
+ }
1761
+ @if (this.spxType === 'date') {
1762
+ <spx-input-date
1763
+ (spxChange)="this.handleChange($event)"
1764
+ (spxFocus)="this.handleFocus()"
1765
+ [spxFocused]="this.spxFocused"
1766
+ [spxMax]="this.spxMax"
1767
+ [spxMin]="this.spxMin"
1768
+ [spxName]="this.spxName"
1769
+ [spxReadonly]="this.spxReadonly"
1770
+ [spxSelectDay]="this.spxSelectDay"
1771
+ [spxSelectMonth]="this.spxSelectMonth"
1772
+ [spxValidators]="this.spxValidators"
1773
+ [value]="this.value"
1774
+ ></spx-input-date>
1775
+ }
1776
+ @if (this.spxType === 'float') {
1777
+ <spx-input-float
1778
+ (spxChange)="this.handleChange($event)"
1779
+ (spxFocus)="this.handleFocus()"
1780
+ [spxAutofocus]="this.spxAutofocus"
1781
+ [spxFocused]="this.spxFocused"
1782
+ [spxName]="this.spxName"
1783
+ [spxReadonly]="this.spxReadonly"
1784
+ [spxStep]="this.spxStep"
1785
+ [spxValidators]="this.spxValidators"
1786
+ [value]="this.value"
1787
+ ></spx-input-float>
1788
+ }
1789
+ @if (this.spxType === 'number') {
1790
+ <spx-input-number
1791
+ (spxChange)="this.handleChange($event)"
1792
+ (spxFocus)="this.handleFocus()"
1793
+ [spxAutofocus]="this.spxAutofocus"
1794
+ [spxFocused]="this.spxFocused"
1795
+ [spxInputMode]="this.spxInputMode"
1796
+ [spxName]="this.spxName"
1797
+ [spxReadonly]="this.spxReadonly"
1798
+ [spxStep]="this.spxStep"
1799
+ [spxValidators]="this.spxValidators"
1800
+ [value]="this.value"
1801
+ ></spx-input-number>
1802
+ }
1803
+ @if (this.spxType === 'radio') {
1804
+ <spx-input-radio
1805
+ #radioInput
1806
+ (spxChange)="this.handleChange($event)"
1807
+ [spxFocused]="this.spxFocused"
1808
+ [spxName]="this.spxName"
1809
+ [spxReadonly]="this.spxReadonly"
1810
+ [spxShowLabel]="this.spxShowLabel"
1811
+ [spxSuggestions]="this.spxSuggestions"
1812
+ [spxValidators]="this.spxValidators"
1813
+ [value]="this.value"
1814
+ ></spx-input-radio>
1815
+ }
1816
+ @if (this.spxType === 'time') {
1817
+ <spx-input-time
1818
+ #timeInput
1819
+ (spxChange)="this.handleChange($event)"
1820
+ (spxFocus)="this.handleFocus()"
1821
+ [spxFocused]="this.spxFocused"
1822
+ [spxName]="this.spxName"
1823
+ [spxReadonly]="this.spxReadonly"
1824
+ [spxValidators]="this.spxValidators"
1825
+ [value]="this.value"
1826
+ ></spx-input-time>
1827
+ }
1828
+ </div>
1829
+ <div validation-messages>
1830
+ <ng-content></ng-content>
1831
+ </div>
1832
+ </spx-input-box>`,
1784
1833
  }]
1785
1834
  }], propDecorators: { spxLabel: [{
1786
1835
  type: Input