npm - mis-crystal-design-system - Versions diffs - 3.1.7 → 3.1.9 - Mend

mis-crystal-design-system 3.1.7 → 3.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/esm2015/dynamic-form/dynamic-form.component.js ADDED Viewed

@@ -0,0 +1,158 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as moment from 'moment';
+import 'moment-timezone';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
+export class DynamicFormComponent {
+    constructor() {
+        /**
+         * 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.
+        */
+        this.formFields = [];
+        this.formValues = {};
+        this.activeBtnIconUrl = "";
+        this.calendarUrl = "";
+        /**
+         * formUpdated: Emits formValues Object whenever there is a change in the dynamic form.
+        */
+        this.formUpdated = new EventEmitter();
+        this.setupFormControls = () => {
+            let formArray = new FormArray([]);
+            for (let field of this.formFields) {
+                let control = this.mapFormValueToFormField(field, (this.formValues && this.formValues[field.configName]) ? this.formValues[field.configName] : null);
+                formArray.push(control);
+            }
+            this.dynamicForm = new FormGroup({
+                dynamicFields: formArray
+            });
+        };
+    }
+    ngOnInit() {
+        // Building the form
+        this.setupFormControls();
+        // Subscribing to form changes and emiting values.
+        this.dynamicForm.valueChanges.subscribe((formValue) => {
+            let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
+            this.formUpdated.emit(formValues);
+        });
+    }
+    generateDynamicFieldsValueObject(formValues) {
+        let dynamicFieldsValue = {};
+        formValues.forEach((value, index) => {
+            dynamicFieldsValue[this.formFields[index].configName] = this.mapFormFieldToFormValue(this.formFields[index], value);
+        });
+        return dynamicFieldsValue;
+    }
+    getDynamicFieldsControls() {
+        return this.dynamicForm.get('dynamicFields');
+    }
+    updateSelectedValueForField(index, value) {
+        let array = this.dynamicForm.get('dynamicFields').controls;
+        array[index].setValue(value);
+    }
+    updateSelectedValueForMultiSelect(index, values) {
+        let control = this.dynamicForm.get('dynamicFields').controls[index];
+        let selectedValues = control.value;
+        for (let value of values) {
+            let itemIndex = selectedValues.findIndex((item) => item.label === value.label);
+            if (itemIndex > -1) {
+                selectedValues.splice(itemIndex, 1);
+            }
+            else {
+                selectedValues.push(Object.assign({}, value));
+            }
+        }
+        control.setValue(selectedValues);
+    }
+    isCheckBoxSelected(value, selectedValues) {
+        return selectedValues.findIndex((item) => item.label === value) > -1;
+    }
+    mapFormValueToFormField(formField, formValue) {
+        let control = new FormControl();
+        if (formField.fieldType === 'input') {
+            if (formField.fieldInputType === 'text' || formField.fieldInputType === 'textarea')
+                control.setValue(formValue ? formValue : '');
+            else if (formField.fieldInputType === 'number')
+                control.setValue(formValue ? formValue : '');
+            else if (formField.fieldInputType === 'date') {
+                if (formValue && typeof formValue === 'number') {
+                    control.setValue(moment(formValue).tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));
+                }
+                else {
+                    control.setValue(moment().tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));
+                }
+            }
+        }
+        else if (formField.fieldType === 'singleSelect') {
+            if (formField.fieldInputType === 'dropdown') {
+                if (!formValue)
+                    control.setValue(formField.itemsList[0]);
+                else {
+                    let f = formField.itemsList.filter((item) => item.value === formValue);
+                    if (f[0])
+                        control.setValue(f[0]);
+                }
+            }
+        }
+        else if (formField.fieldType === 'multiSelect') {
+            if (formValue && Array.isArray(formValue)) {
+                let selectedValues = [];
+                for (let value of formValue) {
+                    let index = formField.itemsList.findIndex((item) => item.value === value);
+                    if (index > -1)
+                        selectedValues.push(Object.assign({}, formField.itemsList[index]));
+                }
+                control.setValue(selectedValues);
+            }
+            else {
+                control.setValue([]);
+            }
+        }
+        else if (formField.fieldType === 'boolean') {
+            control.setValue(!!formValue);
+        }
+        else
+            control.setValue(null);
+        return control;
+    }
+    mapFormFieldToFormValue(formField, formValue) {
+        if (formField.fieldType === 'input') {
+            if (formField.fieldInputType === 'text' || formField.fieldInputType === 'textarea')
+                return formValue;
+            else if (formField.fieldInputType === 'number')
+                return formValue;
+            else if (formField.fieldInputType === 'date') {
+                return moment.tz(formValue, formField.fieldConfig.format, formField.fieldConfig.timezone).valueOf();
+            }
+        }
+        else if (formField.fieldType === 'singleSelect') {
+            if (formField.fieldInputType === 'dropdown')
+                return formValue === null || formValue === void 0 ? void 0 : formValue.value;
+        }
+        else if (formField.fieldType === 'multiSelect') {
+            return formValue === null || formValue === void 0 ? void 0 : formValue.map((item) => item.value);
+        }
+        else if (formField.fieldType === 'boolean') {
+            return formValue;
+        }
+        else
+            return formValue;
+    }
+}
+DynamicFormComponent.decorators = [
+    { type: Component, args: [{
+                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 class=\"dynamic-field multi-line-field-container\"\n                *ngIf=\"formFields[i].fieldType === 'input' && (formFields[i].fieldInputType === 'text' || formFields[i].fieldInputType === 'number')\">\n                <p class=\"h7 field-title-sm\">\n                    {{ formFields[i].title }}\n                </p>\n                <div style=\"flex-basis: 100%\"></div>\n                <input class=\"input-field ip-text\" [type]=\"formFields[i].fieldInputType\" [formControl]=\"fieldControl\" [placeholder]=\"formFields[i].placeholderText?formFields[i].placeholderText:'Input Text'\" />\n            </div>\n            <div class=\"dynamic-field single-line-field-container\"\n                *ngIf=\"formFields[i].fieldType === 'singleSelect' && formFields[i].fieldInputType === 'dropdown'\">\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 class=\"dynamic-field single-line-field-container\"\n                *ngIf=\"formFields[i].fieldType === 'boolean' && formFields[i].fieldInputType === 'toggle'\">\n                <p class=\"h6\">\n                    {{ formFields[i].title }}\n                </p>\n                <mis-switch [formControl]=\"fieldControl\"></mis-switch>\n            </div>\n            <div class=\"dynamic-field multi-line-field-container\"\n                *ngIf=\"formFields[i].fieldType === 'input' && formFields[i].fieldInputType === 'textarea'\">\n                <p class=\"h7 field-title-sm\">\n                    {{ formFields[i].title }}\n                </p>\n                <div style=\"flex-basis: 100%\"></div>\n                <textarea class=\"input-field ip-textarea\" type=\"text\" [placeholder]=\"formFields[i].placeholderText ? formFields[i].placeholderText : 'Input Text'\" [formControl]=\"fieldControl\"></textarea>\n            </div>\n            <div class=\"dynamic-field single-line-field-container\"\n                *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 class=\"date-picker\" readonly misTzDp [dpConfig]=\"formFields[i].fieldConfig\" (dateChange)=\"updateSelectedValueForField(i, $event)\" [selectedDate]=\"fieldControl.value\"\n                        [offsetY]=\"0\" [value]=\"fieldControl.value\" #dp />\n                    <img alt=\"data-picker\" *ngIf=\"calendarUrl\" class='date-picker-icon' [src]=\"calendarUrl\" (click)=\"dp.click()\" />\n                </div>\n            </div>\n            <div class=\"dynamic-field multi-line-field-container\"\n                *ngIf=\"formFields[i].fieldType === 'multiSelect' && formFields[i].fieldInputType === 'checkbox'\">\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 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 class=\"dynamic-field single-line-field-container\"\n                *ngIf=\"formFields[i].fieldType === 'multiSelect' && formFields[i].fieldInputType === 'dropdown'\">\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\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)}"]
+            },] }
+];
+DynamicFormComponent.ctorParameters = () => [];
+DynamicFormComponent.propDecorators = {
+    formFields: [{ type: Input }],
+    formValues: [{ type: Input }],
+    activeBtnIconUrl: [{ type: Input }],
+    calendarUrl: [{ type: Input }],
+    formUpdated: [{ type: Output }]
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL2R5bmFtaWMtZm9ybS9keW5hbWljLWZvcm0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFVLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFdkYsT0FBTyxLQUFLLE1BQU0sTUFBTSxRQUFRLENBQUM7QUFDakMsT0FBTyxpQkFBaUIsQ0FBQztBQUN6QixPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQU9uRSxNQUFNLE9BQU8sb0JBQW9CO0lBcUIvQjtRQW5CQTs7OztVQUlFO1FBQ08sZUFBVSxHQUFrQyxFQUFFLENBQUE7UUFDOUMsZUFBVSxHQUEyQixFQUFFLENBQUE7UUFDdkMscUJBQWdCLEdBQUcsRUFBRSxDQUFDO1FBQ3RCLGdCQUFXLEdBQUcsRUFBRSxDQUFDO1FBTTFCOztVQUVFO1FBQ1EsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBd0IsQ0FBQTtRQXFCaEUsc0JBQWlCLEdBQUcsR0FBUyxFQUFFO1lBQzdCLElBQUksU0FBUyxHQUFHLElBQUksU0FBUyxDQUFDLEVBQUUsQ0FBQyxDQUFBO1lBQ2pDLEtBQUssSUFBSSxLQUFLLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRTtnQkFDakMsSUFBSSxPQUFPLEdBQUcsSUFBSSxDQUFDLHVCQUF1QixDQUFDLEtBQUssRUFBRSxDQUFDLElBQUksQ0FBQyxVQUFVLElBQUksSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsVUFBVSxDQUFDLENBQUEsQ0FBQyxDQUFFLElBQUksQ0FBQyxD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SUFBSSxTQUFTLENBQUMsY0FBYyxLQUFLLE1BQU0sSUFBSSxTQUFTLENBQUMsY0FBYyxLQUFLLFVBQVU7Z0JBQUUsT0FBTyxTQUFTLENBQUE7aUJBQy9GLElBQUksU0FBUyxDQUFDLGNBQWMsS0FBSyxRQUFRO2dCQUFFLE9BQU8sU0FBUyxDQUFBO2lCQUMzRCxJQUFJLFNBQVMsQ0FBQyxjQUFjLEtBQUssTUFBTSxFQUFFO2dCQUM1QyxPQUFPLE1BQU0sQ0FBQyxFQUFFLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQyxXQUFXLENBQUMsTUFBTSxFQUFFLFNBQVMsQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUMsT0FBTyxFQUFFLENBQUE7YUFDcEc7U0FDRjthQUNJLElBQUksU0FBUyxDQUFDLFNBQVMsS0FBSyxjQUFjLEVBQUU7WUFDL0MsSUFBSSxTQUFTLENBQUMsY0FBYyxLQUFLLFVBQVU7Z0JBQUUsT0FBTyxTQUFTLGFBQVQsU0FBUyx1QkFBVCxTQUFTLENBQUUsS0FBSyxDQUFBO1NBQ3JFO2FBQ0ksSUFBSSxTQUFTLENBQUMsU0FBUyxLQUFLLGFBQWEsRUFBRTtZQUM5QyxPQUFPLFNBQVMsYUFBVCxTQUFTLHVCQUFULFNBQVMsQ0FBRSxHQUFHLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUM7U0FDNUM7YUFDSSxJQUFJLFNBQVMsQ0FBQyxTQUFTLEtBQUssU0FBUyxFQUFFO1lBQzFDLE9BQU8sU0FBUyxDQUFBO1NBQ2pCOztZQUNJLE9BQU8sU0FBUyxDQUFBO0lBQ3ZCLENBQUM7OztZQXpJRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtnQkFDNUIsaWxLQUE0Qzs7YUFFN0M7Ozs7eUJBUUUsS0FBSzt5QkFDTCxLQUFLOytCQUNMLEtBQUs7MEJBQ0wsS0FBSzswQkFTTCxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEluamVjdCwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOc0R5bmFtaWNGaWVsZHMgfSBmcm9tICcuL2R5bmFtaWMtZm9ybS5uYW1lc3BhY2UnO1xuaW1wb3J0ICogYXMgbW9tZW50IGZyb20gJ21vbWVudCc7XG5pbXBvcnQgJ21vbWVudC10aW1lem9uZSc7XG5pbXBvcnQgeyBGb3JtQXJyYXksIEZvcm1Db250cm9sLCBGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21pcy1keW5hbWljLWZvcm0nLFxuICB0ZW1wbGF0ZVVybDogJy4vZHluYW1pYy1mb3JtLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZHluYW1pYy1mb3JtLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRHluYW1pY0Zvcm1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIC8qKiBcbiAgICogZm9ybUZpZWxkczogIER5bmFtaWMgZmllbGRzIHJlY2lldmVkIGZyb20gdGhlIEFQSSBtZXRhZGF0YSB0byBidWlsZCBhIGR5bmFtaWMgZm9ybVxuICAgKiBmb3JtVmFsdWVzOiAgSG9sZHMgdGhlIHZhbHVlIG9mIHRoZSBkeW5hbWljIGZvcm0gd2l0aCBcImtleVwiIGJlaW5nIGR5bmFtaWMgZmllbGQgXCJ0aXRsZVwiXG4gICAqICAgICAgICAgICAgICBhbmQgdmFsdWUgYmVpbmcgdGhlIHVzZXIgaW5wdXQuXG4gICovXG4gIEBJbnB1dCgpIGZvcm1GaWVsZHM6IEFycmF5PE5zRHluYW1pY0ZpZWxkcy5JRmllbGQ+ID0gW11cbiAgQElucHV0KCkgZm9ybVZhbHVlczogeyBba2V5OiBzdHJpbmddOiBhbnkgfSA9IHt9XG4gIEBJbnB1dCgpIGFjdGl2ZUJ0bkljb25VcmwgPSBcIlwiO1xuICBASW5wdXQoKSBjYWxlbmRhclVybCA9IFwiXCI7XG4gIC8qKiBcbiAgICogZHluYW1pY0Zvcm06IENvbnN0cnVjdGVkIHVzaW5nIGZvcm1GaWVsZHMgYW5kIGZvcm1WYWx1ZXMoaW4gY2FzZSBvZiBlZGl0KVxuICAqL1xuICBkeW5hbWljRm9ybTogRm9ybUdyb3VwXG5cbiAgLyoqIFxuICAgKiBmb3JtVXBkYXRlZDogRW1pdHMgZm9ybVZhbHVlcyBPYmplY3Qgd2hlbmV2ZXIgdGhlcmUgaXMgYSBjaGFuZ2UgaW4gdGhlIGR5bmFtaWMgZm9ybS5cbiAgKi9cbiAgQE91dHB1dCgpIGZvcm1VcGRhdGVkID0gbmV3IEV2ZW50RW1pdHRlcjx7W2tleTogc3RyaW5nXTogYW55fT4oKVxuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgLy8gQnVpbGRpbmcgdGhlIGZvcm1cbiAgICB0aGlzLnNldHVwRm9ybUNvbnRyb2xzKCk7XG4gICAgXG4gICAgLy8gU3Vic2NyaWJpbmcgdG8gZm9ybSBjaGFuZ2VzIGFuZCBlbWl0aW5nIHZhbHVlcy5cbiAgICB0aGlzLmR5bmFtaWNGb3JtLnZhbHVlQ2hhbmdlcy5zdWJzY3JpYmUoKGZvcm1WYWx1ZSkgPT4ge1xuICAgICAgbGV0IGZvcm1WYWx1ZXMgPSB0aGlzLmdlbmVyYXRlRHluYW1pY0ZpZWxkc1ZhbHVlT2JqZWN0KHRoaXMuZHluYW1pY0Zvcm0udmFsdWUuZHluYW1pY0ZpZWxkcylcbiAgICAgIHRoaXMuZm9ybVVwZGF0ZWQuZW1pdChmb3JtVmFsdWVzKVxuICAgIH0pXG4gIH1cbiAgZ2VuZXJhdGVEeW5hbWljRmllbGRzVmFsdWVPYmplY3QoZm9ybVZhbHVlczogQXJyYXk8YW55Pik6IHtba2V5OiBzdHJpbmddOiBhbnl9IHtcbiAgICBsZXQgZHluYW1pY0ZpZWxkc1ZhbHVlID0ge31cbiAgICBmb3JtVmFsdWVzLmZvckVhY2goKHZhbHVlLCBpbmRleCkgPT4ge1xuICAgICAgZHluYW1pY0ZpZWxkc1ZhbHVlW3RoaXMuZm9ybUZpZWxkc1tpbmRleF0uY29uZmlnTmFtZV0gPSB0aGlzLm1hcEZvcm1GaWVsZFRvRm9ybVZhbHVlKHRoaXMuZm9ybUZpZWxkc1tpbmRleF0sIHZhbHVlKVxuICAgIH0pXG4gICAgcmV0dXJuIGR5bmFtaWNGaWVsZHNWYWx1ZVxuICB9XG4gIHNldHVwRm9ybUNvbnRyb2xzID0gKCk6IHZvaWQgPT4ge1xuICAgIGxldCBmb3JtQXJyYXkgPSBuZXcgRm9ybUFycmF5KFtdKVxuICAgIGZvciAobGV0IGZpZWxkIG9mIHRoaXMuZm9ybUZpZWxkcykge1xuICAgICAgbGV0IGNvbnRyb2wgPSB0aGlzLm1hcEZvcm1WYWx1ZVRvRm9ybUZpZWxkKGZpZWxkLCAodGhpcy5mb3JtVmFsdWVzICYmIHRoaXMuZm9ybVZhbHVlc1tmaWVsZC5jb25maWdOYW1lXSkgPyB0aGlzLmZvcm1WYWx1ZXNbZmllbGQuY29uZmlnTmFtZV06ICBudWxsKVxuICAgICAgZm9ybUFycmF5LnB1c2goY29udHJvbClcbiAgICB9XG4gICAgdGhpcy5keW5hbWljRm9ybSA9IG5ldyBGb3JtR3JvdXAoe1xuICAgICAgZHluYW1pY0ZpZWxkczogZm9ybUFycmF5XG4gICAgfSlcbiAgfVxuICBnZXREeW5hbWljRmllbGRzQ29udHJvbHMoKTogRm9ybUFycmF5IHtcbiAgICByZXR1cm4gdGhpcy5keW5hbWljRm9ybS5nZXQoJ2R5bmFtaWNGaWVsZHMnKSBhcyBGb3JtQXJyYXlcbiAgfVxuICB1cGRhdGVTZWxlY3RlZFZhbHVlRm9yRmllbGQoaW5kZXg6IG51bWJlciwgdmFsdWU6IGFueSk6IHZvaWQge1xuICAgIGxldCBhcnJheSA9ICh0aGlzLmR5bmFtaWNGb3JtLmdldCgnZHluYW1pY0ZpZWxkcycpIGFzIEZvcm1BcnJheSkuY29udHJvbHNcbiAgICBhcnJheVtpbmRleF0uc2V0VmFsdWUodmFsdWUpXG4gIH1cbiAgdXBkYXRlU2VsZWN0ZWRWYWx1ZUZvck11bHRpU2VsZWN0KGluZGV4OiBudW1iZXIsIHZhbHVlczogQXJyYXk8YW55Pik6IHZvaWQge1xuICAgIGxldCBjb250cm9sID0gKHRoaXMuZHluYW1pY0Zvcm0uZ2V0KCdkeW5hbWljRmllbGRzJykgYXMgRm9ybUFycmF5KS5jb250cm9sc1tpbmRleF1cbiAgICBsZXQgc2VsZWN0ZWRWYWx1ZXM6IEFycmF5PHtsYWJlbDogc3RyaW5nLCB2YWx1ZTogYW55fT4gPSBjb250cm9sLnZhbHVlXG4gICAgZm9yIChsZXQgdmFsdWUgb2YgdmFsdWVzKSB7XG4gICAgICBsZXQgaXRlbUluZGV4ID0gc2VsZWN0ZWRWYWx1ZXMuZmluZEluZGV4KChpdGVtKSA9PiBpdGVtLmxhYmVsID09PSB2YWx1ZS5sYWJlbClcbiAgICAgIGlmIChpdGVtSW5kZXggPiAtMSkge1xuICAgICAgICBzZWxlY3RlZFZhbHVlcy5zcGxpY2UoaXRlbUluZGV4LCAxKTtcbiAgICAgIH1cbiAgICAgIGVsc2Uge1xuICAgICAgICBzZWxlY3RlZFZhbHVlcy5wdXNoKHsgLi4udmFsdWUgfSlcbiAgICAgIH1cbiAgICB9XG4gICAgY29udHJvbC5zZXRWYWx1ZShzZWxlY3RlZFZhbHVlcylcbiAgfVxuICBpc0NoZWNrQm94U2VsZWN0ZWQodmFsdWU6IHN0cmluZywgc2VsZWN0ZWRWYWx1ZXM6IEFycmF5PHsgbGFiZWw6IHN0cmluZywgdmFsdWU6IHN0cmluZyB9Pik6IGJvb2xlYW4ge1xuICAgIHJldHVybiBzZWxlY3RlZFZhbHVlcy5maW5kSW5kZXgoKGl0ZW0pID0+IGl0ZW0ubGFiZWwgPT09IHZhbHVlKSA+IC0xXG4gIH1cbiAgbWFwRm9ybVZhbHVlVG9Gb3JtRmllbGQoZm9ybUZpZWxkOiBOc0R5bmFtaWNGaWVsZHMuSUZpZWxkLCBmb3JtVmFsdWU6IGFueSk6IGFueSB7XG4gICAgbGV0IGNvbnRyb2wgPSBuZXcgRm9ybUNvbnRyb2woKVxuICAgIGlmIChmb3JtRmllbGQuZmllbGRUeXBlID09PSAnaW5wdXQnKSB7XG4gICAgICBpZiAoZm9ybUZpZWxkLmZpZWxkSW5wdXRUeXBlID09PSAndGV4dCcgfHwgZm9ybUZpZWxkLmZpZWxkSW5wdXRUeXBlID09PSAndGV4dGFyZWEnKSBjb250cm9sLnNldFZhbHVlKGZvcm1WYWx1ZSA/IGZvcm1WYWx1ZSA6ICcnKVxuICAgICAgZWxzZSBpZiAoZm9ybUZpZWxkLmZpZWxkSW5wdXRUeXBlID09PSAnbnVtYmVyJykgY29udHJvbC5zZXRWYWx1ZShmb3JtVmFsdWUgPyBmb3JtVmFsdWUgOiAnJylcbiAgICAgIGVsc2UgaWYgKGZvcm1GaWVsZC5maWVsZElucHV0VHlwZSA9PT0gJ2RhdGUnKSB7XG4gICAgICAgIGlmIChmb3JtVmFsdWUgJiYgdHlwZW9mIGZvcm1WYWx1ZSA9PT0gJ251bWJlcicpIHtcbiAgICAgICAgICBjb250cm9sLnNldFZhbHVlKG1vbWVudChmb3JtVmFsdWUpLnR6KGZvcm1GaWVsZC5maWVsZENvbmZpZy50aW1lem9uZSkuZm9ybWF0KGZvcm1GaWVsZC5maWVsZENvbmZpZy5mb3JtYXQpKVxuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICBjb250cm9sLnNldFZhbHVlKG1vbWVudCgpLnR6KGZvcm1GaWVsZC5maWVsZENvbmZpZy50aW1lem9uZSkuZm9ybWF0KGZvcm1GaWVsZC5maWVsZENvbmZpZy5mb3JtYXQpKVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICAgIGVsc2UgaWYgKGZvcm1GaWVsZC5maWVsZFR5cGUgPT09ICdzaW5nbGVTZWxlY3QnKSB7XG4gICAgICBpZiAoZm9ybUZpZWxkLmZpZWxkSW5wdXRUeXBlID09PSAnZHJvcGRvd24nKSB7XG4gICAgICAgIGlmICghZm9ybVZhbHVlKSBjb250cm9sLnNldFZhbHVlKGZvcm1GaWVsZC5pdGVtc0xpc3RbMF0pXG4gICAgICAgIGVsc2Uge1xuICAgICAgICAgIGxldCBmID0gZm9ybUZpZWxkLml0ZW1zTGlzdC5maWx0ZXIoKGl0ZW0pID0+IGl0ZW0udmFsdWUgPT09IGZvcm1WYWx1ZSlcbiAgICAgICAgICBpZihmWzBdKSBjb250cm9sLnNldFZhbHVlKGZbMF0pXG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gICAgZWxzZSBpZiAoZm9ybUZpZWxkLmZpZWxkVHlwZSA9PT0gJ211bHRpU2VsZWN0Jykge1xuICAgICAgaWYgKGZvcm1WYWx1ZSAmJiBBcnJheS5pc0FycmF5KGZvcm1WYWx1ZSkpIHtcbiAgICAgICAgbGV0IHNlbGVjdGVkVmFsdWVzID0gW11cbiAgICAgICAgZm9yIChsZXQgdmFsdWUgb2YgZm9ybVZhbHVlKSB7XG4gICAgICAgICAgbGV0IGluZGV4ID0gZm9ybUZpZWxkLml0ZW1zTGlzdC5maW5kSW5kZXgoKGl0ZW0pID0+IGl0ZW0udmFsdWUgPT09IHZhbHVlKVxuICAgICAgICAgIGlmKGluZGV4ID4gLTEpIHNlbGVjdGVkVmFsdWVzLnB1c2goey4uLmZvcm1GaWVsZC5pdGVtc0xpc3RbaW5kZXhdfSlcbiAgICAgICAgfVxuICAgICAgICBjb250cm9sLnNldFZhbHVlKHNlbGVjdGVkVmFsdWVzKVxuICAgICAgfSBlbHNlIHtcbiAgICAgICAgY29udHJvbC5zZXRWYWx1ZShbXSlcbiAgICAgIH1cbiAgICB9XG4gICAgZWxzZSBpZiAoZm9ybUZpZWxkLmZpZWxkVHlwZSA9PT0gJ2Jvb2xlYW4nKSB7XG4gICAgICBjb250cm9sLnNldFZhbHVlKCEhZm9ybVZhbHVlKVxuICAgIH1cbiAgICBlbHNlIGNvbnRyb2wuc2V0VmFsdWUobnVsbClcbiAgICByZXR1cm4gY29udHJvbDtcbiAgfVxuICBtYXBGb3JtRmllbGRUb0Zvcm1WYWx1ZShmb3JtRmllbGQ6IE5zRHluYW1pY0ZpZWxkcy5JRmllbGQsIGZvcm1WYWx1ZTogYW55KTogYW55IHtcbiAgICBpZiAoZm9ybUZpZWxkLmZpZWxkVHlwZSA9PT0gJ2lucHV0Jykge1xuICAgICAgaWYgKGZvcm1GaWVsZC5maWVsZElucHV0VHlwZSA9PT0gJ3RleHQnIHx8IGZvcm1GaWVsZC5maWVsZElucHV0VHlwZSA9PT0gJ3RleHRhcmVhJykgcmV0dXJuIGZvcm1WYWx1ZVxuICAgICAgZWxzZSBpZiAoZm9ybUZpZWxkLmZpZWxkSW5wdXRUeXBlID09PSAnbnVtYmVyJykgcmV0dXJuIGZvcm1WYWx1ZVxuICAgICAgZWxzZSBpZiAoZm9ybUZpZWxkLmZpZWxkSW5wdXRUeXBlID09PSAnZGF0ZScpIHtcbiAgICAgICAgcmV0dXJuIG1vbWVudC50eihmb3JtVmFsdWUsIGZvcm1GaWVsZC5maWVsZENvbmZpZy5mb3JtYXQsIGZvcm1GaWVsZC5maWVsZENvbmZpZy50aW1lem9uZSkudmFsdWVPZigpXG4gICAgICB9XG4gICAgfVxuICAgIGVsc2UgaWYgKGZvcm1GaWVsZC5maWVsZFR5cGUgPT09ICdzaW5nbGVTZWxlY3QnKSB7XG4gICAgICBpZiAoZm9ybUZpZWxkLmZpZWxkSW5wdXRUeXBlID09PSAnZHJvcGRvd24nKSByZXR1cm4gZm9ybVZhbHVlPy52YWx1ZVxuICAgIH1cbiAgICBlbHNlIGlmIChmb3JtRmllbGQuZmllbGRUeXBlID09PSAnbXVsdGlTZWxlY3QnKSB7XG4gICAgICByZXR1cm4gZm9ybVZhbHVlPy5tYXAoKGl0ZW0pID0+IGl0ZW0udmFsdWUpXG4gICAgfVxuICAgIGVsc2UgaWYgKGZvcm1GaWVsZC5maWVsZFR5cGUgPT09ICdib29sZWFuJykge1xuICAgICAgcmV0dXJuIGZvcm1WYWx1ZVxuICAgIH1cbiAgICBlbHNlIHJldHVybiBmb3JtVmFsdWVcbiAgfVxufVxuIl19

package/esm2015/dynamic-form/dynamic-form.module.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { NgModule } from "@angular/core";
+import { OverlayModule } from "@angular/cdk/overlay";
+import { ScrollingModule } from "@angular/cdk-experimental/scrolling";
+import { DropdownModule } from "mis-crystal-design-system/dropdown";
+import { ReactiveFormsModule } from "@angular/forms";
+import { DynamicFormComponent } from "./dynamic-form.component";
+import { SwitchModule } from "mis-crystal-design-system/switch";
+import { MultiSelectDropdownModule } from "mis-crystal-design-system/multi-select-dropdown";
+import { DatepickerModuleV2 } from "mis-crystal-design-system/datepicker_v2";
+export class DynamicFormModule {
+    static forRoot() {
+        return { ngModule: DynamicFormModule, providers: [] };
+    }
+}
+DynamicFormModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [DynamicFormComponent],
+                imports: [CommonModule, ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule, SwitchModule, MultiSelectDropdownModule, DatepickerModuleV2],
+                exports: [DynamicFormComponent]
+            },] }
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL2R5bmFtaWMtZm9ybS9keW5hbWljLWZvcm0ubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLFFBQVEsRUFBdUIsTUFBTSxlQUFlLENBQUM7QUFDOUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUN0RSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDcEUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDckQsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDaEUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLGlEQUFpRCxDQUFDO0FBQzVGLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBUTdFLE1BQU0sT0FBTyxpQkFBaUI7SUFDNUIsTUFBTSxDQUFDLE9BQU87UUFDWixPQUFPLEVBQUUsUUFBUSxFQUFFLGlCQUFpQixFQUFFLFNBQVMsRUFBRSxFQUFFLEVBQUUsQ0FBQztJQUN4RCxDQUFDOzs7WUFSRixRQUFRLFNBQUM7Z0JBQ1IsWUFBWSxFQUFFLENBQUMsb0JBQW9CLENBQUM7Z0JBQ3BDLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBQyxtQkFBbUIsRUFBRSxXQUFXLEVBQUUsYUFBYSxFQUFFLGVBQWUsRUFBRSxjQUFjLEVBQUUsWUFBWSxFQUFFLHlCQUF5QixFQUFFLGtCQUFrQixDQUFDO2dCQUNySyxPQUFPLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQzthQUNoQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XG5pbXBvcnQgeyBOZ01vZHVsZSwgTW9kdWxlV2l0aFByb3ZpZGVycyB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBPdmVybGF5TW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2Nkay9vdmVybGF5XCI7XG5pbXBvcnQgeyBTY3JvbGxpbmdNb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY2RrLWV4cGVyaW1lbnRhbC9zY3JvbGxpbmdcIjtcbmltcG9ydCB7IERyb3Bkb3duTW9kdWxlIH0gZnJvbSBcIm1pcy1jcnlzdGFsLWRlc2lnbi1zeXN0ZW0vZHJvcGRvd25cIjtcbmltcG9ydCB7IFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvZm9ybXNcIjtcbmltcG9ydCB7IER5bmFtaWNGb3JtQ29tcG9uZW50IH0gZnJvbSBcIi4vZHluYW1pYy1mb3JtLmNvbXBvbmVudFwiO1xuaW1wb3J0IHsgU3dpdGNoTW9kdWxlIH0gZnJvbSBcIm1pcy1jcnlzdGFsLWRlc2lnbi1zeXN0ZW0vc3dpdGNoXCI7XG5pbXBvcnQgeyBNdWx0aVNlbGVjdERyb3Bkb3duTW9kdWxlIH0gZnJvbSBcIm1pcy1jcnlzdGFsLWRlc2lnbi1zeXN0ZW0vbXVsdGktc2VsZWN0LWRyb3Bkb3duXCI7XG5pbXBvcnQgeyBEYXRlcGlja2VyTW9kdWxlVjIgfSBmcm9tIFwibWlzLWNyeXN0YWwtZGVzaWduLXN5c3RlbS9kYXRlcGlja2VyX3YyXCI7XG5cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbRHluYW1pY0Zvcm1Db21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLFJlYWN0aXZlRm9ybXNNb2R1bGUsIEZvcm1zTW9kdWxlLCBPdmVybGF5TW9kdWxlLCBTY3JvbGxpbmdNb2R1bGUsIERyb3Bkb3duTW9kdWxlLCBTd2l0Y2hNb2R1bGUsIE11bHRpU2VsZWN0RHJvcGRvd25Nb2R1bGUsIERhdGVwaWNrZXJNb2R1bGVWMl0sXG4gIGV4cG9ydHM6IFtEeW5hbWljRm9ybUNvbXBvbmVudF1cbn0pXG5leHBvcnQgY2xhc3MgRHluYW1pY0Zvcm1Nb2R1bGUge1xuICBzdGF0aWMgZm9yUm9vdCgpOiBNb2R1bGVXaXRoUHJvdmlkZXJzPER5bmFtaWNGb3JtTW9kdWxlPiB7XG4gICAgcmV0dXJuIHsgbmdNb2R1bGU6IER5bmFtaWNGb3JtTW9kdWxlLCBwcm92aWRlcnM6IFtdIH07XG4gIH1cbn1cbiJdfQ==

package/esm2015/dynamic-form/dynamic-form.namespace.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLm5hbWVzcGFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL2R5bmFtaWMtZm9ybS9keW5hbWljLWZvcm0ubmFtZXNwYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgbmFtZXNwYWNlIE5zRHluYW1pY0ZpZWxkc3tcbiAgICBleHBvcnQgaW50ZXJmYWNlIElGaWVsZCB7XG4gICAgICAgIGZpZWxkVHlwZTogXCJpbnB1dFwiIHwgXCJib29sZWFuXCIgfCBcInNpbmdsZVNlbGVjdFwiIHwgXCJtdWx0aVNlbGVjdFwiO1xuICAgICAgICBmaWVsZElucHV0VHlwZTogXCJ0ZXh0XCIgfCBcIm51bWJlclwiIHwgXCJ0ZXh0YXJlYVwiIHwgXCJ0b2dnbGVcIiB8IFwiY2hlY2tib3hcIiB8IFwiZHJvcGRvd25cIiB8IFwicmFkaW9cIiB8IFwiZGF0ZVwiO1xuICAgICAgICBmaWVsZENvbmZpZz86IGFueTtcbiAgICAgICAgdGl0bGU6IHN0cmluZztcbiAgICAgICAgbWVzc2FnZVRlbXBsYXRlPzogc3RyaW5nO1xuICAgICAgICBzdWJGaWVsZFZhbHVlPzogYm9vbGVhbjtcbiAgICAgICAgY29uZmlnTmFtZTogc3RyaW5nO1xuICAgICAgICBwYXJlbnRDb25maWdOYW1lPzogc3RyaW5nXG4gICAgICAgIGJhY2tlZEZpZWxkVHlwZTogYW55O1xuICAgICAgICBtaW5WYWw/OiBudW1iZXI7IC8vIE51bWJlciBpbnB1dCBhbmQgdGV4dCBhcmVhIG9yIHRleHQgb3IgbnVtYmVyIG1pbiB2YWx1ZVxuICAgICAgICBtYXhWYWw/OiBudW1iZXI7XG4gICAgICAgIGl0ZW1zTGlzdD86IEFycmF5PGFueT47IC8vIHJhZGlvLCBjaGVja2JveGVzIGFuZCBkcm9wZG93bnNcbiAgICAgICAgcGxhY2Vob2xkZXJUZXh0Pzogc3RyaW5nO1xuICAgIH1cbn0iXX0=

package/esm2015/dynamic-form/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./public_api";
2	+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9taXMtY29tcG9uZW50cy9keW5hbWljLWZvcm0vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tIFwiLi9wdWJsaWNfYXBpXCI7Il19

package/esm2015/dynamic-form/mis-crystal-design-system-dynamic-form.js ADDED Viewed

@@ -0,0 +1,6 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+export { DynamicFormComponent as ɵa } from './dynamic-form.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWlzLWNyeXN0YWwtZGVzaWduLXN5c3RlbS1keW5hbWljLWZvcm0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9taXMtY29tcG9uZW50cy9keW5hbWljLWZvcm0vbWlzLWNyeXN0YWwtZGVzaWduLXN5c3RlbS1keW5hbWljLWZvcm0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQztBQUV4QixPQUFPLEVBQUMsb0JBQW9CLElBQUksRUFBRSxFQUFDLE1BQU0sMEJBQTBCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuXG5leHBvcnQge0R5bmFtaWNGb3JtQ29tcG9uZW50IGFzIMm1YX0gZnJvbSAnLi9keW5hbWljLWZvcm0uY29tcG9uZW50JzsiXX0=

package/esm2015/dynamic-form/public_api.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { DynamicFormModule } from "./dynamic-form.module";
2	+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL2R5bmFtaWMtZm9ybS9wdWJsaWNfYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgRHluYW1pY0Zvcm1Nb2R1bGUgfSBmcm9tIFwiLi9keW5hbWljLWZvcm0ubW9kdWxlXCI7XG4iXX0=

package/fesm2015/mis-crystal-design-system-async-search-dropdown.js CHANGED Viewed

@@ -217,6 +217,7 @@ AsyncDropdownComponent.propDecorators = {
     customItem: [{ type: ContentChild, args: ["misCustomItem", { static: false },] }],
     customLoader: [{ type: ContentChild, args: ["asyncCustomLoader", { static: false },] }],
     onSelect: [{ type: Output }],
+    selections: [{ type: Input }],
     searchValue: [{ type: Input }],
     searchQueryChange: [{ type: Output }],
     clear: [{ type: Output }],

package/fesm2015/mis-crystal-design-system-async-search-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mis-crystal-design-system-async-search-dropdown.js","sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts","../../../projects/mis-components/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.ts"],"sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport {\n AfterViewInit,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n ViewContainerRef\n} from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\nimport { Observable, Subscription } from \"rxjs\";\nimport { debounceTime, distinctUntilChanged, filter, tap } from \"rxjs/operators\";\n\n// tslint:disable-next-line\ntype IListData = any;\n\n@Component({\n selector: \"mis-async-search-dropdown\",\n templateUrl: \"./async-dropdown.component.html\",\n styleUrls: [\"./async-dropdown.component.scss\"]\n})\nexport class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy {\n constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef, private _ngZone: NgZone) { }\n @Input() height;\n @Input() size: 'md' \| 'sm' = 'md'\n @Input() httpStream!: (searchKey: string) => Observable<IListData>; // function that returns an httpobservable\n @Input() displayKey!: string; // string to show value in list\n @Input() secondaryDisplayKey!: string; // string to display secondary value\n @Input() placeholder = \"Select\"; // placeholder for input\n @Input() debounceTime = 400; // wait time till which API call is paused\n @Input() minInputLength = 2; // min length after which API call is made\n @Input() multi = false; // maintain a list or emit value\n @Input() uniqueKey: string; // for identifying unique values\n @Input() control: AbstractControl \| null; // form control for reactive forms\n @Input() disabled: boolean; // disable actions on component\n @Input() readonly: boolean; // make component readonly\n @ViewChild(\"ddBtn\", { static: false }) origin: ElementRef;\n @ViewChild(\"input\", { static: false }) input: ElementRef;\n @ViewChild(\"dd\", { static: false }) dd: TemplateRef<Element>;\n @ContentChild(\"misCustomItem\", { static: false })\n customItem: TemplateRef<Element>;\n @ContentChild(\"asyncCustomLoader\", { static: false})\n customLoader: TemplateRef<Element>;\n // tslint:disable-next-line\n @Output() onSelect: EventEmitter<IListData \| IListData[]> = new EventEmitter(true); // emit selected values\n searchInput: FormControl = new FormControl();\n data: IListData[] = [];\n opened = false;\n loading: boolean = false;\n error: boolean = false;\n // tslint:disable-next-line\n selections: Map<string, any> = new Map();\n private searchSubscription: Subscription;\n private overlayRef: OverlayRef;\n controlSubscription: Subscription \| undefined;\n @Input() searchValue;\n @Output() searchQueryChange = new EventEmitter<string>()\n @Output() clear: EventEmitter<boolean> = new EventEmitter(false);\n @Output() itemSelected = new EventEmitter<IListData>()\n @Output() itemRemoved = new EventEmitter<IListData>()\n ngOnInit(): void {\n if (this.multi && !this.uniqueKey) {\n throw new Error(\"[uniqueKey] required in multi mode.\");\n }\n if (this.disabled) {\n this.searchInput.disable();\n }\n this.searchSubscription = this.searchInput.valueChanges\n .pipe(\n // filter(val => val && val.length >= this.minInputLength),\n tap((val) => this.searchQueryChange.emit(val)),\n debounceTime(this.debounceTime),\n distinctUntilChanged()\n )\n .subscribe(res => {\n this._ngZone.run(() => {\n if (res?.length < this.minInputLength \|\| !res?.length) {\n this.closeDropdown();\n return;\n } else if (res?.length > this.minInputLength && this.httpStream) {\n this.loading = true;\n this.error = false;\n if(!this.overlayRef?.hasAttached())\n this.openDropdown(this.dd, this.origin.nativeElement);\n this.httpStream(res).subscribe(list => {\n this.loading = false;\n this.data = list;\n if (!this.overlayRef?.hasAttached() && list.length > 0) {\n this.openDropdown(this.dd, this.origin.nativeElement);\n }\n }, error => {\n this.loading = false;\n this.error = true;\n });\n }\n })\n });\n if (this.control?.value) {\n this.handleControlChanges(this.control.value);\n }\n this.controlSubscription = this.control?.valueChanges.subscribe(this.handleControlChanges);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes && changes?.searchValue?.currentValue) {\n this.searchInput.patchValue(changes.searchValue.currentValue);\n }\n if (changes && changes.disabled) {\n this.searchInput.enable();\n if (this.disabled) {\n this.searchInput.disable();\n }\n }\n }\n\n ngOnDestroy(): void {\n this.searchSubscription?.unsubscribe();\n }\n\n private handleControlChanges = (values: IListData[]) => {\n values.forEach(el => {\n this.selectData(el, true);\n });\n // tslint:disable-next-line\n };\n\n private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): void {\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(origin)\n .withPositions([\n new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }),\n new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" })\n ])\n .withPush(true);\n\n const configs = new OverlayConfig({\n hasBackdrop: true,\n backdropClass: \"cdk-overlay-transparent-backdrop\",\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n positionStrategy,\n width: origin.clientWidth\n });\n this.overlayRef = this.overlay.create(configs);\n this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n this.overlayRef.backdropClick().subscribe(res => {\n this.closeDropdown();\n });\n }\n\n /*\n closes the dropdown\n /\n closeDropdown(): void {\n this.opened = false;\n this.overlayRef?.detach();\n this.data = [];\n }\n\n /\n \n * @param item item to select\n * if item property disabled is set to true, selection will be disabled\n * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input\n /\n selectData(item: IListData, effectedFromOutside = true): void {\n if (item.disabled) {\n return;\n }\n this.itemSelected.emit(item)\n if (!this.multi) {\n this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });\n this.setControlValue(item);\n } else {\n if (!this.selections.has(item[this.uniqueKey])) {\n this.selections.set(item[this.uniqueKey], item);\n }\n this.setControlValue(this.selectedItems);\n if (!effectedFromOutside) {\n setTimeout(() => {\n this.input.nativeElement.focus();\n this.input.nativeElement.scrollIntoView();\n }, 10);\n }\n this.searchInput.patchValue(\"\");\n this.data = [];\n }\n this.closeDropdown();\n }\n\n /\n \n * @param item remove item from selected list\n /\n removeItem(item: IListData): void {\n this.itemRemoved.emit(item)\n this.selections.delete(item[this.uniqueKey]);\n this.setControlValue(this.selectedItems);\n // tslint:disable-next-line\n this.input[\"nativeElement\"].focus();\n }\n\n private setControlValue(value: IListData): void {\n this.onSelect.emit(value);\n this.control?.patchValue(value, { emitEvent: false });\n }\n\n /\n @returns list of selected items\n /\n get selectedItems(): Array<IListData> {\n return Array.from(this.selections.values());\n }\n\n removeInputValue() {\n this.searchInput.reset();\n this.data = [];\n this.clear.emit(true);\n }\n}\n","import { OverlayModule } from \"@angular/cdk/overlay\";\nimport { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\nimport { LoaderModule } from \"mis-crystal-design-system/loader\";\nimport { AsyncDropdownComponent } from \"./async-dropdown.component\";\n\n@NgModule({\n declarations: [AsyncDropdownComponent],\n imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule, LoaderModule],\n exports: [AsyncDropdownComponent]\n})\nexport class AsyncDropdownModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"mis-crystal-design-system-async-search-dropdown.js","sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts","../../../projects/mis-components/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.ts"],"sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport {\n AfterViewInit,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n ViewContainerRef\n} from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\nimport { Observable, Subscription } from \"rxjs\";\nimport { debounceTime, distinctUntilChanged, filter, tap } from \"rxjs/operators\";\n\n// tslint:disable-next-line\ntype IListData = any;\n\n@Component({\n selector: \"mis-async-search-dropdown\",\n templateUrl: \"./async-dropdown.component.html\",\n styleUrls: [\"./async-dropdown.component.scss\"]\n})\nexport class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy {\n constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef, private _ngZone: NgZone) { }\n @Input() height;\n @Input() size: 'md' \| 'sm' = 'md'\n @Input() httpStream!: (searchKey: string) => Observable<IListData>; // function that returns an httpobservable\n @Input() displayKey!: string; // string to show value in list\n @Input() secondaryDisplayKey!: string; // string to display secondary value\n @Input() placeholder = \"Select\"; // placeholder for input\n @Input() debounceTime = 400; // wait time till which API call is paused\n @Input() minInputLength = 2; // min length after which API call is made\n @Input() multi = false; // maintain a list or emit value\n @Input() uniqueKey: string; // for identifying unique values\n @Input() control: AbstractControl \| null; // form control for reactive forms\n @Input() disabled: boolean; // disable actions on component\n @Input() readonly: boolean; // make component readonly\n @ViewChild(\"ddBtn\", { static: false }) origin: ElementRef;\n @ViewChild(\"input\", { static: false }) input: ElementRef;\n @ViewChild(\"dd\", { static: false }) dd: TemplateRef<Element>;\n @ContentChild(\"misCustomItem\", { static: false })\n customItem: TemplateRef<Element>;\n @ContentChild(\"asyncCustomLoader\", { static: false})\n customLoader: TemplateRef<Element>;\n // tslint:disable-next-line\n @Output() onSelect: EventEmitter<IListData \| IListData[]> = new EventEmitter(true); // emit selected values\n searchInput: FormControl = new FormControl();\n data: IListData[] = [];\n opened = false;\n loading: boolean = false;\n error: boolean = false;\n // tslint:disable-next-line\n @Input() selections: Map<string, any> = new Map();\n private searchSubscription: Subscription;\n private overlayRef: OverlayRef;\n controlSubscription: Subscription \| undefined;\n @Input() searchValue;\n @Output() searchQueryChange = new EventEmitter<string>()\n @Output() clear: EventEmitter<boolean> = new EventEmitter(false);\n @Output() itemSelected = new EventEmitter<IListData>()\n @Output() itemRemoved = new EventEmitter<IListData>()\n ngOnInit(): void {\n if (this.multi && !this.uniqueKey) {\n throw new Error(\"[uniqueKey] required in multi mode.\");\n }\n if (this.disabled) {\n this.searchInput.disable();\n }\n this.searchSubscription = this.searchInput.valueChanges\n .pipe(\n // filter(val => val && val.length >= this.minInputLength),\n tap((val) => this.searchQueryChange.emit(val)),\n debounceTime(this.debounceTime),\n distinctUntilChanged()\n )\n .subscribe(res => {\n this._ngZone.run(() => {\n if (res?.length < this.minInputLength \|\| !res?.length) {\n this.closeDropdown();\n return;\n } else if (res?.length > this.minInputLength && this.httpStream) {\n this.loading = true;\n this.error = false;\n if(!this.overlayRef?.hasAttached())\n this.openDropdown(this.dd, this.origin.nativeElement);\n this.httpStream(res).subscribe(list => {\n this.loading = false;\n this.data = list;\n if (!this.overlayRef?.hasAttached() && list.length > 0) {\n this.openDropdown(this.dd, this.origin.nativeElement);\n }\n }, error => {\n this.loading = false;\n this.error = true;\n });\n }\n })\n });\n if (this.control?.value) {\n this.handleControlChanges(this.control.value);\n }\n this.controlSubscription = this.control?.valueChanges.subscribe(this.handleControlChanges);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes && changes?.searchValue?.currentValue) {\n this.searchInput.patchValue(changes.searchValue.currentValue);\n }\n if (changes && changes.disabled) {\n this.searchInput.enable();\n if (this.disabled) {\n this.searchInput.disable();\n }\n }\n }\n\n ngOnDestroy(): void {\n this.searchSubscription?.unsubscribe();\n }\n\n private handleControlChanges = (values: IListData[]) => {\n values.forEach(el => {\n this.selectData(el, true);\n });\n // tslint:disable-next-line\n };\n\n private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): void {\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(origin)\n .withPositions([\n new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }),\n new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" })\n ])\n .withPush(true);\n\n const configs = new OverlayConfig({\n hasBackdrop: true,\n backdropClass: \"cdk-overlay-transparent-backdrop\",\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n positionStrategy,\n width: origin.clientWidth\n });\n this.overlayRef = this.overlay.create(configs);\n this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n this.overlayRef.backdropClick().subscribe(res => {\n this.closeDropdown();\n });\n }\n\n /*\n closes the dropdown\n /\n closeDropdown(): void {\n this.opened = false;\n this.overlayRef?.detach();\n this.data = [];\n }\n\n /\n \n * @param item item to select\n * if item property disabled is set to true, selection will be disabled\n * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input\n /\n selectData(item: IListData, effectedFromOutside = true): void {\n if (item.disabled) {\n return;\n }\n this.itemSelected.emit(item)\n if (!this.multi) {\n this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });\n this.setControlValue(item);\n } else {\n if (!this.selections.has(item[this.uniqueKey])) {\n this.selections.set(item[this.uniqueKey], item);\n }\n this.setControlValue(this.selectedItems);\n if (!effectedFromOutside) {\n setTimeout(() => {\n this.input.nativeElement.focus();\n this.input.nativeElement.scrollIntoView();\n }, 10);\n }\n this.searchInput.patchValue(\"\");\n this.data = [];\n }\n this.closeDropdown();\n }\n\n /\n \n * @param item remove item from selected list\n /\n removeItem(item: IListData): void {\n this.itemRemoved.emit(item)\n this.selections.delete(item[this.uniqueKey]);\n this.setControlValue(this.selectedItems);\n // tslint:disable-next-line\n this.input[\"nativeElement\"].focus();\n }\n\n private setControlValue(value: IListData): void {\n this.onSelect.emit(value);\n this.control?.patchValue(value, { emitEvent: false });\n }\n\n /\n @returns list of selected items\n /\n get selectedItems(): Array<IListData> {\n return Array.from(this.selections.values());\n }\n\n removeInputValue() {\n this.searchInput.reset();\n this.data = [];\n this.clear.emit(true);\n }\n}\n","import { OverlayModule } from \"@angular/cdk/overlay\";\nimport { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\nimport { LoaderModule } from \"mis-crystal-design-system/loader\";\nimport { AsyncDropdownComponent } from \"./async-dropdown.component\";\n\n@NgModule({\n declarations: [AsyncDropdownComponent],\n imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule, LoaderModule],\n exports: [AsyncDropdownComponent]\n})\nexport class AsyncDropdownModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;MAgCa,sBAAsB;IACjC,YAAoB,OAAgB,EAAU,gBAAkC,EAAU,OAAe;QAArF,YAAO,GAAP,OAAO,CAAS;QAAU,qBAAgB,GAAhB,gBAAgB,CAAkB;QAAU,YAAO,GAAP,OAAO,CAAQ;QAEhG,SAAI,GAAgB,IAAI,CAAA;QAIxB,gBAAW,GAAG,QAAQ,CAAC;QACvB,iBAAY,GAAG,GAAG,CAAC;QACnB,mBAAc,GAAG,CAAC,CAAC;QACnB,UAAK,GAAG,KAAK,CAAC;;QAab,aAAQ,GAA0C,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC;QACnF,gBAAW,GAAgB,IAAI,WAAW,EAAE,CAAC;QAC7C,SAAI,GAAgB,EAAE,CAAC;QACvB,WAAM,GAAG,KAAK,CAAC;QACf,YAAO,GAAY,KAAK,CAAC;QACzB,UAAK,GAAY,KAAK,CAAC;;QAEd,eAAU,GAAqB,IAAI,GAAG,EAAE,CAAC;QAKxC,sBAAiB,GAAG,IAAI,YAAY,EAAU,CAAA;QAC9C,UAAK,GAA0B,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC;QACvD,iBAAY,GAAG,IAAI,YAAY,EAAa,CAAA;QAC5C,gBAAW,GAAG,IAAI,YAAY,EAAa,CAAA;QA4D7C,yBAAoB,GAAG,CAAC,MAAmB;YACjD,MAAM,CAAC,OAAO,CAAC,EAAE;gBACf,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;aAC3B,CAAC,CAAC;;SAEJ,CAAC;KAtG4G;IAsC9G,QAAQ;;QACN,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACjC,MAAM,IAAI,KAAK,CAAC,qCAAqC,CAAC,CAAC;SACxD;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;SAC5B;QACD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY;aACpD,IAAI;;QAEH,GAAG,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAC9C,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,EAC/B,oBAAoB,EAAE,CACvB;aACA,SAAS,CAAC,GAAG;YACZ,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;;gBACf,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,IAAG,IAAI,CAAC,cAAc,IAAI,EAAC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,CAAA,EAAE;oBACrD,IAAI,CAAC,aAAa,EAAE,CAAC;oBACrB,OAAO;iBACR;qBAAM,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,IAAG,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,UAAU,EAAE;oBAC/D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;oBACpB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;oBACnB,IAAG,QAAC,IAAI,CAAC,UAAU,0CAAE,WAAW,GAAE;wBAChC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;oBACxD,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,IAAI;;wBACjC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;wBACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;wBACjB,IAAI,QAAC,IAAI,CAAC,UAAU,0CAAE,WAAW,GAAE,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;4BACtD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;yBACvD;qBACF,EAAE,KAAK;wBACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;wBACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;qBACnB,CAAC,CAAC;iBACJ;aACF,CAAC,CAAA;SACH,CAAC,CAAC;QACL,UAAI,IAAI,CAAC,OAAO,0CAAE,KAAK,EAAE;YACvB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;SAC/C;QACD,IAAI,CAAC,mBAAmB,SAAG,IAAI,CAAC,OAAO,0CAAE,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;KAC5F;IAED,WAAW,CAAC,OAAsB;;QAChC,IAAI,OAAO,WAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,0CAAE,YAAY,CAAA,EAAE;YACjD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;SAC/D;QACD,IAAI,OAAO,IAAI,OAAO,CAAC,QAAQ,EAAE;YAC/B,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;YAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;aAC5B;SACF;KACF;IAED,WAAW;;QACT,MAAA,IAAI,CAAC,kBAAkB,0CAAE,WAAW,GAAG;KACxC;IASO,YAAY,CAAC,QAA8B,EAAE,MAAmB;QACtE,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO;aAClC,QAAQ,EAAE;aACV,mBAAmB,CAAC,MAAM,CAAC;aAC3B,aAAa,CAAC;YACb,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAC3G,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;SAC5G,CAAC;aACD,QAAQ,CAAC,IAAI,CAAC,CAAC;QAElB,MAAM,OAAO,GAAG,IAAI,aAAa,CAAC;YAChC,WAAW,EAAE,IAAI;YACjB,aAAa,EAAE,kCAAkC;YACjD,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE;YAC1D,gBAAgB;YAChB,KAAK,EAAE,MAAM,CAAC,WAAW;SAC1B,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC/C,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,cAAc,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC,SAAS,CAAC,GAAG;YAC3C,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB,CAAC,CAAC;KACJ;;;;IAKD,aAAa;;QACX,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,GAAG;QAC1B,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;KAChB;;;;;;;IAQD,UAAU,CAAC,IAAe,EAAE,mBAAmB,GAAG,IAAI;QACpD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QACD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC5B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;YACzE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE;gBAC9C,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,CAAC;aACjD;YACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACzC,IAAI,CAAC,mBAAmB,EAAE;gBACxB,UAAU,CAAC;oBACT,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;oBACjC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE,CAAC;iBAC3C,EAAE,EAAE,CAAC,CAAC;aACR;YACD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;YAChC,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;SAChB;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;;;;;IAMD,UAAU,CAAC,IAAe;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC3B,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;QAC7C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;QAEzC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,KAAK,EAAE,CAAC;KACrC;IAEO,eAAe,CAAC,KAAgB;;QACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;KACvD;;;;IAKD,IAAI,aAAa;QACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;KAC7C;IAED,gBAAgB;QACd,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;QACf,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACvB;;;YA1MF,SAAS,SAAC;gBACT,QAAQ,EAAE,2BAA2B;gBACrC,wvFAA8C;;aAE/C;;;YA/BgC,OAAO;YAkBtC,gBAAgB;YARhB,MAAM;;;qBAwBL,KAAK;mBACL,KAAK;yBACL,KAAK;yBACL,KAAK;kCACL,KAAK;0BACL,KAAK;2BACL,KAAK;6BACL,KAAK;oBACL,KAAK;wBACL,KAAK;sBACL,KAAK;uBACL,KAAK;uBACL,KAAK;qBACL,SAAS,SAAC,OAAO,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;oBACpC,SAAS,SAAC,OAAO,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;iBACpC,SAAS,SAAC,IAAI,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;yBACjC,YAAY,SAAC,eAAe,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;2BAE/C,YAAY,SAAC,mBAAmB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAC;uBAGlD,MAAM;yBAON,KAAK;0BAIL,KAAK;gCACL,MAAM;oBACN,MAAM;2BACN,MAAM;0BACN,MAAM;;;MC1DI,mBAAmB;;;YAL/B,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,sBAAsB,CAAC;gBACtC,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,WAAW,EAAE,YAAY,CAAC;gBACtF,OAAO,EAAE,CAAC,sBAAsB,CAAC;aAClC;;;ACXD;;;;;;"}

package/fesm2015/mis-crystal-design-system-dynamic-form.js ADDED Viewed

@@ -0,0 +1,186 @@
+import { CommonModule } from '@angular/common';
+import { FormArray, FormGroup, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
+import { DropdownModule } from 'mis-crystal-design-system/dropdown';
+import * as moment from 'moment';
+import { tz } from 'moment';
+import 'moment-timezone';
+import { SwitchModule } from 'mis-crystal-design-system/switch';
+import { MultiSelectDropdownModule } from 'mis-crystal-design-system/multi-select-dropdown';
+import { DatepickerModuleV2 } from 'mis-crystal-design-system/datepicker_v2';
+class DynamicFormComponent {
+    constructor() {
+        /**
+         * 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.
+        */
+        this.formFields = [];
+        this.formValues = {};
+        this.activeBtnIconUrl = "";
+        this.calendarUrl = "";
+        /**
+         * formUpdated: Emits formValues Object whenever there is a change in the dynamic form.
+        */
+        this.formUpdated = new EventEmitter();
+        this.setupFormControls = () => {
+            let formArray = new FormArray([]);
+            for (let field of this.formFields) {
+                let control = this.mapFormValueToFormField(field, (this.formValues && this.formValues[field.configName]) ? this.formValues[field.configName] : null);
+                formArray.push(control);
+            }
+            this.dynamicForm = new FormGroup({
+                dynamicFields: formArray
+            });
+        };
+    }
+    ngOnInit() {
+        // Building the form
+        this.setupFormControls();
+        // Subscribing to form changes and emiting values.
+        this.dynamicForm.valueChanges.subscribe((formValue) => {
+            let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
+            this.formUpdated.emit(formValues);
+        });
+    }
+    generateDynamicFieldsValueObject(formValues) {
+        let dynamicFieldsValue = {};
+        formValues.forEach((value, index) => {
+            dynamicFieldsValue[this.formFields[index].configName] = this.mapFormFieldToFormValue(this.formFields[index], value);
+        });
+        return dynamicFieldsValue;
+    }
+    getDynamicFieldsControls() {
+        return this.dynamicForm.get('dynamicFields');
+    }
+    updateSelectedValueForField(index, value) {
+        let array = this.dynamicForm.get('dynamicFields').controls;
+        array[index].setValue(value);
+    }
+    updateSelectedValueForMultiSelect(index, values) {
+        let control = this.dynamicForm.get('dynamicFields').controls[index];
+        let selectedValues = control.value;
+        for (let value of values) {
+            let itemIndex = selectedValues.findIndex((item) => item.label === value.label);
+            if (itemIndex > -1) {
+                selectedValues.splice(itemIndex, 1);
+            }
+            else {
+                selectedValues.push(Object.assign({}, value));
+            }
+        }
+        control.setValue(selectedValues);
+    }
+    isCheckBoxSelected(value, selectedValues) {
+        return selectedValues.findIndex((item) => item.label === value) > -1;
+    }
+    mapFormValueToFormField(formField, formValue) {
+        let control = new FormControl();
+        if (formField.fieldType === 'input') {
+            if (formField.fieldInputType === 'text' || formField.fieldInputType === 'textarea')
+                control.setValue(formValue ? formValue : '');
+            else if (formField.fieldInputType === 'number')
+                control.setValue(formValue ? formValue : '');
+            else if (formField.fieldInputType === 'date') {
+                if (formValue && typeof formValue === 'number') {
+                    control.setValue(moment(formValue).tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));
+                }
+                else {
+                    control.setValue(moment().tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));
+                }
+            }
+        }
+        else if (formField.fieldType === 'singleSelect') {
+            if (formField.fieldInputType === 'dropdown') {
+                if (!formValue)
+                    control.setValue(formField.itemsList[0]);
+                else {
+                    let f = formField.itemsList.filter((item) => item.value === formValue);
+                    if (f[0])
+                        control.setValue(f[0]);
+                }
+            }
+        }
+        else if (formField.fieldType === 'multiSelect') {
+            if (formValue && Array.isArray(formValue)) {
+                let selectedValues = [];
+                for (let value of formValue) {
+                    let index = formField.itemsList.findIndex((item) => item.value === value);
+                    if (index > -1)
+                        selectedValues.push(Object.assign({}, formField.itemsList[index]));
+                }
+                control.setValue(selectedValues);
+            }
+            else {
+                control.setValue([]);
+            }
+        }
+        else if (formField.fieldType === 'boolean') {
+            control.setValue(!!formValue);
+        }
+        else
+            control.setValue(null);
+        return control;
+    }
+    mapFormFieldToFormValue(formField, formValue) {
+        if (formField.fieldType === 'input') {
+            if (formField.fieldInputType === 'text' || formField.fieldInputType === 'textarea')
+                return formValue;
+            else if (formField.fieldInputType === 'number')
+                return formValue;
+            else if (formField.fieldInputType === 'date') {
+                return tz(formValue, formField.fieldConfig.format, formField.fieldConfig.timezone).valueOf();
+            }
+        }
+        else if (formField.fieldType === 'singleSelect') {
+            if (formField.fieldInputType === 'dropdown')
+                return formValue === null || formValue === void 0 ? void 0 : formValue.value;
+        }
+        else if (formField.fieldType === 'multiSelect') {
+            return formValue === null || formValue === void 0 ? void 0 : formValue.map((item) => item.value);
+        }
+        else if (formField.fieldType === 'boolean') {
+            return formValue;
+        }
+        else
+            return formValue;
+    }
+}
+DynamicFormComponent.decorators = [
+    { type: Component, args: [{
+                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 class=\"dynamic-field multi-line-field-container\"\n                *ngIf=\"formFields[i].fieldType === 'input' && (formFields[i].fieldInputType === 'text' || formFields[i].fieldInputType === 'number')\">\n                <p class=\"h7 field-title-sm\">\n                    {{ formFields[i].title }}\n                </p>\n                <div style=\"flex-basis: 100%\"></div>\n                <input class=\"input-field ip-text\" [type]=\"formFields[i].fieldInputType\" [formControl]=\"fieldControl\" [placeholder]=\"formFields[i].placeholderText?formFields[i].placeholderText:'Input Text'\" />\n            </div>\n            <div class=\"dynamic-field single-line-field-container\"\n                *ngIf=\"formFields[i].fieldType === 'singleSelect' && formFields[i].fieldInputType === 'dropdown'\">\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 class=\"dynamic-field single-line-field-container\"\n                *ngIf=\"formFields[i].fieldType === 'boolean' && formFields[i].fieldInputType === 'toggle'\">\n                <p class=\"h6\">\n                    {{ formFields[i].title }}\n                </p>\n                <mis-switch [formControl]=\"fieldControl\"></mis-switch>\n            </div>\n            <div class=\"dynamic-field multi-line-field-container\"\n                *ngIf=\"formFields[i].fieldType === 'input' && formFields[i].fieldInputType === 'textarea'\">\n                <p class=\"h7 field-title-sm\">\n                    {{ formFields[i].title }}\n                </p>\n                <div style=\"flex-basis: 100%\"></div>\n                <textarea class=\"input-field ip-textarea\" type=\"text\" [placeholder]=\"formFields[i].placeholderText ? formFields[i].placeholderText : 'Input Text'\" [formControl]=\"fieldControl\"></textarea>\n            </div>\n            <div class=\"dynamic-field single-line-field-container\"\n                *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 class=\"date-picker\" readonly misTzDp [dpConfig]=\"formFields[i].fieldConfig\" (dateChange)=\"updateSelectedValueForField(i, $event)\" [selectedDate]=\"fieldControl.value\"\n                        [offsetY]=\"0\" [value]=\"fieldControl.value\" #dp />\n                    <img alt=\"data-picker\" *ngIf=\"calendarUrl\" class='date-picker-icon' [src]=\"calendarUrl\" (click)=\"dp.click()\" />\n                </div>\n            </div>\n            <div class=\"dynamic-field multi-line-field-container\"\n                *ngIf=\"formFields[i].fieldType === 'multiSelect' && formFields[i].fieldInputType === 'checkbox'\">\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 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 class=\"dynamic-field single-line-field-container\"\n                *ngIf=\"formFields[i].fieldType === 'multiSelect' && formFields[i].fieldInputType === 'dropdown'\">\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\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)}"]
+            },] }
+];
+DynamicFormComponent.ctorParameters = () => [];
+DynamicFormComponent.propDecorators = {
+    formFields: [{ type: Input }],
+    formValues: [{ type: Input }],
+    activeBtnIconUrl: [{ type: Input }],
+    calendarUrl: [{ type: Input }],
+    formUpdated: [{ type: Output }]
+};
+class DynamicFormModule {
+    static forRoot() {
+        return { ngModule: DynamicFormModule, providers: [] };
+    }
+}
+DynamicFormModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [DynamicFormComponent],
+                imports: [CommonModule, ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule, SwitchModule, MultiSelectDropdownModule, DatepickerModuleV2],
+                exports: [DynamicFormComponent]
+            },] }
+];
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { DynamicFormModule, DynamicFormComponent as ɵa };
+//# sourceMappingURL=mis-crystal-design-system-dynamic-form.js.map

package/fesm2015/mis-crystal-design-system-dynamic-form.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mis-crystal-design-system-dynamic-form.js","sources":["../../../projects/mis-components/dynamic-form/dynamic-form.component.ts","../../../projects/mis-components/dynamic-form/dynamic-form.module.ts","../../../projects/mis-components/dynamic-form/mis-crystal-design-system-dynamic-form.ts"],"sourcesContent":["import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';\nimport { NsDynamicFields } from './dynamic-form.namespace';\nimport * as moment from 'moment';\nimport 'moment-timezone';\nimport { FormArray, FormControl, FormGroup } from '@angular/forms';\n\n@Component({\n selector: 'mis-dynamic-form',\n templateUrl: './dynamic-form.component.html',\n styleUrls: ['./dynamic-form.component.scss']\n})\nexport class DynamicFormComponent implements OnInit {\n\n /** \n * formFields: Dynamic fields recieved from the API metadata to build a dynamic form\n * formValues: Holds the value of the dynamic form with \"key\" being dynamic field \"title\"\n * and value being the user input.\n */\n @Input() formFields: Array<NsDynamicFields.IField> = []\n @Input() formValues: { [key: string]: any } = {}\n @Input() activeBtnIconUrl = \"\";\n @Input() calendarUrl = \"\";\n /** \n * dynamicForm: Constructed using formFields and formValues(in case of edit)\n */\n dynamicForm: FormGroup\n\n /** \n * formUpdated: Emits formValues Object whenever there is a change in the dynamic form.\n */\n @Output() formUpdated = new EventEmitter<{[key: string]: any}>()\n\n constructor() { }\n\n ngOnInit(): void {\n // Building the form\n this.setupFormControls();\n \n // Subscribing to form changes and emiting values.\n this.dynamicForm.valueChanges.subscribe((formValue) => {\n let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields)\n this.formUpdated.emit(formValues)\n })\n }\n generateDynamicFieldsValueObject(formValues: Array<any>): {[key: string]: any} {\n let dynamicFieldsValue = {}\n formValues.forEach((value, index) => {\n dynamicFieldsValue[this.formFields[index].configName] = this.mapFormFieldToFormValue(this.formFields[index], value)\n })\n return dynamicFieldsValue\n }\n setupFormControls = (): void => {\n let formArray = new FormArray([])\n for (let field of this.formFields) {\n let control = this.mapFormValueToFormField(field, (this.formValues && this.formValues[field.configName]) ? this.formValues[field.configName]: null)\n formArray.push(control)\n }\n this.dynamicForm = new FormGroup({\n dynamicFields: formArray\n })\n }\n getDynamicFieldsControls(): FormArray {\n return this.dynamicForm.get('dynamicFields') as FormArray\n }\n updateSelectedValueForField(index: number, value: any): void {\n let array = (this.dynamicForm.get('dynamicFields') as FormArray).controls\n array[index].setValue(value)\n }\n updateSelectedValueForMultiSelect(index: number, values: Array<any>): void {\n let control = (this.dynamicForm.get('dynamicFields') as FormArray).controls[index]\n let selectedValues: Array<{label: string, value: any}> = control.value\n for (let value of values) {\n let itemIndex = selectedValues.findIndex((item) => item.label === value.label)\n if (itemIndex > -1) {\n selectedValues.splice(itemIndex, 1);\n }\n else {\n selectedValues.push({ ...value })\n }\n }\n control.setValue(selectedValues)\n }\n isCheckBoxSelected(value: string, selectedValues: Array<{ label: string, value: string }>): boolean {\n return selectedValues.findIndex((item) => item.label === value) > -1\n }\n mapFormValueToFormField(formField: NsDynamicFields.IField, formValue: any): any {\n let control = new FormControl()\n if (formField.fieldType === 'input') {\n if (formField.fieldInputType === 'text' || formField.fieldInputType === 'textarea') control.setValue(formValue ? formValue : '')\n else if (formField.fieldInputType === 'number') control.setValue(formValue ? formValue : '')\n else if (formField.fieldInputType === 'date') {\n if (formValue && typeof formValue === 'number') {\n control.setValue(moment(formValue).tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format))\n } else {\n control.setValue(moment().tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format))\n }\n }\n }\n else if (formField.fieldType === 'singleSelect') {\n if (formField.fieldInputType === 'dropdown') {\n if (!formValue) control.setValue(formField.itemsList[0])\n else {\n let f = formField.itemsList.filter((item) => item.value === formValue)\n if(f[0]) control.setValue(f[0])\n }\n }\n }\n else if (formField.fieldType === 'multiSelect') {\n if (formValue && Array.isArray(formValue)) {\n let selectedValues = []\n for (let value of formValue) {\n let index = formField.itemsList.findIndex((item) => item.value === value)\n if(index > -1) selectedValues.push({...formField.itemsList[index]})\n }\n control.setValue(selectedValues)\n } else {\n control.setValue([])\n }\n }\n else if (formField.fieldType === 'boolean') {\n control.setValue(!!formValue)\n }\n else control.setValue(null)\n return control;\n }\n mapFormFieldToFormValue(formField: NsDynamicFields.IField, formValue: any): any {\n if (formField.fieldType === 'input') {\n if (formField.fieldInputType === 'text' || formField.fieldInputType === 'textarea') return formValue\n else if (formField.fieldInputType === 'number') return formValue\n else if (formField.fieldInputType === 'date') {\n return moment.tz(formValue, formField.fieldConfig.format, formField.fieldConfig.timezone).valueOf()\n }\n }\n else if (formField.fieldType === 'singleSelect') {\n if (formField.fieldInputType === 'dropdown') return formValue?.value\n }\n else if (formField.fieldType === 'multiSelect') {\n return formValue?.map((item) => item.value)\n }\n else if (formField.fieldType === 'boolean') {\n return formValue\n }\n else return formValue\n }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { DropdownModule } from \"mis-crystal-design-system/dropdown\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\nimport { DynamicFormComponent } from \"./dynamic-form.component\";\nimport { SwitchModule } from \"mis-crystal-design-system/switch\";\nimport { MultiSelectDropdownModule } from \"mis-crystal-design-system/multi-select-dropdown\";\nimport { DatepickerModuleV2 } from \"mis-crystal-design-system/datepicker_v2\";\n\n\n@NgModule({\n declarations: [DynamicFormComponent],\n imports: [CommonModule,ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule, SwitchModule, MultiSelectDropdownModule, DatepickerModuleV2],\n exports: [DynamicFormComponent]\n})\nexport class DynamicFormModule {\n static forRoot(): ModuleWithProviders<DynamicFormModule> {\n return { ngModule: DynamicFormModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {DynamicFormComponent as ɵa} from './dynamic-form.component';"],"names":["moment.tz"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mis-crystal-design-system",
-  "version": "3.1.7",
+  "version": "3.1.9",
   "peerDependencies": {
     "@angular/common": "*",
     "@angular/core": "*",