mss-engine-forms
Version:
A simple typehead library developed by MSS development team to be used for dynamic forms
277 lines (265 loc) • 68 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Directive, Input, HostListener, Component, ChangeDetectionStrategy, ViewContainerRef, ViewChild, Pipe, 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';
import * as i3$1 from '@ng-select/ng-select';
import { NgSelectModule } from '@ng-select/ng-select';
import * as i3$2 from '@angular-slider/ngx-slider';
import { NgxSliderModule } from '@angular-slider/ngx-slider';
import * as i3$3 from 'ng2-flatpickr';
import { Ng2FlatpickrModule } from 'ng2-flatpickr';
class MssFormsService {
constructor() { }
}
MssFormsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MssFormsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
MssFormsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MssFormsService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MssFormsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class ReplaceCommaByDotDirective {
constructor(el, control) {
this.el = el;
this.control = control;
this.replaceCommaByDot = false;
this.regex = new RegExp(/^\d+[.,]?\d{0,3}$/g);
}
onKeyDown(event) {
let e = event;
if (this.replaceCommaByDot) {
if (this.control?.value?.indexOf('.') != -1 && (e.keyCode == 188 || e.keyCode == 110)) {
e.preventDefault();
// return
}
if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode == 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode == 88 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39) ||
(e.keyCode >= 188)) {
// let it happen, don't do anything
return;
}
const current = this.el.nativeElement.value;
const position = this.el.nativeElement.selectionStart;
const next = [current.slice(0, position), event.key == 'Decimal' ? '.' : event.key, current.slice(position)].join('');
if (next && !String(next).match(this.regex)) {
event.preventDefault();
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
}
}
keyup() {
if (this.replaceCommaByDot && this.control.value)
this.control?.control?.setValue(this.control.value.replace(/,/g, '.'));
}
}
ReplaceCommaByDotDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReplaceCommaByDotDirective, deps: [{ token: i0.ElementRef }, { token: i1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
ReplaceCommaByDotDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ReplaceCommaByDotDirective, selector: "[replaceCommaByDot]", inputs: { replaceCommaByDot: "replaceCommaByDot" }, host: { listeners: { "keydown": "onKeyDown($event)", "input": "keyup($event)" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReplaceCommaByDotDirective, decorators: [{
type: Directive,
args: [{
selector: '[replaceCommaByDot]',
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.NgControl }]; }, propDecorators: { replaceCommaByDot: [{
type: Input
}], onKeyDown: [{
type: HostListener,
args: ['keydown', ['$event']]
}], keyup: [{
type: HostListener,
args: ['input', ['$event']]
}] } });
class DynamicInputComponent {
constructor(formgroupDirective) {
this.formgroupDirective = formgroupDirective;
this.tempType = "";
this.formName = formgroupDirective.control;
}
ngOnChanges() {
this.tempType = this.field?.isAmount ? 'text' : this.field.type;
}
getFieldClassname() {
return {
[this.field.customClass]: this.field?.customClass
};
}
}
DynamicInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicInputComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
DynamicInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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}} <span *ngIf=\"field?.rules?.required\" class=\"red-asterisk\">*</span>\n <button *ngIf=\"field.is_info\" class=\"mss-label-info\" placement=\"top\" [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\" [value]=\"field.value\"\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 [replaceCommaByDot]=\"field?.isAmount\" />\n <ng-container *ngIf=\"field.type == 'password'\">\n <a class=\"password-eye\" (click)=\"tempType == 'password' ? tempType = 'text' : tempType = 'password'\">\n <svg *ngIf=\"tempType == 'password'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\n 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 <svg *ngIf=\"tempType == 'text'\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:svgjs=\"http://svgjs.com/svgjs\" width=\"512\"\n height=\"512\" x=\"0\" y=\"0\" viewBox=\"0 0 487.55 487.55\" style=\"enable-background:new 0 0 512 512\"\n width=\"20\" height=\"20\" xml:space=\"preserve\" class=\"\">\n <g>\n <path\n d=\"M244.625 171.415c-40 0-72.4 32.4-72.4 72.4s32.4 72.4 72.4 72.4 72.4-32.4 72.4-72.4c-.1-40-32.5-72.4-72.4-72.4zm0 48.8c-13 0-23.6 10.6-23.6 23.6 0 6-4.8 10.8-10.8 10.8s-10.8-4.8-10.8-10.8c0-24.9 20.3-45.2 45.2-45.2 6 0 10.8 4.8 10.8 10.8 0 6-4.9 10.8-10.8 10.8z\"\n fill=\"#333\" data-original=\"#000000\" class=\"\" opacity=\"1\"></path>\n <path\n d=\"M481.325 227.515c-224.8-258.6-428-53.9-476.4 2.8-6.5 7.6-6.6 18.8-.1 26.4 221.9 259 423.4 64.6 476.5 3.7 8.3-9.4 8.3-23.4 0-32.9zm-236.7 119.1c-56.8 0-102.8-46-102.8-102.8s46-102.8 102.8-102.8 102.8 46 102.8 102.8-46.1 102.8-102.8 102.8z\"\n fill=\"#333\" data-original=\"#000000\" class=\"\" opacity=\"1\"></path>\n </g>\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", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i4.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: ReplaceCommaByDotDirective, selector: "[replaceCommaByDot]", inputs: ["replaceCommaByDot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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}} <span *ngIf=\"field?.rules?.required\" class=\"red-asterisk\">*</span>\n <button *ngIf=\"field.is_info\" class=\"mss-label-info\" placement=\"top\" [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\" [value]=\"field.value\"\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 [replaceCommaByDot]=\"field?.isAmount\" />\n <ng-container *ngIf=\"field.type == 'password'\">\n <a class=\"password-eye\" (click)=\"tempType == 'password' ? tempType = 'text' : tempType = 'password'\">\n <svg *ngIf=\"tempType == 'password'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\n 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 <svg *ngIf=\"tempType == 'text'\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:svgjs=\"http://svgjs.com/svgjs\" width=\"512\"\n height=\"512\" x=\"0\" y=\"0\" viewBox=\"0 0 487.55 487.55\" style=\"enable-background:new 0 0 512 512\"\n width=\"20\" height=\"20\" xml:space=\"preserve\" class=\"\">\n <g>\n <path\n d=\"M244.625 171.415c-40 0-72.4 32.4-72.4 72.4s32.4 72.4 72.4 72.4 72.4-32.4 72.4-72.4c-.1-40-32.5-72.4-72.4-72.4zm0 48.8c-13 0-23.6 10.6-23.6 23.6 0 6-4.8 10.8-10.8 10.8s-10.8-4.8-10.8-10.8c0-24.9 20.3-45.2 45.2-45.2 6 0 10.8 4.8 10.8 10.8 0 6-4.9 10.8-10.8 10.8z\"\n fill=\"#333\" data-original=\"#000000\" class=\"\" opacity=\"1\"></path>\n <path\n d=\"M481.325 227.515c-224.8-258.6-428-53.9-476.4 2.8-6.5 7.6-6.6 18.8-.1 26.4 221.9 259 423.4 64.6 476.5 3.7 8.3-9.4 8.3-23.4 0-32.9zm-236.7 119.1c-56.8 0-102.8-46-102.8-102.8s46-102.8 102.8-102.8 102.8 46 102.8 102.8-46.1 102.8-102.8 102.8z\"\n fill=\"#333\" data-original=\"#000000\" class=\"\" opacity=\"1\"></path>\n </g>\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: "15.2.10", ngImport: i0, type: DynamicSelectComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
DynamicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DynamicSelectComponent, selector: "app-dynamic-select", inputs: { field: "field" }, ngImport: i0, template: "<form [formGroup]=\"formName\">\n <div class=\"form-group\">\n <label>{{field.label}} <span *ngIf=\"field?.rules?.required\" class=\"red-asterisk\">*</span></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 <ng-select [items]=\"field.options\" bindLabel=\"label\" bindValue=\"value\" [formControlName]=\"field.fieldName\"\n [placeholder]=\"field.placeholder\">\n </ng-select>\n </div>\n</form>", styles: [""], dependencies: [{ 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.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: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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}} <span *ngIf=\"field?.rules?.required\" class=\"red-asterisk\">*</span></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 <ng-select [items]=\"field.options\" bindLabel=\"label\" bindValue=\"value\" [formControlName]=\"field.fieldName\"\n [placeholder]=\"field.placeholder\">\n </ng-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: "15.2.10", ngImport: i0, type: DynamicRadioComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
DynamicRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DynamicRadioComponent, selector: "app-dynamic-radio", inputs: { field: "field" }, ngImport: i0, template: "<form [formGroup]=\"formName\">\n <h3>{{field.label}} <span *ngIf=\"field?.rules?.required\" class=\"red-asterisk\">*</span></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: 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.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: "15.2.10", ngImport: i0, type: DynamicRadioComponent, decorators: [{
type: Component,
args: [{ selector: "app-dynamic-radio", template: "<form [formGroup]=\"formName\">\n <h3>{{field.label}} <span *ngIf=\"field?.rules?.required\" class=\"red-asterisk\">*</span></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: "15.2.10", ngImport: i0, type: DynamicCheckboxsComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
DynamicCheckboxsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", 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["TEXTAREA"] = "textarea";
DynamicFormTypes["SLIDER"] = "slider";
})(DynamicFormTypes || (DynamicFormTypes = {}));
class DynamicTextareaComponent {
constructor(formgroupDirective) {
this.formgroupDirective = formgroupDirective;
this.tempType = "";
this.formName = formgroupDirective.control;
}
ngOnChanges() {
console.log({ DynamicInputComponentField: this.field });
this.tempType = this.field.type;
}
getFieldClassname() {
return {
[this.field.customClass]: this.field?.customClass
};
}
}
DynamicTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicTextareaComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
DynamicTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DynamicTextareaComponent, selector: "app-dynamic-textarea", inputs: { field: "field" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formName\">\n <div class=\"form-group\" [ngClass]=\"getFieldClassname()\">\n <label>{{field.label}} <span *ngIf=\"field?.rules?.required\" class=\"red-asterisk\">*</span>\n <button *ngIf=\"field.is_info\" class=\"mss-label-info\" placement=\"top\" [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 <textarea name=\"field.fieldName\" [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 : ''\"></textarea>\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", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicTextareaComponent, decorators: [{
type: Component,
args: [{ selector: "app-dynamic-textarea", changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"formName\">\n <div class=\"form-group\" [ngClass]=\"getFieldClassname()\">\n <label>{{field.label}} <span *ngIf=\"field?.rules?.required\" class=\"red-asterisk\">*</span>\n <button *ngIf=\"field.is_info\" class=\"mss-label-info\" placement=\"top\" [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 <textarea name=\"field.fieldName\" [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 : ''\"></textarea>\n </div>\n</form>", styles: [".password-eye{position:absolute}\n"] }]
}], ctorParameters: function () { return [{ type: i1.FormGroupDirective }]; }, propDecorators: { field: [{
type: Input
}] } });
class DynamicSliderComponent {
constructor(formgroupDirective) {
this.formgroupDirective = formgroupDirective;
this.tempType = "";
this.formName = formgroupDirective.control;
}
ngOnChanges() {
console.log({ DynamicInputComponentField: this.field });
this.tempType = this.field.type;
}
getFieldClassname() {
return {
[this.field.customClass]: this.field?.customClass
};
}
}
DynamicSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicSliderComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
DynamicSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DynamicSliderComponent, selector: "app-dynamic-slider", inputs: { field: "field" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formName\">\n <div class=\"form-group\" [ngClass]=\"getFieldClassname()\">\n <label>{{field.label}} <span *ngIf=\"field?.rules?.required\" class=\"red-asterisk\">*</span></label>\n <ngx-slider [(value)]=\"field.sliderValue\" [(highValue)]=\"field.sliderHignValue\"\n [formControlName]=\"field.fieldName\" [options]=\"field.sliderOptions\"></ngx-slider>\n <p class=\"text-center mb-2\">\n De {{field.sliderValue}} Dinars - \u00E0 {{field.sliderHignValue}} Dinars\n </p>\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.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: "component", type: i3$2.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicSliderComponent, decorators: [{
type: Component,
args: [{ selector: "app-dynamic-slider", changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"formName\">\n <div class=\"form-group\" [ngClass]=\"getFieldClassname()\">\n <label>{{field.label}} <span *ngIf=\"field?.rules?.required\" class=\"red-asterisk\">*</span></label>\n <ngx-slider [(value)]=\"field.sliderValue\" [(highValue)]=\"field.sliderHignValue\"\n [formControlName]=\"field.fieldName\" [options]=\"field.sliderOptions\"></ngx-slider>\n <p class=\"text-center mb-2\">\n De {{field.sliderValue}} Dinars - \u00E0 {{field.sliderHignValue}} Dinars\n </p>\n </div>\n</form>", styles: [".password-eye{position:absolute}\n"] }]
}], ctorParameters: function () { return [{ type: i1.FormGroupDirective }]; }, propDecorators: { field: [{
type: Input
}] } });
class DynamicDateComponent {
constructor(formgroupDirective) {
this.formgroupDirective = formgroupDirective;
this.formName = formgroupDirective.control;
}
ngOnChanges() {
}
getFieldClassname() {
return {
[this.field.customClass]: this.field?.customClass
};
}
}
DynamicDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicDateComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
DynamicDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DynamicDateComponent, selector: "app-dynamic-date", inputs: { field: "field" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formName\">\n <div class=\"form-group\" [ngClass]=\"getFieldClassname()\">\n <label>{{field.label}} <span *ngIf=\"field?.rules?.required\" class=\"red-asterisk\">*</span>\n </label>\n <ng2-flatpickr [formControlName]=\"field.fieldName\" [config]=\"field.pickrOptions\"\n [placeholder]=\"field.placeholder\"></ng2-flatpickr>\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.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: "component", type: i3$3.Ng2FlatpickrComponent, selector: "ng2-flatpickr", inputs: ["placeholder", "addClass", "hideButton", "tabindex", "config", "setDate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicDateComponent, decorators: [{
type: Component,
args: [{ selector: "app-dynamic-date", changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"formName\">\n <div class=\"form-group\" [ngClass]=\"getFieldClassname()\">\n <label>{{field.label}} <span *ngIf=\"field?.rules?.required\" class=\"red-asterisk\">*</span>\n </label>\n <ng2-flatpickr [formControlName]=\"field.fieldName\" [config]=\"field.pickrOptions\"\n [placeholder]=\"field.placeholder\"></ng2-flatpickr>\n </div>\n</form>", styles: [".password-eye{position:absolute}\n"] }]
}], ctorParameters: function () { return [{ type: i1.FormGroupDirective }]; }, propDecorators: { field: [{
type: Input
}] } });
class DynamicFieldComponent {
constructor(formgroupDirective, cd) {
this.formgroupDirective = formgroupDirective;
this.cd = cd;
this.supportedDynamicComponents = [
{
name: DynamicFormTypes.TEXT,
component: DynamicInputComponent
},
{
name: DynamicFormTypes.TEXTAREA,
component: DynamicTextareaComponent
},
{
name: DynamicFormTypes.NUMBER,
component: DynamicInputComponent
},
{
name: DynamicFormTypes.PHONE,
component: DynamicInputComponent
},
{
name: DynamicFormTypes.SELECT,
component: DynamicSelectComponent
},
{
name: DynamicFormTypes.RADIO,
component: DynamicRadioComponent
},
{