mss-engine-forms
Version:
A simple typehead library developed by MSS development team to be used for dynamic forms
360 lines (344 loc) • 42.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, ChangeDetectionStrategy, Input, ViewContainerRef, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@ng-bootstrap/ng-bootstrap';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import * as i4 from 'ngx-mask';
import { NgxMaskModule } from 'ngx-mask';
class MssFormsService {
constructor() { }
}
MssFormsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssFormsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
MssFormsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssFormsService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssFormsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class DynamicInputComponent {
constructor(formgroupDirective) {
this.formgroupDirective = formgroupDirective;
this.tempType = "";
this.formName = formgroupDirective.control;
}
ngOnChanges() {
console.log({ DynamicInputComponentField: this.field });
this.tempType = this.field.type;
}
getFieldClassname() {
var _a;
return {
[this.field.customClass]: (_a = this.field) === null || _a === void 0 ? void 0 : _a.customClass
};
}
}
DynamicInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicInputComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
DynamicInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DynamicInputComponent, selector: "app-dynamic-input", inputs: { field: "field" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formName\">\n <div class=\"form-group\" [ngClass]=\"getFieldClassname()\">\n <label>{{field.label}} :\n <button *ngIf=\"field.is_info\" class=\"mss-label-info\" placement=\"top\"\n [ngbTooltip]=\"field.info_txt\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <g clip-path=\"url(#clip0_617_5380)\">\n <path\n d=\"M8 0C6.41775 0 4.87104 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346629 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9977 5.87897 15.1541 3.84547 13.6543 2.34568C12.1545 0.845886 10.121 0.00229405 8 0V0ZM8 14.6667C6.68146 14.6667 5.39253 14.2757 4.2962 13.5431C3.19987 12.8106 2.34539 11.7694 1.84081 10.5512C1.33622 9.33305 1.2042 7.99261 1.46144 6.6994C1.71867 5.40619 2.35361 4.21831 3.28596 3.28596C4.21831 2.35361 5.4062 1.71867 6.6994 1.46143C7.99261 1.2042 9.33305 1.33622 10.5512 1.8408C11.7694 2.34539 12.8106 3.19987 13.5431 4.2962C14.2757 5.39253 14.6667 6.68146 14.6667 8C14.6647 9.76752 13.9617 11.4621 12.7119 12.7119C11.4621 13.9617 9.76752 14.6647 8 14.6667Z\"\n fill=\"#0B487F\" />\n <path\n d=\"M7.99983 6.66699H7.33317C7.15636 6.66699 6.98679 6.73723 6.86177 6.86225C6.73674 6.98728 6.6665 7.15685 6.6665 7.33366C6.6665 7.51047 6.73674 7.68004 6.86177 7.80506C6.98679 7.93009 7.15636 8.00033 7.33317 8.00033H7.99983V12.0003C7.99983 12.1771 8.07007 12.3467 8.1951 12.4717C8.32012 12.5968 8.48969 12.667 8.6665 12.667C8.84331 12.667 9.01288 12.5968 9.1379 12.4717C9.26293 12.3467 9.33317 12.1771 9.33317 12.0003V8.00033C9.33317 7.6467 9.19269 7.30757 8.94264 7.05752C8.69259 6.80747 8.35346 6.66699 7.99983 6.66699Z\"\n fill=\"#0B487F\" />\n <path\n d=\"M8 5.33301C8.55228 5.33301 9 4.88529 9 4.33301C9 3.78072 8.55228 3.33301 8 3.33301C7.44772 3.33301 7 3.78072 7 4.33301C7 4.88529 7.44772 5.33301 8 5.33301Z\"\n fill=\"#0B487F\" />\n </g>\n <defs>\n <clipPath id=\"clip0_617_5380\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button> </label>\n <input [type]=\"tempType\" [formControlName]=\"field.fieldName\"\n [ngClass]=\"{'is-invalid':formName.controls[field.fieldName]?.invalid && (formName.controls[field.fieldName]?.dirty || formName.controls[field.fieldName]?.touched)}\"\n [placeholder]=\"field.placeholder ? field.placeholder : ''\" [mask]=\"field.mask ? field.mask : ''\" />\n <ng-container *ngIf=\"field.type == 'password'\">\n <a class=\"password-eye\" (click)=\"tempType == 'password' ? tempType = 'text' : tempType = 'password'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M9.99978 13.75C8.02452 13.75 6.42556 12.2211 6.27843 10.2836L3.54666 8.17244C3.18754 8.62297 2.85707 9.09927 2.59041 9.6201C2.53083 9.73794 2.4998 9.86814 2.4998 10.0002C2.4998 10.1322 2.53083 10.2624 2.59041 10.3803C4.00265 13.1357 6.79848 15 9.99978 15C10.7006 15 11.3766 14.8959 12.0282 14.7277L10.6769 13.6821C10.4537 13.7252 10.2271 13.7479 9.99978 13.75ZM18.1722 15.2631L15.2933 13.0381C16.1678 12.3011 16.887 11.3975 17.4092 10.38C17.4687 10.2622 17.4998 10.132 17.4998 9.99992C17.4998 9.86787 17.4687 9.73768 17.4092 9.61984C15.9969 6.86437 13.2011 5.00005 9.99978 5.00005C8.65903 5.00167 7.34005 5.33921 6.16332 5.98182L2.8503 3.42114C2.8071 3.38752 2.7577 3.36275 2.70491 3.34823C2.65213 3.33371 2.59701 3.32974 2.54269 3.33654C2.48837 3.34333 2.43593 3.36076 2.38835 3.38784C2.34077 3.41491 2.29899 3.45109 2.26541 3.49432L1.75421 4.15239C1.6864 4.23963 1.65601 4.35023 1.66973 4.45986C1.68345 4.5695 1.74016 4.6692 1.82739 4.73703L17.1493 16.579C17.1925 16.6126 17.2419 16.6373 17.2946 16.6519C17.3474 16.6664 17.4026 16.6704 17.4569 16.6636C17.5112 16.6568 17.5636 16.6393 17.6112 16.6123C17.6588 16.5852 17.7006 16.549 17.7342 16.5058L18.2456 15.8477C18.3134 15.7604 18.3437 15.6498 18.33 15.5402C18.3162 15.4305 18.2594 15.3309 18.1722 15.2631ZM13.3878 11.5652L12.3644 10.774C12.4506 10.5249 12.4963 10.2636 12.4998 10C12.5049 9.61418 12.4194 9.2325 12.2502 8.88566C12.081 8.53882 11.8328 8.2365 11.5256 8.00297C11.2184 7.76944 10.8607 7.61122 10.4812 7.54102C10.1017 7.47082 9.7111 7.49059 9.34067 7.59875C9.4977 7.81153 9.58265 8.06892 9.58311 8.33338C9.57923 8.42138 9.56578 8.5087 9.54301 8.5938L7.62608 7.11229C8.29196 6.55583 9.132 6.25069 9.99978 6.25005C10.4923 6.24977 10.9801 6.34658 11.4352 6.53494C11.8903 6.7233 12.3038 6.99951 12.652 7.34779C13.0003 7.69606 13.2765 8.10957 13.4649 8.56466C13.6532 9.01976 13.7501 9.50751 13.7498 10C13.7498 10.5633 13.612 11.0883 13.3878 11.5654V11.5652Z\"\n fill=\"#9FA2B4\" />\n </svg>\n </a>\n </ng-container>\n </div>\n</form>", styles: [".password-eye{position:absolute}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i4.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicInputComponent, decorators: [{
type: Component,
args: [{ selector: "app-dynamic-input", changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"formName\">\n <div class=\"form-group\" [ngClass]=\"getFieldClassname()\">\n <label>{{field.label}} :\n <button *ngIf=\"field.is_info\" class=\"mss-label-info\" placement=\"top\"\n [ngbTooltip]=\"field.info_txt\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <g clip-path=\"url(#clip0_617_5380)\">\n <path\n d=\"M8 0C6.41775 0 4.87104 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346629 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9977 5.87897 15.1541 3.84547 13.6543 2.34568C12.1545 0.845886 10.121 0.00229405 8 0V0ZM8 14.6667C6.68146 14.6667 5.39253 14.2757 4.2962 13.5431C3.19987 12.8106 2.34539 11.7694 1.84081 10.5512C1.33622 9.33305 1.2042 7.99261 1.46144 6.6994C1.71867 5.40619 2.35361 4.21831 3.28596 3.28596C4.21831 2.35361 5.4062 1.71867 6.6994 1.46143C7.99261 1.2042 9.33305 1.33622 10.5512 1.8408C11.7694 2.34539 12.8106 3.19987 13.5431 4.2962C14.2757 5.39253 14.6667 6.68146 14.6667 8C14.6647 9.76752 13.9617 11.4621 12.7119 12.7119C11.4621 13.9617 9.76752 14.6647 8 14.6667Z\"\n fill=\"#0B487F\" />\n <path\n d=\"M7.99983 6.66699H7.33317C7.15636 6.66699 6.98679 6.73723 6.86177 6.86225C6.73674 6.98728 6.6665 7.15685 6.6665 7.33366C6.6665 7.51047 6.73674 7.68004 6.86177 7.80506C6.98679 7.93009 7.15636 8.00033 7.33317 8.00033H7.99983V12.0003C7.99983 12.1771 8.07007 12.3467 8.1951 12.4717C8.32012 12.5968 8.48969 12.667 8.6665 12.667C8.84331 12.667 9.01288 12.5968 9.1379 12.4717C9.26293 12.3467 9.33317 12.1771 9.33317 12.0003V8.00033C9.33317 7.6467 9.19269 7.30757 8.94264 7.05752C8.69259 6.80747 8.35346 6.66699 7.99983 6.66699Z\"\n fill=\"#0B487F\" />\n <path\n d=\"M8 5.33301C8.55228 5.33301 9 4.88529 9 4.33301C9 3.78072 8.55228 3.33301 8 3.33301C7.44772 3.33301 7 3.78072 7 4.33301C7 4.88529 7.44772 5.33301 8 5.33301Z\"\n fill=\"#0B487F\" />\n </g>\n <defs>\n <clipPath id=\"clip0_617_5380\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button> </label>\n <input [type]=\"tempType\" [formControlName]=\"field.fieldName\"\n [ngClass]=\"{'is-invalid':formName.controls[field.fieldName]?.invalid && (formName.controls[field.fieldName]?.dirty || formName.controls[field.fieldName]?.touched)}\"\n [placeholder]=\"field.placeholder ? field.placeholder : ''\" [mask]=\"field.mask ? field.mask : ''\" />\n <ng-container *ngIf=\"field.type == 'password'\">\n <a class=\"password-eye\" (click)=\"tempType == 'password' ? tempType = 'text' : tempType = 'password'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M9.99978 13.75C8.02452 13.75 6.42556 12.2211 6.27843 10.2836L3.54666 8.17244C3.18754 8.62297 2.85707 9.09927 2.59041 9.6201C2.53083 9.73794 2.4998 9.86814 2.4998 10.0002C2.4998 10.1322 2.53083 10.2624 2.59041 10.3803C4.00265 13.1357 6.79848 15 9.99978 15C10.7006 15 11.3766 14.8959 12.0282 14.7277L10.6769 13.6821C10.4537 13.7252 10.2271 13.7479 9.99978 13.75ZM18.1722 15.2631L15.2933 13.0381C16.1678 12.3011 16.887 11.3975 17.4092 10.38C17.4687 10.2622 17.4998 10.132 17.4998 9.99992C17.4998 9.86787 17.4687 9.73768 17.4092 9.61984C15.9969 6.86437 13.2011 5.00005 9.99978 5.00005C8.65903 5.00167 7.34005 5.33921 6.16332 5.98182L2.8503 3.42114C2.8071 3.38752 2.7577 3.36275 2.70491 3.34823C2.65213 3.33371 2.59701 3.32974 2.54269 3.33654C2.48837 3.34333 2.43593 3.36076 2.38835 3.38784C2.34077 3.41491 2.29899 3.45109 2.26541 3.49432L1.75421 4.15239C1.6864 4.23963 1.65601 4.35023 1.66973 4.45986C1.68345 4.5695 1.74016 4.6692 1.82739 4.73703L17.1493 16.579C17.1925 16.6126 17.2419 16.6373 17.2946 16.6519C17.3474 16.6664 17.4026 16.6704 17.4569 16.6636C17.5112 16.6568 17.5636 16.6393 17.6112 16.6123C17.6588 16.5852 17.7006 16.549 17.7342 16.5058L18.2456 15.8477C18.3134 15.7604 18.3437 15.6498 18.33 15.5402C18.3162 15.4305 18.2594 15.3309 18.1722 15.2631ZM13.3878 11.5652L12.3644 10.774C12.4506 10.5249 12.4963 10.2636 12.4998 10C12.5049 9.61418 12.4194 9.2325 12.2502 8.88566C12.081 8.53882 11.8328 8.2365 11.5256 8.00297C11.2184 7.76944 10.8607 7.61122 10.4812 7.54102C10.1017 7.47082 9.7111 7.49059 9.34067 7.59875C9.4977 7.81153 9.58265 8.06892 9.58311 8.33338C9.57923 8.42138 9.56578 8.5087 9.54301 8.5938L7.62608 7.11229C8.29196 6.55583 9.132 6.25069 9.99978 6.25005C10.4923 6.24977 10.9801 6.34658 11.4352 6.53494C11.8903 6.7233 12.3038 6.99951 12.652 7.34779C13.0003 7.69606 13.2765 8.10957 13.4649 8.56466C13.6532 9.01976 13.7501 9.50751 13.7498 10C13.7498 10.5633 13.612 11.0883 13.3878 11.5654V11.5652Z\"\n fill=\"#9FA2B4\" />\n </svg>\n </a>\n </ng-container>\n </div>\n</form>", styles: [".password-eye{position:absolute}\n"] }]
}], ctorParameters: function () { return [{ type: i1.FormGroupDirective }]; }, propDecorators: { field: [{
type: Input
}] } });
class DynamicSelectComponent {
constructor(formgroupDirective) {
this.formgroupDirective = formgroupDirective;
this.formName = formgroupDirective.control;
}
}
DynamicSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicSelectComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
DynamicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DynamicSelectComponent, selector: "app-dynamic-select", inputs: { field: "field" }, ngImport: i0, template: "<form [formGroup]=\"formName\">\n <div class=\"form-group\">\n <label>{{field.label}}:</label>\n <select [formControlName]=\"field.fieldName\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\">\n {{option.label}}\n </option>\n </select>\n </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicSelectComponent, decorators: [{
type: Component,
args: [{ selector: "app-dynamic-select", template: "<form [formGroup]=\"formName\">\n <div class=\"form-group\">\n <label>{{field.label}}:</label>\n <select [formControlName]=\"field.fieldName\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\">\n {{option.label}}\n </option>\n </select>\n </div>\n</form>" }]
}], ctorParameters: function () { return [{ type: i1.FormGroupDirective }]; }, propDecorators: { field: [{
type: Input
}] } });
class DynamicRadioComponent {
constructor(formgroupDirective) {
this.formgroupDirective = formgroupDirective;
this.formName = formgroupDirective.control;
}
}
DynamicRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicRadioComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
DynamicRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DynamicRadioComponent, selector: "app-dynamic-radio", inputs: { field: "field" }, ngImport: i0, template: "<form [formGroup]=\"formName\">\n <h3>{{field.label}}</h3>\n <label *ngFor=\"let option of field.options\">\n <label ngFor=\"let option of field.options\">\n <input type=\"radio\"\n [name]=\"field.fieldName\"\n [formControlName]=\"field.fieldName\"\n [value]=\"option.value\"\n >\n {{option.label}}\n </label>\n </label>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicRadioComponent, decorators: [{
type: Component,
args: [{ selector: "app-dynamic-radio", template: "<form [formGroup]=\"formName\">\n <h3>{{field.label}}</h3>\n <label *ngFor=\"let option of field.options\">\n <label ngFor=\"let option of field.options\">\n <input type=\"radio\"\n [name]=\"field.fieldName\"\n [formControlName]=\"field.fieldName\"\n [value]=\"option.value\"\n >\n {{option.label}}\n </label>\n </label>\n</form>" }]
}], ctorParameters: function () { return [{ type: i1.FormGroupDirective }]; }, propDecorators: { field: [{
type: Input
}] } });
class DynamicCheckboxsComponent {
constructor(formgroupDirective) {
this.formgroupDirective = formgroupDirective;
this.formName = formgroupDirective.control;
}
}
DynamicCheckboxsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicCheckboxsComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
DynamicCheckboxsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DynamicCheckboxsComponent, selector: "app-dynamic-checkboxs", inputs: { field: "field" }, ngImport: i0, template: "<form [formGroup]=\"formName\">\n <div class=\"form-group\">\n <label>\n {{ field.label }}\n <input type=\"checkbox\" [name]=\"field.fieldName\" [formControlName]=\"field.fieldName\" [value]=\"field.value\" />\n </label>\n </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicCheckboxsComponent, decorators: [{
type: Component,
args: [{ selector: "app-dynamic-checkboxs", template: "<form [formGroup]=\"formName\">\n <div class=\"form-group\">\n <label>\n {{ field.label }}\n <input type=\"checkbox\" [name]=\"field.fieldName\" [formControlName]=\"field.fieldName\" [value]=\"field.value\" />\n </label>\n </div>\n</form>" }]
}], ctorParameters: function () { return [{ type: i1.FormGroupDirective }]; }, propDecorators: { field: [{
type: Input
}] } });
var DynamicFormTypes;
(function (DynamicFormTypes) {
DynamicFormTypes["TEXT"] = "text";
DynamicFormTypes["NUMBER"] = "number";
DynamicFormTypes["PHONE"] = "tel";
DynamicFormTypes["EMAIL"] = "email";
DynamicFormTypes["PASSWORD"] = "password";
DynamicFormTypes["SELECT"] = "select";
DynamicFormTypes["DATE"] = "date";
DynamicFormTypes["RADIO"] = "radio";
DynamicFormTypes["CHECKBOX"] = "checkbox";
})(DynamicFormTypes || (DynamicFormTypes = {}));
class DynamicFieldComponent {
constructor(formgroupDirective, cd) {
this.formgroupDirective = formgroupDirective;
this.cd = cd;
this.supportedDynamicComponents = [
{
name: DynamicFormTypes.TEXT,
component: DynamicInputComponent
},
{
name: DynamicFormTypes.NUMBER,
component: DynamicInputComponent
},
{
name: DynamicFormTypes.PHONE,
component: DynamicInputComponent
},
{
name: DynamicFormTypes.SELECT,
component: DynamicSelectComponent
},
{
name: DynamicFormTypes.RADIO,
component: DynamicRadioComponent
},
{
name: DynamicFormTypes.DATE,
component: DynamicInputComponent
},
{
name: DynamicFormTypes.CHECKBOX,
component: DynamicCheckboxsComponent
}
];
}
ngOnChanges() {
console.log({ DynamicFieldComponent: this.field });
if (this.dynamicInputContainer && this.field)
this.registerDynamicField();
}
ngAfterViewInit() {
this.registerDynamicField();
}
registerDynamicField() {
this.dynamicInputContainer.clear();
const componentInstance = this.getComponentByType(this.field.type);
const dynamicComponent = this.dynamicInputContainer.createComponent(componentInstance);
dynamicComponent.setInput('field', this.field);
this.cd.detectChanges();
}
getComponentByType(type) {
let componentDynamic = this.supportedDynamicComponents.find(c => c.name === type);
return (componentDynamic === null || componentDynamic === void 0 ? void 0 : componentDynamic.component) || DynamicInputComponent;
}
}
DynamicFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicFieldComponent, deps: [{ token: i1.FormGroupDirective }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
DynamicFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DynamicFieldComponent, selector: "app-field-input", inputs: { field: "field" }, viewQueries: [{ propertyName: "dynamicInputContainer", first: true, predicate: ["dynamicInputContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container #dynamicInputContainer>\n</ng-container>", styles: [""] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicFieldComponent, decorators: [{
type: Component,
args: [{ selector: 'app-field-input', template: "<ng-container #dynamicInputContainer>\n</ng-container>" }]
}], ctorParameters: function () { return [{ type: i1.FormGroupDirective }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dynamicInputContainer: [{
type: ViewChild,
args: ['dynamicInputContainer', { read: ViewContainerRef }]
}], field: [{
type: Input
}] } });
class DynamicErrorComponent {
constructor(formgroupDirective) {
this.formgroupDirective = formgroupDirective;
}
ngOnInit() {
this.formName = this.formgroupDirective.control;
}
get f() {
return this.formName.controls;
}
}
DynamicErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicErrorComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
DynamicErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DynamicErrorComponent, selector: "app-dynamic-error", inputs: { field: "field" }, ngImport: i0, template: "<div *ngIf=\"formName.controls[field.fieldName]?.invalid && (formName.controls[field.fieldName]?.dirty || formName.controls[field.fieldName]?.touched)\"\n class=\"invalid-feedback d-block text-danger\">\n <div *ngIf=\"formName.controls[field.fieldName]?.errors.required\">\n * {{field.label}} est requis\n </div>\n <div *ngIf=\"formName.controls[field.fieldName]?.errors.email\">\n * {{field.label}} doit \u00E9tre un email valide!\n </div>\n <div *ngIf=\"formName.controls[field.fieldName]?.errors.minlength\">\n * {{field.label}} doit contenir {{formName.controls[field.fieldName].errors.minlength.requiredLength}}\n caract\u00E9res!\n </div>\n <div *ngIf=\"formName.controls[field.fieldName]?.errors.pattern\">\n * Format incorrect\n </div>\n <div *ngIf=\"formName.controls[field.fieldName]?.errors.mask\">\n * Format incorrect\n </div>\n <div *ngIf=\"formName.controls[field.fieldName]?.errors.min || formName.controls[field.fieldName]?.errors.max\">\n * Montant invalide\n </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicErrorComponent, decorators: [{
type: Component,
args: [{ selector: "app-dynamic-error", template: "<div *ngIf=\"formName.controls[field.fieldName]?.invalid && (formName.controls[field.fieldName]?.dirty || formName.controls[field.fieldName]?.touched)\"\n class=\"invalid-feedback d-block text-danger\">\n <div *ngIf=\"formName.controls[field.fieldName]?.errors.required\">\n * {{field.label}} est requis\n </div>\n <div *ngIf=\"formName.controls[field.fieldName]?.errors.email\">\n * {{field.label}} doit \u00E9tre un email valide!\n </div>\n <div *ngIf=\"formName.controls[field.fieldName]?.errors.minlength\">\n * {{field.label}} doit contenir {{formName.controls[field.fieldName].errors.minlength.requiredLength}}\n caract\u00E9res!\n </div>\n <div *ngIf=\"formName.controls[field.fieldName]?.errors.pattern\">\n * Format incorrect\n </div>\n <div *ngIf=\"formName.controls[field.fieldName]?.errors.mask\">\n * Format incorrect\n </div>\n <div *ngIf=\"formName.controls[field.fieldName]?.errors.min || formName.controls[field.fieldName]?.errors.max\">\n * Montant invalide\n </div>\n</div>" }]
}], ctorParameters: function () { return [{ type: i1.FormGroupDirective }]; }, propDecorators: { field: [{
type: Input
}] } });
class MssFormsComponent {
constructor(_fb) {
this._fb = _fb;
this.isLoading = false;
this.onSubmit = new EventEmitter();
this.fields = [];
}
ngOnInit() {
// this.buildForm();
}
ngOnChanges(changes) {
this.fields = [];
this.buildForm();
}
buildForm() {
const formGroupFields = this.getFormControlsFields();
// if (!this.dynamicFormGroup) {
this.dynamicFormGroup = new FormGroup(formGroupFields);
// } else {
// this.getNewFormControlsFields()
// }
}
getFormControlsFields() {
const formGroupFields = {};
for (const field of Object.keys(this.model)) {
const fieldProps = this.model[field];
const validators = this.addValidator(fieldProps.rules);
formGroupFields[field] = new FormControl(fieldProps.value, validators);
let index = this.fields.findIndex((f) => {
if (f.fieldName == field)
return true;
return false;
});
if (index === -1)
this.fields.push(Object.assign(Object.assign({}, fieldProps), { fieldName: field }));
}
return formGroupFields;
}
getNewFormControlsFields() {
Object.keys(this.model).map((model) => {
const fieldProps = this.model[model];
const validators = this.addValidator(fieldProps.rules);
if (!this.dynamicFormGroup['controls'][model])
this.dynamicFormGroup.addControl(model, this._fb.control(fieldProps.value, validators));
});
}
addValidator(rules) {
if (!rules) {
return [];
}
const validators = Object.keys(rules).map((rule, index) => {
switch (rule) {
case "required":
return Validators.required;
case "email":
return Validators.email;
case "minLength":
return Validators.minLength(Object.values(rules)[index]);
case "maxLength":
return Validators.maxLength(Object.values(rules)[index]);
case "pattern":
return Validators.pattern(Object.values(rules)[index]);
case "min":
return Validators.min(Object.values(rules)[index]);
case "max":
return Validators.max(Object.values(rules)[index]);
default:
return;
//add more case for future.
}
});
return validators;
}
getFieldClassname(field) {
var _a, _b, _c, _d, _e, _f, _g, _h;
return {
['col-lg-' + ((_a = field === null || field === void 0 ? void 0 : field.breakpoint) === null || _a === void 0 ? void 0 : _a.lg)]: (_b = field === null || field === void 0 ? void 0 : field.breakpoint) === null || _b === void 0 ? void 0 : _b.lg,
['col-md-' + ((_c = field === null || field === void 0 ? void 0 : field.breakpoint) === null || _c === void 0 ? void 0 : _c.md)]: (_d = field === null || field === void 0 ? void 0 : field.breakpoint) === null || _d === void 0 ? void 0 : _d.md,
['col-sm-' + ((_e = field === null || field === void 0 ? void 0 : field.breakpoint) === null || _e === void 0 ? void 0 : _e.sm)]: (_f = field === null || field === void 0 ? void 0 : field.breakpoint) === null || _f === void 0 ? void 0 : _f.sm,
['col-xs-' + ((_g = field === null || field === void 0 ? void 0 : field.breakpoint) === null || _g === void 0 ? void 0 : _g.xs)]: (_h = field === null || field === void 0 ? void 0 : field.breakpoint) === null || _h === void 0 ? void 0 : _h.xs
};
}
submit() {
this.onSubmit.emit(this.dynamicFormGroup);
}
resetForm() {
this.dynamicFormGroup.reset();
}
}
MssFormsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssFormsComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
MssFormsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MssFormsComponent, selector: "lib-mss-forms", inputs: { model: "model", isLoading: "isLoading", submitBtnOptions: "submitBtnOptions", error: "error" }, outputs: { onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"dynamicFormGroup\" (ngSubmit)=\"submit()\" (keyup.enter)=\"submit()\">\r\n <div class=\"row\">\r\n <div *ngFor=\"let field of fields\" class=\"col-12 custom-engine-field-container\"\r\n [ngClass]=\"getFieldClassname(field)\">\r\n <app-field-input [field]=\"field\"></app-field-input>\r\n <app-dynamic-error [field]=\"field\"></app-dynamic-error>\r\n </div>\r\n <div class=\"col-12\" [ngClass]=\"getFieldClassname(submitBtnOptions)\">\r\n <button type=\"submit\" [disabled]=\"isLoading || dynamicFormGroup.invalid\"\r\n class=\"w-100 d-flex align-items-center justify-content-center btn-primary\">\r\n <div *ngIf=\"isLoading\" class=\"spinner-border text-primary\"></div>\r\n <ng-container *ngIf=\"!isLoading\">{{submitBtnOptions?.content}}</ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n \r\n</form>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFieldComponent, selector: "app-field-input", inputs: ["field"] }, { kind: "component", type: DynamicErrorComponent, selector: "app-dynamic-error", inputs: ["field"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssFormsComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-mss-forms', template: "<form [formGroup]=\"dynamicFormGroup\" (ngSubmit)=\"submit()\" (keyup.enter)=\"submit()\">\r\n <div class=\"row\">\r\n <div *ngFor=\"let field of fields\" class=\"col-12 custom-engine-field-container\"\r\n [ngClass]=\"getFieldClassname(field)\">\r\n <app-field-input [field]=\"field\"></app-field-input>\r\n <app-dynamic-error [field]=\"field\"></app-dynamic-error>\r\n </div>\r\n <div class=\"col-12\" [ngClass]=\"getFieldClassname(submitBtnOptions)\">\r\n <button type=\"submit\" [disabled]=\"isLoading || dynamicFormGroup.invalid\"\r\n class=\"w-100 d-flex align-items-center justify-content-center btn-primary\">\r\n <div *ngIf=\"isLoading\" class=\"spinner-border text-primary\"></div>\r\n <ng-container *ngIf=\"!isLoading\">{{submitBtnOptions?.content}}</ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n \r\n</form>" }]
}], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { model: [{
type: Input
}], isLoading: [{
type: Input
}], submitBtnOptions: [{
type: Input
}], error: [{
type: Input
}], onSubmit: [{
type: Output
}] } });
class MssFormsModule {
}
MssFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
MssFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: MssFormsModule, declarations: [MssFormsComponent,
DynamicFieldComponent,
DynamicInputComponent,
DynamicSelectComponent,
DynamicRadioComponent,
DynamicCheckboxsComponent,
DynamicErrorComponent], imports: [CommonModule,
FormsModule,
ReactiveFormsModule,
NgbModule, i4.NgxMaskModule], exports: [MssFormsComponent] });
MssFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssFormsModule, imports: [CommonModule,
FormsModule,
ReactiveFormsModule,
NgbModule,
NgxMaskModule.forRoot()] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssFormsModule, decorators: [{
type: NgModule,
args: [{
declarations: [
MssFormsComponent,
DynamicFieldComponent,
DynamicInputComponent,
DynamicSelectComponent,
DynamicRadioComponent,
DynamicCheckboxsComponent,
DynamicErrorComponent
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
NgbModule,
NgxMaskModule.forRoot()
],
exports: [
MssFormsComponent
]
}]
}] });
class Breakpoint {
}
class FormModel {
}
/*
* Public API Surface of mss-forms
*/
/**
* Generated bundle index. Do not edit.
*/
export { Breakpoint, DynamicFormTypes, FormModel, MssFormsComponent, MssFormsModule, MssFormsService };
//# sourceMappingURL=mss-engine-forms.mjs.map