@ng-modular-forms/material 0.4.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.
- package/README.md +0 -1
- package/fesm2022/ng-modular-forms-material.mjs +306 -306
- package/fesm2022/ng-modular-forms-material.mjs.map +1 -1
- package/lib/mat-form-control-base.d.ts +5 -19
- package/lib/mat-input-currency.component.d.ts +3 -2
- package/lib/mat-input-datepicker.component.d.ts +3 -5
- package/lib/mat-input-number.component.d.ts +15 -0
- package/lib/mat-input-select.component.d.ts +2 -6
- package/lib/mat-input-text.component.d.ts +8 -11
- package/lib/mat-input-textarea.component.d.ts +0 -1
- package/lib/mat-input-timepicker.component.d.ts +3 -3
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -1,99 +1,43 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input,
|
|
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';
|
|
2
|
+
import { input, Directive, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
7
3
|
import { FormControlBase, formatNumber, parseNumber } from '@ng-modular-forms/core';
|
|
8
|
-
import * as
|
|
4
|
+
import * as i3 from '@angular/forms';
|
|
9
5
|
import { ReactiveFormsModule } from '@angular/forms';
|
|
10
|
-
import * as i1
|
|
6
|
+
import * as i1 from '@angular/common';
|
|
11
7
|
import { CommonModule } from '@angular/common';
|
|
12
8
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
13
|
-
import * as
|
|
9
|
+
import * as i4 from '@angular/material/progress-spinner';
|
|
14
10
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
15
|
-
import
|
|
16
|
-
import {
|
|
17
|
-
import
|
|
11
|
+
import * as i2 from '@angular/material/input';
|
|
12
|
+
import { MatInputModule } from '@angular/material/input';
|
|
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';
|
|
18
16
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
19
|
-
import * as
|
|
17
|
+
import * as i4$2 from '@angular/material/icon';
|
|
20
18
|
import { MatIconModule } from '@angular/material/icon';
|
|
21
|
-
import * as
|
|
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';
|
|
22
24
|
import { MatTimepickerModule } from '@angular/material/timepicker';
|
|
23
25
|
|
|
24
26
|
class MatFormControlBase extends FormControlBase {
|
|
25
|
-
ngControl;
|
|
26
27
|
detachLabel = input(false);
|
|
27
|
-
hint = input();
|
|
28
|
-
hintClassList = input('');
|
|
29
28
|
appearance = input('outline');
|
|
30
29
|
shouldLabelFloat = input('auto');
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
this.ngControl.valueAccessor = this;
|
|
36
|
-
}
|
|
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
|
-
});
|
|
50
|
-
}
|
|
51
|
-
onChange = (_value) => { };
|
|
52
|
-
onTouched = () => { };
|
|
53
|
-
writeValue(value) {
|
|
54
|
-
this.value = value;
|
|
55
|
-
}
|
|
56
|
-
registerOnChange(fn) {
|
|
57
|
-
this.onChange = fn;
|
|
58
|
-
}
|
|
59
|
-
registerOnTouched(fn) {
|
|
60
|
-
this.onTouched = fn;
|
|
61
|
-
}
|
|
62
|
-
setDisabledState(isDisabled) {
|
|
63
|
-
this._disabledByCva.set(isDisabled);
|
|
64
|
-
this.cdr.markForCheck();
|
|
65
|
-
}
|
|
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();
|
|
77
|
-
}
|
|
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 });
|
|
30
|
+
hint = input();
|
|
31
|
+
hintClassList = input('');
|
|
32
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatFormControlBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
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 });
|
|
80
34
|
}
|
|
81
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatFormControlBase, decorators: [{
|
|
82
36
|
type: Directive
|
|
83
|
-
}]
|
|
84
|
-
type: Optional
|
|
85
|
-
}, {
|
|
86
|
-
type: Self
|
|
87
|
-
}] }], propDecorators: { matInput: [{
|
|
88
|
-
type: ViewChild,
|
|
89
|
-
args: [MatInput]
|
|
90
|
-
}], matSelect: [{
|
|
91
|
-
type: ViewChild,
|
|
92
|
-
args: [MatSelect]
|
|
93
|
-
}] } });
|
|
37
|
+
}] });
|
|
94
38
|
|
|
95
39
|
class MatInputCurrencyComponent extends MatFormControlBase {
|
|
96
|
-
behavior = new
|
|
40
|
+
behavior = new CurrencyBehavior();
|
|
97
41
|
displayValue = signal(null);
|
|
98
42
|
writeValue(value) {
|
|
99
43
|
super.writeValue(value);
|
|
@@ -106,9 +50,17 @@ class MatInputCurrencyComponent extends MatFormControlBase {
|
|
|
106
50
|
const rawValue = event.target.value;
|
|
107
51
|
const value = parseNumber(rawValue);
|
|
108
52
|
this.displayValue.set(value != null ? formatNumber(value) : null);
|
|
109
|
-
this.value = value;
|
|
110
53
|
this.onChange(value);
|
|
111
54
|
}
|
|
55
|
+
textColor = computed(() => {
|
|
56
|
+
const value = this.displayValue();
|
|
57
|
+
if (this._disabledByInput() || !value) {
|
|
58
|
+
return '';
|
|
59
|
+
}
|
|
60
|
+
const parsedValue = parseNumber(value);
|
|
61
|
+
const valid = parsedValue != null && parsedValue >= 0;
|
|
62
|
+
return valid ? '' : 'red';
|
|
63
|
+
});
|
|
112
64
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
113
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: `
|
|
114
66
|
@if (label() && detachLabel()) {
|
|
@@ -124,24 +76,30 @@ class MatInputCurrencyComponent extends MatFormControlBase {
|
|
|
124
76
|
<mat-label>{{ label() }}</mat-label>
|
|
125
77
|
}
|
|
126
78
|
|
|
127
|
-
@if (
|
|
128
|
-
<span
|
|
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
|
+
>
|
|
129
87
|
}
|
|
130
88
|
|
|
131
89
|
<input
|
|
132
90
|
matInput
|
|
133
91
|
type="text"
|
|
134
|
-
autocomplete="off"
|
|
135
|
-
[id]="id"
|
|
136
|
-
[name]="name"
|
|
137
|
-
[value]="displayValue()"
|
|
138
92
|
[ngClass]="classList()"
|
|
139
|
-
[
|
|
140
|
-
[
|
|
141
|
-
[
|
|
142
|
-
|
|
143
|
-
|
|
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"
|
|
144
100
|
(blur)="onTouched()"
|
|
101
|
+
(input)="onInput($event)"
|
|
102
|
+
(keydown)="handleKeyDown($event)"
|
|
145
103
|
/>
|
|
146
104
|
|
|
147
105
|
<span matTextSuffix>
|
|
@@ -151,7 +109,7 @@ class MatInputCurrencyComponent extends MatFormControlBase {
|
|
|
151
109
|
@if (loading()) {
|
|
152
110
|
<mat-spinner
|
|
153
111
|
matSuffix
|
|
154
|
-
class="nmf-mat-
|
|
112
|
+
class="nmf-mat-loader"
|
|
155
113
|
diameter="22"
|
|
156
114
|
strokeWidth="3"
|
|
157
115
|
></mat-spinner>
|
|
@@ -162,10 +120,10 @@ class MatInputCurrencyComponent extends MatFormControlBase {
|
|
|
162
120
|
}
|
|
163
121
|
|
|
164
122
|
<mat-error>
|
|
165
|
-
{{
|
|
123
|
+
{{ errorMessage() }}
|
|
166
124
|
</mat-error>
|
|
167
125
|
</mat-form-field>
|
|
168
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1
|
|
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 });
|
|
169
127
|
}
|
|
170
128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputCurrencyComponent, decorators: [{
|
|
171
129
|
type: Component,
|
|
@@ -193,24 +151,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
193
151
|
<mat-label>{{ label() }}</mat-label>
|
|
194
152
|
}
|
|
195
153
|
|
|
196
|
-
@if (
|
|
197
|
-
<span
|
|
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
|
+
>
|
|
198
162
|
}
|
|
199
163
|
|
|
200
164
|
<input
|
|
201
165
|
matInput
|
|
202
166
|
type="text"
|
|
203
|
-
autocomplete="off"
|
|
204
|
-
[id]="id"
|
|
205
|
-
[name]="name"
|
|
206
|
-
[value]="displayValue()"
|
|
207
167
|
[ngClass]="classList()"
|
|
208
|
-
[
|
|
209
|
-
[
|
|
210
|
-
[
|
|
211
|
-
|
|
212
|
-
|
|
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"
|
|
213
175
|
(blur)="onTouched()"
|
|
176
|
+
(input)="onInput($event)"
|
|
177
|
+
(keydown)="handleKeyDown($event)"
|
|
214
178
|
/>
|
|
215
179
|
|
|
216
180
|
<span matTextSuffix>
|
|
@@ -220,7 +184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
220
184
|
@if (loading()) {
|
|
221
185
|
<mat-spinner
|
|
222
186
|
matSuffix
|
|
223
|
-
class="nmf-mat-
|
|
187
|
+
class="nmf-mat-loader"
|
|
224
188
|
diameter="22"
|
|
225
189
|
strokeWidth="3"
|
|
226
190
|
></mat-spinner>
|
|
@@ -231,7 +195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
231
195
|
}
|
|
232
196
|
|
|
233
197
|
<mat-error>
|
|
234
|
-
{{
|
|
198
|
+
{{ errorMessage() }}
|
|
235
199
|
</mat-error>
|
|
236
200
|
</mat-form-field>
|
|
237
201
|
`,
|
|
@@ -247,17 +211,9 @@ class MatInputDatepickerComponent extends MatFormControlBase {
|
|
|
247
211
|
startView = input('month');
|
|
248
212
|
panelClass = input('');
|
|
249
213
|
touchUi = input(false);
|
|
250
|
-
|
|
251
|
-
setToday(dp) {
|
|
252
|
-
const today = this.dateAdapter.today();
|
|
253
|
-
dp.select(today);
|
|
254
|
-
}
|
|
255
|
-
onInput(event) {
|
|
256
|
-
this.value = event.value;
|
|
257
|
-
this.onChange(event.value);
|
|
258
|
-
}
|
|
214
|
+
placeholder = input('Select a date');
|
|
259
215
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
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: `
|
|
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: `
|
|
261
217
|
@if (label() && detachLabel()) {
|
|
262
218
|
<label class="font-medium text-base">{{ label() }}</label>
|
|
263
219
|
}
|
|
@@ -274,18 +230,14 @@ class MatInputDatepickerComponent extends MatFormControlBase {
|
|
|
274
230
|
<input
|
|
275
231
|
matInput
|
|
276
232
|
autocomplete="off"
|
|
277
|
-
[
|
|
278
|
-
[name]="name"
|
|
279
|
-
[value]="value"
|
|
233
|
+
[name]="name()"
|
|
280
234
|
[min]="minDate()"
|
|
281
235
|
[max]="maxDate()"
|
|
282
|
-
[readonly]="readonly"
|
|
283
|
-
[disabled]="_disabled()"
|
|
284
|
-
[placeholder]="placeholder || 'Select a date'"
|
|
285
236
|
[matDatepicker]="picker"
|
|
286
237
|
[matDatepickerFilter]="dateFilter()"
|
|
287
|
-
|
|
288
|
-
|
|
238
|
+
[required]="isRequired()"
|
|
239
|
+
[placeholder]="placeholder()"
|
|
240
|
+
[formControl]="control"
|
|
289
241
|
(blur)="onTouched()"
|
|
290
242
|
/>
|
|
291
243
|
|
|
@@ -293,29 +245,23 @@ class MatInputDatepickerComponent extends MatFormControlBase {
|
|
|
293
245
|
matSuffix
|
|
294
246
|
[for]="picker"
|
|
295
247
|
[hidden]="loading()"
|
|
296
|
-
[disabled]="
|
|
248
|
+
[disabled]="disabled()"
|
|
297
249
|
></mat-datepicker-toggle>
|
|
298
250
|
|
|
299
251
|
<mat-datepicker
|
|
300
252
|
[hidden]="loading()"
|
|
301
|
-
[dateClass]="dateClass()"
|
|
302
|
-
[panelClass]="panelClass()"
|
|
303
253
|
[startAt]="startAt()"
|
|
304
254
|
[startView]="startView()"
|
|
305
255
|
[touchUi]="touchUi()"
|
|
256
|
+
[dateClass]="dateClass()"
|
|
257
|
+
[panelClass]="panelClass()"
|
|
306
258
|
#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>
|
|
259
|
+
/>
|
|
314
260
|
|
|
315
261
|
@if (loading()) {
|
|
316
262
|
<mat-spinner
|
|
317
|
-
class="nmf-mat-suffix"
|
|
318
263
|
matSuffix
|
|
264
|
+
class="nmf-mat-loader"
|
|
319
265
|
diameter="22"
|
|
320
266
|
strokeWidth="3"
|
|
321
267
|
></mat-spinner>
|
|
@@ -325,9 +271,9 @@ class MatInputDatepickerComponent extends MatFormControlBase {
|
|
|
325
271
|
<mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
|
|
326
272
|
}
|
|
327
273
|
|
|
328
|
-
<mat-error>{{
|
|
274
|
+
<mat-error>{{ errorMessage() }}</mat-error>
|
|
329
275
|
</mat-form-field>
|
|
330
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1
|
|
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 });
|
|
331
277
|
}
|
|
332
278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputDatepickerComponent, decorators: [{
|
|
333
279
|
type: Component,
|
|
@@ -360,18 +306,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
360
306
|
<input
|
|
361
307
|
matInput
|
|
362
308
|
autocomplete="off"
|
|
363
|
-
[
|
|
364
|
-
[name]="name"
|
|
365
|
-
[value]="value"
|
|
309
|
+
[name]="name()"
|
|
366
310
|
[min]="minDate()"
|
|
367
311
|
[max]="maxDate()"
|
|
368
|
-
[readonly]="readonly"
|
|
369
|
-
[disabled]="_disabled()"
|
|
370
|
-
[placeholder]="placeholder || 'Select a date'"
|
|
371
312
|
[matDatepicker]="picker"
|
|
372
313
|
[matDatepickerFilter]="dateFilter()"
|
|
373
|
-
|
|
374
|
-
|
|
314
|
+
[required]="isRequired()"
|
|
315
|
+
[placeholder]="placeholder()"
|
|
316
|
+
[formControl]="control"
|
|
375
317
|
(blur)="onTouched()"
|
|
376
318
|
/>
|
|
377
319
|
|
|
@@ -379,29 +321,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
379
321
|
matSuffix
|
|
380
322
|
[for]="picker"
|
|
381
323
|
[hidden]="loading()"
|
|
382
|
-
[disabled]="
|
|
324
|
+
[disabled]="disabled()"
|
|
383
325
|
></mat-datepicker-toggle>
|
|
384
326
|
|
|
385
327
|
<mat-datepicker
|
|
386
328
|
[hidden]="loading()"
|
|
387
|
-
[dateClass]="dateClass()"
|
|
388
|
-
[panelClass]="panelClass()"
|
|
389
329
|
[startAt]="startAt()"
|
|
390
330
|
[startView]="startView()"
|
|
391
331
|
[touchUi]="touchUi()"
|
|
332
|
+
[dateClass]="dateClass()"
|
|
333
|
+
[panelClass]="panelClass()"
|
|
392
334
|
#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>
|
|
335
|
+
/>
|
|
400
336
|
|
|
401
337
|
@if (loading()) {
|
|
402
338
|
<mat-spinner
|
|
403
|
-
class="nmf-mat-suffix"
|
|
404
339
|
matSuffix
|
|
340
|
+
class="nmf-mat-loader"
|
|
405
341
|
diameter="22"
|
|
406
342
|
strokeWidth="3"
|
|
407
343
|
></mat-spinner>
|
|
@@ -411,38 +347,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
411
347
|
<mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
|
|
412
348
|
}
|
|
413
349
|
|
|
414
|
-
<mat-error>{{
|
|
350
|
+
<mat-error>{{ errorMessage() }}</mat-error>
|
|
415
351
|
</mat-form-field>
|
|
416
352
|
`,
|
|
417
353
|
}]
|
|
418
354
|
}] });
|
|
419
355
|
|
|
420
|
-
class
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
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);
|
|
364
|
+
}
|
|
365
|
+
handleKeyDown(event) {
|
|
366
|
+
this.currencyBehavior.handleKeyDown(event);
|
|
429
367
|
}
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
368
|
+
onInput(event) {
|
|
369
|
+
const raw = event.target.value;
|
|
370
|
+
const parsed = parseNumber(raw);
|
|
371
|
+
this.updateDisplayValue(parsed);
|
|
372
|
+
this.onChange(parsed);
|
|
373
|
+
}
|
|
374
|
+
updateDisplayValue(value) {
|
|
375
|
+
if (this.formatNumberValue() && value != null) {
|
|
376
|
+
this.displayValue.set(formatNumber(value) ?? '');
|
|
434
377
|
}
|
|
435
378
|
else {
|
|
436
|
-
value
|
|
379
|
+
this.displayValue.set(value != null ? String(value) : '');
|
|
437
380
|
}
|
|
438
|
-
this.value = value;
|
|
439
|
-
this.onChange(value);
|
|
440
381
|
}
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
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>
|
|
445
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 });
|
|
429
|
+
}
|
|
430
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputNumberComponent, decorators: [{
|
|
431
|
+
type: Component,
|
|
432
|
+
args: [{
|
|
433
|
+
selector: 'nmf-mat-number',
|
|
434
|
+
imports: [
|
|
435
|
+
CommonModule,
|
|
436
|
+
MatFormFieldModule,
|
|
437
|
+
MatInputModule,
|
|
438
|
+
ReactiveFormsModule,
|
|
439
|
+
MatIconModule,
|
|
440
|
+
MatProgressSpinnerModule,
|
|
441
|
+
MatButtonModule,
|
|
442
|
+
],
|
|
443
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
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>
|
|
489
|
+
`,
|
|
490
|
+
}]
|
|
491
|
+
}] });
|
|
492
|
+
|
|
493
|
+
class MatInputSelectComponent extends MatFormControlBase {
|
|
494
|
+
options = input([]);
|
|
495
|
+
emptyOptionLabel = input('Select an option');
|
|
496
|
+
clearOptionLabel = input('Clear selection');
|
|
497
|
+
panelWidth = input('auto');
|
|
446
498
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
447
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: `
|
|
448
500
|
@if (label() && detachLabel()) {
|
|
@@ -459,15 +511,14 @@ class MatInputSelectComponent extends MatFormControlBase {
|
|
|
459
511
|
}
|
|
460
512
|
|
|
461
513
|
<mat-select
|
|
462
|
-
[value]="value"
|
|
463
|
-
[panelWidth]="panelWidth()"
|
|
464
514
|
[class.hide-select-arrow]="loading()"
|
|
465
|
-
[
|
|
515
|
+
[panelWidth]="panelWidth()"
|
|
516
|
+
[required]="isRequired()"
|
|
517
|
+
[placeholder]="emptyOptionLabel()"
|
|
518
|
+
[formControl]="control"
|
|
466
519
|
(blur)="onTouched()"
|
|
467
|
-
(selectionChange)="onSelectionChange($event)"
|
|
468
|
-
(closed)="onSelectionClosed()"
|
|
469
520
|
>
|
|
470
|
-
<mat-option [value]="
|
|
521
|
+
<mat-option [value]="null" disabled>
|
|
471
522
|
{{ emptyOptionLabel() }}
|
|
472
523
|
</mat-option>
|
|
473
524
|
|
|
@@ -480,14 +531,14 @@ class MatInputSelectComponent extends MatFormControlBase {
|
|
|
480
531
|
|
|
481
532
|
<!-- Clear Selection Option -->
|
|
482
533
|
@if (clearOptionLabel()) {
|
|
483
|
-
<mat-option value="
|
|
534
|
+
<mat-option [value]="null">{{ clearOptionLabel() }}</mat-option>
|
|
484
535
|
}
|
|
485
536
|
</mat-select>
|
|
486
537
|
|
|
487
538
|
@if (loading()) {
|
|
488
539
|
<mat-spinner
|
|
489
540
|
matSuffix
|
|
490
|
-
class="nmf-mat-
|
|
541
|
+
class="nmf-mat-loader"
|
|
491
542
|
diameter="22"
|
|
492
543
|
strokeWidth="3"
|
|
493
544
|
></mat-spinner>
|
|
@@ -497,9 +548,9 @@ class MatInputSelectComponent extends MatFormControlBase {
|
|
|
497
548
|
<mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
|
|
498
549
|
}
|
|
499
550
|
|
|
500
|
-
<mat-error>{{
|
|
551
|
+
<mat-error>{{ errorMessage() }}</mat-error>
|
|
501
552
|
</mat-form-field>
|
|
502
|
-
`, isInline: true, styles: [".hide-select-arrow .mat-mdc-select-arrow-wrapper{display:none!important}.nmf-mat-
|
|
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 });
|
|
503
554
|
}
|
|
504
555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputSelectComponent, decorators: [{
|
|
505
556
|
type: Component,
|
|
@@ -524,15 +575,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
524
575
|
}
|
|
525
576
|
|
|
526
577
|
<mat-select
|
|
527
|
-
[value]="value"
|
|
528
|
-
[panelWidth]="panelWidth()"
|
|
529
578
|
[class.hide-select-arrow]="loading()"
|
|
530
|
-
[
|
|
579
|
+
[panelWidth]="panelWidth()"
|
|
580
|
+
[required]="isRequired()"
|
|
581
|
+
[placeholder]="emptyOptionLabel()"
|
|
582
|
+
[formControl]="control"
|
|
531
583
|
(blur)="onTouched()"
|
|
532
|
-
(selectionChange)="onSelectionChange($event)"
|
|
533
|
-
(closed)="onSelectionClosed()"
|
|
534
584
|
>
|
|
535
|
-
<mat-option [value]="
|
|
585
|
+
<mat-option [value]="null" disabled>
|
|
536
586
|
{{ emptyOptionLabel() }}
|
|
537
587
|
</mat-option>
|
|
538
588
|
|
|
@@ -545,14 +595,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
545
595
|
|
|
546
596
|
<!-- Clear Selection Option -->
|
|
547
597
|
@if (clearOptionLabel()) {
|
|
548
|
-
<mat-option value="
|
|
598
|
+
<mat-option [value]="null">{{ clearOptionLabel() }}</mat-option>
|
|
549
599
|
}
|
|
550
600
|
</mat-select>
|
|
551
601
|
|
|
552
602
|
@if (loading()) {
|
|
553
603
|
<mat-spinner
|
|
554
604
|
matSuffix
|
|
555
|
-
class="nmf-mat-
|
|
605
|
+
class="nmf-mat-loader"
|
|
556
606
|
diameter="22"
|
|
557
607
|
strokeWidth="3"
|
|
558
608
|
></mat-spinner>
|
|
@@ -562,41 +612,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
562
612
|
<mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
|
|
563
613
|
}
|
|
564
614
|
|
|
565
|
-
<mat-error>{{
|
|
615
|
+
<mat-error>{{ errorMessage() }}</mat-error>
|
|
566
616
|
</mat-form-field>
|
|
567
|
-
`, styles: [".hide-select-arrow .mat-mdc-select-arrow-wrapper{display:none!important}.nmf-mat-
|
|
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"] }]
|
|
568
618
|
}] });
|
|
569
619
|
|
|
570
620
|
class MatInputTextComponent extends MatFormControlBase {
|
|
571
621
|
type = input('text');
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
behavior = new InputTextBehavior();
|
|
575
|
-
computedType = computed(() => (this.behavior.showPassword() && this.type() === 'password') ||
|
|
576
|
-
(this.type() === 'number' && this.formatNumberValue())
|
|
622
|
+
behavior = new TextBehavior();
|
|
623
|
+
computedType = computed(() => this.behavior.showPassword() && this.type() === 'password'
|
|
577
624
|
? 'text'
|
|
578
625
|
: this.type());
|
|
579
|
-
writeValue(value) {
|
|
580
|
-
super.writeValue(value);
|
|
581
|
-
this.updateDisplayValue(value);
|
|
582
|
-
}
|
|
583
|
-
onInput(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
|
-
}
|
|
597
|
-
}
|
|
598
626
|
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 }
|
|
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: `
|
|
600
628
|
@if (label() && detachLabel()) {
|
|
601
629
|
<label class="font-medium text-base">{{ label() }}</label>
|
|
602
630
|
}
|
|
@@ -613,22 +641,19 @@ class MatInputTextComponent extends MatFormControlBase {
|
|
|
613
641
|
<input
|
|
614
642
|
matInput
|
|
615
643
|
autocomplete="off"
|
|
616
|
-
[id]="id"
|
|
617
|
-
[name]="name"
|
|
618
|
-
[type]="computedType()"
|
|
619
|
-
[value]="displayValue()"
|
|
620
|
-
[disabled]="_disabled()"
|
|
621
|
-
[readonly]="readonly"
|
|
622
|
-
[placeholder]="placeholder"
|
|
623
644
|
[ngClass]="classList"
|
|
624
|
-
|
|
645
|
+
[name]="name()"
|
|
646
|
+
[type]="computedType()"
|
|
647
|
+
[required]="isRequired()"
|
|
648
|
+
[placeholder]="placeholder()"
|
|
649
|
+
[formControl]="control"
|
|
625
650
|
(blur)="onTouched()"
|
|
626
651
|
/>
|
|
627
652
|
|
|
628
653
|
@if (loading()) {
|
|
629
654
|
<mat-spinner
|
|
630
655
|
matSuffix
|
|
631
|
-
class="nmf-mat-
|
|
656
|
+
class="nmf-mat-loader"
|
|
632
657
|
diameter="22"
|
|
633
658
|
strokeWidth="3"
|
|
634
659
|
></mat-spinner>
|
|
@@ -641,12 +666,11 @@ class MatInputTextComponent extends MatFormControlBase {
|
|
|
641
666
|
@if (type() === 'password' && !loading()) {
|
|
642
667
|
<button
|
|
643
668
|
matIconSuffix
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
[
|
|
648
|
-
|
|
649
|
-
(click)="behavior.toggleShowPassword()"
|
|
669
|
+
mat-icon-button
|
|
670
|
+
color="transparent"
|
|
671
|
+
class="nmf-password-toggle"
|
|
672
|
+
[disabled]="disabled()"
|
|
673
|
+
(click)="behavior.toggleShowPassword($event)"
|
|
650
674
|
>
|
|
651
675
|
<mat-icon>{{
|
|
652
676
|
behavior.showPassword() ? 'visibility_off' : 'visibility'
|
|
@@ -656,9 +680,9 @@ class MatInputTextComponent extends MatFormControlBase {
|
|
|
656
680
|
|
|
657
681
|
<ng-content></ng-content>
|
|
658
682
|
|
|
659
|
-
<mat-error>{{
|
|
683
|
+
<mat-error>{{ errorMessage() }}</mat-error>
|
|
660
684
|
</mat-form-field>
|
|
661
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1
|
|
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 });
|
|
662
686
|
}
|
|
663
687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTextComponent, decorators: [{
|
|
664
688
|
type: Component,
|
|
@@ -671,6 +695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
671
695
|
ReactiveFormsModule,
|
|
672
696
|
MatIconModule,
|
|
673
697
|
MatProgressSpinnerModule,
|
|
698
|
+
MatButtonModule,
|
|
674
699
|
],
|
|
675
700
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
676
701
|
template: `
|
|
@@ -690,22 +715,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
690
715
|
<input
|
|
691
716
|
matInput
|
|
692
717
|
autocomplete="off"
|
|
693
|
-
[id]="id"
|
|
694
|
-
[name]="name"
|
|
695
|
-
[type]="computedType()"
|
|
696
|
-
[value]="displayValue()"
|
|
697
|
-
[disabled]="_disabled()"
|
|
698
|
-
[readonly]="readonly"
|
|
699
|
-
[placeholder]="placeholder"
|
|
700
718
|
[ngClass]="classList"
|
|
701
|
-
|
|
719
|
+
[name]="name()"
|
|
720
|
+
[type]="computedType()"
|
|
721
|
+
[required]="isRequired()"
|
|
722
|
+
[placeholder]="placeholder()"
|
|
723
|
+
[formControl]="control"
|
|
702
724
|
(blur)="onTouched()"
|
|
703
725
|
/>
|
|
704
726
|
|
|
705
727
|
@if (loading()) {
|
|
706
728
|
<mat-spinner
|
|
707
729
|
matSuffix
|
|
708
|
-
class="nmf-mat-
|
|
730
|
+
class="nmf-mat-loader"
|
|
709
731
|
diameter="22"
|
|
710
732
|
strokeWidth="3"
|
|
711
733
|
></mat-spinner>
|
|
@@ -718,12 +740,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
718
740
|
@if (type() === 'password' && !loading()) {
|
|
719
741
|
<button
|
|
720
742
|
matIconSuffix
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
[
|
|
725
|
-
|
|
726
|
-
(click)="behavior.toggleShowPassword()"
|
|
743
|
+
mat-icon-button
|
|
744
|
+
color="transparent"
|
|
745
|
+
class="nmf-password-toggle"
|
|
746
|
+
[disabled]="disabled()"
|
|
747
|
+
(click)="behavior.toggleShowPassword($event)"
|
|
727
748
|
>
|
|
728
749
|
<mat-icon>{{
|
|
729
750
|
behavior.showPassword() ? 'visibility_off' : 'visibility'
|
|
@@ -733,7 +754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
733
754
|
|
|
734
755
|
<ng-content></ng-content>
|
|
735
756
|
|
|
736
|
-
<mat-error>{{
|
|
757
|
+
<mat-error>{{ errorMessage() }}</mat-error>
|
|
737
758
|
</mat-form-field>
|
|
738
759
|
`,
|
|
739
760
|
}]
|
|
@@ -742,11 +763,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
742
763
|
class MatInputTextareaComponent extends MatFormControlBase {
|
|
743
764
|
rows = input(5);
|
|
744
765
|
cols = input(5);
|
|
745
|
-
onInput(event) {
|
|
746
|
-
const value = event.target.value;
|
|
747
|
-
this.value = value;
|
|
748
|
-
this.onChange(value);
|
|
749
|
-
}
|
|
750
766
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
751
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: `
|
|
752
768
|
@if (label() && detachLabel()) {
|
|
@@ -764,21 +780,18 @@ class MatInputTextareaComponent extends MatFormControlBase {
|
|
|
764
780
|
|
|
765
781
|
<textarea
|
|
766
782
|
matInput
|
|
767
|
-
[id]="id"
|
|
768
783
|
[rows]="rows()"
|
|
769
784
|
[cols]="cols()"
|
|
770
|
-
[
|
|
771
|
-
[
|
|
772
|
-
[
|
|
773
|
-
[placeholder]="placeholder"
|
|
785
|
+
[required]="isRequired()"
|
|
786
|
+
[placeholder]="placeholder()"
|
|
787
|
+
[formControl]="control"
|
|
774
788
|
(blur)="onTouched()"
|
|
775
|
-
(input)="onInput($event)"
|
|
776
789
|
></textarea>
|
|
777
790
|
|
|
778
791
|
@if (loading()) {
|
|
779
792
|
<mat-spinner
|
|
780
|
-
class="nmf-mat-suffix"
|
|
781
793
|
matSuffix
|
|
794
|
+
class="nmf-mat-loader"
|
|
782
795
|
diameter="22"
|
|
783
796
|
strokeWidth="3"
|
|
784
797
|
></mat-spinner>
|
|
@@ -789,10 +802,10 @@ class MatInputTextareaComponent extends MatFormControlBase {
|
|
|
789
802
|
}
|
|
790
803
|
|
|
791
804
|
<mat-error>
|
|
792
|
-
{{
|
|
805
|
+
{{ errorMessage() }}
|
|
793
806
|
</mat-error>
|
|
794
807
|
</mat-form-field>
|
|
795
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1
|
|
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 });
|
|
796
809
|
}
|
|
797
810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTextareaComponent, decorators: [{
|
|
798
811
|
type: Component,
|
|
@@ -822,21 +835,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
822
835
|
|
|
823
836
|
<textarea
|
|
824
837
|
matInput
|
|
825
|
-
[id]="id"
|
|
826
838
|
[rows]="rows()"
|
|
827
839
|
[cols]="cols()"
|
|
828
|
-
[
|
|
829
|
-
[
|
|
830
|
-
[
|
|
831
|
-
[placeholder]="placeholder"
|
|
840
|
+
[required]="isRequired()"
|
|
841
|
+
[placeholder]="placeholder()"
|
|
842
|
+
[formControl]="control"
|
|
832
843
|
(blur)="onTouched()"
|
|
833
|
-
(input)="onInput($event)"
|
|
834
844
|
></textarea>
|
|
835
845
|
|
|
836
846
|
@if (loading()) {
|
|
837
847
|
<mat-spinner
|
|
838
|
-
class="nmf-mat-suffix"
|
|
839
848
|
matSuffix
|
|
849
|
+
class="nmf-mat-loader"
|
|
840
850
|
diameter="22"
|
|
841
851
|
strokeWidth="3"
|
|
842
852
|
></mat-spinner>
|
|
@@ -847,7 +857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
847
857
|
}
|
|
848
858
|
|
|
849
859
|
<mat-error>
|
|
850
|
-
{{
|
|
860
|
+
{{ errorMessage() }}
|
|
851
861
|
</mat-error>
|
|
852
862
|
</mat-form-field>
|
|
853
863
|
`,
|
|
@@ -859,13 +869,9 @@ class MatInputTimepickerComponent extends MatFormControlBase {
|
|
|
859
869
|
maxDate = input(null);
|
|
860
870
|
interval = input(null);
|
|
861
871
|
options = input(null);
|
|
862
|
-
|
|
863
|
-
const value = event.value;
|
|
864
|
-
this.value = value;
|
|
865
|
-
this.onChange(value);
|
|
866
|
-
}
|
|
872
|
+
placeholder = input('Select a time');
|
|
867
873
|
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: `
|
|
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: `
|
|
869
875
|
@if (label() && detachLabel()) {
|
|
870
876
|
<label class="font-medium text-base">{{ label() }}</label>
|
|
871
877
|
}
|
|
@@ -882,15 +888,13 @@ class MatInputTimepickerComponent extends MatFormControlBase {
|
|
|
882
888
|
<input
|
|
883
889
|
matInput
|
|
884
890
|
autocomplete="off"
|
|
885
|
-
[
|
|
886
|
-
[
|
|
887
|
-
[value]="value"
|
|
891
|
+
[name]="name()"
|
|
892
|
+
[matTimepicker]="picker"
|
|
888
893
|
[matTimepickerMin]="minDate()"
|
|
889
894
|
[matTimepickerMax]="maxDate()"
|
|
890
|
-
[
|
|
891
|
-
[
|
|
892
|
-
[
|
|
893
|
-
[matTimepicker]="picker"
|
|
895
|
+
[required]="isRequired()"
|
|
896
|
+
[placeholder]="placeholder()"
|
|
897
|
+
[formControl]="control"
|
|
894
898
|
(blur)="onTouched()"
|
|
895
899
|
/>
|
|
896
900
|
|
|
@@ -898,21 +902,20 @@ class MatInputTimepickerComponent extends MatFormControlBase {
|
|
|
898
902
|
matSuffix
|
|
899
903
|
[for]="picker"
|
|
900
904
|
[hidden]="loading()"
|
|
901
|
-
[disabled]="
|
|
905
|
+
[disabled]="disabled()"
|
|
902
906
|
/>
|
|
903
907
|
|
|
904
908
|
<mat-timepicker
|
|
905
909
|
[hidden]="loading()"
|
|
906
910
|
[interval]="interval()"
|
|
907
911
|
[options]="options()"
|
|
908
|
-
(selected)="onInput($event)"
|
|
909
912
|
#picker
|
|
910
913
|
/>
|
|
911
914
|
|
|
912
915
|
@if (loading()) {
|
|
913
916
|
<mat-spinner
|
|
914
|
-
class="nmf-mat-suffix"
|
|
915
917
|
matSuffix
|
|
918
|
+
class="nmf-mat-loader"
|
|
916
919
|
diameter="22"
|
|
917
920
|
strokeWidth="3"
|
|
918
921
|
></mat-spinner>
|
|
@@ -922,9 +925,9 @@ class MatInputTimepickerComponent extends MatFormControlBase {
|
|
|
922
925
|
<mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
|
|
923
926
|
}
|
|
924
927
|
|
|
925
|
-
<mat-error>{{
|
|
928
|
+
<mat-error>{{ errorMessage() }}</mat-error>
|
|
926
929
|
</mat-form-field>
|
|
927
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1
|
|
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 });
|
|
928
931
|
}
|
|
929
932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTimepickerComponent, decorators: [{
|
|
930
933
|
type: Component,
|
|
@@ -956,15 +959,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
956
959
|
<input
|
|
957
960
|
matInput
|
|
958
961
|
autocomplete="off"
|
|
959
|
-
[
|
|
960
|
-
[
|
|
961
|
-
[value]="value"
|
|
962
|
+
[name]="name()"
|
|
963
|
+
[matTimepicker]="picker"
|
|
962
964
|
[matTimepickerMin]="minDate()"
|
|
963
965
|
[matTimepickerMax]="maxDate()"
|
|
964
|
-
[
|
|
965
|
-
[
|
|
966
|
-
[
|
|
967
|
-
[matTimepicker]="picker"
|
|
966
|
+
[required]="isRequired()"
|
|
967
|
+
[placeholder]="placeholder()"
|
|
968
|
+
[formControl]="control"
|
|
968
969
|
(blur)="onTouched()"
|
|
969
970
|
/>
|
|
970
971
|
|
|
@@ -972,21 +973,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
972
973
|
matSuffix
|
|
973
974
|
[for]="picker"
|
|
974
975
|
[hidden]="loading()"
|
|
975
|
-
[disabled]="
|
|
976
|
+
[disabled]="disabled()"
|
|
976
977
|
/>
|
|
977
978
|
|
|
978
979
|
<mat-timepicker
|
|
979
980
|
[hidden]="loading()"
|
|
980
981
|
[interval]="interval()"
|
|
981
982
|
[options]="options()"
|
|
982
|
-
(selected)="onInput($event)"
|
|
983
983
|
#picker
|
|
984
984
|
/>
|
|
985
985
|
|
|
986
986
|
@if (loading()) {
|
|
987
987
|
<mat-spinner
|
|
988
|
-
class="nmf-mat-suffix"
|
|
989
988
|
matSuffix
|
|
989
|
+
class="nmf-mat-loader"
|
|
990
990
|
diameter="22"
|
|
991
991
|
strokeWidth="3"
|
|
992
992
|
></mat-spinner>
|
|
@@ -996,7 +996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
996
996
|
<mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
|
|
997
997
|
}
|
|
998
998
|
|
|
999
|
-
<mat-error>{{
|
|
999
|
+
<mat-error>{{ errorMessage() }}</mat-error>
|
|
1000
1000
|
</mat-form-field>
|
|
1001
1001
|
`,
|
|
1002
1002
|
}]
|
|
@@ -1010,5 +1010,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
1010
1010
|
* Generated bundle index. Do not edit.
|
|
1011
1011
|
*/
|
|
1012
1012
|
|
|
1013
|
-
export { MatFormControlBase, MatInputCurrencyComponent, MatInputDatepickerComponent, MatInputSelectComponent, MatInputTextComponent, MatInputTextareaComponent, MatInputTimepickerComponent };
|
|
1013
|
+
export { MatFormControlBase, MatInputCurrencyComponent, MatInputDatepickerComponent, MatInputNumberComponent, MatInputSelectComponent, MatInputTextComponent, MatInputTextareaComponent, MatInputTimepickerComponent };
|
|
1014
1014
|
//# sourceMappingURL=ng-modular-forms-material.mjs.map
|