UNPKG

ngx-iso-form

Version:

Angular component design Reactive Form using specific JSON. The primary use of this UI library is to design ISO 20022 forms dynamically.

589 lines (571 loc) 82.3 kB
import * as i0 from '@angular/core'; import { Component, ChangeDetectionStrategy, Input, Pipe, Injectable, Directive, ViewChild, forwardRef, NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserModule } from '@angular/platform-browser'; import * as i2 from '@angular/forms'; import { Validators, NG_VALUE_ACCESSOR, FormGroup, FormControl, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms'; import * as i4$2 from '@angular/material/expansion'; import { MatExpansionModule } from '@angular/material/expansion'; import * as i3 from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field'; import * as i5$1 from '@angular/material/core'; import { NativeDateAdapter, MatNativeDateModule, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; import * as i9 from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon'; import * as i4 from '@angular/material/input'; import { MatInputModule } from '@angular/material/input'; import * as i6 from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button'; import * as i5 from '@angular/material/datepicker'; import { MatDatepickerModule } from '@angular/material/datepicker'; import * as i4$1 from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select'; import * as i1 from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core'; import * as i1$1 from '@angular/common'; class IsoBaseControlComponent { getKeys(errors) { if (errors) { return Object.keys(errors); } return []; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoBaseControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: IsoBaseControlComponent, isStandalone: false, selector: "iso-base", inputs: { control: "control", formControl: "formControl" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoBaseControlComponent, decorators: [{ type: Component, args: [{ selector: 'iso-base', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false }] }], propDecorators: { control: [{ type: Input }], formControl: [{ type: Input }] } }); class IsoTranslatePipe { constructor(translateService) { this.translateService = translateService; } transform(value, id, defaultValue) { let key = `iso.${value}`; let tran = this.translateService.instant(key); if (tran === key) { key = `iso.${id}`; tran = this.translateService.instant(key); if (tran === key) { return defaultValue; } } if (tran.label) { return tran.label; } return defaultValue; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoTranslatePipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); } static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: IsoTranslatePipe, isStandalone: false, name: "trans", pure: false }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoTranslatePipe, decorators: [{ type: Pipe, args: [{ name: 'trans', pure: false, standalone: false }] }], ctorParameters: () => [{ type: i1.TranslateService }] }); class IsoErrorPipe { constructor(translateService) { this.translateService = translateService; } transform(value, id, errorKey, defaultValue) { let key = `iso.${value}`; let tran = this.translateService.instant(key); if (tran === key) { key = `iso.${id}`; tran = this.translateService.instant(key); if (tran === key) { return defaultValue; } } if (tran.error && tran.error[errorKey]) { return tran.error[errorKey]; } return defaultValue; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoErrorPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); } static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: IsoErrorPipe, isStandalone: false, name: "error", pure: false }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoErrorPipe, decorators: [{ type: Pipe, args: [{ name: 'error', pure: false, standalone: false }] }], ctorParameters: () => [{ type: i1.TranslateService }] }); class IsoMatDate extends IsoBaseControlComponent { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatDate, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: IsoMatDate, isStandalone: false, selector: "iso-mat-date", usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-control form-control-m\">\r\n <mat-label>{{ control.name | trans: control.id : control.name }}</mat-label>\r\n <input matInput [matDatepicker]=\"picker\" [formControl]=\"formControl\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\" class=\"iso-mat-error\">\r\n {{ control.name | error: control.id : item : item + \" validation failed\" }}\r\n </div>\r\n </ng-container>\r\n</mat-form-field>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: IsoTranslatePipe, name: "trans" }, { kind: "pipe", type: IsoErrorPipe, name: "error" }] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatDate, decorators: [{ type: Component, args: [{ selector: 'iso-mat-date', standalone: false, template: "<mat-form-field class=\"form-control form-control-m\">\r\n <mat-label>{{ control.name | trans: control.id : control.name }}</mat-label>\r\n <input matInput [matDatepicker]=\"picker\" [formControl]=\"formControl\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\" class=\"iso-mat-error\">\r\n {{ control.name | error: control.id : item : item + \" validation failed\" }}\r\n </div>\r\n </ng-container>\r\n</mat-form-field>" }] }] }); class IsoGeneralPipe { constructor(translateService) { this.translateService = translateService; } transform(value, id, generalKey, defaultValue) { let key = `iso.${value}`; let tran = this.translateService.instant(key); if (tran === key) { key = `iso.${id.toLocaleLowerCase()}`; tran = this.translateService.instant(key); if (tran === key) { return defaultValue; } } if (tran.general && tran.general[generalKey]) { return tran.general[generalKey]; } return defaultValue; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoGeneralPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); } static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: IsoGeneralPipe, isStandalone: false, name: "general", pure: false }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoGeneralPipe, decorators: [{ type: Pipe, args: [{ name: 'general', pure: false, standalone: false }] }], ctorParameters: () => [{ type: i1.TranslateService }] }); class IsoMatDateTime extends IsoBaseControlComponent { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatDateTime, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: IsoMatDateTime, isStandalone: false, selector: "iso-mat-datetime", usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-control form-control-m\">\r\n <mat-label>{{ control.name | trans: control.id : control.name }}</mat-label>\r\n <input matInput placeholder=\"{{ control.name }}\" [formControl]=\"formControl\" [attr.minlength]=\"control.minLength\" [attr.maxlength]=\"control.maxLength\">\r\n <mat-hint>{{ control.id | general: control.id : \"format\" : \"YYYY-MM-DDThh:mm:ss.sss+/-hh:mm\" }}</mat-hint>\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\" class=\"iso-mat-error\">\r\n {{ control.name | error: control.id : item : item + \" validation failed\" }}\r\n </div>\r\n </ng-container>\r\n \r\n</mat-form-field>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: IsoTranslatePipe, name: "trans" }, { kind: "pipe", type: IsoErrorPipe, name: "error" }, { kind: "pipe", type: IsoGeneralPipe, name: "general" }] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatDateTime, decorators: [{ type: Component, args: [{ selector: 'iso-mat-datetime', standalone: false, template: "<mat-form-field class=\"form-control form-control-m\">\r\n <mat-label>{{ control.name | trans: control.id : control.name }}</mat-label>\r\n <input matInput placeholder=\"{{ control.name }}\" [formControl]=\"formControl\" [attr.minlength]=\"control.minLength\" [attr.maxlength]=\"control.maxLength\">\r\n <mat-hint>{{ control.id | general: control.id : \"format\" : \"YYYY-MM-DDThh:mm:ss.sss+/-hh:mm\" }}</mat-hint>\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\" class=\"iso-mat-error\">\r\n {{ control.name | error: control.id : item : item + \" validation failed\" }}\r\n </div>\r\n </ng-container>\r\n \r\n</mat-form-field>" }] }] }); class IsoMatInput extends IsoBaseControlComponent { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatInput, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: IsoMatInput, isStandalone: false, selector: "iso-mat-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-control form-control-m\" appearance=\"fill\">\r\n <mat-label>{{ control.name | trans: control.id : control.name }}</mat-label>\r\n <input matInput placeholder=\"{{ control.name }}\" [formControl]=\"formControl\" [attr.minlength]=\"control.minLength\" [attr.maxlength]=\"control.maxLength\">\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\" class=\"iso-mat-error\">\r\n {{ control.name | error: control.id : item : item + \" validation failed\" }}\r\n </div>\r\n </ng-container>\r\n</mat-form-field>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: IsoTranslatePipe, name: "trans" }, { kind: "pipe", type: IsoErrorPipe, name: "error" }] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatInput, decorators: [{ type: Component, args: [{ selector: 'iso-mat-input', standalone: false, template: "<mat-form-field class=\"form-control form-control-m\" appearance=\"fill\">\r\n <mat-label>{{ control.name | trans: control.id : control.name }}</mat-label>\r\n <input matInput placeholder=\"{{ control.name }}\" [formControl]=\"formControl\" [attr.minlength]=\"control.minLength\" [attr.maxlength]=\"control.maxLength\">\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\" class=\"iso-mat-error\">\r\n {{ control.name | error: control.id : item : item + \" validation failed\" }}\r\n </div>\r\n </ng-container>\r\n</mat-form-field>" }] }] }); class IsoMatCheckbox extends IsoBaseControlComponent { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: IsoMatCheckbox, isStandalone: false, selector: "iso-mat-checkbox", usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-control form-control-m\">\r\n <mat-checkbox [formControl]=\"formControl\">{{ control.name | trans: control.id : control.name }}</mat-checkbox>\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\">\r\n {{ control.name | error: control.id : item : item + \" validation failed\" }}\r\n </div>\r\n </ng-container>\r\n</mat-form-field>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "pipe", type: IsoTranslatePipe, name: "trans" }, { kind: "pipe", type: IsoErrorPipe, name: "error" }] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatCheckbox, decorators: [{ type: Component, args: [{ selector: 'iso-mat-checkbox', standalone: false, template: "<mat-form-field class=\"form-control form-control-m\">\r\n <mat-checkbox [formControl]=\"formControl\">{{ control.name | trans: control.id : control.name }}</mat-checkbox>\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\">\r\n {{ control.name | error: control.id : item : item + \" validation failed\" }}\r\n </div>\r\n </ng-container>\r\n</mat-form-field>" }] }] }); class IsoMatTextarea extends IsoBaseControlComponent { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: IsoMatTextarea, isStandalone: false, selector: "iso-mat-textarea", usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-control form-control-full\">\r\n <mat-label>{{ control.name | trans: control.id : control.name }}</mat-label>\r\n <textarea matInput placeholder=\"{{control.name}}\" [formControl]=\"formControl\"></textarea>\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\" class=\"iso-mat-error\">\r\n {{ control.name | error: control.id : item : item + \" validation failed\" }}\r\n </div>\r\n </ng-container>\r\n</mat-form-field>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: IsoTranslatePipe, name: "trans" }, { kind: "pipe", type: IsoErrorPipe, name: "error" }] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatTextarea, decorators: [{ type: Component, args: [{ selector: 'iso-mat-textarea', standalone: false, template: "<mat-form-field class=\"form-control form-control-full\">\r\n <mat-label>{{ control.name | trans: control.id : control.name }}</mat-label>\r\n <textarea matInput placeholder=\"{{control.name}}\" [formControl]=\"formControl\"></textarea>\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\" class=\"iso-mat-error\">\r\n {{ control.name | error: control.id : item : item + \" validation failed\" }}\r\n </div>\r\n </ng-container>\r\n</mat-form-field>" }] }] }); class IsoMatSelect extends IsoBaseControlComponent { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatSelect, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: IsoMatSelect, isStandalone: false, selector: "iso-mat-select", usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-control form-control-m\">\r\n <mat-label>{{ control.name | trans: control.id : control.name }}</mat-label>\r\n <mat-select [formControl]=\"formControl\">\r\n <mat-option *ngFor=\"let item of control.values\" [value]=\"item\">\r\n {{item}}\r\n </mat-option>\r\n </mat-select>\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\" class=\"iso-mat-error\">\r\n {{ control.name | error: control.id : item : item + \" validation failed\" }}\r\n </div>\r\n </ng-container>\r\n </mat-form-field>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: IsoTranslatePipe, name: "trans" }, { kind: "pipe", type: IsoErrorPipe, name: "error" }] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatSelect, decorators: [{ type: Component, args: [{ selector: 'iso-mat-select', standalone: false, template: "<mat-form-field class=\"form-control form-control-m\">\r\n <mat-label>{{ control.name | trans: control.id : control.name }}</mat-label>\r\n <mat-select [formControl]=\"formControl\">\r\n <mat-option *ngFor=\"let item of control.values\" [value]=\"item\">\r\n {{item}}\r\n </mat-option>\r\n </mat-select>\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\" class=\"iso-mat-error\">\r\n {{ control.name | error: control.id : item : item + \" validation failed\" }}\r\n </div>\r\n </ng-container>\r\n </mat-form-field>" }] }] }); class IsoMatCurrency extends IsoBaseControlComponent { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatCurrency, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: IsoMatCurrency, isStandalone: false, selector: "iso-mat-currency", usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-control form-control-s\">\r\n <mat-label>{{ control.name | trans: control.id : control.name }}</mat-label>\r\n <input matInput placeholder=\"{{ control.name }}\" [formControl]=\"formControl\" [attr.maxlength]=\"control.maxLength\">\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\" class=\"iso-mat-error\">\r\n {{ control.name | error: control.id : item : item }}\r\n </div>\r\n </ng-container>\r\n</mat-form-field>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: IsoTranslatePipe, name: "trans" }, { kind: "pipe", type: IsoErrorPipe, name: "error" }] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: IsoMatCurrency, decorators: [{ type: Component, args: [{ selector: 'iso-mat-currency', standalone: false, template: "<mat-form-field class=\"form-control form-control-s\">\r\n <mat-label>{{ control.name | trans: control.id : control.name }}</mat-label>\r\n <input matInput placeholder=\"{{ control.name }}\" [formControl]=\"formControl\" [attr.maxlength]=\"control.maxLength\">\r\n <ng-container *ngFor=\"let item of getKeys(formControl.errors)\">\r\n <div *ngIf=\"formControl.errors?.[item] && formControl.dirty\" class=\"iso-mat-error\">\r\n {{ control.name | error: control.id : item : item }}\r\n </div>\r\n </ng-container>\r\n</mat-form-field>" }] }] }); class ComponentModel { constructor(component, prop) { this.component = component; this.prop = prop; } } class ControlService { getComponentByType(controlModel, formControl) { if (!controlModel.dataType) { console.log("controlModel name {0}", controlModel.name); throw `Argument null exception dataType`; } switch (controlModel.dataType.toLocaleLowerCase()) { case "string": case "decimal": if (controlModel.name.toLocaleLowerCase().indexOf('ccy') > -1) { return new ComponentModel(IsoMatCurrency, { "control": controlModel, "formControl": formControl }); } if (controlModel.values?.length > 0) { return new ComponentModel(IsoMatSelect, { "control": controlModel, "formControl": formControl }); } if (controlModel.maxLength && parseInt(controlModel.maxLength, 10) > 50) { return new ComponentModel(IsoMatTextarea, { "control": controlModel, "formControl": formControl }); } return new ComponentModel(IsoMatInput, { "control": controlModel, "formControl": formControl }); case "date": return new ComponentModel(IsoMatDate, { "control": controlModel, "formControl": formControl }); case "datetime": return new ComponentModel(IsoMatDateTime, { "control": controlModel, "formControl": formControl }); case "boolean": controlModel.values = ["true", "false"]; return new ComponentModel(IsoMatSelect, { "control": controlModel, "formControl": formControl }); case "any": return new ComponentModel(IsoMatTextarea, { "control": controlModel, "formControl": formControl }); default: return new ComponentModel(IsoMatInput, { "control": controlModel, "formControl": formControl }); } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ControlService, providedIn: 'root' }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ControlService, decorators: [{ type: Injectable, args: [{ providedIn: 'root' }] }] }); class ComponentDirective { constructor(viewContainerRef) { this.viewContainerRef = viewContainerRef; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: ComponentDirective, isStandalone: false, selector: "[componentContent]", ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ComponentDirective, decorators: [{ type: Directive, args: [{ selector: '[componentContent]', standalone: false }] }], ctorParameters: () => [{ type: i0.ViewContainerRef }] }); class NgxDynamicComponent { constructor() { } ngOnInit() { this.loadComponent(); } loadComponent() { const viewContainerRef = this.componentContent.viewContainerRef; viewContainerRef.clear(); const componentRef = viewContainerRef.createComponent(this.componentModel.component); if (this.componentModel.prop) { Object.assign(componentRef.instance, this.componentModel.prop); } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgxDynamicComponent, isStandalone: false, selector: "ngx-dynamic", inputs: { componentModel: "componentModel" }, viewQueries: [{ propertyName: "componentContent", first: true, predicate: ComponentDirective, descendants: true, static: true }], ngImport: i0, template: `<div><ng-template componentContent></ng-template></div>`, isInline: true, dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[componentContent]" }] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxDynamicComponent, decorators: [{ type: Component, args: [{ selector: 'ngx-dynamic', template: `<div><ng-template componentContent></ng-template></div>`, standalone: false }] }], ctorParameters: () => [], propDecorators: { componentModel: [{ type: Input }], componentContent: [{ type: ViewChild, args: [ComponentDirective, { static: true }] }] } }); class NgxIsoControlComponent { constructor(controlService) { this.controlService = controlService; this.addValidator = () => { try { const minOccurs = parseInt(this.control.minOccurs, 10); let minLength = parseInt(this.control.minLength, 10); const maxLength = parseInt(this.control.maxLength, 10); if (minOccurs) { this.formControl.addValidators(Validators.required); } if (!Number.isNaN(minLength)) { this.formControl.addValidators(Validators.minLength(minLength)); } if (!Number.isNaN(maxLength)) { this.formControl.addValidators(Validators.maxLength(maxLength)); } if (this.control.pattern) { this.formControl.addValidators(Validators.pattern(this.control.pattern)); } if (this.control.fractionDigits) { minLength = Number.isNaN(minLength) ? 0 : minLength; const pattern = `^[\\d\\.\\d{0,${this.control.fractionDigits}}]{${minLength},${this.control.totalDigits}}$`; } } catch (e) { console.error(e); } }; } ngOnInit() { this.addValidator(); this.component = this.controlService.getComponentByType(this.control, this.formControl); } writeValue(obj) { } registerOnChange(fn) { } registerOnTouched(fn) { } setDisabledState(isDisabled) { } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxIsoControlComponent, deps: [{ token: ControlService }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgxIsoControlComponent, isStandalone: false, selector: "ngx-iso-control", inputs: { formControl: "formControl", control: "control" }, providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxIsoControlComponent), multi: true, } ], ngImport: i0, template: "<ngx-dynamic *ngIf=\"component\" [componentModel]=\"component\"></ngx-dynamic>", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgxDynamicComponent, selector: "ngx-dynamic", inputs: ["componentModel"] }] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxIsoControlComponent, decorators: [{ type: Component, args: [{ selector: 'ngx-iso-control', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxIsoControlComponent), multi: true, } ], standalone: false, template: "<ngx-dynamic *ngIf=\"component\" [componentModel]=\"component\"></ngx-dynamic>" }] }], ctorParameters: () => [{ type: ControlService }], propDecorators: { formControl: [{ type: Input }], control: [{ type: Input }] } }); class CustomDateAdapter extends NativeDateAdapter { format(date, displayFormat) { const day = this._to2digit(date.getDate()); const month = this._to2digit(date.getMonth() + 1); // Months are zero-based const year = date.getFullYear(); return `${year}-${month}-${day}`; } _to2digit(n) { return ('00' + n).slice(-2); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomDateAdapter, providedIn: 'root' }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomDateAdapter, decorators: [{ type: Injectable, args: [{ providedIn: 'root' }] }] }); const CUSTOM_DATE_FORMATS = { parse: { dateInput: 'YYYY-MM-DD', }, display: { dateInput: 'YYYY-MM-DD', monthYearLabel: 'MMM YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM YYYY', }, }; class NgxIsoService { constructor(fb, dateService) { this.fb = fb; this.dateService = dateService; this._formModel = []; this.excludes = []; this.sanitize = (obj) => { if (obj === null || obj === '') { return null; } if (Array.isArray(obj)) { const cleanedObj = []; for (const index in obj) { const cleanedValue = this.sanitize(obj[index]); if (cleanedValue !== null && cleanedValue !== '' && Object.keys(cleanedValue).length > 0 && (!Array.isArray(cleanedValue) || cleanedValue.length > 0)) { cleanedObj.push(cleanedValue); } } return cleanedObj; } else if (typeof obj === 'object' && obj instanceof Date) { const cleanedObj = this.dateService.format(obj, 'YYYY-MM-DD'); return cleanedObj; } else if (typeof obj === 'object') { const cleanedObj = {}; for (const key in obj) { const cleanedValue = this.sanitize(obj[key]); if (cleanedValue !== null && cleanedValue !== '' && Object.keys(cleanedValue).length > 0 && (!Array.isArray(cleanedValue) || cleanedValue.length > 0)) { const _keys = key.split('_'); const newKey = _keys[_keys.length - 1]; cleanedObj[newKey] = cleanedValue; } } return cleanedObj; } return obj; }; this.getFormModel = (object, key) => { if (object) { if (object.elements.length) { if (object.id === key) { return object; } for (let i = 0; i < object.elements.length; i++) { const obj = this.getFormModel(object.elements[i], key); if (obj) return obj; } } else { if (object.id === key) { return object; } } } }; } maxOccurs(maxOccurs) { return maxOccurs === 'unbounded' || parseInt(maxOccurs, 10) > 1; } initFormModel(model, form, prev_key) { if (typeof model === 'object') { for (const key in model) { const __key = !prev_key ? key : `${prev_key}_${key}`; const parentNode = this.getFormModel(this._formModel[0], __key); if (parentNode && parentNode.multi || Array.isArray(model[key])) { if ((!Array.isArray(model[key])) && parentNode && parentNode.multi) { model[key] = [model[key]]; } const item = model[key]; const formArray = form.get(__key); if (formArray && formArray.length !== item.length) { const newEle = structuredClone(parentNode.elements[parentNode.elements.length - 1]); if (!(newEle.maxOccurs && parseInt(newEle.maxOccurs, 10) <= parentNode.elements.length)) { const newKeys = []; const groupControls = this.getFormGroupControls(newEle.elements, newKeys, parentNode.elements.length - 1); parentNode.elements.push(newEle); formArray.push(groupControls); parentNode.elements.forEach((element) => { if (!element.minOccurs || parseInt(element.minOccurs, 10) === 0) { element.minOccurs = '1'; } }); } } for (let i = 0; i < item.length; i++) { parentNode.elements[i].expanded = true; const formArray = form.get(__key); if (formArray) { const frmGroup = formArray.at(i); if (frmGroup) { this.initFormModel(item[i], frmGroup, __key); } } } } else if (typeof model[key] === 'object') { const node = this.getFormModel(this._formModel[0], __key); node.expanded = true; if (node && (!node.minOccurs || parseInt(node.minOccurs, 10) === 0)) { node.minOccurs = '1'; } const _form = form.get(__key); if (_form) { if (node.dataType === 'choice') { const choiceKey = Object.keys(model[key])[0]; const _choiceKey = `${__key}_${choiceKey}`; const choiceEle = node.elements.find((item) => item.id === _choiceKey); node.choiceKey = _choiceKey; choiceEle.hidden = false; choiceEle.expanded = true; const newNode = structuredClone(choiceEle); if (newNode.elements.length) { const group = this.getFormGroupControls(newNode.elements, [], 0, false); _form.addControl(newNode.id, group); } else { const control = this.getFormControl(''); _form.addControl(newNode.id, control); } } this.initFormModel(model[key], _form, __key); } } else { const _form = form.get(__key); _form.setValue(model[key]); } } } else if (Array.isArray(model)) { for (let i = 0; i < model.length; i++) { const frmGroup = form.at(i); this.initFormModel(model[i], frmGroup, ''); } } } getFormGroupControls(json, keys, index = 0, choiceEle = false) { let control = {}; let controls; let value = {}; json.forEach((item) => { if ((this.excludes.length > 0 && !this.excludes.includes(item.id)) || this.excludes.length == 0) { item.hidden = choiceEle; value = item.elements; const id = item.id; const element = { ...item, elements: [], id }; if (item.elements.length > 0) { let choice = item.dataType === 'choice'; if (choice) { element.choiceKey = ''; } if (this.maxOccurs(item.maxOccurs)) { element.uniqueId = `${element.id}_${index}`; keys.push({ id: element.id, multi: true, xpath: element.xpath, elements: [element], }); const data = this.getFormGroupControls(item.elements, element.elements, index, choice); controls = this.fb.array([]); if (!choice) { controls.push(data); } control[id] = controls; } else if (item.multi && !item.isFormControls) { keys.push({ id: element.id, multi: true, xpath: element.xpath, elements: element.elements, }); const data = this.getFormGroupControls(item.elements[item.elements.length - 1].elements, element.elements, index, choice); controls = this.fb.array([]); if (!choice) { controls.push(data); } control[id] = controls; } else if (item.multi && it