@ng-modular-forms/core 0.7.6 → 0.7.7

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 (11) hide show
  1. package/README.md +3 -1
  2. package/fesm2022/ng-modular-forms-core.mjs +187 -335
  3. package/fesm2022/ng-modular-forms-core.mjs.map +1 -1
  4. package/lib/base/form-control-base.d.ts +1 -1
  5. package/lib/input/form-field.component.d.ts +9 -0
  6. package/lib/input/input-currency.component.d.ts +1 -1
  7. package/lib/input/input-datepicker.component.d.ts +1 -1
  8. package/lib/input/input-number.component.d.ts +2 -2
  9. package/lib/input/input-text.component.d.ts +1 -1
  10. package/lib/input/input-timepicker.component.d.ts +1 -1
  11. package/package.json +30 -11
package/fesm2022/ng-modular-forms-core.mjs CHANGED
@@ -18,6 +18,7 @@ class FormControlBase {
18
18
  placeholder = input('');
19
19
  _disabledByInput = input(false, {
20
20
  transform: booleanAttribute,
21
+ alias: 'disabledOverride',
21
22
  });
22
23
  _disabledByCva = signal(false);
23
24
  ngControl = inject(NgControl, {
@@ -105,7 +106,7 @@ class FormControlBase {
105
106
  }
106
107
  }
107
108
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormControlBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
108
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: FormControlBase, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _disabledByInput: { classPropertyName: "_disabledByInput", publicName: "_disabledByInput", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
109
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: FormControlBase, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _disabledByInput: { classPropertyName: "_disabledByInput", publicName: "disabledOverride", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
109
110
  }
110
111
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormControlBase, decorators: [{
111
112
  type: Directive
@@ -260,6 +261,71 @@ class TextBehavior {
260
261
  }
261
262
  }
262
263
 
264
+ class FormFieldComponent {
265
+ label = input();
266
+ isRequired = input();
267
+ loading = input();
268
+ errorMessage = input();
269
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
270
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FormFieldComponent, isStandalone: true, selector: "nmf-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
271
+ <div class="nmf-field" [class.loading]="loading()">
272
+ @if (label()) {
273
+ <label class="nmf-label">
274
+ {{ label() }}
275
+ @if (isRequired()) {
276
+ <span class="nmf-required">*</span>
277
+ }
278
+ </label>
279
+ }
280
+
281
+ <ng-content></ng-content>
282
+
283
+ @if (loading()) {
284
+ <div class="nmf-loading">
285
+ <span class="nmf-spinner"></span>
286
+ </div>
287
+ }
288
+
289
+ <p class="nmf-error">
290
+ {{ errorMessage() }}
291
+ </p>
292
+ </div>
293
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
294
+ }
295
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormFieldComponent, decorators: [{
296
+ type: Component,
297
+ args: [{
298
+ selector: 'nmf-form-field',
299
+ standalone: true,
300
+ imports: [CommonModule, ReactiveFormsModule],
301
+ changeDetection: ChangeDetectionStrategy.OnPush,
302
+ template: `
303
+ <div class="nmf-field" [class.loading]="loading()">
304
+ @if (label()) {
305
+ <label class="nmf-label">
306
+ {{ label() }}
307
+ @if (isRequired()) {
308
+ <span class="nmf-required">*</span>
309
+ }
310
+ </label>
311
+ }
312
+
313
+ <ng-content></ng-content>
314
+
315
+ @if (loading()) {
316
+ <div class="nmf-loading">
317
+ <span class="nmf-spinner"></span>
318
+ </div>
319
+ }
320
+
321
+ <p class="nmf-error">
322
+ {{ errorMessage() }}
323
+ </p>
324
+ </div>
325
+ `,
326
+ }]
327
+ }] });
328
+
263
329
  class InputCurrencyComponent extends FormControlBase {
264
330
  displayValue = signal(null);
265
331
  behavior = new CurrencyBehavior();
@@ -289,16 +355,12 @@ class InputCurrencyComponent extends FormControlBase {
289
355
  });
290
356
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
291
357
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputCurrencyComponent, isStandalone: true, selector: "nmf-currency", usesInheritance: true, ngImport: i0, template: `
292
- <div class="nmf-field">
293
- @if (label()) {
294
- <label class="nmf-label">
295
- {{ label() }}
296
- @if (isRequired()) {
297
- <span class="nmf-required">*</span>
298
- }
299
- </label>
300
- }
301
-
358
+ <nmf-form-field
359
+ [label]="label()"
360
+ [isRequired]="isRequired()"
361
+ [loading]="loading()"
362
+ [errorMessage]="errorMessage()"
363
+ >
302
364
  <div class="nmf-input-wrapper nmf-input-prefix">
303
365
  @if (displayValue() != null) {
304
366
  <span
@@ -331,39 +393,23 @@ class InputCurrencyComponent extends FormControlBase {
331
393
  (keydown)="handleKeyDown($event)"
332
394
  />
333
395
  </div>
334
-
335
- <ng-content></ng-content>
336
-
337
- @if (loading()) {
338
- <div class="nmf-loading">
339
- <span class="nmf-spinner"></span>
340
- </div>
341
- }
342
-
343
- <p class="nmf-error">
344
- {{ errorMessage() }}
345
- </p>
346
- </div>
347
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
396
+ </nmf-form-field>
397
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
348
398
  }
349
399
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputCurrencyComponent, decorators: [{
350
400
  type: Component,
351
401
  args: [{
352
402
  selector: 'nmf-currency',
353
403
  standalone: true,
354
- imports: [CommonModule, ReactiveFormsModule],
404
+ imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
355
405
  changeDetection: ChangeDetectionStrategy.OnPush,
356
406
  template: `
357
- <div class="nmf-field">
358
- @if (label()) {
359
- <label class="nmf-label">
360
- {{ label() }}
361
- @if (isRequired()) {
362
- <span class="nmf-required">*</span>
363
- }
364
- </label>
365
- }
366
-
407
+ <nmf-form-field
408
+ [label]="label()"
409
+ [isRequired]="isRequired()"
410
+ [loading]="loading()"
411
+ [errorMessage]="errorMessage()"
412
+ >
367
413
  <div class="nmf-input-wrapper nmf-input-prefix">
368
414
  @if (displayValue() != null) {
369
415
  <span
@@ -396,19 +442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
396
442
  (keydown)="handleKeyDown($event)"
397
443
  />
398
444
  </div>
399
-
400
- <ng-content></ng-content>
401
-
402
- @if (loading()) {
403
- <div class="nmf-loading">
404
- <span class="nmf-spinner"></span>
405
- </div>
406
- }
407
-
408
- <p class="nmf-error">
409
- {{ errorMessage() }}
410
- </p>
411
- </div>
445
+ </nmf-form-field>
412
446
  `,
413
447
  }]
414
448
  }] });
@@ -445,17 +479,13 @@ class InputDatepickerComponent extends FormControlBase {
445
479
  this.onChange(parsed);
446
480
  }
447
481
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
448
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputDatepickerComponent, isStandalone: true, selector: "nmf-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: `
449
- <div class="nmf-field" [class.loading]="loading()">
450
- @if (label()) {
451
- <label class="nmf-label">
452
- {{ label() }}
453
- @if (isRequired()) {
454
- <span class="nmf-required">*</span>
455
- }
456
- </label>
457
- }
458
-
482
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputDatepickerComponent, isStandalone: true, selector: "nmf-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: `
483
+ <nmf-form-field
484
+ [label]="label()"
485
+ [isRequired]="isRequired()"
486
+ [loading]="loading()"
487
+ [errorMessage]="errorMessage()"
488
+ >
459
489
  <input
460
490
  type="date"
461
491
  class="nmf-input"
@@ -473,39 +503,23 @@ class InputDatepickerComponent extends FormControlBase {
473
503
  (blur)="onTouched()"
474
504
  (input)="onInput($event)"
475
505
  />
476
-
477
- <ng-content></ng-content>
478
-
479
- @if (loading()) {
480
- <div class="nmf-loading">
481
- <span class="nmf-spinner"></span>
482
- </div>
483
- }
484
-
485
- <p class="nmf-error">
486
- {{ errorMessage() }}
487
- </p>
488
- </div>
489
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
506
+ </nmf-form-field>
507
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
490
508
  }
491
509
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputDatepickerComponent, decorators: [{
492
510
  type: Component,
493
511
  args: [{
494
512
  selector: 'nmf-datepicker',
495
513
  standalone: true,
496
- imports: [CommonModule, ReactiveFormsModule],
514
+ imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
497
515
  changeDetection: ChangeDetectionStrategy.OnPush,
498
516
  template: `
499
- <div class="nmf-field" [class.loading]="loading()">
500
- @if (label()) {
501
- <label class="nmf-label">
502
- {{ label() }}
503
- @if (isRequired()) {
504
- <span class="nmf-required">*</span>
505
- }
506
- </label>
507
- }
508
-
517
+ <nmf-form-field
518
+ [label]="label()"
519
+ [isRequired]="isRequired()"
520
+ [loading]="loading()"
521
+ [errorMessage]="errorMessage()"
522
+ >
509
523
  <input
510
524
  type="date"
511
525
  class="nmf-input"
@@ -523,25 +537,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
523
537
  (blur)="onTouched()"
524
538
  (input)="onInput($event)"
525
539
  />
526
-
527
- <ng-content></ng-content>
528
-
529
- @if (loading()) {
530
- <div class="nmf-loading">
531
- <span class="nmf-spinner"></span>
532
- </div>
533
- }
534
-
535
- <p class="nmf-error">
536
- {{ errorMessage() }}
537
- </p>
538
- </div>
540
+ </nmf-form-field>
539
541
  `,
540
542
  }]
541
543
  }] });
542
544
 
543
545
  class InputNumberComponent extends FormControlBase {
544
- formatNumberValue = input(false);
546
+ formatValue = input(false);
545
547
  displayValue = signal('');
546
548
  behavior = new TextBehavior();
547
549
  currencyBehavior = new CurrencyBehavior();
@@ -561,7 +563,7 @@ class InputNumberComponent extends FormControlBase {
561
563
  this.onChange(parsed);
562
564
  }
563
565
  updateDisplayValue(value) {
564
- if (this.formatNumberValue() && value != null) {
566
+ if (this.formatValue() && value != null) {
565
567
  this.displayValue.set(formatNumber(value) ?? '');
566
568
  }
567
569
  else {
@@ -569,17 +571,13 @@ class InputNumberComponent extends FormControlBase {
569
571
  }
570
572
  }
571
573
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
572
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputNumberComponent, isStandalone: true, selector: "nmf-number", inputs: { formatNumberValue: { classPropertyName: "formatNumberValue", publicName: "formatNumberValue", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
573
- <div class="nmf-field">
574
- @if (label()) {
575
- <label class="nmf-label">
576
- {{ label() }}
577
- @if (isRequired()) {
578
- <span class="nmf-required">*</span>
579
- }
580
- </label>
581
- }
582
-
574
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputNumberComponent, isStandalone: true, selector: "nmf-number", inputs: { formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
575
+ <nmf-form-field
576
+ [label]="label()"
577
+ [isRequired]="isRequired()"
578
+ [loading]="loading()"
579
+ [errorMessage]="errorMessage()"
580
+ >
583
581
  <input
584
582
  autocomplete="off"
585
583
  class="nmf-input"
@@ -588,7 +586,7 @@ class InputNumberComponent extends FormControlBase {
588
586
  [class.disabled]="disabled()"
589
587
  [id]="id()"
590
588
  [name]="name()"
591
- [type]="formatNumberValue() ? 'text' : 'number'"
589
+ [type]="formatValue() ? 'text' : 'number'"
592
590
  [value]="displayValue()"
593
591
  [disabled]="disabled()"
594
592
  [required]="isRequired()"
@@ -597,39 +595,23 @@ class InputNumberComponent extends FormControlBase {
597
595
  (input)="onInput($event)"
598
596
  (keydown)="handleKeyDown($event)"
599
597
  />
600
-
601
- <ng-content></ng-content>
602
-
603
- <p class="nmf-error">
604
- {{ errorMessage() }}
605
- </p>
606
-
607
- @if (loading()) {
608
- <div class="nmf-loading">
609
- <span class="nmf-spinner"></span>
610
- </div>
611
- }
612
- </div>
613
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
598
+ </nmf-form-field>
599
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
614
600
  }
615
601
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputNumberComponent, decorators: [{
616
602
  type: Component,
617
603
  args: [{
618
604
  selector: 'nmf-number',
619
605
  standalone: true,
620
- imports: [CommonModule, ReactiveFormsModule],
606
+ imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
621
607
  changeDetection: ChangeDetectionStrategy.OnPush,
622
608
  template: `
623
- <div class="nmf-field">
624
- @if (label()) {
625
- <label class="nmf-label">
626
- {{ label() }}
627
- @if (isRequired()) {
628
- <span class="nmf-required">*</span>
629
- }
630
- </label>
631
- }
632
-
609
+ <nmf-form-field
610
+ [label]="label()"
611
+ [isRequired]="isRequired()"
612
+ [loading]="loading()"
613
+ [errorMessage]="errorMessage()"
614
+ >
633
615
  <input
634
616
  autocomplete="off"
635
617
  class="nmf-input"
@@ -638,7 +620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
638
620
  [class.disabled]="disabled()"
639
621
  [id]="id()"
640
622
  [name]="name()"
641
- [type]="formatNumberValue() ? 'text' : 'number'"
623
+ [type]="formatValue() ? 'text' : 'number'"
642
624
  [value]="displayValue()"
643
625
  [disabled]="disabled()"
644
626
  [required]="isRequired()"
@@ -647,19 +629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
647
629
  (input)="onInput($event)"
648
630
  (keydown)="handleKeyDown($event)"
649
631
  />
650
-
651
- <ng-content></ng-content>
652
-
653
- <p class="nmf-error">
654
- {{ errorMessage() }}
655
- </p>
656
-
657
- @if (loading()) {
658
- <div class="nmf-loading">
659
- <span class="nmf-spinner"></span>
660
- </div>
661
- }
662
- </div>
632
+ </nmf-form-field>
663
633
  `,
664
634
  }]
665
635
  }] });
@@ -670,15 +640,12 @@ class InputSelectComponent extends FormControlBase {
670
640
  clearOptionLabel = input('Clear selection');
671
641
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
672
642
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputSelectComponent, isStandalone: true, selector: "nmf-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 } }, usesInheritance: true, ngImport: i0, template: `
673
- <div class="nmf-field" [class.loading]="loading()">
674
- @if (label()) {
675
- <label class="nmf-label">
676
- {{ label() }}
677
- @if (isRequired()) {
678
- <span class="nmf-required">*</span>
679
- }
680
- </label>
681
- }
643
+ <nmf-form-field
644
+ [label]="label()"
645
+ [isRequired]="isRequired()"
646
+ [loading]="loading()"
647
+ [errorMessage]="errorMessage()"
648
+ >
682
649
  <div class="select-wrapper" [class.disabled]="disabled()">
683
650
  <select
684
651
  class="nmf-input"
@@ -709,36 +676,23 @@ class InputSelectComponent extends FormControlBase {
709
676
  }
710
677
  </select>
711
678
  </div>
712
-
713
- @if (loading()) {
714
- <div class="nmf-loading">
715
- <span class="nmf-spinner"></span>
716
- </div>
717
- }
718
-
719
- <p class="nmf-error">
720
- {{ errorMessage() }}
721
- </p>
722
- </div>
723
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
679
+ </nmf-form-field>
680
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
724
681
  }
725
682
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputSelectComponent, decorators: [{
726
683
  type: Component,
727
684
  args: [{
728
685
  selector: 'nmf-select',
729
686
  standalone: true,
730
- imports: [CommonModule, ReactiveFormsModule],
687
+ imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
731
688
  changeDetection: ChangeDetectionStrategy.OnPush,
732
689
  template: `
733
- <div class="nmf-field" [class.loading]="loading()">
734
- @if (label()) {
735
- <label class="nmf-label">
736
- {{ label() }}
737
- @if (isRequired()) {
738
- <span class="nmf-required">*</span>
739
- }
740
- </label>
741
- }
690
+ <nmf-form-field
691
+ [label]="label()"
692
+ [isRequired]="isRequired()"
693
+ [loading]="loading()"
694
+ [errorMessage]="errorMessage()"
695
+ >
742
696
  <div class="select-wrapper" [class.disabled]="disabled()">
743
697
  <select
744
698
  class="nmf-input"
@@ -769,17 +723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
769
723
  }
770
724
  </select>
771
725
  </div>
772
-
773
- @if (loading()) {
774
- <div class="nmf-loading">
775
- <span class="nmf-spinner"></span>
776
- </div>
777
- }
778
-
779
- <p class="nmf-error">
780
- {{ errorMessage() }}
781
- </p>
782
- </div>
726
+ </nmf-form-field>
783
727
  `,
784
728
  }]
785
729
  }] });
@@ -792,16 +736,12 @@ class InputTextComponent extends FormControlBase {
792
736
  : this.type());
793
737
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
794
738
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputTextComponent, isStandalone: true, selector: "nmf-text", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
795
- <div class="nmf-field">
796
- @if (label()) {
797
- <label class="nmf-label">
798
- {{ label() }}
799
- @if (isRequired()) {
800
- <span class="nmf-required">*</span>
801
- }
802
- </label>
803
- }
804
-
739
+ <nmf-form-field
740
+ [label]="label()"
741
+ [isRequired]="isRequired()"
742
+ [loading]="loading()"
743
+ [errorMessage]="errorMessage()"
744
+ >
805
745
  <div class="nmf-input-wrapper">
806
746
  <input
807
747
  class="nmf-input"
@@ -832,19 +772,7 @@ class InputTextComponent extends FormControlBase {
832
772
  </button>
833
773
  }
834
774
  </div>
835
-
836
- <ng-content></ng-content>
837
-
838
- <p class="nmf-error">
839
- {{ errorMessage() }}
840
- </p>
841
-
842
- @if (loading()) {
843
- <div class="nmf-loading">
844
- <span class="nmf-spinner"></span>
845
- </div>
846
- }
847
- </div>
775
+ </nmf-form-field>
848
776
 
849
777
  <ng-template #eyeIcon>
850
778
  <svg
@@ -880,26 +808,22 @@ class InputTextComponent extends FormControlBase {
880
808
  />
881
809
  </svg>
882
810
  </ng-template>
883
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
811
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
884
812
  }
885
813
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextComponent, decorators: [{
886
814
  type: Component,
887
815
  args: [{
888
816
  selector: 'nmf-text',
889
817
  standalone: true,
890
- imports: [CommonModule, ReactiveFormsModule],
818
+ imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
891
819
  changeDetection: ChangeDetectionStrategy.OnPush,
892
820
  template: `
893
- <div class="nmf-field">
894
- @if (label()) {
895
- <label class="nmf-label">
896
- {{ label() }}
897
- @if (isRequired()) {
898
- <span class="nmf-required">*</span>
899
- }
900
- </label>
901
- }
902
-
821
+ <nmf-form-field
822
+ [label]="label()"
823
+ [isRequired]="isRequired()"
824
+ [loading]="loading()"
825
+ [errorMessage]="errorMessage()"
826
+ >
903
827
  <div class="nmf-input-wrapper">
904
828
  <input
905
829
  class="nmf-input"
@@ -930,19 +854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
930
854
  </button>
931
855
  }
932
856
  </div>
933
-
934
- <ng-content></ng-content>
935
-
936
- <p class="nmf-error">
937
- {{ errorMessage() }}
938
- </p>
939
-
940
- @if (loading()) {
941
- <div class="nmf-loading">
942
- <span class="nmf-spinner"></span>
943
- </div>
944
- }
945
- </div>
857
+ </nmf-form-field>
946
858
 
947
859
  <ng-template #eyeIcon>
948
860
  <svg
@@ -986,17 +898,13 @@ class InputTextareaComponent extends FormControlBase {
986
898
  rows = input(5);
987
899
  cols = input(5);
988
900
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
989
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputTextareaComponent, isStandalone: true, selector: "nmf-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: `
990
- <div class="nmf-field">
991
- @if (label()) {
992
- <label class="nmf-label">
993
- {{ label() }}
994
- @if (isRequired()) {
995
- <span class="nmf-required">*</span>
996
- }
997
- </label>
998
- }
999
-
901
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputTextareaComponent, isStandalone: true, selector: "nmf-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: `
902
+ <nmf-form-field
903
+ [label]="label()"
904
+ [isRequired]="isRequired()"
905
+ [loading]="loading()"
906
+ [errorMessage]="errorMessage()"
907
+ >
1000
908
  <textarea
1001
909
  class="nmf-input"
1002
910
  [ngClass]="classList()"
@@ -1010,37 +918,23 @@ class InputTextareaComponent extends FormControlBase {
1010
918
  [formControl]="formControl"
1011
919
  (blur)="onTouched()"
1012
920
  ></textarea>
1013
-
1014
- <p class="nmf-error">
1015
- {{ errorMessage() }}
1016
- </p>
1017
-
1018
- @if (loading()) {
1019
- <div class="nmf-loading">
1020
- <span class="nmf-spinner"></span>
1021
- </div>
1022
- }
1023
- </div>
1024
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
921
+ </nmf-form-field>
922
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1025
923
  }
1026
924
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextareaComponent, decorators: [{
1027
925
  type: Component,
1028
926
  args: [{
1029
927
  selector: 'nmf-textarea',
1030
928
  standalone: true,
1031
- imports: [CommonModule, ReactiveFormsModule],
929
+ imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
1032
930
  changeDetection: ChangeDetectionStrategy.OnPush,
1033
931
  template: `
1034
- <div class="nmf-field">
1035
- @if (label()) {
1036
- <label class="nmf-label">
1037
- {{ label() }}
1038
- @if (isRequired()) {
1039
- <span class="nmf-required">*</span>
1040
- }
1041
- </label>
1042
- }
1043
-
932
+ <nmf-form-field
933
+ [label]="label()"
934
+ [isRequired]="isRequired()"
935
+ [loading]="loading()"
936
+ [errorMessage]="errorMessage()"
937
+ >
1044
938
  <textarea
1045
939
  class="nmf-input"
1046
940
  [ngClass]="classList()"
@@ -1054,17 +948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
1054
948
  [formControl]="formControl"
1055
949
  (blur)="onTouched()"
1056
950
  ></textarea>
1057
-
1058
- <p class="nmf-error">
1059
- {{ errorMessage() }}
1060
- </p>
1061
-
1062
- @if (loading()) {
1063
- <div class="nmf-loading">
1064
- <span class="nmf-spinner"></span>
1065
- </div>
1066
- }
1067
- </div>
951
+ </nmf-form-field>
1068
952
  `,
1069
953
  }]
1070
954
  }] });
@@ -1102,17 +986,13 @@ class InputTimepickerComponent extends FormControlBase {
1102
986
  this.onChange(parsed);
1103
987
  }
1104
988
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTimepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1105
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputTimepickerComponent, isStandalone: true, selector: "nmf-timepicker", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
1106
- <div class="nmf-field" [class.loading]="loading()">
1107
- @if (label()) {
1108
- <label class="nmf-label">
1109
- {{ label() }}
1110
- @if (isRequired()) {
1111
- <span class="nmf-required">*</span>
1112
- }
1113
- </label>
1114
- }
1115
-
989
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputTimepickerComponent, isStandalone: true, selector: "nmf-timepicker", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
990
+ <nmf-form-field
991
+ [label]="label()"
992
+ [isRequired]="isRequired()"
993
+ [loading]="loading()"
994
+ [errorMessage]="errorMessage()"
995
+ >
1116
996
  <input
1117
997
  type="time"
1118
998
  autocomplete="off"
@@ -1130,39 +1010,23 @@ class InputTimepickerComponent extends FormControlBase {
1130
1010
  (blur)="onTouched()"
1131
1011
  (input)="onInput($event)"
1132
1012
  />
1133
-
1134
- <ng-content></ng-content>
1135
-
1136
- @if (loading()) {
1137
- <div class="nmf-loading">
1138
- <span class="nmf-spinner"></span>
1139
- </div>
1140
- }
1141
-
1142
- <p class="nmf-error">
1143
- {{ errorMessage() }}
1144
- </p>
1145
- </div>
1146
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1013
+ </nmf-form-field>
1014
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1147
1015
  }
1148
1016
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTimepickerComponent, decorators: [{
1149
1017
  type: Component,
1150
1018
  args: [{
1151
1019
  selector: 'nmf-timepicker',
1152
1020
  standalone: true,
1153
- imports: [CommonModule, ReactiveFormsModule],
1021
+ imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
1154
1022
  changeDetection: ChangeDetectionStrategy.OnPush,
1155
1023
  template: `
1156
- <div class="nmf-field" [class.loading]="loading()">
1157
- @if (label()) {
1158
- <label class="nmf-label">
1159
- {{ label() }}
1160
- @if (isRequired()) {
1161
- <span class="nmf-required">*</span>
1162
- }
1163
- </label>
1164
- }
1165
-
1024
+ <nmf-form-field
1025
+ [label]="label()"
1026
+ [isRequired]="isRequired()"
1027
+ [loading]="loading()"
1028
+ [errorMessage]="errorMessage()"
1029
+ >
1166
1030
  <input
1167
1031
  type="time"
1168
1032
  autocomplete="off"
@@ -1180,19 +1044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
1180
1044
  (blur)="onTouched()"
1181
1045
  (input)="onInput($event)"
1182
1046
  />
1183
-
1184
- <ng-content></ng-content>
1185
-
1186
- @if (loading()) {
1187
- <div class="nmf-loading">
1188
- <span class="nmf-spinner"></span>
1189
- </div>
1190
- }
1191
-
1192
- <p class="nmf-error">
1193
- {{ errorMessage() }}
1194
- </p>
1195
- </div>
1047
+ </nmf-form-field>
1196
1048
  `,
1197
1049
  }]
1198
1050
  }] });