mis-crystal-design-system 3.1.18 → 4.0.1

package/bundles/mis-crystal-design-system-switch.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../projects/mis-components/switch/switch.component.ts","../../../projects/mis-components/switch/switch.module.ts"],"names":["SwitchComponent","this","mobileView","formControl","FormControl","valueChanged","EventEmitter","Object","defineProperty","prototype","value","setValue","disable","enable","ngOnInit","onChange","event","emit","Component","args","selector","template","Input","Output","SwitchModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","ReactiveFormsModule","exports"],"mappings":"2iBAsBE,SAAAA,IAbSC,KAAAC,YAAsB,EAQtBD,KAAAE,YAA+B,IAAIC,EAAAA,aAAY,GAG9CH,KAAAI,aAAe,IAAIC,EAAAA,oBAV7BC,OAAAC,eAAaR,EAAAS,UAAA,UAAO,KAApB,SAAqBC,GACnBT,KAAKE,YAAYQ,SAASD,oCAE5BH,OAAAC,eAAaR,EAAAS,UAAA,WAAQ,KAArB,SAAsBC,GAChBA,EAAOT,KAAKE,YAAYS,UACvBX,KAAKE,YAAYU,0CAQxBb,EAAAS,UAAAK,SAAA,aACAd,EAAAS,UAAAM,SAAA,SAASC,GACPf,KAAKI,aAAaY,KAAKhB,KAAKE,YAAYO,iCAtB3CQ,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,aACVC,SAAA,8mDAICC,EAAAA,uBACAA,EAAAA,wBAGAA,EAAAA,2BAIAA,EAAAA,4BAGAC,EAAAA,2BCTH,SAAAC,YACSA,EAAAC,QAAP,WACE,MAAO,CAAEC,SAAUF,EAAcG,UAAW,8BAP/CC,EAAAA,SAAQT,KAAA,CAAC,CACRU,aAAc,CAAC7B,GACf8B,QAAS,CAACC,EAAAA,aAAcC,EAAAA,qBACxBC,QAAS,CAACjC","sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter } from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\n\n@Component({\n  selector: \"mis-switch\",\n  templateUrl: \"./switch.component.html\",\n  styleUrls: [\"./switch.component.scss\"]\n})\nexport class SwitchComponent implements OnInit {\n  @Input() mobileView: boolean = false;\n  @Input() set checked(value: boolean) {\n    this.formControl.setValue(value);\n  }\n  @Input() set disabled(value: boolean) {\n    if (value) this.formControl.disable();\n    else this.formControl.enable();\n  }\n  @Input() formControl: AbstractControl = new FormControl(false);\n\n  /** Emits value when toggled */\n  @Output() valueChanged = new EventEmitter<boolean>();\n\n  constructor() {}\n  ngOnInit() {}\n  onChange(event) {\n    this.valueChanged.emit(this.formControl.value);\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { SwitchComponent } from \"./switch.component\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n@NgModule({\n  declarations: [SwitchComponent],\n  imports: [CommonModule, ReactiveFormsModule],\n  exports: [SwitchComponent]\n})\nexport class SwitchModule {\n  static forRoot(): ModuleWithProviders<SwitchModule> {\n    return { ngModule: SwitchModule, providers: [] };\n  }\n}\n"]}
+{"version":3,"sources":["../../../projects/mis-components/switch/switch.component.ts","../../../projects/mis-components/switch/switch.module.ts"],"names":["SwitchComponent","this","mobileView","control","FormControl","valueChanged","EventEmitter","Object","defineProperty","prototype","value","setValue","disable","enable","ngOnInit","onChange","event","emit","Component","args","selector","template","Input","Output","SwitchModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","ReactiveFormsModule","exports"],"mappings":"2iBAsBE,SAAAA,IAbSC,KAAAC,YAAsB,EAQtBD,KAAAE,QAA2B,IAAIC,EAAAA,aAAY,GAG1CH,KAAAI,aAAe,IAAIC,EAAAA,oBAV7BC,OAAAC,eAAaR,EAAAS,UAAA,UAAO,KAApB,SAAqBC,GACnBT,KAAKE,QAAQQ,SAASD,oCAExBH,OAAAC,eAAaR,EAAAS,UAAA,WAAQ,KAArB,SAAsBC,GAChBA,EAAOT,KAAKE,QAAQS,UACnBX,KAAKE,QAAQU,0CAQpBb,EAAAS,UAAAK,SAAA,aACAd,EAAAS,UAAAM,SAAA,SAASC,GACPf,KAAKI,aAAaY,KAAKhB,KAAKE,QAAQO,iCAtBvCQ,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,aACVC,SAAA,0mDAICC,EAAAA,uBACAA,EAAAA,wBAGAA,EAAAA,uBAIAA,EAAAA,4BAGAC,EAAAA,2BCTH,SAAAC,YACSA,EAAAC,QAAP,WACE,MAAO,CAAEC,SAAUF,EAAcG,UAAW,8BAP/CC,EAAAA,SAAQT,KAAA,CAAC,CACRU,aAAc,CAAC7B,GACf8B,QAAS,CAACC,EAAAA,aAAcC,EAAAA,qBACxBC,QAAS,CAACjC","sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter } from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\n\n@Component({\n  selector: \"mis-switch\",\n  templateUrl: \"./switch.component.html\",\n  styleUrls: [\"./switch.component.scss\"]\n})\nexport class SwitchComponent implements OnInit {\n  @Input() mobileView: boolean = false;\n  @Input() set checked(value: boolean) {\n    this.control.setValue(value);\n  }\n  @Input() set disabled(value: boolean) {\n    if (value) this.control.disable();\n    else this.control.enable();\n  }\n  @Input() control: AbstractControl = new FormControl(false);\n\n  /** Emits value when toggled */\n  @Output() valueChanged = new EventEmitter<boolean>();\n\n  constructor() {}\n  ngOnInit() {}\n  onChange(event) {\n    this.valueChanged.emit(this.control.value);\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { SwitchComponent } from \"./switch.component\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n@NgModule({\n  declarations: [SwitchComponent],\n  imports: [CommonModule, ReactiveFormsModule],\n  exports: [SwitchComponent]\n})\nexport class SwitchModule {\n  static forRoot(): ModuleWithProviders<SwitchModule> {\n    return { ngModule: SwitchModule, providers: [] };\n  }\n}\n"]}

package/dynamic-form/dynamic-form.component.d.ts

@@ -1,14 +1,15 @@
-import { EventEmitter, OnInit } from "@angular/core";
-import { NsDynamicFields } from "./dynamic-form.namespace";
+import { EventEmitter, OnDestroy, OnInit } from "@angular/core";
+import { NsDynamicForm } from "./dynamic-form.namespace";
+import { FormArray, FormControl, FormGroup, ValidatorFn } from "@angular/forms";
 import "moment-timezone";
-import { FormArray, FormGroup } from "@angular/forms";
-export declare class DynamicFormComponent implements OnInit {
+import { Subscription } from "rxjs";
+export declare class DynamicFormComponent implements OnInit, OnDestroy {
     /**
      * formFields:  Dynamic fields recieved from the API metadata to build a dynamic form
      * formValues:  Holds the value of the dynamic form with "key" being dynamic field "title"
      *              and value being the user input.
      */
-    formFields: Array<NsDynamicFields.IField>;
+    formFields: Array<NsDynamicForm.IDynamicField>;
     formValues: {
         [key: string]: any;
     };
@@ -24,21 +25,42 @@ export declare class DynamicFormComponent implements OnInit {
     formUpdated: EventEmitter<{
         [key: string]: any;
     }>;
-    initializedDynamicForm: EventEmitter<any>;
-    dynamicFieldsAPI: NsDynamicFields.IDynamicFormAPI;
+    /**
+     * formValid: Emits boolean depending on validity of the form
+     */
+    formValid: EventEmitter<boolean>;
+    /**
+     * formInitialized: Emits dynamic form API on form initilization
+     */
+    formInitialized: EventEmitter<any>;
+    dynamicFormAPI: NsDynamicForm.IDynamicFormAPI;
+    valueChangesSubscription$: Subscription;
     constructor();
     ngOnInit(): void;
+    ngOnDestroy(): void;
+    onFormValueChanges(): void;
     generateDynamicFieldsValueObject(formValues: Array<any>): {
         [key: string]: any;
     };
-    setupFormControls: () => void;
+    generateDynamicForm(formFields: Array<NsDynamicForm.IDynamicField>, formValues: {
+        [key: string]: any;
+    }): FormGroup;
     getDynamicFieldsControls(): FormArray;
-    updateSelectedValueForField(index: number, value: any): void;
-    updateSelectedValueForMultiSelect(index: number, values: Array<any>): void;
+    updateSubDynamicFields(field: NsDynamicForm.IDynamicField, formGroup: FormGroup, value: any): void;
+    updateSelectedValueForSingleSelect(field: NsDynamicForm.IDynamicField, control: FormControl, formGroup: FormGroup, value: any): void;
+    updateSelectedValueForMultiSelect(field: NsDynamicForm.IDynamicField, control: FormControl, formGroup: FormGroup, values: Array<any>): void;
     isCheckBoxSelected(value: string, selectedValues: Array<{
         label: string;
         value: string;
     }>): boolean;
-    mapFormValueToFormField(formField: NsDynamicFields.IField, formValue: any): any;
-    mapFormFieldToFormValue(formField: NsDynamicFields.IField, formValue: any): any;
+    generateSubDynamicFields(formValues: any, parentField: NsDynamicForm.IDynamicField, parentValue: Array<{
+        label: string;
+        value: string | number;
+    }> | {
+        label: string;
+        value: string;
+    } | string | number | boolean): FormArray;
+    mapFormValueToFormField(formField: NsDynamicForm.IDynamicField, formValue: any): any;
+    mapFormFieldToFormValue(formField: NsDynamicForm.IDynamicField, formValue: any): any;
 }
+export declare const dynamicFieldValidator: (validators: Array<NsDynamicForm.IDynamicFieldValidator>) => ValidatorFn;

package/dynamic-form/dynamic-form.namespace.d.ts

@@ -1,5 +1,5 @@
-export declare namespace NsDynamicFields {
-    interface IField {
+export declare namespace NsDynamicForm {
+    interface IDynamicField {
         fieldType: "input" | "boolean" | "singleSelect" | "multiSelect";
         fieldInputType: "text" | "number" | "textarea" | "toggle" | "checkbox" | "dropdown" | "radio" | "date";
         fieldConfig?: any;
@@ -8,12 +8,24 @@ export declare namespace NsDynamicFields {
         subFieldValue?: boolean;
         configName: string;
         parentConfigName?: string;
+        parentConfigValue?: string;
         backedFieldType: any;
         minVal?: number;
         maxVal?: number;
-        itemsList?: Array<any>;
+        validators?: Array<IDynamicFieldValidator>;
+        subFields?: Array<IDynamicField>;
+        itemsList?: Array<{
+            label: string | number;
+            value: any;
+        }>;
         placeholderText?: string;
     }
+    interface IDynamicFieldValidator {
+        message: string;
+        type: TFormValidator;
+        value?: string | number;
+    }
+    type TFormValidator = "Required" | "MinLength" | "MaxLength" | "Email" | "Custom";
     interface IDynamicFormAPI {
         defaultFormValues(): {};
     }

package/dynamic-form/mis-crystal-design-system-dynamic-form.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"DynamicFormModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DynamicFormComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/cdk-experimental/scrolling","name":"ScrollingModule","line":19,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/dropdown","name":"DropdownModule","line":20,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/switch","name":"SwitchModule","line":21,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/multi-select-dropdown","name":"MultiSelectDropdownModule","line":22,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/datepicker_v2","name":"DatepickerModuleV2","line":23,"character":4}],"exports":[{"__symbolic":"reference","name":"DynamicFormComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"DynamicFormModule"},"providers":[]}}}},"DynamicFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"mis-dynamic-form","template":"<form [formGroup]=\"dynamicForm\">\n  <ng-container formArrayName=\"dynamicFields\">\n    <ng-container *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n      <div\n        class=\"dynamic-field multi-line-field-container\"\n        *ngIf=\"formFields[i].fieldType === 'input' && (formFields[i].fieldInputType === 'text' || formFields[i].fieldInputType === 'number')\"\n      >\n        <p class=\"h7 field-title-sm\">\n          {{ formFields[i].title }}\n        </p>\n        <div style=\"flex-basis: 100%\"></div>\n        <input\n          class=\"input-field ip-text\"\n          [type]=\"formFields[i].fieldInputType\"\n          [formControl]=\"fieldControl\"\n          [placeholder]=\"formFields[i].placeholderText ? formFields[i].placeholderText : 'Input Text'\"\n        />\n      </div>\n      <div\n        class=\"dynamic-field single-line-field-container\"\n        *ngIf=\"formFields[i].fieldType === 'singleSelect' && formFields[i].fieldInputType === 'dropdown'\"\n      >\n        <p class=\"h6\">\n          {{ formFields[i].title }}\n        </p>\n        <mis-dropdown\n          [searchEnabled]=\"false\"\n          [width]=\"'140px'\"\n          [data]=\"formFields[i].itemsList\"\n          [selectedItem]=\"fieldControl.value\"\n          (onChange)=\"updateSelectedValueForField(i, $event)\"\n        >\n        </mis-dropdown>\n      </div>\n      <div\n        class=\"dynamic-field single-line-field-container\"\n        *ngIf=\"formFields[i].fieldType === 'boolean' && formFields[i].fieldInputType === 'toggle'\"\n      >\n        <p class=\"h6\">\n          {{ formFields[i].title }}\n        </p>\n        <mis-switch [formControl]=\"fieldControl\"></mis-switch>\n      </div>\n      <div\n        class=\"dynamic-field multi-line-field-container\"\n        *ngIf=\"formFields[i].fieldType === 'input' && formFields[i].fieldInputType === 'textarea'\"\n      >\n        <p class=\"h7 field-title-sm\">\n          {{ formFields[i].title }}\n        </p>\n        <div style=\"flex-basis: 100%\"></div>\n        <textarea\n          class=\"input-field ip-textarea\"\n          type=\"text\"\n          [placeholder]=\"formFields[i].placeholderText ? formFields[i].placeholderText : 'Input Text'\"\n          [formControl]=\"fieldControl\"\n        ></textarea>\n      </div>\n      <div class=\"dynamic-field single-line-field-container\" *ngIf=\"formFields[i].fieldType === 'input' && formFields[i].fieldInputType === 'date'\">\n        <p class=\"h6\">\n          {{ formFields[i].title }}\n        </p>\n        <div class=\"date-picker-container\">\n          <input\n            class=\"date-picker\"\n            readonly\n            misTzDp\n            [dpConfig]=\"formFields[i].fieldConfig\"\n            (dateChange)=\"updateSelectedValueForField(i, $event)\"\n            [selectedDate]=\"fieldControl.value\"\n            [offsetY]=\"0\"\n            [value]=\"fieldControl.value\"\n            #dp\n          />\n          <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\" (click)=\"dp.click()\" />\n        </div>\n      </div>\n      <div\n        class=\"dynamic-field multi-line-field-container\"\n        *ngIf=\"formFields[i].fieldType === 'multiSelect' && formFields[i].fieldInputType === 'checkbox'\"\n      >\n        <p class=\"h7 field-title-sm\">\n          {{ formFields[i].title }}\n        </p>\n        <div style=\"flex-basis: 100%\"></div>\n        <div id=\"checkboxes-container\">\n          <div\n            class=\"radio-checkbox-common\"\n            *ngFor=\"let item of formFields[i].itemsList\"\n            [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, fieldControl.value) }\"\n            (click)=\"updateSelectedValueForMultiSelect(i, [item])\"\n          >\n            <img *ngIf=\"isCheckBoxSelected(item.label, fieldControl.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n            <p class=\"h6\">{{ item.label }}</p>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"dynamic-field single-line-field-container\"\n        *ngIf=\"formFields[i].fieldType === 'multiSelect' && formFields[i].fieldInputType === 'dropdown'\"\n      >\n        <p class=\"h6\">\n          {{ formFields[i].title }}\n        </p>\n        <mis-multi-select-dropdown\n          [width]=\"'140px'\"\n          [showSelectedCount]=\"true\"\n          [dropdownListWidth]=\"'256px'\"\n          [searchEnabled]=\"false\"\n          [hideApplyButton]=\"true\"\n          [data]=\"formFields[i].itemsList\"\n          [selectedItems]=\"fieldControl.value\"\n          (onChange)=\"fieldControl.setValue($event)\"\n        ></mis-multi-select-dropdown>\n      </div>\n    </ng-container>\n  </ng-container>\n</form>\n","styles":["p{margin:0}::ng-deep .main-container{margin:0;max-width:100%}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{justify-content:space-between;align-items:center}.multi-line-field-container,.single-line-field-container{display:flex;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}.field-title-sm{margin-bottom:8px}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::-moz-placeholder{color:var(--grey-seperators)}input:-ms-input-placeholder{color:var(--grey-seperators)}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted)}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}"]}]}],"members":{"formFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"formValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"activeBtnIconUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"calendarIconUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"formUpdated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":3}}]}],"initializedDynamicForm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":30,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"generateDynamicFieldsValueObject":[{"__symbolic":"method"}],"getDynamicFieldsControls":[{"__symbolic":"method"}],"updateSelectedValueForField":[{"__symbolic":"method"}],"updateSelectedValueForMultiSelect":[{"__symbolic":"method"}],"isCheckBoxSelected":[{"__symbolic":"method"}],"mapFormValueToFormField":[{"__symbolic":"method"}],"mapFormFieldToFormValue":[{"__symbolic":"method"}]}}},"origins":{"DynamicFormModule":"./dynamic-form.module","DynamicFormComponent":"./dynamic-form.component"},"importAs":"mis-crystal-design-system/dynamic-form"}
+{"__symbolic":"module","version":4,"metadata":{"DynamicFormModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DynamicFormComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/cdk-experimental/scrolling","name":"ScrollingModule","line":19,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/dropdown","name":"DropdownModule","line":20,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/switch","name":"SwitchModule","line":21,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/multi-select-dropdown","name":"MultiSelectDropdownModule","line":22,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/datepicker_v2","name":"DatepickerModuleV2","line":23,"character":4}],"exports":[{"__symbolic":"reference","name":"DynamicFormComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"DynamicFormModule"},"providers":[]}}}},"DynamicFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"mis-dynamic-form","template":"<form [formGroup]=\"dynamicForm\">\n  <ng-container formArrayName=\"dynamicFields\">\n    <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n      <ng-container\n        [ngTemplateOutlet]=\"dynamicField\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: formFields[i],\n          formGroup: fieldControl,\n          control: fieldControl.controls.value\n        }\"\n      >\n        <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && formFields[i]?.subFields?.length > 0\">\n          <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls; let j = index\">\n            <ng-container\n              [ngTemplateOutlet]=\"dynamicField\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: formFields[i].subFields[j],\n                control: subFieldControl\n              }\">\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</form>\n\n\n<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n  <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <input class=\"input-field ip-text\" [type]=\"field.fieldInputType\" [formControl]=\"control\"\n      (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"\n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" />\n    <ng-container *ngIf=\"control.touched && control.errors\"\n      [ngTemplateOutlet]=\"dynamicFieldErrors\" \n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\"\n    >\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <textarea class=\"input-field ip-textarea\" type=\"text\"\n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" [formControl]=\"control\" (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"></textarea>\n      <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n        [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n      </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'date' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <div class=\"date-picker-container\">\n      <input class=\"date-picker\" readonly misTzDp [dpConfig]=\"field.fieldConfig\"\n        (dateChange)=\"control.setValue($event)\" [selectedDate]=\"control.value\" [offsetY]=\"0\"\n        [value]=\"control.value\" #dp />\n      <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\"\n        (click)=\"dp.click()\" />\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-switch [control]=\"control\" (valueChanged)=\"updateSubDynamicFields(field, formgroup, $event)\"></mis-switch>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-dropdown [searchEnabled]=\"false\" [width]=\"'140px'\" [data]=\"field.itemsList\" [selectedItem]=\"control.value\"\n      (onChange)=\"updateSelectedValueForSingleSelect(field, control, formgroup, $event);\">\n    </mis-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': item.label === control.value?.label }\"\n        (click)=\"updateSelectedValueForSingleSelect(field, control, formgroup, item);\">\n        <img *ngIf=\"(item.label === control.value?.label) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, control.value) }\"\n        (click)=\"updateSelectedValueForMultiSelect(field, control, formgroup, [item])\">\n        <img *ngIf=\"isCheckBoxSelected(item.label, control.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\"\n          alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-multi-select-dropdown [width]=\"'140px'\" [showSelectedCount]=\"true\" [dropdownListWidth]=\"'256px'\"\n      [searchEnabled]=\"false\" [hideApplyButton]=\"true\" [data]=\"field.itemsList\"\n      [selectedItems]=\"control.value\" (onChange)=\"updateSelectedValueForMultiSelect(field, control, formgroup, $event);\"></mis-multi-select-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n</ng-template>\n\n<ng-template #dynamicFieldErrors let-errors>\n  <div id=\"error-messages-container\">\n    <ng-container *ngFor=\"let error of errors | keyvalue\">\n      <p class=\"h8\">\n        {{\" • &nbsp;\" + error.value}}\n      </p>\n      <div style=\"flex-basis: 100%; height: 0\"></div>\n    </ng-container>\n  </div>\n</ng-template>","styles":["p{margin:0;cursor:default}::ng-deep .main-container{margin:0;max-width:100%}.sub-dynamic-form{padding-left:24px}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{justify-content:space-between;align-items:center}.multi-line-field-container,.single-line-field-container{display:flex;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::-moz-placeholder{color:var(--grey-seperators)}input:-ms-input-placeholder{color:var(--grey-seperators)}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}#error-messages-container{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container p{color:var(--sem-error)}"]}]}],"members":{"formFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"formValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"activeBtnIconUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"calendarIconUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"formUpdated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"formValid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":3}}]}],"formInitialized":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onFormValueChanges":[{"__symbolic":"method"}],"generateDynamicFieldsValueObject":[{"__symbolic":"method"}],"generateDynamicForm":[{"__symbolic":"method"}],"getDynamicFieldsControls":[{"__symbolic":"method"}],"updateSubDynamicFields":[{"__symbolic":"method"}],"updateSelectedValueForSingleSelect":[{"__symbolic":"method"}],"updateSelectedValueForMultiSelect":[{"__symbolic":"method"}],"isCheckBoxSelected":[{"__symbolic":"method"}],"generateSubDynamicFields":[{"__symbolic":"method"}],"mapFormValueToFormField":[{"__symbolic":"method"}],"mapFormFieldToFormValue":[{"__symbolic":"method"}]}}},"origins":{"DynamicFormModule":"./dynamic-form.module","DynamicFormComponent":"./dynamic-form.component"},"importAs":"mis-crystal-design-system/dynamic-form"}