@ng-modular-forms/material 0.3.0 → 0.5.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 (14) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +55 -56
  3. package/fesm2022/ng-modular-forms-material.mjs +889 -710
  4. package/fesm2022/ng-modular-forms-material.mjs.map +1 -1
  5. package/lib/mat-form-control-base.d.ts +4 -37
  6. package/lib/mat-input-currency.component.d.ts +7 -6
  7. package/lib/mat-input-datepicker.component.d.ts +9 -7
  8. package/lib/mat-input-number.component.d.ts +15 -0
  9. package/lib/mat-input-select.component.d.ts +4 -9
  10. package/lib/mat-input-text.component.d.ts +9 -8
  11. package/lib/mat-input-textarea.component.d.ts +1 -5
  12. package/lib/mat-input-timepicker.component.d.ts +12 -0
  13. package/package.json +1 -1
  14. package/public-api.d.ts +2 -0
package/fesm2022/ng-modular-forms-material.mjs CHANGED
@@ -1,259 +1,203 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, signal, ViewChild, Directive, ChangeDetectionStrategy, Component, inject, forwardRef } from '@angular/core';
3
- import { FormControlBase, parseCurrency } from '@ng-modular-forms/core';
4
- import { Subject } from 'rxjs';
5
- import * as i4$1 from '@angular/forms';
2
+ import { input, Directive, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
3
+ import { FormControlBase, formatNumber, parseNumber } from '@ng-modular-forms/core';
4
+ import * as i3 from '@angular/forms';
6
5
  import { ReactiveFormsModule } from '@angular/forms';
7
6
  import * as i1 from '@angular/common';
8
7
  import { CommonModule } from '@angular/common';
9
- import * as i2 from '@angular/material/form-field';
10
- import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
11
- import { InputCurrencyBehavior, InputSelectBehavior, InputTextBehavior, InputTextareaBehavior } from '@ng-modular-forms/behavior';
12
- import * as i3 from '@angular/material/progress-spinner';
8
+ import { MatFormFieldModule } from '@angular/material/form-field';
9
+ import * as i4 from '@angular/material/progress-spinner';
13
10
  import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
14
- import { DateAdapter, MatNativeDateModule } from '@angular/material/core';
15
- import * as i3$1 from '@angular/material/datepicker';
16
- import { MatDatepickerModule } from '@angular/material/datepicker';
17
- import * as i4 from '@angular/material/select';
18
- import { MatSelectModule } from '@angular/material/select';
19
- import * as i3$2 from '@angular/material/input';
11
+ import * as i2 from '@angular/material/input';
20
12
  import { MatInputModule } from '@angular/material/input';
21
- import * as i5 from '@angular/material/icon';
13
+ import { CurrencyBehavior, TextBehavior } from '@ng-modular-forms/behavior';
14
+ import { MatNativeDateModule } from '@angular/material/core';
15
+ import * as i4$1 from '@angular/material/datepicker';
16
+ import { MatDatepickerModule } from '@angular/material/datepicker';
17
+ import * as i4$2 from '@angular/material/icon';
22
18
  import { MatIconModule } from '@angular/material/icon';
19
+ import * as i6 from '@angular/material/button';
20
+ import { MatButtonModule } from '@angular/material/button';
21
+ import * as i5 from '@angular/material/select';
22
+ import { MatSelectModule } from '@angular/material/select';
23
+ import * as i4$3 from '@angular/material/timepicker';
24
+ import { MatTimepickerModule } from '@angular/material/timepicker';
23
25
 
24
- /**
25
- * Base implementation for custom form controls that integrate with:
26
- * - Angular Reactive Forms (ControlValueAccessor)
27
- * - Angular Material form-field (MatFormFieldControl)
28
- */
29
26
  class MatFormControlBase extends FormControlBase {
30
27
  detachLabel = input(false);
28
+ appearance = input('outline');
29
+ shouldLabelFloat = input('auto');
31
30
  hint = input();
32
31
  hintClassList = input('');
33
- appearance = input();
34
- _formDisabled = signal(false);
35
- /**
36
- * Notifies Angular Material form-field of state changes
37
- * (label float, error state, UI refresh)
38
- */
39
- stateChanges = new Subject();
40
- set value(val) {
41
- super.value = val;
42
- this.stateChanges.next();
43
- }
44
- focused = false;
45
- /**
46
- * Assumes derived component exposes an element with #input reference.
47
- */
48
- input;
49
- focus() {
50
- const nativeElement = this.input?.nativeElement;
51
- if (!nativeElement) {
52
- console.warn('Tried to focus an input from FormControlBase that does not exist');
53
- return;
54
- }
55
- this.focused = true;
56
- nativeElement.focus();
57
- }
58
- get disabled() {
59
- return this._disabled() || this._formDisabled();
60
- }
61
- get errorState() {
62
- const control = this.ngControl?.control;
63
- return !!control && control.invalid && control.touched;
64
- }
65
- get empty() {
66
- return this.value === null || this.value === '' || this.value === undefined;
67
- }
68
- get shouldLabelFloat() {
69
- return this.focused || !this.empty;
70
- }
71
- controlType = 'custom-form-control';
72
- autofilled = false;
73
- userAriaDescribedBy;
74
- disableAutomaticLabeling;
75
- writeValue(value) {
76
- super.writeValue(value);
77
- this.stateChanges.next();
78
- }
79
- setDisabledState(isDisabled) {
80
- this._formDisabled.set(isDisabled);
81
- this.stateChanges.next();
82
- this.cdr.markForCheck();
83
- }
84
- setDescribedByIds(ids) {
85
- this.userAriaDescribedBy = ids.join(' ');
86
- }
87
- onContainerClick(event) {
88
- const target = event.target;
89
- target?.focus();
90
- this.stateChanges.next();
91
- }
92
- ngOnDestroy() {
93
- this.stateChanges.complete();
94
- }
95
32
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatFormControlBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
96
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: MatFormControlBase, isStandalone: true, inputs: { detachLabel: { classPropertyName: "detachLabel", publicName: "detachLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintClassList: { classPropertyName: "hintClassList", publicName: "hintClassList", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["nmf-input"], descendants: true }], usesInheritance: true, ngImport: i0 });
33
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: MatFormControlBase, isStandalone: true, inputs: { detachLabel: { classPropertyName: "detachLabel", publicName: "detachLabel", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, shouldLabelFloat: { classPropertyName: "shouldLabelFloat", publicName: "shouldLabelFloat", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintClassList: { classPropertyName: "hintClassList", publicName: "hintClassList", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
97
34
  }
98
35
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatFormControlBase, decorators: [{
99
36
  type: Directive
100
- }], propDecorators: { input: [{
101
- type: ViewChild,
102
- args: ['nmf-input']
103
- }] } });
37
+ }] });
104
38
 
105
39
  class MatInputCurrencyComponent extends MatFormControlBase {
106
- behavior = new InputCurrencyBehavior();
40
+ behavior = new CurrencyBehavior();
41
+ displayValue = signal(null);
107
42
  writeValue(value) {
108
- super.writeValue(this.behavior.formatCurrency(value ?? ''));
43
+ super.writeValue(value);
44
+ this.displayValue.set(value != null ? formatNumber(value) : null);
109
45
  }
110
46
  handleKeyDown(event) {
111
47
  this.behavior.handleKeyDown(event);
112
48
  }
113
49
  onInput(event) {
114
- this.behavior.onInput(this, event);
50
+ const rawValue = event.target.value;
51
+ const value = parseNumber(rawValue);
52
+ this.displayValue.set(value != null ? formatNumber(value) : null);
53
+ this.onChange(value);
115
54
  }
116
- textColor(value) {
117
- if (this.disabled) {
118
- return 'default';
55
+ textColor = computed(() => {
56
+ const value = this.displayValue();
57
+ if (this._disabledByInput() || !value) {
58
+ return '';
119
59
  }
120
- if (!value) {
121
- return '--mat-form-field-outlined-input-text-text';
122
- }
123
- return parseCurrency(value) >= 0
124
- ? '--mat-form-field-outlined-input-text-text'
125
- : 'red';
126
- }
60
+ const parsedValue = parseNumber(value);
61
+ const valid = parsedValue != null && parsedValue >= 0;
62
+ return valid ? '' : 'red';
63
+ });
127
64
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
128
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputCurrencyComponent, isStandalone: true, selector: "nmf-mat-input-currency", usesInheritance: true, ngImport: i0, template: `
129
- @if (label() && detachLabel()) {
130
- <label class="font-medium text-base">{{ label() }}</label>
131
- }
132
- <mat-form-field
133
- appearance="outline"
134
- [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
135
- >
136
- @if (label() && !detachLabel()) {
137
- <mat-label>{{ label() }}</mat-label>
138
- }
139
-
140
- <span
141
- [style.color]="
142
- control().disabled || readonly
143
- ? 'var(--mat-form-field-outlined-disabled-input-text-text)'
144
- : 'inherit'
145
- "
146
- matTextPrefix
147
- >
148
- $
149
- </span>
150
-
151
- <input
152
- matInput
153
- type="text"
154
- autocomplete="off"
155
- [id]="id"
156
- [name]="name"
157
- [value]="value"
158
- [disabled]="disabled"
159
- [readonly]="readonly"
160
- [ngClass]="classList().concat(readonly ? ['opacity-60'] : [])"
161
- [placeholder]="placeholder || '0.00'"
162
- (keydown)="handleKeyDown($event)"
163
- (input)="onInput($event)"
164
- (blur)="onTouched()"
165
- style="padding-top: 5px; color: {{ textColor(value) }} !important"
166
- />
167
-
168
- <span matTextSuffix><ng-content></ng-content></span>
169
-
170
- @if (loading()) {
171
- <div class="absolute top-5 right-5 z-10">
172
- <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
173
- </div>
174
- }
175
-
176
- @if (hint()) {
177
- <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
178
- }
179
-
180
- @if (control().invalid && control().touched) {
181
- <mat-error>
182
- {{ getErrorMessage() }}
183
- </mat-error>
184
- }
185
- </mat-form-field>
186
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
65
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputCurrencyComponent, isStandalone: true, selector: "nmf-mat-currency", usesInheritance: true, ngImport: i0, template: `
66
+ @if (label() && detachLabel()) {
67
+ <label class="font-medium text-base">{{ label() }}</label>
68
+ }
69
+
70
+ <mat-form-field
71
+ class="w-full"
72
+ [appearance]="appearance()"
73
+ [floatLabel]="shouldLabelFloat()"
74
+ >
75
+ @if (label() && !detachLabel()) {
76
+ <mat-label>{{ label() }}</mat-label>
77
+ }
78
+
79
+ @if (displayValue()) {
80
+ <span
81
+ matTextPrefix
82
+ [class.nmf-disabled]="disabled()"
83
+ [style.color]="textColor()"
84
+ [style.opacity]="disabled() ? 0.6 : 1"
85
+ >$</span
86
+ >
87
+ }
88
+
89
+ <input
90
+ matInput
91
+ type="text"
92
+ [ngClass]="classList()"
93
+ [style.color]="textColor()"
94
+ [style.opacity]="disabled() ? 0.6 : 1"
95
+ [name]="name()"
96
+ [value]="displayValue()"
97
+ [required]="isRequired()"
98
+ [placeholder]="placeholder()"
99
+ [formControl]="control"
100
+ (blur)="onTouched()"
101
+ (input)="onInput($event)"
102
+ (keydown)="handleKeyDown($event)"
103
+ />
104
+
105
+ <span matTextSuffix>
106
+ <ng-content></ng-content>
107
+ </span>
108
+
109
+ @if (loading()) {
110
+ <mat-spinner
111
+ matSuffix
112
+ class="nmf-mat-loader"
113
+ diameter="22"
114
+ strokeWidth="3"
115
+ ></mat-spinner>
116
+ }
117
+
118
+ @if (hint()) {
119
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
120
+ }
121
+
122
+ <mat-error>
123
+ {{ errorMessage() }}
124
+ </mat-error>
125
+ </mat-form-field>
126
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
187
127
  }
188
128
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputCurrencyComponent, decorators: [{
189
129
  type: Component,
190
130
  args: [{
191
- selector: 'nmf-mat-input-currency',
131
+ selector: 'nmf-mat-currency',
192
132
  imports: [
193
133
  CommonModule,
134
+ MatInputModule,
194
135
  MatFormFieldModule,
195
136
  ReactiveFormsModule,
196
137
  MatProgressSpinnerModule,
197
138
  ],
198
139
  changeDetection: ChangeDetectionStrategy.OnPush,
199
- template: `
200
- @if (label() && detachLabel()) {
201
- <label class="font-medium text-base">{{ label() }}</label>
202
- }
203
- <mat-form-field
204
- appearance="outline"
205
- [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
206
- >
207
- @if (label() && !detachLabel()) {
208
- <mat-label>{{ label() }}</mat-label>
209
- }
210
-
211
- <span
212
- [style.color]="
213
- control().disabled || readonly
214
- ? 'var(--mat-form-field-outlined-disabled-input-text-text)'
215
- : 'inherit'
216
- "
217
- matTextPrefix
218
- >
219
- $
220
- </span>
221
-
222
- <input
223
- matInput
224
- type="text"
225
- autocomplete="off"
226
- [id]="id"
227
- [name]="name"
228
- [value]="value"
229
- [disabled]="disabled"
230
- [readonly]="readonly"
231
- [ngClass]="classList().concat(readonly ? ['opacity-60'] : [])"
232
- [placeholder]="placeholder || '0.00'"
233
- (keydown)="handleKeyDown($event)"
234
- (input)="onInput($event)"
235
- (blur)="onTouched()"
236
- style="padding-top: 5px; color: {{ textColor(value) }} !important"
237
- />
238
-
239
- <span matTextSuffix><ng-content></ng-content></span>
240
-
241
- @if (loading()) {
242
- <div class="absolute top-5 right-5 z-10">
243
- <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
244
- </div>
245
- }
246
-
247
- @if (hint()) {
248
- <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
249
- }
250
-
251
- @if (control().invalid && control().touched) {
252
- <mat-error>
253
- {{ getErrorMessage() }}
254
- </mat-error>
255
- }
256
- </mat-form-field>
140
+ template: `
141
+ @if (label() && detachLabel()) {
142
+ <label class="font-medium text-base">{{ label() }}</label>
143
+ }
144
+
145
+ <mat-form-field
146
+ class="w-full"
147
+ [appearance]="appearance()"
148
+ [floatLabel]="shouldLabelFloat()"
149
+ >
150
+ @if (label() && !detachLabel()) {
151
+ <mat-label>{{ label() }}</mat-label>
152
+ }
153
+
154
+ @if (displayValue()) {
155
+ <span
156
+ matTextPrefix
157
+ [class.nmf-disabled]="disabled()"
158
+ [style.color]="textColor()"
159
+ [style.opacity]="disabled() ? 0.6 : 1"
160
+ >$</span
161
+ >
162
+ }
163
+
164
+ <input
165
+ matInput
166
+ type="text"
167
+ [ngClass]="classList()"
168
+ [style.color]="textColor()"
169
+ [style.opacity]="disabled() ? 0.6 : 1"
170
+ [name]="name()"
171
+ [value]="displayValue()"
172
+ [required]="isRequired()"
173
+ [placeholder]="placeholder()"
174
+ [formControl]="control"
175
+ (blur)="onTouched()"
176
+ (input)="onInput($event)"
177
+ (keydown)="handleKeyDown($event)"
178
+ />
179
+
180
+ <span matTextSuffix>
181
+ <ng-content></ng-content>
182
+ </span>
183
+
184
+ @if (loading()) {
185
+ <mat-spinner
186
+ matSuffix
187
+ class="nmf-mat-loader"
188
+ diameter="22"
189
+ strokeWidth="3"
190
+ ></mat-spinner>
191
+ }
192
+
193
+ @if (hint()) {
194
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
195
+ }
196
+
197
+ <mat-error>
198
+ {{ errorMessage() }}
199
+ </mat-error>
200
+ </mat-form-field>
257
201
  `,
258
202
  }]
259
203
  }] });
@@ -261,97 +205,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
261
205
  class MatInputDatepickerComponent extends MatFormControlBase {
262
206
  minDate = input(null);
263
207
  maxDate = input(null);
264
- picker;
265
- dateAdapter = inject((DateAdapter));
266
- setToday(dp) {
267
- const today = this.dateAdapter.today();
268
- dp.select(today);
269
- }
270
- ngOnInit() {
271
- super.ngOnInit();
272
- this.picker.minDate = this.minDate();
273
- this.picker.maxDate = this.maxDate();
274
- }
275
- onInput(event) {
276
- const value = event.value;
277
- if (!value) {
278
- this.value = null;
279
- this.onChange(this.value);
280
- this.stateChanges.next();
281
- return;
282
- }
283
- this.value = value;
284
- this.onChange(this.value);
285
- this.stateChanges.next();
286
- }
208
+ dateClass = input(() => []);
209
+ dateFilter = input(() => true);
210
+ startAt = input(null);
211
+ startView = input('month');
212
+ panelClass = input('');
213
+ touchUi = input(false);
214
+ placeholder = input('Select a date');
287
215
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
288
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputDatepickerComponent, isStandalone: true, selector: "nmf-mat-input-datepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
289
- @if (label() && detachLabel()) {
290
- <label class="font-medium text-base">{{ label() }}</label>
291
- }
292
- <mat-form-field
293
- appearance="outline"
294
- [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
295
- >
296
- @if (label() && !detachLabel()) {
297
- <mat-label>{{ label() }}</mat-label>
298
- }
299
-
300
- <input
301
- matInput
302
- autocomplete="off"
303
- [id]="id"
304
- [name]="name"
305
- [value]="value"
306
- [type]="'text'"
307
- [readonly]="readonly"
308
- [placeholder]="placeholder || 'Select a date'"
309
- [disabled]="disabled"
310
- [matDatepicker]="picker"
311
- (dateInput)="onInput($event)"
312
- (dateChange)="onInput($event)"
313
- (blur)="onTouched()"
314
- style="padding-top: 5px"
315
- />
316
-
317
- <mat-datepicker-toggle
318
- [hidden]="loading()"
319
- matSuffix
320
- [for]="picker"
321
- ></mat-datepicker-toggle>
322
-
323
- <mat-datepicker [hidden]="loading()" #picker>
324
- <!-- <mat-datepicker-actions>
325
- <button matButton (click)="setToday(picker)">Hoy</button>
326
- <button matButton matDatepickerCancel>Cancelar</button>
327
- <button matButton="elevated" matDatepickerApply>Aplicar</button>
328
- </mat-datepicker-actions> -->
329
- </mat-datepicker>
330
-
331
- @if (loading()) {
332
- <div class="absolute top-2 right-2">
333
- <mat-spinner diameter="24" strokeWidth="3"></mat-spinner>
334
- </div>
335
- }
336
-
337
- @if (hint()) {
338
- <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
339
- }
340
-
341
- @if (control().invalid && control().touched) {
342
- <mat-error>
343
- {{ getErrorMessage() }}
344
- </mat-error>
345
- }
346
- </mat-form-field>
347
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
216
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputDatepickerComponent, isStandalone: true, selector: "nmf-mat-datepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, touchUi: { classPropertyName: "touchUi", publicName: "touchUi", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
217
+ @if (label() && detachLabel()) {
218
+ <label class="font-medium text-base">{{ label() }}</label>
219
+ }
220
+
221
+ <mat-form-field
222
+ class="w-full"
223
+ [appearance]="appearance()"
224
+ [floatLabel]="shouldLabelFloat()"
225
+ >
226
+ @if (label() && !detachLabel()) {
227
+ <mat-label>{{ label() }}</mat-label>
228
+ }
229
+
230
+ <input
231
+ matInput
232
+ autocomplete="off"
233
+ [name]="name()"
234
+ [min]="minDate()"
235
+ [max]="maxDate()"
236
+ [matDatepicker]="picker"
237
+ [matDatepickerFilter]="dateFilter()"
238
+ [required]="isRequired()"
239
+ [placeholder]="placeholder()"
240
+ [formControl]="control"
241
+ (blur)="onTouched()"
242
+ />
243
+
244
+ <mat-datepicker-toggle
245
+ matSuffix
246
+ [for]="picker"
247
+ [hidden]="loading()"
248
+ [disabled]="disabled()"
249
+ ></mat-datepicker-toggle>
250
+
251
+ <mat-datepicker
252
+ [hidden]="loading()"
253
+ [startAt]="startAt()"
254
+ [startView]="startView()"
255
+ [touchUi]="touchUi()"
256
+ [dateClass]="dateClass()"
257
+ [panelClass]="panelClass()"
258
+ #picker
259
+ />
260
+
261
+ @if (loading()) {
262
+ <mat-spinner
263
+ matSuffix
264
+ class="nmf-mat-loader"
265
+ diameter="22"
266
+ strokeWidth="3"
267
+ ></mat-spinner>
268
+ }
269
+
270
+ @if (hint()) {
271
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
272
+ }
273
+
274
+ <mat-error>{{ errorMessage() }}</mat-error>
275
+ </mat-form-field>
276
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
348
277
  }
349
278
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputDatepickerComponent, decorators: [{
350
279
  type: Component,
351
280
  args: [{
352
- selector: 'nmf-mat-input-datepicker',
281
+ selector: 'nmf-mat-datepicker',
353
282
  imports: [
354
283
  CommonModule,
284
+ MatInputModule,
355
285
  MatFormFieldModule,
356
286
  ReactiveFormsModule,
357
287
  MatDatepickerModule,
@@ -359,283 +289,405 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
359
289
  MatProgressSpinnerModule,
360
290
  ],
361
291
  changeDetection: ChangeDetectionStrategy.OnPush,
362
- template: `
363
- @if (label() && detachLabel()) {
364
- <label class="font-medium text-base">{{ label() }}</label>
365
- }
366
- <mat-form-field
367
- appearance="outline"
368
- [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
369
- >
370
- @if (label() && !detachLabel()) {
371
- <mat-label>{{ label() }}</mat-label>
372
- }
373
-
374
- <input
375
- matInput
376
- autocomplete="off"
377
- [id]="id"
378
- [name]="name"
379
- [value]="value"
380
- [type]="'text'"
381
- [readonly]="readonly"
382
- [placeholder]="placeholder || 'Select a date'"
383
- [disabled]="disabled"
384
- [matDatepicker]="picker"
385
- (dateInput)="onInput($event)"
386
- (dateChange)="onInput($event)"
387
- (blur)="onTouched()"
388
- style="padding-top: 5px"
389
- />
390
-
391
- <mat-datepicker-toggle
392
- [hidden]="loading()"
393
- matSuffix
394
- [for]="picker"
395
- ></mat-datepicker-toggle>
396
-
397
- <mat-datepicker [hidden]="loading()" #picker>
398
- <!-- <mat-datepicker-actions>
399
- <button matButton (click)="setToday(picker)">Hoy</button>
400
- <button matButton matDatepickerCancel>Cancelar</button>
401
- <button matButton="elevated" matDatepickerApply>Aplicar</button>
402
- </mat-datepicker-actions> -->
403
- </mat-datepicker>
404
-
405
- @if (loading()) {
406
- <div class="absolute top-2 right-2">
407
- <mat-spinner diameter="24" strokeWidth="3"></mat-spinner>
408
- </div>
409
- }
410
-
411
- @if (hint()) {
412
- <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
413
- }
414
-
415
- @if (control().invalid && control().touched) {
416
- <mat-error>
417
- {{ getErrorMessage() }}
418
- </mat-error>
419
- }
420
- </mat-form-field>
292
+ template: `
293
+ @if (label() && detachLabel()) {
294
+ <label class="font-medium text-base">{{ label() }}</label>
295
+ }
296
+
297
+ <mat-form-field
298
+ class="w-full"
299
+ [appearance]="appearance()"
300
+ [floatLabel]="shouldLabelFloat()"
301
+ >
302
+ @if (label() && !detachLabel()) {
303
+ <mat-label>{{ label() }}</mat-label>
304
+ }
305
+
306
+ <input
307
+ matInput
308
+ autocomplete="off"
309
+ [name]="name()"
310
+ [min]="minDate()"
311
+ [max]="maxDate()"
312
+ [matDatepicker]="picker"
313
+ [matDatepickerFilter]="dateFilter()"
314
+ [required]="isRequired()"
315
+ [placeholder]="placeholder()"
316
+ [formControl]="control"
317
+ (blur)="onTouched()"
318
+ />
319
+
320
+ <mat-datepicker-toggle
321
+ matSuffix
322
+ [for]="picker"
323
+ [hidden]="loading()"
324
+ [disabled]="disabled()"
325
+ ></mat-datepicker-toggle>
326
+
327
+ <mat-datepicker
328
+ [hidden]="loading()"
329
+ [startAt]="startAt()"
330
+ [startView]="startView()"
331
+ [touchUi]="touchUi()"
332
+ [dateClass]="dateClass()"
333
+ [panelClass]="panelClass()"
334
+ #picker
335
+ />
336
+
337
+ @if (loading()) {
338
+ <mat-spinner
339
+ matSuffix
340
+ class="nmf-mat-loader"
341
+ diameter="22"
342
+ strokeWidth="3"
343
+ ></mat-spinner>
344
+ }
345
+
346
+ @if (hint()) {
347
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
348
+ }
349
+
350
+ <mat-error>{{ errorMessage() }}</mat-error>
351
+ </mat-form-field>
421
352
  `,
422
353
  }]
423
354
  }] });
424
355
 
425
- class MatInputSelectComponent extends MatFormControlBase {
426
- options = input([]);
427
- emptyOptionLabel = input('forms.emptyOption');
428
- showClearOption = input(false);
429
- panelWidth = input('auto');
430
- behavior = new InputSelectBehavior();
431
- onSelectionClosed() {
432
- this.behavior.onSelectionClosed(this);
356
+ class MatInputNumberComponent extends MatFormControlBase {
357
+ formatNumberValue = input(false);
358
+ displayValue = signal('');
359
+ behavior = new TextBehavior();
360
+ currencyBehavior = new CurrencyBehavior();
361
+ writeValue(value) {
362
+ super.writeValue(value);
363
+ this.updateDisplayValue(value);
433
364
  }
434
- ngOnInit() {
435
- super.ngOnInit();
436
- this.behavior.setInitialValue(this.value);
365
+ handleKeyDown(event) {
366
+ this.currencyBehavior.handleKeyDown(event);
437
367
  }
438
- onSelectionChange(event) {
439
- this.behavior.onSelectionChange(this, event);
368
+ onInput(event) {
369
+ const raw = event.target.value;
370
+ const parsed = parseNumber(raw);
371
+ this.updateDisplayValue(parsed);
372
+ this.onChange(parsed);
440
373
  }
441
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
442
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputSelectComponent, isStandalone: true, selector: "nmf-mat-input-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionLabel: { classPropertyName: "emptyOptionLabel", publicName: "emptyOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, showClearOption: { classPropertyName: "showClearOption", publicName: "showClearOption", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
443
- @if (label() && detachLabel()) {
444
- <label class="font-medium text-base">{{ label() }}</label>
445
- }
446
- <mat-form-field
447
- appearance="outline"
448
- [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
449
- >
450
- @if (label() && !detachLabel()) {
451
- <mat-label>{{ label() }}</mat-label>
452
- }
453
-
454
- <mat-select
455
- [value]="value"
456
- [disabled]="disabled"
457
- [panelWidth]="panelWidth()"
458
- [ngClass]="disabled ? 'hide-arrow' : ''"
459
- (blur)="onTouched()"
460
- (selectionChange)="onSelectionChange($event)"
461
- (closed)="onSelectionClosed()"
462
- >
463
- <mat-option [value]="value === -1 ? -1 : ''" selected disabled>
464
- {{ emptyOptionLabel() }}
465
- </mat-option>
466
-
467
- <!-- All Options -->
468
- @for (option of options(); track option.label) {
469
- <mat-option [value]="option.key" [disabled]="option.disabled">
470
- {{ option.label }}
471
- </mat-option>
472
- }
473
-
474
- <!-- Clear Selection Option -->
475
- @if (showClearOption()) {
476
- <mat-option value="NONE">{{ 'forms.clearSelection' }}</mat-option>
477
- }
478
- </mat-select>
479
-
480
- @if (loading()) {
481
- <div class="absolute top-2 right-2">
482
- <mat-spinner diameter="24" strokeWidth="3"></mat-spinner>
483
- </div>
484
- }
485
-
486
- @if (hint()) {
487
- <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
488
- }
489
-
490
- @if (control().invalid && control().touched) {
491
- <mat-error>{{ getErrorMessage() }}</mat-error>
492
- }
493
- </mat-form-field>
494
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
374
+ updateDisplayValue(value) {
375
+ if (this.formatNumberValue() && value != null) {
376
+ this.displayValue.set(formatNumber(value) ?? '');
377
+ }
378
+ else {
379
+ this.displayValue.set(value != null ? String(value) : '');
380
+ }
381
+ }
382
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
383
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputNumberComponent, isStandalone: true, selector: "nmf-mat-number", inputs: { formatNumberValue: { classPropertyName: "formatNumberValue", publicName: "formatNumberValue", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
384
+ @if (label() && detachLabel()) {
385
+ <label class="font-medium text-base">{{ label() }}</label>
386
+ }
387
+
388
+ <mat-form-field
389
+ class="w-full"
390
+ [appearance]="appearance()"
391
+ [floatLabel]="shouldLabelFloat()"
392
+ >
393
+ @if (label() && !detachLabel()) {
394
+ <mat-label>{{ label() }}</mat-label>
395
+ }
396
+
397
+ <input
398
+ matInput
399
+ [ngClass]="classList"
400
+ [name]="name()"
401
+ [type]="formatNumberValue() ? 'text' : 'number'"
402
+ [value]="displayValue()"
403
+ [required]="isRequired()"
404
+ [placeholder]="placeholder()"
405
+ [formControl]="control"
406
+ (blur)="onTouched()"
407
+ (input)="onInput($event)"
408
+ (keydown)="handleKeyDown($event)"
409
+ />
410
+
411
+ @if (loading()) {
412
+ <mat-spinner
413
+ matSuffix
414
+ class="nmf-mat-loader"
415
+ diameter="22"
416
+ strokeWidth="3"
417
+ ></mat-spinner>
418
+ }
419
+
420
+ @if (hint()) {
421
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
422
+ }
423
+
424
+ <ng-content></ng-content>
425
+
426
+ <mat-error>{{ errorMessage() }}</mat-error>
427
+ </mat-form-field>
428
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
495
429
  }
496
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputSelectComponent, decorators: [{
430
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputNumberComponent, decorators: [{
497
431
  type: Component,
498
432
  args: [{
499
- selector: 'nmf-mat-input-select',
433
+ selector: 'nmf-mat-number',
500
434
  imports: [
501
435
  CommonModule,
502
436
  MatFormFieldModule,
503
- MatProgressSpinnerModule,
437
+ MatInputModule,
504
438
  ReactiveFormsModule,
505
- MatSelectModule,
439
+ MatIconModule,
440
+ MatProgressSpinnerModule,
441
+ MatButtonModule,
506
442
  ],
507
443
  changeDetection: ChangeDetectionStrategy.OnPush,
508
- template: `
509
- @if (label() && detachLabel()) {
510
- <label class="font-medium text-base">{{ label() }}</label>
511
- }
512
- <mat-form-field
513
- appearance="outline"
514
- [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
515
- >
516
- @if (label() && !detachLabel()) {
517
- <mat-label>{{ label() }}</mat-label>
518
- }
519
-
520
- <mat-select
521
- [value]="value"
522
- [disabled]="disabled"
523
- [panelWidth]="panelWidth()"
524
- [ngClass]="disabled ? 'hide-arrow' : ''"
525
- (blur)="onTouched()"
526
- (selectionChange)="onSelectionChange($event)"
527
- (closed)="onSelectionClosed()"
528
- >
529
- <mat-option [value]="value === -1 ? -1 : ''" selected disabled>
530
- {{ emptyOptionLabel() }}
531
- </mat-option>
532
-
533
- <!-- All Options -->
534
- @for (option of options(); track option.label) {
535
- <mat-option [value]="option.key" [disabled]="option.disabled">
536
- {{ option.label }}
537
- </mat-option>
538
- }
539
-
540
- <!-- Clear Selection Option -->
541
- @if (showClearOption()) {
542
- <mat-option value="NONE">{{ 'forms.clearSelection' }}</mat-option>
543
- }
544
- </mat-select>
545
-
546
- @if (loading()) {
547
- <div class="absolute top-2 right-2">
548
- <mat-spinner diameter="24" strokeWidth="3"></mat-spinner>
549
- </div>
550
- }
551
-
552
- @if (hint()) {
553
- <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
554
- }
555
-
556
- @if (control().invalid && control().touched) {
557
- <mat-error>{{ getErrorMessage() }}</mat-error>
558
- }
559
- </mat-form-field>
444
+ template: `
445
+ @if (label() && detachLabel()) {
446
+ <label class="font-medium text-base">{{ label() }}</label>
447
+ }
448
+
449
+ <mat-form-field
450
+ class="w-full"
451
+ [appearance]="appearance()"
452
+ [floatLabel]="shouldLabelFloat()"
453
+ >
454
+ @if (label() && !detachLabel()) {
455
+ <mat-label>{{ label() }}</mat-label>
456
+ }
457
+
458
+ <input
459
+ matInput
460
+ [ngClass]="classList"
461
+ [name]="name()"
462
+ [type]="formatNumberValue() ? 'text' : 'number'"
463
+ [value]="displayValue()"
464
+ [required]="isRequired()"
465
+ [placeholder]="placeholder()"
466
+ [formControl]="control"
467
+ (blur)="onTouched()"
468
+ (input)="onInput($event)"
469
+ (keydown)="handleKeyDown($event)"
470
+ />
471
+
472
+ @if (loading()) {
473
+ <mat-spinner
474
+ matSuffix
475
+ class="nmf-mat-loader"
476
+ diameter="22"
477
+ strokeWidth="3"
478
+ ></mat-spinner>
479
+ }
480
+
481
+ @if (hint()) {
482
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
483
+ }
484
+
485
+ <ng-content></ng-content>
486
+
487
+ <mat-error>{{ errorMessage() }}</mat-error>
488
+ </mat-form-field>
560
489
  `,
561
490
  }]
562
491
  }] });
563
492
 
564
- class MatInputComponent extends MatFormControlBase {
565
- type = input('text');
566
- behavior = new InputTextBehavior();
567
- toggleShowPassword(event) {
568
- this.behavior.toggleShowPassword(event);
493
+ class MatInputSelectComponent extends MatFormControlBase {
494
+ options = input([]);
495
+ emptyOptionLabel = input('Select an option');
496
+ clearOptionLabel = input('Clear selection');
497
+ panelWidth = input('auto');
498
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
499
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputSelectComponent, isStandalone: true, selector: "nmf-mat-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionLabel: { classPropertyName: "emptyOptionLabel", publicName: "emptyOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, clearOptionLabel: { classPropertyName: "clearOptionLabel", publicName: "clearOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
500
+ @if (label() && detachLabel()) {
501
+ <label class="font-medium text-base">{{ label() }}</label>
569
502
  }
570
- onInput(event) {
571
- this.behavior.onInput(this, event);
503
+
504
+ <mat-form-field
505
+ class="w-full"
506
+ [appearance]="appearance()"
507
+ [floatLabel]="shouldLabelFloat()"
508
+ >
509
+ @if (label() && !detachLabel()) {
510
+ <mat-label>{{ label() }}</mat-label>
511
+ }
512
+
513
+ <mat-select
514
+ [class.hide-select-arrow]="loading()"
515
+ [panelWidth]="panelWidth()"
516
+ [required]="isRequired()"
517
+ [placeholder]="emptyOptionLabel()"
518
+ [formControl]="control"
519
+ (blur)="onTouched()"
520
+ >
521
+ <mat-option [value]="null" disabled>
522
+ {{ emptyOptionLabel() }}
523
+ </mat-option>
524
+
525
+ <!-- All Options -->
526
+ @for (option of options(); track option.label) {
527
+ <mat-option [value]="option.key" [disabled]="option.disabled">
528
+ {{ option.label }}
529
+ </mat-option>
530
+ }
531
+
532
+ <!-- Clear Selection Option -->
533
+ @if (clearOptionLabel()) {
534
+ <mat-option [value]="null">{{ clearOptionLabel() }}</mat-option>
535
+ }
536
+ </mat-select>
537
+
538
+ @if (loading()) {
539
+ <mat-spinner
540
+ matSuffix
541
+ class="nmf-mat-loader"
542
+ diameter="22"
543
+ strokeWidth="3"
544
+ ></mat-spinner>
545
+ }
546
+
547
+ @if (hint()) {
548
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
549
+ }
550
+
551
+ <mat-error>{{ errorMessage() }}</mat-error>
552
+ </mat-form-field>
553
+ `, isInline: true, styles: [".mat-mdc-select-placeholder{transition:none!important}.hide-select-arrow .mat-mdc-select-arrow-wrapper{display:none!important}.nmf-mat-loader{margin-right:.7rem!important}.nmf-disabled{color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent)}.nmf-password-toggle{color:var(--mat-sys-on-surface-variant);padding-right:.5rem;background-color:transparent;border:none;cursor:pointer;&:disabled{color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent);cursor:default}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
554
+ }
555
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputSelectComponent, decorators: [{
556
+ type: Component,
557
+ args: [{ selector: 'nmf-mat-select', imports: [
558
+ CommonModule,
559
+ MatFormFieldModule,
560
+ MatProgressSpinnerModule,
561
+ ReactiveFormsModule,
562
+ MatSelectModule,
563
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
564
+ @if (label() && detachLabel()) {
565
+ <label class="font-medium text-base">{{ label() }}</label>
572
566
  }
573
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
574
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputComponent, isStandalone: true, selector: "nmf-mat-input-text", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
575
- {
576
- provide: MatFormFieldControl,
577
- useExisting: forwardRef(() => MatInputComponent),
578
- },
579
- ], usesInheritance: true, ngImport: i0, template: `
580
- <div class="relative">
581
- @if (label() && detachLabel()) {
582
- <label class="font-medium text-base">{{ label() }}</label>
583
- }
584
- <mat-form-field
585
- appearance="outline"
586
- [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
587
- >
588
- @if (label() && !detachLabel()) {
589
- <mat-label>{{ label() }}</mat-label>
590
- }
591
-
592
- <input
593
- matInput
594
- autocomplete="off"
595
- [ngClass]="classList"
596
- [id]="id"
597
- [name]="name === 'identificationNumber' ? 'idummyi' : name"
598
- [type]="behavior.hidePassword() ? type() : 'text'"
599
- [readonly]="readonly"
600
- [placeholder]="placeholder"
601
- (input)="onInput($event)"
602
- (blur)="onTouched()"
603
- [formControlName]="controlName()"
604
- [required]="isRequired()"
605
- style="padding-top: 5px"
606
- />
607
-
608
- @if (loading()) {
609
- <div class="absolute top-5 right-5 z-10">
610
- <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
611
- </div>
612
- }
613
-
614
- @if (hint()) {
615
- <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
616
- }
617
-
618
- @if (type() === 'password') {
619
- <button matIconSuffix (click)="toggleShowPassword($event)">
620
- <mat-icon>{{
621
- behavior.hidePassword() ? 'visibility_off' : 'visibility'
622
- }}</mat-icon>
623
- </button>
624
- }
625
-
626
- <ng-content></ng-content>
627
-
628
- @if (control().invalid && control().touched) {
629
- <mat-error>{{ getErrorMessage() }}</mat-error>
630
- }
631
- </mat-form-field>
632
- </div>
633
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
567
+
568
+ <mat-form-field
569
+ class="w-full"
570
+ [appearance]="appearance()"
571
+ [floatLabel]="shouldLabelFloat()"
572
+ >
573
+ @if (label() && !detachLabel()) {
574
+ <mat-label>{{ label() }}</mat-label>
575
+ }
576
+
577
+ <mat-select
578
+ [class.hide-select-arrow]="loading()"
579
+ [panelWidth]="panelWidth()"
580
+ [required]="isRequired()"
581
+ [placeholder]="emptyOptionLabel()"
582
+ [formControl]="control"
583
+ (blur)="onTouched()"
584
+ >
585
+ <mat-option [value]="null" disabled>
586
+ {{ emptyOptionLabel() }}
587
+ </mat-option>
588
+
589
+ <!-- All Options -->
590
+ @for (option of options(); track option.label) {
591
+ <mat-option [value]="option.key" [disabled]="option.disabled">
592
+ {{ option.label }}
593
+ </mat-option>
594
+ }
595
+
596
+ <!-- Clear Selection Option -->
597
+ @if (clearOptionLabel()) {
598
+ <mat-option [value]="null">{{ clearOptionLabel() }}</mat-option>
599
+ }
600
+ </mat-select>
601
+
602
+ @if (loading()) {
603
+ <mat-spinner
604
+ matSuffix
605
+ class="nmf-mat-loader"
606
+ diameter="22"
607
+ strokeWidth="3"
608
+ ></mat-spinner>
609
+ }
610
+
611
+ @if (hint()) {
612
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
613
+ }
614
+
615
+ <mat-error>{{ errorMessage() }}</mat-error>
616
+ </mat-form-field>
617
+ `, styles: [".mat-mdc-select-placeholder{transition:none!important}.hide-select-arrow .mat-mdc-select-arrow-wrapper{display:none!important}.nmf-mat-loader{margin-right:.7rem!important}.nmf-disabled{color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent)}.nmf-password-toggle{color:var(--mat-sys-on-surface-variant);padding-right:.5rem;background-color:transparent;border:none;cursor:pointer;&:disabled{color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent);cursor:default}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}\n"] }]
618
+ }] });
619
+
620
+ class MatInputTextComponent extends MatFormControlBase {
621
+ type = input('text');
622
+ behavior = new TextBehavior();
623
+ computedType = computed(() => this.behavior.showPassword() && this.type() === 'password'
624
+ ? 'text'
625
+ : this.type());
626
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
627
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputTextComponent, isStandalone: true, selector: "nmf-mat-text", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
628
+ @if (label() && detachLabel()) {
629
+ <label class="font-medium text-base">{{ label() }}</label>
630
+ }
631
+
632
+ <mat-form-field
633
+ class="w-full"
634
+ [appearance]="appearance()"
635
+ [floatLabel]="shouldLabelFloat()"
636
+ >
637
+ @if (label() && !detachLabel()) {
638
+ <mat-label>{{ label() }}</mat-label>
639
+ }
640
+
641
+ <input
642
+ matInput
643
+ autocomplete="off"
644
+ [ngClass]="classList"
645
+ [name]="name()"
646
+ [type]="computedType()"
647
+ [required]="isRequired()"
648
+ [placeholder]="placeholder()"
649
+ [formControl]="control"
650
+ (blur)="onTouched()"
651
+ />
652
+
653
+ @if (loading()) {
654
+ <mat-spinner
655
+ matSuffix
656
+ class="nmf-mat-loader"
657
+ diameter="22"
658
+ strokeWidth="3"
659
+ ></mat-spinner>
660
+ }
661
+
662
+ @if (hint()) {
663
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
664
+ }
665
+
666
+ @if (type() === 'password' && !loading()) {
667
+ <button
668
+ matIconSuffix
669
+ mat-icon-button
670
+ color="transparent"
671
+ class="nmf-password-toggle"
672
+ [disabled]="disabled()"
673
+ (click)="behavior.toggleShowPassword($event)"
674
+ >
675
+ <mat-icon>{{
676
+ behavior.showPassword() ? 'visibility_off' : 'visibility'
677
+ }}</mat-icon>
678
+ </button>
679
+ }
680
+
681
+ <ng-content></ng-content>
682
+
683
+ <mat-error>{{ errorMessage() }}</mat-error>
684
+ </mat-form-field>
685
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
634
686
  }
635
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputComponent, decorators: [{
687
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTextComponent, decorators: [{
636
688
  type: Component,
637
689
  args: [{
638
- selector: 'nmf-mat-input-text',
690
+ selector: 'nmf-mat-text',
639
691
  imports: [
640
692
  CommonModule,
641
693
  MatFormFieldModule,
@@ -643,68 +695,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
643
695
  ReactiveFormsModule,
644
696
  MatIconModule,
645
697
  MatProgressSpinnerModule,
646
- ],
647
- providers: [
648
- {
649
- provide: MatFormFieldControl,
650
- useExisting: forwardRef(() => MatInputComponent),
651
- },
698
+ MatButtonModule,
652
699
  ],
653
700
  changeDetection: ChangeDetectionStrategy.OnPush,
654
- template: `
655
- <div class="relative">
656
- @if (label() && detachLabel()) {
657
- <label class="font-medium text-base">{{ label() }}</label>
658
- }
659
- <mat-form-field
660
- appearance="outline"
661
- [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
662
- >
663
- @if (label() && !detachLabel()) {
664
- <mat-label>{{ label() }}</mat-label>
665
- }
666
-
667
- <input
668
- matInput
669
- autocomplete="off"
670
- [ngClass]="classList"
671
- [id]="id"
672
- [name]="name === 'identificationNumber' ? 'idummyi' : name"
673
- [type]="behavior.hidePassword() ? type() : 'text'"
674
- [readonly]="readonly"
675
- [placeholder]="placeholder"
676
- (input)="onInput($event)"
677
- (blur)="onTouched()"
678
- [formControlName]="controlName()"
679
- [required]="isRequired()"
680
- style="padding-top: 5px"
681
- />
682
-
683
- @if (loading()) {
684
- <div class="absolute top-5 right-5 z-10">
685
- <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
686
- </div>
687
- }
688
-
689
- @if (hint()) {
690
- <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
691
- }
692
-
693
- @if (type() === 'password') {
694
- <button matIconSuffix (click)="toggleShowPassword($event)">
695
- <mat-icon>{{
696
- behavior.hidePassword() ? 'visibility_off' : 'visibility'
697
- }}</mat-icon>
698
- </button>
699
- }
700
-
701
- <ng-content></ng-content>
702
-
703
- @if (control().invalid && control().touched) {
704
- <mat-error>{{ getErrorMessage() }}</mat-error>
705
- }
706
- </mat-form-field>
707
- </div>
701
+ template: `
702
+ @if (label() && detachLabel()) {
703
+ <label class="font-medium text-base">{{ label() }}</label>
704
+ }
705
+
706
+ <mat-form-field
707
+ class="w-full"
708
+ [appearance]="appearance()"
709
+ [floatLabel]="shouldLabelFloat()"
710
+ >
711
+ @if (label() && !detachLabel()) {
712
+ <mat-label>{{ label() }}</mat-label>
713
+ }
714
+
715
+ <input
716
+ matInput
717
+ autocomplete="off"
718
+ [ngClass]="classList"
719
+ [name]="name()"
720
+ [type]="computedType()"
721
+ [required]="isRequired()"
722
+ [placeholder]="placeholder()"
723
+ [formControl]="control"
724
+ (blur)="onTouched()"
725
+ />
726
+
727
+ @if (loading()) {
728
+ <mat-spinner
729
+ matSuffix
730
+ class="nmf-mat-loader"
731
+ diameter="22"
732
+ strokeWidth="3"
733
+ ></mat-spinner>
734
+ }
735
+
736
+ @if (hint()) {
737
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
738
+ }
739
+
740
+ @if (type() === 'password' && !loading()) {
741
+ <button
742
+ matIconSuffix
743
+ mat-icon-button
744
+ color="transparent"
745
+ class="nmf-password-toggle"
746
+ [disabled]="disabled()"
747
+ (click)="behavior.toggleShowPassword($event)"
748
+ >
749
+ <mat-icon>{{
750
+ behavior.showPassword() ? 'visibility_off' : 'visibility'
751
+ }}</mat-icon>
752
+ </button>
753
+ }
754
+
755
+ <ng-content></ng-content>
756
+
757
+ <mat-error>{{ errorMessage() }}</mat-error>
758
+ </mat-form-field>
708
759
  `,
709
760
  }]
710
761
  }] });
@@ -712,113 +763,241 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
712
763
  class MatInputTextareaComponent extends MatFormControlBase {
713
764
  rows = input(5);
714
765
  cols = input(5);
715
- behavior = new InputTextareaBehavior();
716
- onEnter() {
717
- this.behavior.onEnter(this);
718
- }
719
- onInput(event) {
720
- this.behavior.onInput(this, event);
721
- }
722
766
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
723
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputTextareaComponent, isStandalone: true, selector: "nmf-mat-input-textarea", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
724
- @if (label() && detachLabel()) {
725
- <label class="font-medium text-base">{{ label() }}</label>
726
- }
727
- <mat-form-field
728
- appearance="outline"
729
- [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
730
- >
731
- @if (label() && !detachLabel()) {
732
- <mat-label>{{ label() }}</mat-label>
733
- }
734
-
735
- <textarea
736
- matInput
737
- [id]="id"
738
- [rows]="rows()"
739
- [cols]="cols()"
740
- [value]="value"
741
- [readonly]="readonly"
742
- [disabled]="disabled"
743
- [placeholder]="placeholder"
744
- style="padding-top: 5px"
745
- (blur)="onTouched()"
746
- (input)="onInput($event)"
747
- (keydown.enter)="onEnter()"
748
- ></textarea>
749
-
750
- @if (loading()) {
751
- <div class="absolute top-5 right-5 z-10">
752
- <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
753
- </div>
754
- }
755
-
756
- @if (hint()) {
757
- <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
758
- }
759
-
760
- @if (control().invalid && control().touched) {
761
- <mat-error>
762
- {{ getErrorMessage() }}
763
- </mat-error>
764
- }
765
- </mat-form-field>
766
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
767
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputTextareaComponent, isStandalone: true, selector: "nmf-mat-textarea", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
768
+ @if (label() && detachLabel()) {
769
+ <label class="font-medium text-base">{{ label() }}</label>
770
+ }
771
+
772
+ <mat-form-field
773
+ class="w-full"
774
+ [appearance]="appearance()"
775
+ [floatLabel]="shouldLabelFloat()"
776
+ >
777
+ @if (label() && !detachLabel()) {
778
+ <mat-label>{{ label() }}</mat-label>
779
+ }
780
+
781
+ <textarea
782
+ matInput
783
+ [rows]="rows()"
784
+ [cols]="cols()"
785
+ [required]="isRequired()"
786
+ [placeholder]="placeholder()"
787
+ [formControl]="control"
788
+ (blur)="onTouched()"
789
+ ></textarea>
790
+
791
+ @if (loading()) {
792
+ <mat-spinner
793
+ matSuffix
794
+ class="nmf-mat-loader"
795
+ diameter="22"
796
+ strokeWidth="3"
797
+ ></mat-spinner>
798
+ }
799
+
800
+ @if (hint()) {
801
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
802
+ }
803
+
804
+ <mat-error>
805
+ {{ errorMessage() }}
806
+ </mat-error>
807
+ </mat-form-field>
808
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
767
809
  }
768
810
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTextareaComponent, decorators: [{
769
811
  type: Component,
770
812
  args: [{
771
- selector: 'nmf-mat-input-textarea',
813
+ selector: 'nmf-mat-textarea',
814
+ imports: [
815
+ CommonModule,
816
+ MatInputModule,
817
+ MatFormFieldModule,
818
+ ReactiveFormsModule,
819
+ MatProgressSpinnerModule,
820
+ ],
821
+ changeDetection: ChangeDetectionStrategy.OnPush,
822
+ template: `
823
+ @if (label() && detachLabel()) {
824
+ <label class="font-medium text-base">{{ label() }}</label>
825
+ }
826
+
827
+ <mat-form-field
828
+ class="w-full"
829
+ [appearance]="appearance()"
830
+ [floatLabel]="shouldLabelFloat()"
831
+ >
832
+ @if (label() && !detachLabel()) {
833
+ <mat-label>{{ label() }}</mat-label>
834
+ }
835
+
836
+ <textarea
837
+ matInput
838
+ [rows]="rows()"
839
+ [cols]="cols()"
840
+ [required]="isRequired()"
841
+ [placeholder]="placeholder()"
842
+ [formControl]="control"
843
+ (blur)="onTouched()"
844
+ ></textarea>
845
+
846
+ @if (loading()) {
847
+ <mat-spinner
848
+ matSuffix
849
+ class="nmf-mat-loader"
850
+ diameter="22"
851
+ strokeWidth="3"
852
+ ></mat-spinner>
853
+ }
854
+
855
+ @if (hint()) {
856
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
857
+ }
858
+
859
+ <mat-error>
860
+ {{ errorMessage() }}
861
+ </mat-error>
862
+ </mat-form-field>
863
+ `,
864
+ }]
865
+ }] });
866
+
867
+ class MatInputTimepickerComponent extends MatFormControlBase {
868
+ minDate = input(null);
869
+ maxDate = input(null);
870
+ interval = input(null);
871
+ options = input(null);
872
+ placeholder = input('Select a time');
873
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTimepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
874
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputTimepickerComponent, isStandalone: true, selector: "nmf-mat-timepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
875
+ @if (label() && detachLabel()) {
876
+ <label class="font-medium text-base">{{ label() }}</label>
877
+ }
878
+
879
+ <mat-form-field
880
+ class="w-full"
881
+ [appearance]="appearance()"
882
+ [floatLabel]="shouldLabelFloat()"
883
+ >
884
+ @if (label() && !detachLabel()) {
885
+ <mat-label>{{ label() }}</mat-label>
886
+ }
887
+
888
+ <input
889
+ matInput
890
+ autocomplete="off"
891
+ [name]="name()"
892
+ [matTimepicker]="picker"
893
+ [matTimepickerMin]="minDate()"
894
+ [matTimepickerMax]="maxDate()"
895
+ [required]="isRequired()"
896
+ [placeholder]="placeholder()"
897
+ [formControl]="control"
898
+ (blur)="onTouched()"
899
+ />
900
+
901
+ <mat-timepicker-toggle
902
+ matSuffix
903
+ [for]="picker"
904
+ [hidden]="loading()"
905
+ [disabled]="disabled()"
906
+ />
907
+
908
+ <mat-timepicker
909
+ [hidden]="loading()"
910
+ [interval]="interval()"
911
+ [options]="options()"
912
+ #picker
913
+ />
914
+
915
+ @if (loading()) {
916
+ <mat-spinner
917
+ matSuffix
918
+ class="nmf-mat-loader"
919
+ diameter="22"
920
+ strokeWidth="3"
921
+ ></mat-spinner>
922
+ }
923
+
924
+ @if (hint()) {
925
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
926
+ }
927
+
928
+ <mat-error>{{ errorMessage() }}</mat-error>
929
+ </mat-form-field>
930
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i4$3.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i4$3.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i4$3.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
931
+ }
932
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTimepickerComponent, decorators: [{
933
+ type: Component,
934
+ args: [{
935
+ selector: 'nmf-mat-timepicker',
772
936
  imports: [
773
937
  CommonModule,
938
+ MatInputModule,
774
939
  MatFormFieldModule,
775
940
  ReactiveFormsModule,
941
+ MatTimepickerModule,
776
942
  MatProgressSpinnerModule,
777
943
  ],
778
944
  changeDetection: ChangeDetectionStrategy.OnPush,
779
- template: `
780
- @if (label() && detachLabel()) {
781
- <label class="font-medium text-base">{{ label() }}</label>
782
- }
783
- <mat-form-field
784
- appearance="outline"
785
- [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
786
- >
787
- @if (label() && !detachLabel()) {
788
- <mat-label>{{ label() }}</mat-label>
789
- }
790
-
791
- <textarea
792
- matInput
793
- [id]="id"
794
- [rows]="rows()"
795
- [cols]="cols()"
796
- [value]="value"
797
- [readonly]="readonly"
798
- [disabled]="disabled"
799
- [placeholder]="placeholder"
800
- style="padding-top: 5px"
801
- (blur)="onTouched()"
802
- (input)="onInput($event)"
803
- (keydown.enter)="onEnter()"
804
- ></textarea>
805
-
806
- @if (loading()) {
807
- <div class="absolute top-5 right-5 z-10">
808
- <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
809
- </div>
810
- }
811
-
812
- @if (hint()) {
813
- <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
814
- }
815
-
816
- @if (control().invalid && control().touched) {
817
- <mat-error>
818
- {{ getErrorMessage() }}
819
- </mat-error>
820
- }
821
- </mat-form-field>
945
+ template: `
946
+ @if (label() && detachLabel()) {
947
+ <label class="font-medium text-base">{{ label() }}</label>
948
+ }
949
+
950
+ <mat-form-field
951
+ class="w-full"
952
+ [appearance]="appearance()"
953
+ [floatLabel]="shouldLabelFloat()"
954
+ >
955
+ @if (label() && !detachLabel()) {
956
+ <mat-label>{{ label() }}</mat-label>
957
+ }
958
+
959
+ <input
960
+ matInput
961
+ autocomplete="off"
962
+ [name]="name()"
963
+ [matTimepicker]="picker"
964
+ [matTimepickerMin]="minDate()"
965
+ [matTimepickerMax]="maxDate()"
966
+ [required]="isRequired()"
967
+ [placeholder]="placeholder()"
968
+ [formControl]="control"
969
+ (blur)="onTouched()"
970
+ />
971
+
972
+ <mat-timepicker-toggle
973
+ matSuffix
974
+ [for]="picker"
975
+ [hidden]="loading()"
976
+ [disabled]="disabled()"
977
+ />
978
+
979
+ <mat-timepicker
980
+ [hidden]="loading()"
981
+ [interval]="interval()"
982
+ [options]="options()"
983
+ #picker
984
+ />
985
+
986
+ @if (loading()) {
987
+ <mat-spinner
988
+ matSuffix
989
+ class="nmf-mat-loader"
990
+ diameter="22"
991
+ strokeWidth="3"
992
+ ></mat-spinner>
993
+ }
994
+
995
+ @if (hint()) {
996
+ <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
997
+ }
998
+
999
+ <mat-error>{{ errorMessage() }}</mat-error>
1000
+ </mat-form-field>
822
1001
  `,
823
1002
  }]
824
1003
  }] });
@@ -831,5 +1010,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
831
1010
  * Generated bundle index. Do not edit.
832
1011
  */
833
1012
 
834
- export { MatFormControlBase, MatInputComponent, MatInputCurrencyComponent, MatInputDatepickerComponent, MatInputSelectComponent, MatInputTextareaComponent };
1013
+ export { MatFormControlBase, MatInputCurrencyComponent, MatInputDatepickerComponent, MatInputNumberComponent, MatInputSelectComponent, MatInputTextComponent, MatInputTextareaComponent, MatInputTimepickerComponent };
835
1014
  //# sourceMappingURL=ng-modular-forms-material.mjs.map