ngx-form-lib/esm2022/lib/features/textarea/textarea.component.mjs

Dynamic form library for Angular 18 with Material 3 support. Create complex reactive forms easily using JSON configuration with modern Angular 18 control flow syntax.

import { Component } from '@angular/core';
import { BaseComponent } from '../../core/components/base/base.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/form-field";
import * as i2 from "../../shared/components/prefix-suffix/prefix-suffix.component";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/material/input";
import * as i5 from "../../shared/pipes/set-parent-config/set-parent-config.pipe";
export class TextareaComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.config = null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextareaComponent, selector: "ngf-textarea", usesInheritance: true, ngImport: i0, template: "@if (config && group) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-textarea-wrapper\">\r\n  <mat-form-field\r\n    class=\"ngf-form-field\"\r\n    [appearance]=\"parentConfig | setParentConfig : config : 'appearance'\"\r\n    [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n  >\r\n    <mat-label [attr.for]=\"config.name\">{{ config.label }}</mat-label>\r\n    <textarea\r\n      matInput\r\n      class=\"form-control\"\r\n      [formControlName]=\"config.name\"\r\n      [id]=\"config.name\"\r\n      [placeholder]=\"config.placeholder\"\r\n      [rows]=\"config.rows\"\r\n    ></textarea>\r\n    @if (config.hint) {\r\n    <mat-hint>{{ config.hint }}</mat-hint>\r\n    } @if (config.prefix) {\r\n    <span matPrefix>\r\n      <ngf-prefix-suffix [config]=\"config.prefix\"></ngf-prefix-suffix>\r\n    </span>\r\n    } @if (config.suffix) {\r\n    <span matSuffix>\r\n      <ngf-prefix-suffix [config]=\"config.suffix\"></ngf-prefix-suffix>\r\n    </span>\r\n    }\r\n    <!-- TODO: Try moving mat-error to a component and implement dynamic error message -->\r\n    @for (validationItem of config.validators; track validationItem.type) {\r\n    <mat-error class=\"ngf-field-error\">\r\n      @if (group.controls[config.name].hasError(validationItem.type) &&\r\n      (group.controls[config.name].dirty ||\r\n      group.controls[config.name].touched)) {\r\n      <span>{{ validationItem.message }}</span>\r\n      @if (validationItem.showDynamicError &&\r\n      this.group.controls[config.name].getError(validationItem.type)?.actualLength;\r\n      as actualLength) {\r\n      <span>\r\n        {{ actualLength }}/\r\n        {{\r\n          this.group.controls[config.name].getError(validationItem.type)\r\n            ?.requiredLength\r\n        }}\r\n      </span>\r\n      } }\r\n    </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i2.PrefixSuffixComponent, selector: "ngf-prefix-suffix", inputs: ["config"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i5.SetParentConfigPipe, name: "setParentConfig" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngf-textarea', template: "@if (config && group) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-textarea-wrapper\">\r\n  <mat-form-field\r\n    class=\"ngf-form-field\"\r\n    [appearance]=\"parentConfig | setParentConfig : config : 'appearance'\"\r\n    [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n  >\r\n    <mat-label [attr.for]=\"config.name\">{{ config.label }}</mat-label>\r\n    <textarea\r\n      matInput\r\n      class=\"form-control\"\r\n      [formControlName]=\"config.name\"\r\n      [id]=\"config.name\"\r\n      [placeholder]=\"config.placeholder\"\r\n      [rows]=\"config.rows\"\r\n    ></textarea>\r\n    @if (config.hint) {\r\n    <mat-hint>{{ config.hint }}</mat-hint>\r\n    } @if (config.prefix) {\r\n    <span matPrefix>\r\n      <ngf-prefix-suffix [config]=\"config.prefix\"></ngf-prefix-suffix>\r\n    </span>\r\n    } @if (config.suffix) {\r\n    <span matSuffix>\r\n      <ngf-prefix-suffix [config]=\"config.suffix\"></ngf-prefix-suffix>\r\n    </span>\r\n    }\r\n    <!-- TODO: Try moving mat-error to a component and implement dynamic error message -->\r\n    @for (validationItem of config.validators; track validationItem.type) {\r\n    <mat-error class=\"ngf-field-error\">\r\n      @if (group.controls[config.name].hasError(validationItem.type) &&\r\n      (group.controls[config.name].dirty ||\r\n      group.controls[config.name].touched)) {\r\n      <span>{{ validationItem.message }}</span>\r\n      @if (validationItem.showDynamicError &&\r\n      this.group.controls[config.name].getError(validationItem.type)?.actualLength;\r\n      as actualLength) {\r\n      <span>\r\n        {{ actualLength }}/\r\n        {{\r\n          this.group.controls[config.name].getError(validationItem.type)\r\n            ?.requiredLength\r\n        }}\r\n      </span>\r\n      } }\r\n    </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n}\r\n" }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dGFyZWEuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWZvcm0tbGliL3NyYy9saWIvZmVhdHVyZXMvdGV4dGFyZWEvdGV4dGFyZWEuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWZvcm0tbGliL3NyYy9saWIvZmVhdHVyZXMvdGV4dGFyZWEvdGV4dGFyZWEuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUUxQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMkNBQTJDLENBQUM7Ozs7Ozs7QUFPMUUsTUFBTSxPQUFPLGlCQUFrQixTQUFRLGFBQXFCO0lBSjVEOztRQUtXLFdBQU0sR0FBb0IsSUFBSSxDQUFDO0tBQ3pDOytHQUZZLGlCQUFpQjttR0FBakIsaUJBQWlCLDJFQ1Q5QiwyMURBa0RBOzs0RkR6Q2EsaUJBQWlCO2tCQUo3QixTQUFTOytCQUNFLGNBQWMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbmltcG9ydCB7IEJhc2VDb21wb25lbnQgfSBmcm9tICcuLi8uLi9jb3JlL2NvbXBvbmVudHMvYmFzZS9iYXNlLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFRleHRhcmVhIH0gZnJvbSAnLi90ZXh0YXJlYS5tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25nZi10ZXh0YXJlYScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3RleHRhcmVhLmNvbXBvbmVudC5odG1sJyxcclxufSlcclxuZXhwb3J0IGNsYXNzIFRleHRhcmVhQ29tcG9uZW50IGV4dGVuZHMgQmFzZUNvbXBvbmVudDxzdHJpbmc+IHtcclxuICBvdmVycmlkZSBjb25maWc6IFRleHRhcmVhIHwgbnVsbCA9IG51bGw7XHJcbn1cclxuIiwiQGlmIChjb25maWcgJiYgZ3JvdXApIHtcclxuPGRpdiBbZm9ybUdyb3VwXT1cImdyb3VwXCIgY2xhc3M9XCJuZ2Ytd3JhcHBlciBuZ2YtdGV4dGFyZWEtd3JhcHBlclwiPlxyXG4gIDxtYXQtZm9ybS1maWVsZFxyXG4gICAgY2xhc3M9XCJuZ2YtZm9ybS1maWVsZFwiXHJcbiAgICBbYXBwZWFyYW5jZV09XCJwYXJlbnRDb25maWcgfCBzZXRQYXJlbnRDb25maWcgOiBjb25maWcgOiAnYXBwZWFyYW5jZSdcIlxyXG4gICAgW2NvbG9yXT1cInBhcmVudENvbmZpZyB8IHNldFBhcmVudENvbmZpZyA6IGNvbmZpZyA6ICdjb2xvcidcIlxyXG4gID5cclxuICAgIDxtYXQtbGFiZWwgW2F0dHIuZm9yXT1cImNvbmZpZy5uYW1lXCI+e3sgY29uZmlnLmxhYmVsIH19PC9tYXQtbGFiZWw+XHJcbiAgICA8dGV4dGFyZWFcclxuICAgICAgbWF0SW5wdXRcclxuICAgICAgY2xhc3M9XCJmb3JtLWNvbnRyb2xcIlxyXG4gICAgICBbZm9ybUNvbnRyb2xOYW1lXT1cImNvbmZpZy5uYW1lXCJcclxuICAgICAgW2lkXT1cImNvbmZpZy5uYW1lXCJcclxuICAgICAgW3BsYWNlaG9sZGVyXT1cImNvbmZpZy5wbGFjZWhvbGRlclwiXHJcbiAgICAgIFtyb3dzXT1cImNvbmZpZy5yb3dzXCJcclxuICAgID48L3RleHRhcmVhPlxyXG4gICAgQGlmIChjb25maWcuaGludCkge1xyXG4gICAgPG1hdC1oaW50Pnt7IGNvbmZpZy5oaW50IH19PC9tYXQtaGludD5cclxuICAgIH0gQGlmIChjb25maWcucHJlZml4KSB7XHJcbiAgICA8c3BhbiBtYXRQcmVmaXg+XHJcbiAgICAgIDxuZ2YtcHJlZml4LXN1ZmZpeCBbY29uZmlnXT1cImNvbmZpZy5wcmVmaXhcIj48L25nZi1wcmVmaXgtc3VmZml4PlxyXG4gICAgPC9zcGFuPlxyXG4gICAgfSBAaWYgKGNvbmZpZy5zdWZmaXgpIHtcclxuICAgIDxzcGFuIG1hdFN1ZmZpeD5cclxuICAgICAgPG5nZi1wcmVmaXgtc3VmZml4IFtjb25maWddPVwiY29uZmlnLnN1ZmZpeFwiPjwvbmdmLXByZWZpeC1zdWZmaXg+XHJcbiAgICA8L3NwYW4+XHJcbiAgICB9XHJcbiAgICA8IS0tIFRPRE86IFRyeSBtb3ZpbmcgbWF0LWVycm9yIHRvIGEgY29tcG9uZW50IGFuZCBpbXBsZW1lbnQgZHluYW1pYyBlcnJvciBtZXNzYWdlIC0tPlxyXG4gICAgQGZvciAodmFsaWRhdGlvbkl0ZW0gb2YgY29uZmlnLnZhbGlkYXRvcnM7IHRyYWNrIHZhbGlkYXRpb25JdGVtLnR5cGUpIHtcclxuICAgIDxtYXQtZXJyb3IgY2xhc3M9XCJuZ2YtZmllbGQtZXJyb3JcIj5cclxuICAgICAgQGlmIChncm91cC5jb250cm9sc1tjb25maWcubmFtZV0uaGFzRXJyb3IodmFsaWRhdGlvbkl0ZW0udHlwZSkgJiZcclxuICAgICAgKGdyb3VwLmNvbnRyb2xzW2NvbmZpZy5uYW1lXS5kaXJ0eSB8fFxyXG4gICAgICBncm91cC5jb250cm9sc1tjb25maWcubmFtZV0udG91Y2hlZCkpIHtcclxuICAgICAgPHNwYW4+e3sgdmFsaWRhdGlvbkl0ZW0ubWVzc2FnZSB9fTwvc3Bhbj5cclxuICAgICAgQGlmICh2YWxpZGF0aW9uSXRlbS5zaG93RHluYW1pY0Vycm9yICYmXHJcbiAgICAgIHRoaXMuZ3JvdXAuY29udHJvbHNbY29uZmlnLm5hbWVdLmdldEVycm9yKHZhbGlkYXRpb25JdGVtLnR5cGUpPy5hY3R1YWxMZW5ndGg7XHJcbiAgICAgIGFzIGFjdHVhbExlbmd0aCkge1xyXG4gICAgICA8c3Bhbj5cclxuICAgICAgICB7eyBhY3R1YWxMZW5ndGggfX0vXHJcbiAgICAgICAge3tcclxuICAgICAgICAgIHRoaXMuZ3JvdXAuY29udHJvbHNbY29uZmlnLm5hbWVdLmdldEVycm9yKHZhbGlkYXRpb25JdGVtLnR5cGUpXHJcbiAgICAgICAgICAgID8ucmVxdWlyZWRMZW5ndGhcclxuICAgICAgICB9fVxyXG4gICAgICA8L3NwYW4+XHJcbiAgICAgIH0gfVxyXG4gICAgPC9tYXQtZXJyb3I+XHJcbiAgICB9XHJcbiAgPC9tYXQtZm9ybS1maWVsZD5cclxuPC9kaXY+XHJcbn1cclxuIl19