ngx-form-lib/esm2022/lib/features/input/input.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 InputComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.config = null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputComponent, selector: "ngf-input", usesInheritance: true, ngImport: i0, template: "@if (group && config) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-input-wrapper\">\r\n  <mat-form-field\r\n    class=\"ngf-form-field\"\r\n    [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n    [appearance]=\"parentConfig | setParentConfig : config : 'appearance'\"\r\n  >\r\n    @if (config.label) {\r\n    <mat-label [attr.for]=\"config.name\">{{ config.label }}</mat-label>\r\n    }\r\n    <input\r\n      matInput\r\n      [formControlName]=\"config.name\"\r\n      [id]=\"config.name\"\r\n      [type]=\"config.subType\"\r\n    />\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    } @if (config.hint) {\r\n    <mat-hint>{{ config.hint }}</mat-hint>\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: InputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngf-input', template: "@if (group && config) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-input-wrapper\">\r\n  <mat-form-field\r\n    class=\"ngf-form-field\"\r\n    [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n    [appearance]=\"parentConfig | setParentConfig : config : 'appearance'\"\r\n  >\r\n    @if (config.label) {\r\n    <mat-label [attr.for]=\"config.name\">{{ config.label }}</mat-label>\r\n    }\r\n    <input\r\n      matInput\r\n      [formControlName]=\"config.name\"\r\n      [id]=\"config.name\"\r\n      [type]=\"config.subType\"\r\n    />\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    } @if (config.hint) {\r\n    <mat-hint>{{ config.hint }}</mat-hint>\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWZvcm0tbGliL3NyYy9saWIvZmVhdHVyZXMvaW5wdXQvaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWZvcm0tbGliL3NyYy9saWIvZmVhdHVyZXMvaW5wdXQvaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUUxQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMkNBQTJDLENBQUM7Ozs7Ozs7QUFPMUUsTUFBTSxPQUFPLGNBQWUsU0FBUSxhQUFxQjtJQUp6RDs7UUFLVyxXQUFNLEdBQWlCLElBQUksQ0FBQztLQUN0QzsrR0FGWSxjQUFjO21HQUFkLGNBQWMsd0VDVDNCLGdzREFnREE7OzRGRHZDYSxjQUFjO2tCQUoxQixTQUFTOytCQUNFLFdBQVciLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbmltcG9ydCB7IEJhc2VDb21wb25lbnQgfSBmcm9tICcuLi8uLi9jb3JlL2NvbXBvbmVudHMvYmFzZS9iYXNlLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IElucHV0IH0gZnJvbSAnLi9pbnB1dC5tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25nZi1pbnB1dCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2lucHV0LmNvbXBvbmVudC5odG1sJyxcclxufSlcclxuZXhwb3J0IGNsYXNzIElucHV0Q29tcG9uZW50IGV4dGVuZHMgQmFzZUNvbXBvbmVudDxzdHJpbmc+IHtcclxuICBvdmVycmlkZSBjb25maWc6IElucHV0IHwgbnVsbCA9IG51bGw7XHJcbn1cclxuIiwiQGlmIChncm91cCAmJiBjb25maWcpIHtcclxuPGRpdiBbZm9ybUdyb3VwXT1cImdyb3VwXCIgY2xhc3M9XCJuZ2Ytd3JhcHBlciBuZ2YtaW5wdXQtd3JhcHBlclwiPlxyXG4gIDxtYXQtZm9ybS1maWVsZFxyXG4gICAgY2xhc3M9XCJuZ2YtZm9ybS1maWVsZFwiXHJcbiAgICBbY29sb3JdPVwicGFyZW50Q29uZmlnIHwgc2V0UGFyZW50Q29uZmlnIDogY29uZmlnIDogJ2NvbG9yJ1wiXHJcbiAgICBbYXBwZWFyYW5jZV09XCJwYXJlbnRDb25maWcgfCBzZXRQYXJlbnRDb25maWcgOiBjb25maWcgOiAnYXBwZWFyYW5jZSdcIlxyXG4gID5cclxuICAgIEBpZiAoY29uZmlnLmxhYmVsKSB7XHJcbiAgICA8bWF0LWxhYmVsIFthdHRyLmZvcl09XCJjb25maWcubmFtZVwiPnt7IGNvbmZpZy5sYWJlbCB9fTwvbWF0LWxhYmVsPlxyXG4gICAgfVxyXG4gICAgPGlucHV0XHJcbiAgICAgIG1hdElucHV0XHJcbiAgICAgIFtmb3JtQ29udHJvbE5hbWVdPVwiY29uZmlnLm5hbWVcIlxyXG4gICAgICBbaWRdPVwiY29uZmlnLm5hbWVcIlxyXG4gICAgICBbdHlwZV09XCJjb25maWcuc3ViVHlwZVwiXHJcbiAgICAvPlxyXG4gICAgQGlmIChjb25maWcucHJlZml4KSB7XHJcbiAgICA8c3BhbiBtYXRQcmVmaXg+XHJcbiAgICAgIDxuZ2YtcHJlZml4LXN1ZmZpeCBbY29uZmlnXT1cImNvbmZpZy5wcmVmaXhcIj48L25nZi1wcmVmaXgtc3VmZml4PlxyXG4gICAgPC9zcGFuPlxyXG4gICAgfSBAaWYgKGNvbmZpZy5zdWZmaXgpIHtcclxuICAgIDxzcGFuIG1hdFN1ZmZpeD5cclxuICAgICAgPG5nZi1wcmVmaXgtc3VmZml4IFtjb25maWddPVwiY29uZmlnLnN1ZmZpeFwiPjwvbmdmLXByZWZpeC1zdWZmaXg+XHJcbiAgICA8L3NwYW4+XHJcbiAgICB9IEBpZiAoY29uZmlnLmhpbnQpIHtcclxuICAgIDxtYXQtaGludD57eyBjb25maWcuaGludCB9fTwvbWF0LWhpbnQ+XHJcbiAgICB9IEBmb3IgKHZhbGlkYXRpb25JdGVtIG9mIGNvbmZpZy52YWxpZGF0b3JzOyB0cmFjayB2YWxpZGF0aW9uSXRlbS50eXBlKSB7XHJcbiAgICA8bWF0LWVycm9yIGNsYXNzPVwibmdmLWZpZWxkLWVycm9yXCI+XHJcbiAgICAgIEBpZiAoZ3JvdXAuY29udHJvbHNbY29uZmlnLm5hbWVdLmhhc0Vycm9yKHZhbGlkYXRpb25JdGVtLnR5cGUpICYmXHJcbiAgICAgIChncm91cC5jb250cm9sc1tjb25maWcubmFtZV0uZGlydHkgfHxcclxuICAgICAgZ3JvdXAuY29udHJvbHNbY29uZmlnLm5hbWVdLnRvdWNoZWQpKSB7XHJcbiAgICAgIDxzcGFuPnt7IHZhbGlkYXRpb25JdGVtLm1lc3NhZ2UgfX08L3NwYW4+XHJcbiAgICAgIEBpZiAodmFsaWRhdGlvbkl0ZW0uc2hvd0R5bmFtaWNFcnJvciAmJlxyXG4gICAgICB0aGlzLmdyb3VwLmNvbnRyb2xzW2NvbmZpZy5uYW1lXS5nZXRFcnJvcih2YWxpZGF0aW9uSXRlbS50eXBlKT8uYWN0dWFsTGVuZ3RoO1xyXG4gICAgICBhcyBhY3R1YWxMZW5ndGgpIHtcclxuICAgICAgPHNwYW4+XHJcbiAgICAgICAge3sgYWN0dWFsTGVuZ3RoIH19L1xyXG4gICAgICAgIHt7XHJcbiAgICAgICAgICB0aGlzLmdyb3VwLmNvbnRyb2xzW2NvbmZpZy5uYW1lXS5nZXRFcnJvcih2YWxpZGF0aW9uSXRlbS50eXBlKVxyXG4gICAgICAgICAgICA/LnJlcXVpcmVkTGVuZ3RoXHJcbiAgICAgICAgfX1cclxuICAgICAgPC9zcGFuPlxyXG4gICAgICB9IH1cclxuICAgIDwvbWF0LWVycm9yPlxyXG4gICAgfVxyXG4gIDwvbWF0LWZvcm0tZmllbGQ+XHJcbjwvZGl2PlxyXG59XHJcbiJdfQ==