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