@ng-simplicity/forms-material 1.0.0 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # @ng-simplicity/forms-material
 
-An integration package containing pre-styled Angular Material inputs, form fields, and error templates for the **NG-Simplicity Forms** dynamic engine.
+An integration package containing pre-styled Angular Material inputs, form fields, and error templates. It serves as a visual UI extension of the reactive [@ng-simplicity/forms-core](https://www.npmjs.com/package/@ng-simplicity/forms-core) engine, inheriting its powerful dynamic capabilities. This allows you to construct highly dynamic, complex forms where control properties (such as visibility, enabled/disabled state, select options, and validation rules) reactively adapt in real-time based on the current values inside the form. The package is highly customizable; because it utilizes the core registry system, you can develop and add your own custom form controls to the registry to be used in the form rendering alongside the Material presets.
 
 ---
 
@@ -21,64 +21,286 @@ Make sure your application has active Material theming configured (either via an
 
 ## Quick Start & Registration
 
-To allow the dynamic compiler to render Material fields, register them using `NgsFormsMaterialModule` inside your page component:
+To render Material fields dynamically, follow these steps:
+1. Provide the `NgsFormsService` at the component level to isolate the form state.
+2. Register the Material components in your component constructor using `NgsFormsMaterialModule.registerAllMaterialComponents(registry)`.
+3. Construct the layout schema (`NgsFormsFormConfig`) using Material controls.
+4. Pass the schema to `this.ngsFormsService.setFormConfig(formConfig)`.
+5. Add `<ngs-form></ngs-form>` to your component's template.
+
+Here is a complete usage example:
 
 ```typescript
-import { Component } from '@angular/core';
-import { NgsFormsComponentRegistryService } from '@ng-simplicity/forms-core';
-import { NgsFormsMaterialModule } from '@ng-simplicity/forms-material';
+import { Component, OnInit, inject } from '@angular/core';
+import { Validators } from '@angular/forms';
+import { 
+  NgsFormComponent,
+  NgsFormsComponentRegistryService, 
+  NgsFormsService, 
+  NgsFormsFormConfig, 
+  NgsFormsFormGroupComponent,
+  NgsFormsRowComponent
+} from '@ng-simplicity/forms-core';
+import { 
+  NgsFormsMaterialModule,
+  NgsFormsMaterialFormItemInputComponent,
+  NgsFormsMaterialFormItemTextAreaComponent
+} from '@ng-simplicity/forms-material';
 
 @Component({
   selector: 'app-material-form-page',
-  templateUrl: './material-form-page.component.html'
+  standalone: true,
+  imports: [NgsFormComponent],
+  providers: [NgsFormsService],
+  template: `
+    <div class="material-form-container">
+      <h2>Contact Us</h2>
+      <ngs-form></ngs-form>
+      <button (click)="onSubmit()">Submit</button>
+    </div>
+  `
 })
-export class MaterialFormPageComponent {
+export class MaterialFormPageComponent implements OnInit {
+  private ngsFormsService = inject(NgsFormsService);
+
   constructor(registry: NgsFormsComponentRegistryService) {
-    // Registers Material inputs, textareas, layouts, and helpers
+    // Registers Material inputs, textareas, checkbox, select, and layouts
     NgsFormsMaterialModule.registerAllMaterialComponents(registry);
   }
+
+  ngOnInit() {
+    // Construct the form configuration
+    const formConfig: NgsFormsFormConfig = {
+      inputUpdateDebounce: 150,
+      root: NgsFormsFormGroupComponent.create({
+        name: 'contactForm',
+        items: [
+          NgsFormsRowComponent.create({
+            items: [
+              NgsFormsMaterialFormItemInputComponent.create({
+                name: 'email',
+                label: 'Email Address',
+                placeholder: 'Enter your email...',
+                type: 'email',
+                validators: [Validators.required, Validators.email],
+                errorMessageMap: {
+                  required: 'Email address is required.',
+                  email: 'Please enter a valid email address.'
+                }
+              }),
+              NgsFormsMaterialFormItemTextAreaComponent.create({
+                name: 'message',
+                label: 'Your Message',
+                placeholder: 'Write your message...',
+                rows: 4
+              })
+            ]
+          })
+        ]
+      })
+    };
+
+    // Initialize the dynamic form controls
+    this.ngsFormsService.setFormConfig(formConfig);
+  }
+
+  onSubmit() {
+    if (this.ngsFormsService.isValid) {
+      console.log('Form data submitted:', this.ngsFormsService.formValue);
+    } else {
+      this.ngsFormsService.setIsSubmitted(true); // Highlights form validation errors
+    }
+  }
 }
 ```
 
 ---
 
+## Common Properties & Core Integration
+
+This package relies on the main core engine: [@ng-simplicity/forms-core](https://www.npmjs.com/package/@ng-simplicity/forms-core). The core package provides all standard layout structures and non-styling-specific form components, including:
+- **Form Groups**: `NgsFormsFormGroupComponent` (Key: `'form-group'`)
+- **Sections**: `NgsFormsFormSectionComponent` (Key: `'section'`)
+- **Row Containers**: `NgsFormsRowComponent` (Key: `'form-row'`)
+- **Columns**: `NgsFormsColumnComponent` (Key: `'column'`)
+- **Form Arrays & Support**: `NgsFormsFormArrayContainerComponent` (Key: `'form-array'`), `NgsFormsFormArrayAddItemComponent` (Key: `'form-array-add-item'`), and `NgsFormsFormArrayRemoveItemComponent` (Key: `'form-array-remove-item'`)
+- **Static Content**: `NgsFormsHtmlContentComponent` (Key: `'content-html'`) and `NgsFormsTextDivComponent` (Key: `'text-div'`)
+
+Please refer to the [@ng-simplicity/forms-core README](file:///home/bryan/git/bryan-projects/angular-open-source/ng-simplicity/forms/libs/forms-core/README.md) for full details on constructing layouts and managing core form structures.
+
+### Common Control Properties
+
+Most controls in this styling library support a standard set of core properties that are managed by the dynamic forms engine. These properties allow passing either a static/basic value or an asynchronous stream (Observable):
+
+1. **Visibility**:
+   - `visible` (boolean): Controls whether the item is mounted in the DOM.
+   - `visible$` (`Observable<boolean>`): Stream version to dynamically show/hide components.
+   - *Note: Visibility is configured at the inner config level (`NgsFormsFormItemConfigBase`).*
+
+2. **Disabled Status**:
+   - `disabled` (boolean): Sets the initial disabled state of the form control.
+   - `disabled$` (`Observable<boolean>`): Stream to toggle disabled state.
+   - *Configured at the inner `config` level.*
+
+3. **Validators**:
+   - `validators` (`Array<ValidatorFn>`): Array of standard/custom Angular Validator functions.
+   - `validators$` (`Observable<Array<ValidatorFn>>`): Stream of validator functions to change validators dynamically.
+   - *Configured at the inner `config` level.*
+
+4. **Options** (Only for components with choice selection like `select` and `radio`):
+   - `options` (`Array<NgsFormsFormInputOption>`): Static array of choices `{ id: string | number, label: string, disabled?: boolean }`.
+   - `options$` (`Observable<Array<NgsFormsFormInputOption>>`): Stream to dynamically populate choices.
+   - *Configured at the inner `config` level.*
+
+> [!TIP]
+> By supplying **Observable** streams (such as `visible$`, `disabled$`, `validators$`, or `options$`), you can build highly dynamic and reactive forms. Because these observables can be piped directly from the form service's value change stream (`this.ngsFormsService.formValue$`), fields can dynamically enable/disable, appear/disappear, change options, or update validation rules in real-time based on user input in other fields.
+
+---
+
 ## Available Components & Schemas
 
-### 1. Material Text Input (`input-text`)
-Uses `NgsFormsMaterialFormItemInputComponent`.
+Here is the full list of available Material components along with code examples showing their required and optional configuration parameters:
 
-- **Selector/Key**: `input-text`
-- **Config Type**: Object containing `name`, `label`, `placeholder`, `type`.
-- **Features**: Leverages `<mat-form-field>` appearance="outline", supports `<mat-error>` validation hooks, and custom HTML input types (`email`, `password`, `text`).
+### 1. Text Input (`input-text`)
+Uses `NgsFormsMaterialFormItemInputComponent`.
+- **Key**: `input-text`
+- **Config Type**: `NgsFormsFormItemConfigBaseTextInput`
 
 ```typescript
 import { NgsFormsMaterialFormItemInputComponent } from '@ng-simplicity/forms-material';
 import { Validators } from '@angular/forms';
 
-const passwordField = NgsFormsMaterialFormItemInputComponent.create({
-  name: 'password',
-  label: 'Password',
-  placeholder: 'Type password...',
-  type: 'password',
-  validators: [Validators.required, Validators.minLength(8)]
+const emailField = NgsFormsMaterialFormItemInputComponent.create({
+  // Required Parameters
+  name: 'email',
+  label: 'Email Address',
+
+  // Optional Parameters
+  id: 'custom-email-id',
+  placeholder: 'Enter your email address...',
+  type: 'email', // 'text' | 'email' | 'password'
+  value: 'default@domain.com', // Initial value
+  disabled: false,
+  validators: [Validators.required, Validators.email],
+  errorMessageMap: {
+    required: 'Email is required.',
+    email: 'Must be a valid email format.'
+  }
 });
 ```
 
-### 2. Material Text Area (`input-textarea`)
+### 2. Text Area (`input-textarea`)
 Uses `NgsFormsMaterialFormItemTextAreaComponent`.
-
-- **Selector/Key**: `input-textarea`
-- **Config Type**: Object containing `name`, `label`, `placeholder`, `rows`.
-- **Features**: Outlined MatFormField container housing a multi-line auto-resizing text area.
+- **Key**: `input-textarea`
+- **Config Type**: `any`
 
 ```typescript
 import { NgsFormsMaterialFormItemTextAreaComponent } from '@ng-simplicity/forms-material';
+import { Validators } from '@angular/forms';
 
-const messageField = NgsFormsMaterialFormItemTextAreaComponent.create({
+const commentsField = NgsFormsMaterialFormItemTextAreaComponent.create({
+  // Required Parameters
   name: 'comments',
-  label: 'Additional Comments',
-  placeholder: 'Leave a note...',
-  rows: 4
+  label: 'Comments',
+
+  // Optional Parameters
+  id: 'custom-comments-id',
+  placeholder: 'Leave us feedback...',
+  value: '',
+  rows: 5, // Custom number of visible rows (default is 3)
+  disabled: false,
+  validators: [Validators.required],
+  errorMessageMap: {
+    required: 'Comments cannot be blank.'
+  }
+});
+```
+
+### 3. Checkbox (`checkbox`)
+Uses `NgsFormsMaterialFormItemCheckboxComponent`.
+- **Key**: `checkbox`
+- **Config Type**: `NgsFormsFormItemConfigBaseInput`
+
+```typescript
+import { NgsFormsMaterialFormItemCheckboxComponent } from '@ng-simplicity/forms-material';
+import { Validators } from '@angular/forms';
+
+const acceptTermsField = NgsFormsMaterialFormItemCheckboxComponent.create({
+  // Required Parameters
+  name: 'agreeTerms',
+  label: 'I accept the Terms and Conditions',
+
+  // Optional Parameters
+  id: 'terms-checkbox-id',
+  value: false, // Initial checked state
+  disabled: false,
+  validators: [Validators.requiredTrue],
+  errorMessageMap: {
+    required: 'You must agree to the terms to proceed.'
+  }
+});
+```
+
+### 4. Select Dropdown (`select`)
+Uses `NgsFormsMaterialFormItemSelectInputComponent`.
+- **Key**: `select`
+- **Config Type**: `NgsFormsFormItemConfigMaterialSelectInput`
+
+```typescript
+import { NgsFormsMaterialFormItemSelectInputComponent } from '@ng-simplicity/forms-material';
+import { Validators } from '@angular/forms';
+
+const roleSelectField = NgsFormsMaterialFormItemSelectInputComponent.create({
+  // Required Parameters
+  name: 'role',
+  label: 'User Role',
+
+  // Optional Parameters
+  id: 'role-select-id',
+  placeholder: 'Choose a role...', // Disabled placeholder text
+  placeHolderValue: '', // Custom value for placeholder selection
+  value: 'member', // Initial selected option ID
+  disabled: false,
+  options: [
+    { id: 'admin', label: 'Administrator' },
+    { id: 'member', label: 'Regular Member', disabled: false },
+    { id: 'guest', label: 'Guest User', disabled: true }
+  ],
+  validators: [Validators.required],
+  errorMessageMap: {
+    required: 'Please select a role.'
+  }
+});
+```
+
+### 5. Radio Buttons (`radio`)
+Uses `NgsFormsMaterialRadioInputComponent`.
+- **Key**: `radio`
+- **Config Type**: `NgsFormsFormItemConfigMaterialRadio`
+
+```typescript
+import { NgsFormsMaterialRadioInputComponent } from '@ng-simplicity/forms-material';
+import { Validators } from '@angular/forms';
+
+const genderField = NgsFormsMaterialRadioInputComponent.create({
+  // Required Parameters
+  name: 'gender',
+  label: 'Gender Identity',
+
+  // Optional Parameters
+  id: 'gender-radio-id',
+  value: 'other', // Initial selected radio option ID
+  alignment: 'horizontal', // 'horizontal' | 'vertical' (default is 'vertical')
+  disabled: false,
+  options: [
+    { id: 'female', label: 'Female' },
+    { id: 'male', label: 'Male' },
+    { id: 'other', label: 'Other/Prefer not to say' }
+  ],
+  validators: [Validators.required],
+  errorMessageMap: {
+    required: 'Please choose one option.'
+  }
 });
 ```
 
@@ -96,3 +318,17 @@ To run with coverage enabled:
 ```bash
 nx test forms-material --codeCoverage
 ```
+
+---
+
+## Example Applications
+
+Fully functional example applications demonstrating the form engine functionality are located in the [`apps/`](../../apps) folder of this monorepo:
+- **`forms-bootstrap-demo`**: Integrates and showcases the `@ng-simplicity/forms-bootstrap` package.
+- **`forms-material-demo`**: Integrates and showcases the `@ng-simplicity/forms-material` package.
+
+---
+
+## Support & Contributions
+
+If you have feature suggestions, need a feature to make `@ng-simplicity/forms-material` work for your project, or encounter any bugs, please log an issue in the GitHub issue tracker.

package/fesm2022/ng-simplicity-forms-material.mjs

@@ -19,34 +19,39 @@ class NgsFormsMaterialFormItemCheckboxComponent extends NgsFormsBaseClassFormInp
     static key = 'checkbox';
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsMaterialFormItemCheckboxComponent.key,
             config,
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsMaterialFormItemCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsMaterialFormItemCheckboxComponent, isStandalone: true, selector: "ngs-forms-mat-checkbox", usesInheritance: true, ngImport: i0, template: "@if (control) {\n  <div class=\"mb-3\">\n    <mat-checkbox [formControl]=\"control\">\n      {{ config.label }}\n    </mat-checkbox>\n    @if (errorMessage) {\n      <div class=\"mt-1 ms-4\" style=\"font-size: 0.75rem; color: #f44336;\">{{ errorMessage }}</div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsMaterialFormItemCheckboxComponent, isStandalone: true, selector: "ngs-forms-mat-checkbox", usesInheritance: true, ngImport: i0, template: "@if (control) {\n  <div class=\"mb-3\">\n    <mat-checkbox [formControl]=\"control\" [aria-describedby]=\"errorMessage ? id + '-error' : ''\">\n      {{ config.label }}\n    </mat-checkbox>\n    @if (errorMessage) {\n      <div class=\"mt-1 ms-4\" id=\"{{id}}-error\" style=\"font-size: 0.75rem; color: #f44336;\">{{ errorMessage }}</div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsMaterialFormItemCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-forms-mat-checkbox', imports: [ReactiveFormsModule, MatCheckboxModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (control) {\n  <div class=\"mb-3\">\n    <mat-checkbox [formControl]=\"control\">\n      {{ config.label }}\n    </mat-checkbox>\n    @if (errorMessage) {\n      <div class=\"mt-1 ms-4\" style=\"font-size: 0.75rem; color: #f44336;\">{{ errorMessage }}</div>\n    }\n  </div>\n}\n" }]
+            args: [{ selector: 'ngs-forms-mat-checkbox', imports: [ReactiveFormsModule, MatCheckboxModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (control) {\n  <div class=\"mb-3\">\n    <mat-checkbox [formControl]=\"control\" [aria-describedby]=\"errorMessage ? id + '-error' : ''\">\n      {{ config.label }}\n    </mat-checkbox>\n    @if (errorMessage) {\n      <div class=\"mt-1 ms-4\" id=\"{{id}}-error\" style=\"font-size: 0.75rem; color: #f44336;\">{{ errorMessage }}</div>\n    }\n  </div>\n}\n" }]
         }] });
 
 class NgsFormsMaterialFormItemInputComponent extends NgsFormsBaseClassFormInputComponent {
     static key = 'input-text';
+    matcher = {
+        isErrorState: (control) => {
+            return !!(control && control.invalid && (control.touched || control.dirty || this.submitted()));
+        }
+    };
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsMaterialFormItemInputComponent.key,
             config,
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsMaterialFormItemInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsMaterialFormItemInputComponent, isStandalone: true, selector: "ngs-forms-mat-input", usesInheritance: true, ngImport: i0, template: "@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (config.label) {\n      <mat-label>{{ config.label }}</mat-label>\n    }\n    <input matInput [formControl]=\"control\" [placeholder]=\"config.placeholder || ''\" [type]=\"config.type || 'text'\" />\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsMaterialFormItemInputComponent, isStandalone: true, selector: "ngs-forms-mat-input", usesInheritance: true, ngImport: i0, template: "@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (config.label) {\n      <mat-label>{{ config.label }}</mat-label>\n    }\n    <input matInput [formControl]=\"control\" [placeholder]=\"config.placeholder || ''\" [type]=\"config.type || 'text'\" [errorStateMatcher]=\"matcher\" />\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsMaterialFormItemInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-forms-mat-input', imports: [ReactiveFormsModule, MatInputModule, MatFormFieldModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (config.label) {\n      <mat-label>{{ config.label }}</mat-label>\n    }\n    <input matInput [formControl]=\"control\" [placeholder]=\"config.placeholder || ''\" [type]=\"config.type || 'text'\" />\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n" }]
+            args: [{ selector: 'ngs-forms-mat-input', imports: [ReactiveFormsModule, MatInputModule, MatFormFieldModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (config.label) {\n      <mat-label>{{ config.label }}</mat-label>\n    }\n    <input matInput [formControl]=\"control\" [placeholder]=\"config.placeholder || ''\" [type]=\"config.type || 'text'\" [errorStateMatcher]=\"matcher\" />\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n" }]
         }] });
 
 class NgsFormsMaterialRadioInputComponent extends NgsFormsBaseClassFormItemInputWithOptionsComponent {
@@ -54,52 +59,62 @@ class NgsFormsMaterialRadioInputComponent extends NgsFormsBaseClassFormItemInput
     radioConfig = this.config;
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsMaterialRadioInputComponent.key,
             config,
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsMaterialRadioInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsMaterialRadioInputComponent, isStandalone: true, selector: "ngs-forms-material-radio-group-input", usesInheritance: true, ngImport: i0, template: "@if (control) {\n  <div class=\"ngs-material-radio-field mb-3\">\n    @if (radioConfig.label) {\n      <div class=\"ngs-material-radio-label\" [class.text-danger]=\"!!errorMessage\">\n        {{ radioConfig.label }}\n      </div>\n    }\n    <mat-radio-group\n      [formControl]=\"control\"\n      [class.ngs-material-radio-group-horizontal]=\"radioConfig.alignment === 'horizontal'\"\n      [class.ngs-material-radio-group-vertical]=\"radioConfig.alignment !== 'horizontal'\"\n    >\n      @for (option of options(); track option.id) {\n        <mat-radio-button [disabled]=\"option.disabled\" [value]=\"option.id\">\n          {{ option.label }}\n        </mat-radio-button>\n      }\n    </mat-radio-group>\n    @if (errorMessage) {\n      <div class=\"ngs-material-control-error\">{{ errorMessage }}</div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsMaterialRadioInputComponent, isStandalone: true, selector: "ngs-forms-material-radio-group-input", usesInheritance: true, ngImport: i0, template: "@if (control) {\n  <div class=\"ngs-material-radio-field mb-3\">\n    @if (radioConfig.label) {\n      <div class=\"ngs-material-radio-label\" [class.text-danger]=\"!!errorMessage\" id=\"{{id}}-label\">\n        {{ radioConfig.label }}\n      </div>\n    }\n    <mat-radio-group\n      [formControl]=\"control\"\n      [class.ngs-material-radio-group-horizontal]=\"radioConfig.alignment === 'horizontal'\"\n      [class.ngs-material-radio-group-vertical]=\"radioConfig.alignment !== 'horizontal'\"\n      [attr.aria-labelledby]=\"radioConfig.label ? id + '-label' : null\"\n      [attr.aria-describedby]=\"errorMessage ? id + '-error' : null\"\n    >\n      @for (option of options(); track option.id) {\n        <mat-radio-button [disabled]=\"!!option.disabled\" [value]=\"option.id\">\n          {{ option.label }}\n        </mat-radio-button>\n      }\n    </mat-radio-group>\n    @if (errorMessage) {\n      <div class=\"ngs-material-control-error\" id=\"{{id}}-error\">{{ errorMessage }}</div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsMaterialRadioInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-forms-material-radio-group-input', imports: [ReactiveFormsModule, MatRadioModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (control) {\n  <div class=\"ngs-material-radio-field mb-3\">\n    @if (radioConfig.label) {\n      <div class=\"ngs-material-radio-label\" [class.text-danger]=\"!!errorMessage\">\n        {{ radioConfig.label }}\n      </div>\n    }\n    <mat-radio-group\n      [formControl]=\"control\"\n      [class.ngs-material-radio-group-horizontal]=\"radioConfig.alignment === 'horizontal'\"\n      [class.ngs-material-radio-group-vertical]=\"radioConfig.alignment !== 'horizontal'\"\n    >\n      @for (option of options(); track option.id) {\n        <mat-radio-button [disabled]=\"option.disabled\" [value]=\"option.id\">\n          {{ option.label }}\n        </mat-radio-button>\n      }\n    </mat-radio-group>\n    @if (errorMessage) {\n      <div class=\"ngs-material-control-error\">{{ errorMessage }}</div>\n    }\n  </div>\n}\n" }]
+            args: [{ selector: 'ngs-forms-material-radio-group-input', imports: [ReactiveFormsModule, MatRadioModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (control) {\n  <div class=\"ngs-material-radio-field mb-3\">\n    @if (radioConfig.label) {\n      <div class=\"ngs-material-radio-label\" [class.text-danger]=\"!!errorMessage\" id=\"{{id}}-label\">\n        {{ radioConfig.label }}\n      </div>\n    }\n    <mat-radio-group\n      [formControl]=\"control\"\n      [class.ngs-material-radio-group-horizontal]=\"radioConfig.alignment === 'horizontal'\"\n      [class.ngs-material-radio-group-vertical]=\"radioConfig.alignment !== 'horizontal'\"\n      [attr.aria-labelledby]=\"radioConfig.label ? id + '-label' : null\"\n      [attr.aria-describedby]=\"errorMessage ? id + '-error' : null\"\n    >\n      @for (option of options(); track option.id) {\n        <mat-radio-button [disabled]=\"!!option.disabled\" [value]=\"option.id\">\n          {{ option.label }}\n        </mat-radio-button>\n      }\n    </mat-radio-group>\n    @if (errorMessage) {\n      <div class=\"ngs-material-control-error\" id=\"{{id}}-error\">{{ errorMessage }}</div>\n    }\n  </div>\n}\n" }]
         }] });
 
 class NgsFormsMaterialFormItemSelectInputComponent extends NgsFormsBaseClassFormItemInputWithOptionsComponent {
     static key = 'select';
     selectConfig = this.config;
+    matcher = {
+        isErrorState: (control) => {
+            return !!(control && control.invalid && (control.touched || control.dirty || this.submitted()));
+        }
+    };
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsMaterialFormItemSelectInputComponent.key,
             config,
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsMaterialFormItemSelectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsMaterialFormItemSelectInputComponent, isStandalone: true, selector: "ngs-forms-material-select-input", usesInheritance: true, ngImport: i0, template: "@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (selectConfig.label) {\n      <mat-label>{{ selectConfig.label }}</mat-label>\n    }\n    <mat-select [formControl]=\"control\" [attr.aria-label]=\"selectConfig.label\">\n      @if (selectConfig.placeholder) {\n        <mat-option [disabled]=\"true\" [value]=\"selectConfig.placeHolderValue || ''\">\n          {{ selectConfig.placeholder }}\n        </mat-option>\n      }\n      @for (option of options(); track option.id) {\n        <mat-option [disabled]=\"option.disabled\" [value]=\"option.id\">\n          {{ option.label }}\n        </mat-option>\n      }\n    </mat-select>\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsMaterialFormItemSelectInputComponent, isStandalone: true, selector: "ngs-forms-material-select-input", usesInheritance: true, ngImport: i0, template: "@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (selectConfig.label) {\n      <mat-label>{{ selectConfig.label }}</mat-label>\n    }\n    <mat-select [formControl]=\"control\" [attr.aria-label]=\"selectConfig.label\" [errorStateMatcher]=\"matcher\">\n      @if (selectConfig.placeholder) {\n        <mat-option [disabled]=\"true\" [value]=\"selectConfig.placeHolderValue || ''\">\n          {{ selectConfig.placeholder }}\n        </mat-option>\n      }\n      @for (option of options(); track option.id) {\n        <mat-option [disabled]=\"!!option.disabled\" [value]=\"option.id\">\n          {{ option.label }}\n        </mat-option>\n      }\n    </mat-select>\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsMaterialFormItemSelectInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-forms-material-select-input', imports: [ReactiveFormsModule, MatFormFieldModule, MatSelectModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (selectConfig.label) {\n      <mat-label>{{ selectConfig.label }}</mat-label>\n    }\n    <mat-select [formControl]=\"control\" [attr.aria-label]=\"selectConfig.label\">\n      @if (selectConfig.placeholder) {\n        <mat-option [disabled]=\"true\" [value]=\"selectConfig.placeHolderValue || ''\">\n          {{ selectConfig.placeholder }}\n        </mat-option>\n      }\n      @for (option of options(); track option.id) {\n        <mat-option [disabled]=\"option.disabled\" [value]=\"option.id\">\n          {{ option.label }}\n        </mat-option>\n      }\n    </mat-select>\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n" }]
+            args: [{ selector: 'ngs-forms-material-select-input', imports: [ReactiveFormsModule, MatFormFieldModule, MatSelectModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (selectConfig.label) {\n      <mat-label>{{ selectConfig.label }}</mat-label>\n    }\n    <mat-select [formControl]=\"control\" [attr.aria-label]=\"selectConfig.label\" [errorStateMatcher]=\"matcher\">\n      @if (selectConfig.placeholder) {\n        <mat-option [disabled]=\"true\" [value]=\"selectConfig.placeHolderValue || ''\">\n          {{ selectConfig.placeholder }}\n        </mat-option>\n      }\n      @for (option of options(); track option.id) {\n        <mat-option [disabled]=\"!!option.disabled\" [value]=\"option.id\">\n          {{ option.label }}\n        </mat-option>\n      }\n    </mat-select>\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n" }]
         }] });
 
 class NgsFormsMaterialFormItemTextAreaComponent extends NgsFormsBaseClassFormInputComponent {
     static key = 'input-textarea';
+    matcher = {
+        isErrorState: (control) => {
+            return !!(control && control.invalid && (control.touched || control.dirty || this.submitted()));
+        }
+    };
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsMaterialFormItemTextAreaComponent.key,
             config,
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsMaterialFormItemTextAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsMaterialFormItemTextAreaComponent, isStandalone: true, selector: "ngs-forms-mat-textarea", usesInheritance: true, ngImport: i0, template: "@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (config.label) {\n      <mat-label>{{ config.label }}</mat-label>\n    }\n    <textarea matInput [formControl]=\"control\" [placeholder]=\"config.placeholder || ''\" [rows]=\"config.rows || 3\"></textarea>\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsMaterialFormItemTextAreaComponent, isStandalone: true, selector: "ngs-forms-mat-textarea", usesInheritance: true, ngImport: i0, template: "@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (config.label) {\n      <mat-label>{{ config.label }}</mat-label>\n    }\n    <textarea matInput [formControl]=\"control\" [placeholder]=\"config.placeholder || ''\" [rows]=\"config.rows || 3\" [errorStateMatcher]=\"matcher\"></textarea>\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsMaterialFormItemTextAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-forms-mat-textarea', imports: [ReactiveFormsModule, MatInputModule, MatFormFieldModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (config.label) {\n      <mat-label>{{ config.label }}</mat-label>\n    }\n    <textarea matInput [formControl]=\"control\" [placeholder]=\"config.placeholder || ''\" [rows]=\"config.rows || 3\"></textarea>\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n" }]
+            args: [{ selector: 'ngs-forms-mat-textarea', imports: [ReactiveFormsModule, MatInputModule, MatFormFieldModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (config.label) {\n      <mat-label>{{ config.label }}</mat-label>\n    }\n    <textarea matInput [formControl]=\"control\" [placeholder]=\"config.placeholder || ''\" [rows]=\"config.rows || 3\" [errorStateMatcher]=\"matcher\"></textarea>\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n" }]
         }] });
 
 class NgsFormsMaterialModule {

package/fesm2022/ng-simplicity-forms-material.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-simplicity-forms-material.mjs","sources":["../../../../libs/forms-material/src/lib/form-components/checkbox/checkbox.component.ts","../../../../libs/forms-material/src/lib/form-components/checkbox/checkbox.component.html","../../../../libs/forms-material/src/lib/form-components/input/input.component.ts","../../../../libs/forms-material/src/lib/form-components/input/input.component.html","../../../../libs/forms-material/src/lib/form-components/radio/radio.component.ts","../../../../libs/forms-material/src/lib/form-components/radio/radio.component.html","../../../../libs/forms-material/src/lib/form-components/select/select.component.ts","../../../../libs/forms-material/src/lib/form-components/select/select.component.html","../../../../libs/forms-material/src/lib/form-components/text-area/text-area.component.ts","../../../../libs/forms-material/src/lib/form-components/text-area/text-area.component.html","../../../../libs/forms-material/src/lib/forms-material.module.ts","../../../../libs/forms-material/src/ng-simplicity-forms-material.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport {\n  NgsFormsBaseClassFormInputComponent,\n  NgsFormsFormItem,\n  NgsFormsFormItemConfigBaseInput,\n} from '@ng-simplicity/forms-core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { v4 } from 'uuid';\n\n@Component({\n  selector: 'ngs-forms-mat-checkbox',\n  imports: [ReactiveFormsModule, MatCheckboxModule],\n  templateUrl: './checkbox.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgsFormsMaterialFormItemCheckboxComponent extends NgsFormsBaseClassFormInputComponent<NgsFormsFormItemConfigBaseInput> {\n  static override key = 'checkbox';\n\n  static create(config: NgsFormsFormItemConfigBaseInput): NgsFormsFormItem<NgsFormsFormItemConfigBaseInput> {\n    return {\n      uuid: v4(),\n      type: NgsFormsMaterialFormItemCheckboxComponent.key,\n      config,\n    };\n  }\n}\n","@if (control) {\n  <div class=\"mb-3\">\n    <mat-checkbox [formControl]=\"control\">\n      {{ config.label }}\n    </mat-checkbox>\n    @if (errorMessage) {\n      <div class=\"mt-1 ms-4\" style=\"font-size: 0.75rem; color: #f44336;\">{{ errorMessage }}</div>\n    }\n  </div>\n}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { NgsFormsBaseClassFormInputComponent, NgsFormsFormItem } from '@ng-simplicity/forms-core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { v4 } from 'uuid';\n\n@Component({\n  selector: 'ngs-forms-mat-input',\n  imports: [ReactiveFormsModule, MatInputModule, MatFormFieldModule],\n  templateUrl: './input.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgsFormsMaterialFormItemInputComponent extends NgsFormsBaseClassFormInputComponent<any> {\n  static override key = 'input-text';\n\n  static create(config: any): NgsFormsFormItem<any> {\n    return {\n      uuid: v4(),\n      type: NgsFormsMaterialFormItemInputComponent.key,\n      config,\n    };\n  }\n}\n","@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (config.label) {\n      <mat-label>{{ config.label }}</mat-label>\n    }\n    <input matInput [formControl]=\"control\" [placeholder]=\"config.placeholder || ''\" [type]=\"config.type || 'text'\" />\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatRadioModule } from '@angular/material/radio';\nimport {\n  NgsFormsBaseClassFormItemInputWithOptionsComponent,\n  NgsFormsFormItem,\n  NgsFormsFormItemConfigBaseInputWithOptions,\n} from '@ng-simplicity/forms-core';\nimport { v4 } from 'uuid';\n\nexport interface NgsFormsFormItemConfigMaterialRadio extends NgsFormsFormItemConfigBaseInputWithOptions {\n  alignment?: 'horizontal' | 'vertical';\n}\n\n@Component({\n  selector: 'ngs-forms-material-radio-group-input',\n  imports: [ReactiveFormsModule, MatRadioModule],\n  templateUrl: './radio.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgsFormsMaterialRadioInputComponent extends NgsFormsBaseClassFormItemInputWithOptionsComponent<NgsFormsFormItemConfigMaterialRadio> {\n  static override key = 'radio';\n  radioConfig = this.config as NgsFormsFormItemConfigMaterialRadio;\n\n  static create(config: NgsFormsFormItemConfigMaterialRadio): NgsFormsFormItem<NgsFormsFormItemConfigMaterialRadio> {\n    return {\n      uuid: v4(),\n      type: NgsFormsMaterialRadioInputComponent.key,\n      config,\n    };\n  }\n}\n","@if (control) {\n  <div class=\"ngs-material-radio-field mb-3\">\n    @if (radioConfig.label) {\n      <div class=\"ngs-material-radio-label\" [class.text-danger]=\"!!errorMessage\">\n        {{ radioConfig.label }}\n      </div>\n    }\n    <mat-radio-group\n      [formControl]=\"control\"\n      [class.ngs-material-radio-group-horizontal]=\"radioConfig.alignment === 'horizontal'\"\n      [class.ngs-material-radio-group-vertical]=\"radioConfig.alignment !== 'horizontal'\"\n    >\n      @for (option of options(); track option.id) {\n        <mat-radio-button [disabled]=\"option.disabled\" [value]=\"option.id\">\n          {{ option.label }}\n        </mat-radio-button>\n      }\n    </mat-radio-group>\n    @if (errorMessage) {\n      <div class=\"ngs-material-control-error\">{{ errorMessage }}</div>\n    }\n  </div>\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectModule } from '@angular/material/select';\nimport {\n  NgsFormsBaseClassFormItemInputWithOptionsComponent,\n  NgsFormsFormItem,\n  NgsFormsFormItemConfigBaseInputWithOptions,\n} from '@ng-simplicity/forms-core';\nimport { v4 } from 'uuid';\n\nexport interface NgsFormsFormItemConfigMaterialSelectInput extends NgsFormsFormItemConfigBaseInputWithOptions {\n  placeholder?: string;\n  placeHolderValue?: string;\n}\n\n@Component({\n  selector: 'ngs-forms-material-select-input',\n  imports: [ReactiveFormsModule, MatFormFieldModule, MatSelectModule],\n  templateUrl: './select.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgsFormsMaterialFormItemSelectInputComponent extends NgsFormsBaseClassFormItemInputWithOptionsComponent<NgsFormsFormItemConfigMaterialSelectInput> {\n  static override key = 'select';\n  selectConfig = this.config as NgsFormsFormItemConfigMaterialSelectInput;\n\n  static create(\n    config: NgsFormsFormItemConfigMaterialSelectInput\n  ): NgsFormsFormItem<NgsFormsFormItemConfigMaterialSelectInput> {\n    return {\n      uuid: v4(),\n      type: NgsFormsMaterialFormItemSelectInputComponent.key,\n      config,\n    };\n  }\n}\n","@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (selectConfig.label) {\n      <mat-label>{{ selectConfig.label }}</mat-label>\n    }\n    <mat-select [formControl]=\"control\" [attr.aria-label]=\"selectConfig.label\">\n      @if (selectConfig.placeholder) {\n        <mat-option [disabled]=\"true\" [value]=\"selectConfig.placeHolderValue || ''\">\n          {{ selectConfig.placeholder }}\n        </mat-option>\n      }\n      @for (option of options(); track option.id) {\n        <mat-option [disabled]=\"option.disabled\" [value]=\"option.id\">\n          {{ option.label }}\n        </mat-option>\n      }\n    </mat-select>\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { NgsFormsBaseClassFormInputComponent, NgsFormsFormItem } from '@ng-simplicity/forms-core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { v4 } from 'uuid';\n\n@Component({\n  selector: 'ngs-forms-mat-textarea',\n  imports: [ReactiveFormsModule, MatInputModule, MatFormFieldModule],\n  templateUrl: './text-area.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgsFormsMaterialFormItemTextAreaComponent extends NgsFormsBaseClassFormInputComponent<any> {\n  static override key = 'input-textarea';\n\n  static create(config: any): NgsFormsFormItem<any> {\n    return {\n      uuid: v4(),\n      type: NgsFormsMaterialFormItemTextAreaComponent.key,\n      config,\n    };\n  }\n}\n","@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (config.label) {\n      <mat-label>{{ config.label }}</mat-label>\n    }\n    <textarea matInput [formControl]=\"control\" [placeholder]=\"config.placeholder || ''\" [rows]=\"config.rows || 3\"></textarea>\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n","import { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { NgsFormsComponentRegistryService, NgsFormsCoreModule } from '@ng-simplicity/forms-core';\nimport {\n  NgsFormsMaterialFormItemCheckboxComponent,\n  NgsFormsMaterialFormItemInputComponent,\n  NgsFormsMaterialFormItemSelectInputComponent,\n  NgsFormsMaterialRadioInputComponent,\n  NgsFormsMaterialFormItemTextAreaComponent\n} from './form-components';\n\n@NgModule({\n  imports: [CommonModule, FormsModule, ReactiveFormsModule, NgsFormsCoreModule],\n})\nexport class NgsFormsMaterialModule {\n  static registerAllMaterialComponents(registryService: NgsFormsComponentRegistryService) {\n    NgsFormsCoreModule.registerCoreNgsFormComponents(registryService);\n    registryService.register(NgsFormsMaterialFormItemCheckboxComponent.key, NgsFormsMaterialFormItemCheckboxComponent);\n    registryService.register(NgsFormsMaterialFormItemInputComponent.key, NgsFormsMaterialFormItemInputComponent);\n    registryService.register(NgsFormsMaterialRadioInputComponent.key, NgsFormsMaterialRadioInputComponent);\n    registryService.register(NgsFormsMaterialFormItemSelectInputComponent.key, NgsFormsMaterialFormItemSelectInputComponent);\n    registryService.register(NgsFormsMaterialFormItemTextAreaComponent.key, NgsFormsMaterialFormItemTextAreaComponent);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i2"],"mappings":"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"}
+{"version":3,"file":"ng-simplicity-forms-material.mjs","sources":["../../../../libs/forms-material/src/lib/form-components/checkbox/checkbox.component.ts","../../../../libs/forms-material/src/lib/form-components/checkbox/checkbox.component.html","../../../../libs/forms-material/src/lib/form-components/input/input.component.ts","../../../../libs/forms-material/src/lib/form-components/input/input.component.html","../../../../libs/forms-material/src/lib/form-components/radio/radio.component.ts","../../../../libs/forms-material/src/lib/form-components/radio/radio.component.html","../../../../libs/forms-material/src/lib/form-components/select/select.component.ts","../../../../libs/forms-material/src/lib/form-components/select/select.component.html","../../../../libs/forms-material/src/lib/form-components/text-area/text-area.component.ts","../../../../libs/forms-material/src/lib/form-components/text-area/text-area.component.html","../../../../libs/forms-material/src/lib/forms-material.module.ts","../../../../libs/forms-material/src/ng-simplicity-forms-material.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport {\n  NgsFormsBaseClassFormInputComponent,\n  NgsFormsFormItem,\n  NgsFormsFormItemConfigBaseInput,\n} from '@ng-simplicity/forms-core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { v4 } from 'uuid';\n\n@Component({\n  selector: 'ngs-forms-mat-checkbox',\n  imports: [ReactiveFormsModule, MatCheckboxModule],\n  templateUrl: './checkbox.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgsFormsMaterialFormItemCheckboxComponent extends NgsFormsBaseClassFormInputComponent<NgsFormsFormItemConfigBaseInput> {\n  static override key = 'checkbox';\n\n  static create(config: NgsFormsFormItemConfigBaseInput): NgsFormsFormItem<NgsFormsFormItemConfigBaseInput> {\n    return {\n      uuid: config.uuid || v4(),\n      type: NgsFormsMaterialFormItemCheckboxComponent.key,\n      config,\n    };\n  }\n}\n","@if (control) {\n  <div class=\"mb-3\">\n    <mat-checkbox [formControl]=\"control\" [aria-describedby]=\"errorMessage ? id + '-error' : ''\">\n      {{ config.label }}\n    </mat-checkbox>\n    @if (errorMessage) {\n      <div class=\"mt-1 ms-4\" id=\"{{id}}-error\" style=\"font-size: 0.75rem; color: #f44336;\">{{ errorMessage }}</div>\n    }\n  </div>\n}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { NgsFormsBaseClassFormInputComponent, NgsFormsFormItem } from '@ng-simplicity/forms-core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { v4 } from 'uuid';\n\n@Component({\n  selector: 'ngs-forms-mat-input',\n  imports: [ReactiveFormsModule, MatInputModule, MatFormFieldModule],\n  templateUrl: './input.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgsFormsMaterialFormItemInputComponent extends NgsFormsBaseClassFormInputComponent<any> {\n  static override key = 'input-text';\n\n  matcher = {\n    isErrorState: (control: FormControl | null): boolean => {\n      return !!(control && control.invalid && (control.touched || control.dirty || this.submitted()));\n    }\n  };\n\n  static create(config: any): NgsFormsFormItem<any> {\n    return {\n      uuid: config.uuid || v4(),\n      type: NgsFormsMaterialFormItemInputComponent.key,\n      config,\n    };\n  }\n}\n","@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (config.label) {\n      <mat-label>{{ config.label }}</mat-label>\n    }\n    <input matInput [formControl]=\"control\" [placeholder]=\"config.placeholder || ''\" [type]=\"config.type || 'text'\" [errorStateMatcher]=\"matcher\" />\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatRadioModule } from '@angular/material/radio';\nimport {\n  NgsFormsBaseClassFormItemInputWithOptionsComponent,\n  NgsFormsFormItem,\n  NgsFormsFormItemConfigBaseInputWithOptions,\n} from '@ng-simplicity/forms-core';\nimport { v4 } from 'uuid';\n\nexport interface NgsFormsFormItemConfigMaterialRadio extends NgsFormsFormItemConfigBaseInputWithOptions {\n  alignment?: 'horizontal' | 'vertical';\n}\n\n@Component({\n  selector: 'ngs-forms-material-radio-group-input',\n  imports: [ReactiveFormsModule, MatRadioModule],\n  templateUrl: './radio.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgsFormsMaterialRadioInputComponent extends NgsFormsBaseClassFormItemInputWithOptionsComponent<NgsFormsFormItemConfigMaterialRadio> {\n  static override key = 'radio';\n  radioConfig = this.config as NgsFormsFormItemConfigMaterialRadio;\n\n  static create(config: NgsFormsFormItemConfigMaterialRadio): NgsFormsFormItem<NgsFormsFormItemConfigMaterialRadio> {\n    return {\n      uuid: config.uuid || v4(),\n      type: NgsFormsMaterialRadioInputComponent.key,\n      config,\n    };\n  }\n}\n","@if (control) {\n  <div class=\"ngs-material-radio-field mb-3\">\n    @if (radioConfig.label) {\n      <div class=\"ngs-material-radio-label\" [class.text-danger]=\"!!errorMessage\" id=\"{{id}}-label\">\n        {{ radioConfig.label }}\n      </div>\n    }\n    <mat-radio-group\n      [formControl]=\"control\"\n      [class.ngs-material-radio-group-horizontal]=\"radioConfig.alignment === 'horizontal'\"\n      [class.ngs-material-radio-group-vertical]=\"radioConfig.alignment !== 'horizontal'\"\n      [attr.aria-labelledby]=\"radioConfig.label ? id + '-label' : null\"\n      [attr.aria-describedby]=\"errorMessage ? id + '-error' : null\"\n    >\n      @for (option of options(); track option.id) {\n        <mat-radio-button [disabled]=\"!!option.disabled\" [value]=\"option.id\">\n          {{ option.label }}\n        </mat-radio-button>\n      }\n    </mat-radio-group>\n    @if (errorMessage) {\n      <div class=\"ngs-material-control-error\" id=\"{{id}}-error\">{{ errorMessage }}</div>\n    }\n  </div>\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectModule } from '@angular/material/select';\nimport {\n  NgsFormsBaseClassFormItemInputWithOptionsComponent,\n  NgsFormsFormItem,\n  NgsFormsFormItemConfigBaseInputWithOptions,\n} from '@ng-simplicity/forms-core';\nimport { v4 } from 'uuid';\n\nexport interface NgsFormsFormItemConfigMaterialSelectInput extends NgsFormsFormItemConfigBaseInputWithOptions {\n  placeholder?: string;\n  placeHolderValue?: string;\n}\n\n@Component({\n  selector: 'ngs-forms-material-select-input',\n  imports: [ReactiveFormsModule, MatFormFieldModule, MatSelectModule],\n  templateUrl: './select.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgsFormsMaterialFormItemSelectInputComponent extends NgsFormsBaseClassFormItemInputWithOptionsComponent<NgsFormsFormItemConfigMaterialSelectInput> {\n  static override key = 'select';\n  selectConfig = this.config as NgsFormsFormItemConfigMaterialSelectInput;\n\n  matcher = {\n    isErrorState: (control: FormControl | null): boolean => {\n      return !!(control && control.invalid && (control.touched || control.dirty || this.submitted()));\n    }\n  };\n\n  static create(\n    config: NgsFormsFormItemConfigMaterialSelectInput\n  ): NgsFormsFormItem<NgsFormsFormItemConfigMaterialSelectInput> {\n    return {\n      uuid: config.uuid || v4(),\n      type: NgsFormsMaterialFormItemSelectInputComponent.key,\n      config,\n    };\n  }\n}\n","@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (selectConfig.label) {\n      <mat-label>{{ selectConfig.label }}</mat-label>\n    }\n    <mat-select [formControl]=\"control\" [attr.aria-label]=\"selectConfig.label\" [errorStateMatcher]=\"matcher\">\n      @if (selectConfig.placeholder) {\n        <mat-option [disabled]=\"true\" [value]=\"selectConfig.placeHolderValue || ''\">\n          {{ selectConfig.placeholder }}\n        </mat-option>\n      }\n      @for (option of options(); track option.id) {\n        <mat-option [disabled]=\"!!option.disabled\" [value]=\"option.id\">\n          {{ option.label }}\n        </mat-option>\n      }\n    </mat-select>\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { NgsFormsBaseClassFormInputComponent, NgsFormsFormItem } from '@ng-simplicity/forms-core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { v4 } from 'uuid';\n\n@Component({\n  selector: 'ngs-forms-mat-textarea',\n  imports: [ReactiveFormsModule, MatInputModule, MatFormFieldModule],\n  templateUrl: './text-area.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgsFormsMaterialFormItemTextAreaComponent extends NgsFormsBaseClassFormInputComponent<any> {\n  static override key = 'input-textarea';\n\n  matcher = {\n    isErrorState: (control: FormControl | null): boolean => {\n      return !!(control && control.invalid && (control.touched || control.dirty || this.submitted()));\n    }\n  };\n\n  static create(config: any): NgsFormsFormItem<any> {\n    return {\n      uuid: config.uuid || v4(),\n      type: NgsFormsMaterialFormItemTextAreaComponent.key,\n      config,\n    };\n  }\n}\n","@if (control) {\n  <mat-form-field class=\"w-100 mb-2\" appearance=\"outline\">\n    @if (config.label) {\n      <mat-label>{{ config.label }}</mat-label>\n    }\n    <textarea matInput [formControl]=\"control\" [placeholder]=\"config.placeholder || ''\" [rows]=\"config.rows || 3\" [errorStateMatcher]=\"matcher\"></textarea>\n    @if (errorMessage) {\n      <mat-error>{{ errorMessage }}</mat-error>\n    }\n  </mat-form-field>\n}\n","import { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { NgsFormsComponentRegistryService, NgsFormsCoreModule } from '@ng-simplicity/forms-core';\nimport {\n  NgsFormsMaterialFormItemCheckboxComponent,\n  NgsFormsMaterialFormItemInputComponent,\n  NgsFormsMaterialFormItemSelectInputComponent,\n  NgsFormsMaterialRadioInputComponent,\n  NgsFormsMaterialFormItemTextAreaComponent\n} from './form-components';\n\n@NgModule({\n  imports: [CommonModule, FormsModule, ReactiveFormsModule, NgsFormsCoreModule],\n})\nexport class NgsFormsMaterialModule {\n  static registerAllMaterialComponents(registryService: NgsFormsComponentRegistryService) {\n    NgsFormsCoreModule.registerCoreNgsFormComponents(registryService);\n    registryService.register(NgsFormsMaterialFormItemCheckboxComponent.key, NgsFormsMaterialFormItemCheckboxComponent);\n    registryService.register(NgsFormsMaterialFormItemInputComponent.key, NgsFormsMaterialFormItemInputComponent);\n    registryService.register(NgsFormsMaterialRadioInputComponent.key, NgsFormsMaterialRadioInputComponent);\n    registryService.register(NgsFormsMaterialFormItemSelectInputComponent.key, NgsFormsMaterialFormItemSelectInputComponent);\n    registryService.register(NgsFormsMaterialFormItemTextAreaComponent.key, NgsFormsMaterialFormItemTextAreaComponent);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i2"],"mappings":"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"}

package/index.d.ts

@@ -1,8 +1,9 @@
 import * as i3 from '@ng-simplicity/forms-core';
 import { NgsFormsBaseClassFormInputComponent, NgsFormsFormItemConfigBaseInput, NgsFormsFormItem, NgsFormsFormItemConfigBaseInputWithOptions, NgsFormsBaseClassFormItemInputWithOptionsComponent, NgsFormsComponentRegistryService } from '@ng-simplicity/forms-core';
 import * as i0 from '@angular/core';
-import * as i1 from '@angular/common';
 import * as i2 from '@angular/forms';
+import { FormControl } from '@angular/forms';
+import * as i1 from '@angular/common';
 
 declare class NgsFormsMaterialFormItemCheckboxComponent extends NgsFormsBaseClassFormInputComponent<NgsFormsFormItemConfigBaseInput> {
     static key: string;
@@ -13,6 +14,9 @@ declare class NgsFormsMaterialFormItemCheckboxComponent extends NgsFormsBaseClas
 
 declare class NgsFormsMaterialFormItemInputComponent extends NgsFormsBaseClassFormInputComponent<any> {
     static key: string;
+    matcher: {
+        isErrorState: (control: FormControl | null) => boolean;
+    };
     static create(config: any): NgsFormsFormItem<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsMaterialFormItemInputComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgsFormsMaterialFormItemInputComponent, "ngs-forms-mat-input", never, {}, {}, never, never, true, never>;
@@ -36,6 +40,9 @@ interface NgsFormsFormItemConfigMaterialSelectInput extends NgsFormsFormItemConf
 declare class NgsFormsMaterialFormItemSelectInputComponent extends NgsFormsBaseClassFormItemInputWithOptionsComponent<NgsFormsFormItemConfigMaterialSelectInput> {
     static key: string;
     selectConfig: NgsFormsFormItemConfigMaterialSelectInput;
+    matcher: {
+        isErrorState: (control: FormControl | null) => boolean;
+    };
     static create(config: NgsFormsFormItemConfigMaterialSelectInput): NgsFormsFormItem<NgsFormsFormItemConfigMaterialSelectInput>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsMaterialFormItemSelectInputComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgsFormsMaterialFormItemSelectInputComponent, "ngs-forms-material-select-input", never, {}, {}, never, never, true, never>;
@@ -43,6 +50,9 @@ declare class NgsFormsMaterialFormItemSelectInputComponent extends NgsFormsBaseC
 
 declare class NgsFormsMaterialFormItemTextAreaComponent extends NgsFormsBaseClassFormInputComponent<any> {
     static key: string;
+    matcher: {
+        isErrorState: (control: FormControl | null) => boolean;
+    };
     static create(config: any): NgsFormsFormItem<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsMaterialFormItemTextAreaComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgsFormsMaterialFormItemTextAreaComponent, "ngs-forms-mat-textarea", never, {}, {}, never, never, true, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-simplicity/forms-material",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
     "@angular/core": "^19.0.0 || ^20.0.0",
     "@angular/forms": "^19.0.0 || ^20.0.0",
     "@angular/material": "^19.0.0 || ^20.0.0",
-    "@ng-simplicity/forms-core": "^1.0.0"
+    "@ng-simplicity/forms-core": "^1.1.0"
   },
   "sideEffects": false,
   "module": "fesm2022/ng-simplicity-forms-material.mjs",