mis-crystal-design-system 3.1.18 → 4.0.1
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.
- package/bundles/mis-crystal-design-system-dynamic-form.umd.js +191 -53
- package/bundles/mis-crystal-design-system-dynamic-form.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-dynamic-form.umd.min.js +2 -2
- package/bundles/mis-crystal-design-system-dynamic-form.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-switch.umd.js +7 -7
- package/bundles/mis-crystal-design-system-switch.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-switch.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-switch.umd.min.js.map +1 -1
- package/dynamic-form/dynamic-form.component.d.ts +34 -12
- package/dynamic-form/dynamic-form.namespace.d.ts +15 -3
- package/dynamic-form/mis-crystal-design-system-dynamic-form.metadata.json +1 -1
- package/esm2015/dynamic-form/dynamic-form.component.js +165 -37
- package/esm2015/dynamic-form/dynamic-form.namespace.js +1 -1
- package/esm2015/switch/switch.component.js +8 -8
- package/fesm2015/mis-crystal-design-system-dynamic-form.js +164 -36
- package/fesm2015/mis-crystal-design-system-dynamic-form.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-switch.js +7 -7
- package/fesm2015/mis-crystal-design-system-switch.js.map +1 -1
- package/package.json +1 -1
- package/switch/mis-crystal-design-system-switch.metadata.json +1 -1
- package/switch/switch.component.d.ts +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
|
-
import { FormArray, FormGroup, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
2
|
+
import { FormArray, FormGroup, Validators, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
3
3
|
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
|
|
4
4
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
5
5
|
import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
|
|
@@ -20,56 +20,107 @@ class DynamicFormComponent {
|
|
|
20
20
|
*/
|
|
21
21
|
this.formFields = [];
|
|
22
22
|
this.formValues = {};
|
|
23
|
+
// Need to deprecate these inputs and use constants.
|
|
23
24
|
this.activeBtnIconUrl = "";
|
|
24
25
|
this.calendarIconUrl = "";
|
|
25
26
|
/**
|
|
26
27
|
* formUpdated: Emits formValues Object whenever there is a change in the dynamic form.
|
|
27
28
|
*/
|
|
28
29
|
this.formUpdated = new EventEmitter();
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
dynamicFields: formArray
|
|
38
|
-
});
|
|
39
|
-
};
|
|
30
|
+
/**
|
|
31
|
+
* formValid: Emits boolean depending on validity of the form
|
|
32
|
+
*/
|
|
33
|
+
this.formValid = new EventEmitter();
|
|
34
|
+
/**
|
|
35
|
+
* formInitialized: Emits dynamic form API on form initilization
|
|
36
|
+
*/
|
|
37
|
+
this.formInitialized = new EventEmitter();
|
|
40
38
|
}
|
|
41
39
|
ngOnInit() {
|
|
42
40
|
// Building the form
|
|
43
|
-
this.
|
|
41
|
+
this.dynamicForm = this.generateDynamicForm(this.formFields, this.formValues);
|
|
44
42
|
// Subscribing to form changes and emiting values.
|
|
45
|
-
this.dynamicForm.valueChanges.subscribe(formValue => {
|
|
46
|
-
|
|
47
|
-
this.formUpdated.emit(formValues);
|
|
43
|
+
this.valueChangesSubscription$ = this.dynamicForm.valueChanges.subscribe(formValue => {
|
|
44
|
+
this.onFormValueChanges();
|
|
48
45
|
});
|
|
49
46
|
//api to expose functions
|
|
50
|
-
this.
|
|
47
|
+
this.dynamicFormAPI = {
|
|
51
48
|
defaultFormValues: () => {
|
|
52
49
|
return this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
|
|
53
50
|
}
|
|
54
51
|
};
|
|
55
|
-
this.
|
|
52
|
+
this.formInitialized.emit(this.dynamicFormAPI);
|
|
53
|
+
}
|
|
54
|
+
ngOnDestroy() {
|
|
55
|
+
var _a;
|
|
56
|
+
(_a = this.valueChangesSubscription$) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
57
|
+
}
|
|
58
|
+
onFormValueChanges() {
|
|
59
|
+
let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
|
|
60
|
+
this.formValid.emit(this.dynamicForm.valid);
|
|
61
|
+
this.formUpdated.emit(formValues);
|
|
62
|
+
console.log(formValues);
|
|
56
63
|
}
|
|
57
64
|
generateDynamicFieldsValueObject(formValues) {
|
|
58
65
|
let dynamicFieldsValue = {};
|
|
59
|
-
formValues.forEach((
|
|
60
|
-
|
|
66
|
+
formValues.forEach((fieldValue, index) => {
|
|
67
|
+
var _a;
|
|
68
|
+
let formattedValue = this.mapFormFieldToFormValue(this.formFields[index], fieldValue.value);
|
|
69
|
+
if (((_a = fieldValue.subFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
70
|
+
let formattedSubFieldsValues = {};
|
|
71
|
+
fieldValue.subFields.forEach((subFieldValue, subIndex) => {
|
|
72
|
+
let subFormField = this.formFields[index].subFields[subIndex];
|
|
73
|
+
formattedSubFieldsValues[subFormField.configName] = this.mapFormFieldToFormValue(subFormField, subFieldValue);
|
|
74
|
+
});
|
|
75
|
+
dynamicFieldsValue[this.formFields[index].configName] = {
|
|
76
|
+
value: formattedValue,
|
|
77
|
+
subFields: formattedSubFieldsValues
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
else {
|
|
81
|
+
dynamicFieldsValue[this.formFields[index].configName] = formattedValue;
|
|
82
|
+
}
|
|
61
83
|
});
|
|
62
84
|
return dynamicFieldsValue;
|
|
63
85
|
}
|
|
86
|
+
generateDynamicForm(formFields, formValues) {
|
|
87
|
+
var _a;
|
|
88
|
+
let formArray = new FormArray([]);
|
|
89
|
+
for (let field of formFields) {
|
|
90
|
+
let fieldValue = ((_a = formValues[field.configName]) === null || _a === void 0 ? void 0 : _a.value) ? formValues[field.configName].value : formValues[field.configName];
|
|
91
|
+
let fieldControl = this.mapFormValueToFormField(field, fieldValue);
|
|
92
|
+
let subFieldsControls = this.generateSubDynamicFields(formValues, field, fieldValue);
|
|
93
|
+
formArray.push(new FormGroup({
|
|
94
|
+
value: fieldControl,
|
|
95
|
+
subFields: subFieldsControls
|
|
96
|
+
}));
|
|
97
|
+
}
|
|
98
|
+
return new FormGroup({
|
|
99
|
+
dynamicFields: formArray
|
|
100
|
+
});
|
|
101
|
+
}
|
|
64
102
|
getDynamicFieldsControls() {
|
|
65
103
|
return this.dynamicForm.get("dynamicFields");
|
|
66
104
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
105
|
+
updateSubDynamicFields(field, formGroup, value) {
|
|
106
|
+
var _a;
|
|
107
|
+
if (((_a = field.subFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
108
|
+
let subFieldsControls = this.generateSubDynamicFields(this.formValues, field, value);
|
|
109
|
+
formGroup.removeControl('subFields');
|
|
110
|
+
formGroup.addControl('subFields', subFieldsControls);
|
|
111
|
+
}
|
|
70
112
|
}
|
|
71
|
-
|
|
72
|
-
|
|
113
|
+
updateSelectedValueForSingleSelect(field, control, formGroup, value) {
|
|
114
|
+
var _a;
|
|
115
|
+
if (((_a = control.value) === null || _a === void 0 ? void 0 : _a.value) !== value.value) {
|
|
116
|
+
control.setValue(value);
|
|
117
|
+
}
|
|
118
|
+
else
|
|
119
|
+
control.setValue('');
|
|
120
|
+
this.updateSubDynamicFields(field, formGroup, value);
|
|
121
|
+
control.markAsTouched();
|
|
122
|
+
}
|
|
123
|
+
updateSelectedValueForMultiSelect(field, control, formGroup, values) {
|
|
73
124
|
let selectedValues = control.value;
|
|
74
125
|
for (let value of values) {
|
|
75
126
|
let itemIndex = selectedValues.findIndex(item => item.label === value.label);
|
|
@@ -81,12 +132,34 @@ class DynamicFormComponent {
|
|
|
81
132
|
}
|
|
82
133
|
}
|
|
83
134
|
control.setValue(selectedValues);
|
|
135
|
+
this.updateSubDynamicFields(field, formGroup, values);
|
|
136
|
+
control.markAsTouched();
|
|
84
137
|
}
|
|
85
138
|
isCheckBoxSelected(value, selectedValues) {
|
|
86
139
|
return selectedValues.findIndex(item => item.label === value) > -1;
|
|
87
140
|
}
|
|
141
|
+
generateSubDynamicFields(formValues, parentField, parentValue) {
|
|
142
|
+
var _a;
|
|
143
|
+
let controls = new FormArray([]);
|
|
144
|
+
let subFields = parentField.subFields;
|
|
145
|
+
let subFieldsValues = ((_a = formValues[parentField.configName]) === null || _a === void 0 ? void 0 : _a.subFields) ? formValues[parentField.configName].subFields : {};
|
|
146
|
+
if (parentField.fieldType === 'singleSelect') {
|
|
147
|
+
subFields = subFields.filter((subField) => { var _a; return subField.parentConfigValue === ((_a = parentValue) === null || _a === void 0 ? void 0 : _a.value); });
|
|
148
|
+
}
|
|
149
|
+
else if (parentField.fieldType === 'multiSelect') {
|
|
150
|
+
let parentValues = new Set(parentValue.map((value) => value.value));
|
|
151
|
+
subFields = subFields.filter((subField) => parentValues.has(subField.parentConfigValue));
|
|
152
|
+
}
|
|
153
|
+
if ((subFields === null || subFields === void 0 ? void 0 : subFields.length) > 0) {
|
|
154
|
+
for (let subField of subFields) {
|
|
155
|
+
controls.push(this.mapFormValueToFormField(subField, subFieldsValues[subField.configName]));
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
return controls;
|
|
159
|
+
}
|
|
88
160
|
mapFormValueToFormField(formField, formValue) {
|
|
89
|
-
let
|
|
161
|
+
let validators = formField.validators ? [dynamicFieldValidator(formField.validators)] : [];
|
|
162
|
+
let control = new FormControl(null, validators);
|
|
90
163
|
if (formField.fieldType === "input") {
|
|
91
164
|
if (formField.fieldInputType === "text" || formField.fieldInputType === "textarea")
|
|
92
165
|
control.setValue(formValue ? formValue : "");
|
|
@@ -102,14 +175,18 @@ class DynamicFormComponent {
|
|
|
102
175
|
}
|
|
103
176
|
}
|
|
104
177
|
else if (formField.fieldType === "singleSelect") {
|
|
178
|
+
const findSelectedValue = () => {
|
|
179
|
+
let index = formField.itemsList.findIndex(item => item.value === formValue);
|
|
180
|
+
return index > 0 ? formField.itemsList[index] : "";
|
|
181
|
+
};
|
|
105
182
|
if (formField.fieldInputType === "dropdown") {
|
|
106
183
|
if (!formValue)
|
|
107
184
|
control.setValue(formField.itemsList[0]);
|
|
108
|
-
else
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
185
|
+
else
|
|
186
|
+
control.setValue(findSelectedValue());
|
|
187
|
+
}
|
|
188
|
+
else if (formField.fieldInputType === "radio") {
|
|
189
|
+
control.setValue(findSelectedValue());
|
|
113
190
|
}
|
|
114
191
|
}
|
|
115
192
|
else if (formField.fieldType === "multiSelect") {
|
|
@@ -134,6 +211,7 @@ class DynamicFormComponent {
|
|
|
134
211
|
return control;
|
|
135
212
|
}
|
|
136
213
|
mapFormFieldToFormValue(formField, formValue) {
|
|
214
|
+
var _a;
|
|
137
215
|
if (formField.fieldType === "input") {
|
|
138
216
|
if (formField.fieldInputType === "text" || formField.fieldInputType === "textarea")
|
|
139
217
|
return formValue;
|
|
@@ -144,8 +222,7 @@ class DynamicFormComponent {
|
|
|
144
222
|
}
|
|
145
223
|
}
|
|
146
224
|
else if (formField.fieldType === "singleSelect") {
|
|
147
|
-
|
|
148
|
-
return formValue === null || formValue === void 0 ? void 0 : formValue.value;
|
|
225
|
+
return (_a = formValue === null || formValue === void 0 ? void 0 : formValue.value) !== null && _a !== void 0 ? _a : '';
|
|
149
226
|
}
|
|
150
227
|
else if (formField.fieldType === "multiSelect") {
|
|
151
228
|
return formValue === null || formValue === void 0 ? void 0 : formValue.map(item => item.value);
|
|
@@ -160,8 +237,8 @@ class DynamicFormComponent {
|
|
|
160
237
|
DynamicFormComponent.decorators = [
|
|
161
238
|
{ type: Component, args: [{
|
|
162
239
|
selector: "mis-dynamic-form",
|
|
163
|
-
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
|
|
164
|
-
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)}"]
|
|
240
|
+
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 {{\" \u2022 \" + error.value}}\n </p>\n <div style=\"flex-basis: 100%; height: 0\"></div>\n </ng-container>\n </div>\n</ng-template>",
|
|
241
|
+
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)}"]
|
|
165
242
|
},] }
|
|
166
243
|
];
|
|
167
244
|
DynamicFormComponent.ctorParameters = () => [];
|
|
@@ -171,7 +248,58 @@ DynamicFormComponent.propDecorators = {
|
|
|
171
248
|
activeBtnIconUrl: [{ type: Input }],
|
|
172
249
|
calendarIconUrl: [{ type: Input }],
|
|
173
250
|
formUpdated: [{ type: Output }],
|
|
174
|
-
|
|
251
|
+
formValid: [{ type: Output }],
|
|
252
|
+
formInitialized: [{ type: Output }]
|
|
253
|
+
};
|
|
254
|
+
const dynamicFieldValidator = (validators) => {
|
|
255
|
+
return (control) => {
|
|
256
|
+
let value = control.value;
|
|
257
|
+
if (Array.isArray(value)) {
|
|
258
|
+
return null;
|
|
259
|
+
}
|
|
260
|
+
else if (typeof value === 'object') {
|
|
261
|
+
value = (value === null || value === void 0 ? void 0 : value.value) ? value.value : '';
|
|
262
|
+
}
|
|
263
|
+
let errors = null;
|
|
264
|
+
validators.forEach((validator) => {
|
|
265
|
+
let error = null;
|
|
266
|
+
let message = validator.message;
|
|
267
|
+
switch (validator.type) {
|
|
268
|
+
case "Required":
|
|
269
|
+
error = Validators.required(control);
|
|
270
|
+
if (error)
|
|
271
|
+
error = { Required: message };
|
|
272
|
+
break;
|
|
273
|
+
case "MinLength":
|
|
274
|
+
error = Validators.minLength(+validator.value)(control);
|
|
275
|
+
message = message.replace('${0}', error === null || error === void 0 ? void 0 : error.minlength.requiredLength);
|
|
276
|
+
if (error)
|
|
277
|
+
error = { MinLength: message };
|
|
278
|
+
break;
|
|
279
|
+
case "MaxLength":
|
|
280
|
+
error = Validators.maxLength(+validator.value)(control);
|
|
281
|
+
message = message.replace('${0}', error === null || error === void 0 ? void 0 : error.actualLength);
|
|
282
|
+
if (error)
|
|
283
|
+
error = { MaxLength: message };
|
|
284
|
+
break;
|
|
285
|
+
case "Email":
|
|
286
|
+
error = Validators.email(control);
|
|
287
|
+
if (error)
|
|
288
|
+
error = { Email: message };
|
|
289
|
+
break;
|
|
290
|
+
case "Custom":
|
|
291
|
+
error = Validators.pattern(`${validator.value}`)(control);
|
|
292
|
+
if (error)
|
|
293
|
+
error = { Custom: message };
|
|
294
|
+
break;
|
|
295
|
+
default:
|
|
296
|
+
break;
|
|
297
|
+
}
|
|
298
|
+
if (error)
|
|
299
|
+
errors = Object.assign(Object.assign({}, errors), error);
|
|
300
|
+
});
|
|
301
|
+
return errors;
|
|
302
|
+
};
|
|
175
303
|
};
|
|
176
304
|
|
|
177
305
|
class DynamicFormModule {
|
|
@@ -1 +1 @@
|
|
|
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 * 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() calendarIconUrl = \"\";\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 @Output() initializedDynamicForm = new EventEmitter<any>();\n\n dynamicFieldsAPI: NsDynamicFields.IDynamicFormAPI;\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 //api to expose functions\n this.dynamicFieldsAPI = {\n defaultFormValues: () => {\n return this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);\n }\n };\n this.initializedDynamicForm.emit(this.dynamicFieldsAPI);\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(\n field,\n this.formValues && this.formValues[field.configName] ? this.formValues[field.configName] : null\n );\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 } 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 : 0);\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 } 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 } 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 } else if (formField.fieldType === \"boolean\") {\n control.setValue(!!formValue);\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 } else if (formField.fieldType === \"singleSelect\") {\n if (formField.fieldInputType === \"dropdown\") return formValue?.value;\n } else if (formField.fieldType === \"multiSelect\") {\n return formValue?.map(item => item.value);\n } else if (formField.fieldType === \"boolean\") {\n return formValue;\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@NgModule({\n declarations: [DynamicFormComponent],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n FormsModule,\n OverlayModule,\n ScrollingModule,\n DropdownModule,\n SwitchModule,\n MultiSelectDropdownModule,\n DatepickerModuleV2\n ],\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"],"names":["moment.tz"],"mappings":"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"}
|
|
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, HostListener, Input, OnDestroy, OnInit, Output } from \"@angular/core\";\nimport { NsDynamicForm } from \"./dynamic-form.namespace\";\nimport { AbstractControl, FormArray, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from \"@angular/forms\";\n\nimport * as moment from \"moment\";\nimport \"moment-timezone\";\nimport { Subscription } from \"rxjs\";\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, OnDestroy {\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<NsDynamicForm.IDynamicField> = [];\n @Input() formValues: { [key: string]: any } = {};\n // Need to deprecate these inputs and use constants.\n @Input() activeBtnIconUrl = \"\";\n @Input() calendarIconUrl = \"\";\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 * formValid: Emits boolean depending on validity of the form\n */\n @Output() formValid = new EventEmitter<boolean>();\n /**\n * formInitialized: Emits dynamic form API on form initilization\n */\n @Output() formInitialized = new EventEmitter<any>();\n\n dynamicFormAPI: NsDynamicForm.IDynamicFormAPI;\n valueChangesSubscription$: Subscription;\n\n constructor() {}\n\n ngOnInit(): void {\n // Building the form\n this.dynamicForm = this.generateDynamicForm(this.formFields, this.formValues);\n\n // Subscribing to form changes and emiting values.\n this.valueChangesSubscription$ = this.dynamicForm.valueChanges.subscribe(formValue => {\n this.onFormValueChanges();\n });\n\n //api to expose functions\n this.dynamicFormAPI = {\n defaultFormValues: () => {\n return this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);\n }\n };\n this.formInitialized.emit(this.dynamicFormAPI);\n }\n ngOnDestroy(): void {\n this.valueChangesSubscription$?.unsubscribe();\n }\n onFormValueChanges(): void {\n let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);\n this.formValid.emit(this.dynamicForm.valid);\n this.formUpdated.emit(formValues);\n console.log(formValues)\n }\n generateDynamicFieldsValueObject(formValues: Array<any>): { [key: string]: any } {\n let dynamicFieldsValue = {};\n formValues.forEach((fieldValue, index) => {\n let formattedValue = this.mapFormFieldToFormValue(this.formFields[index], fieldValue.value);\n if (fieldValue.subFields?.length > 0) {\n let formattedSubFieldsValues = {}\n fieldValue.subFields.forEach((subFieldValue, subIndex) => {\n let subFormField = this.formFields[index].subFields[subIndex]\n formattedSubFieldsValues[subFormField.configName] = this.mapFormFieldToFormValue(subFormField, subFieldValue)\n })\n dynamicFieldsValue[this.formFields[index].configName] = {\n value: formattedValue,\n subFields: formattedSubFieldsValues\n }\n }\n else {\n dynamicFieldsValue[this.formFields[index].configName] = formattedValue;\n }\n });\n return dynamicFieldsValue;\n }\n generateDynamicForm(\n formFields: Array<NsDynamicForm.IDynamicField>,\n formValues: { [key: string]: any }\n ): FormGroup {\n let formArray = new FormArray([])\n\n for (let field of formFields) {\n let fieldValue = formValues[field.configName]?.value ? formValues[field.configName].value : formValues[field.configName]\n let fieldControl = this.mapFormValueToFormField(field, fieldValue);\n let subFieldsControls = this.generateSubDynamicFields(formValues, field, fieldValue);\n formArray.push(new FormGroup({\n value: fieldControl,\n subFields: subFieldsControls\n }))\n } \n return new FormGroup({\n dynamicFields: formArray\n })\n }\n getDynamicFieldsControls(): FormArray {\n return this.dynamicForm.get(\"dynamicFields\") as FormArray;\n }\n updateSubDynamicFields(\n field: NsDynamicForm.IDynamicField,\n formGroup: FormGroup,\n value: any\n ): void {\n if (field.subFields?.length > 0) {\n let subFieldsControls = this.generateSubDynamicFields(this.formValues, field, value);\n formGroup.removeControl('subFields')\n formGroup.addControl('subFields', subFieldsControls)\n }\n }\n updateSelectedValueForSingleSelect(\n field: NsDynamicForm.IDynamicField,\n control: FormControl,\n formGroup: FormGroup,\n value: any\n ): void {\n if (control.value?.value !== value.value) {\n control.setValue(value);\n }\n else control.setValue('');\n this.updateSubDynamicFields(field, formGroup, value);\n control.markAsTouched();\n }\n updateSelectedValueForMultiSelect(\n field: NsDynamicForm.IDynamicField,\n control: FormControl,\n formGroup: FormGroup,\n values: Array<any>\n ): void {\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 } else {\n selectedValues.push({ ...value });\n }\n }\n control.setValue(selectedValues);\n this.updateSubDynamicFields(field, formGroup, values);\n control.markAsTouched();\n }\n isCheckBoxSelected(value: string, selectedValues: Array<{ label: string; value: string }>): boolean {\n return selectedValues.findIndex(item => item.label === value) > -1;\n }\n generateSubDynamicFields(\n formValues: any,\n parentField: NsDynamicForm.IDynamicField,\n parentValue: Array<{ label: string, value: string | number }> | {label: string, value: string } | string | number | boolean\n ): FormArray {\n let controls = new FormArray([])\n let subFields = parentField.subFields\n let subFieldsValues = formValues[parentField.configName]?.subFields ? formValues[parentField.configName].subFields : {}\n\n if (parentField.fieldType === 'singleSelect') {\n subFields = subFields.filter((subField) => subField.parentConfigValue === (<{label: string, value: string }>parentValue)?.value);\n }\n else if (parentField.fieldType === 'multiSelect') {\n let parentValues = new Set((<Array<{ label: string, value: string | number }>>parentValue).map((value) => value.value));\n subFields = subFields.filter((subField) => parentValues.has(subField.parentConfigValue));\n }\n\n if (subFields?.length > 0) {\n for (let subField of subFields) {\n controls.push(this.mapFormValueToFormField(subField, subFieldsValues[subField.configName]))\n }\n }\n return controls;\n }\n mapFormValueToFormField(formField: NsDynamicForm.IDynamicField, formValue: any): any {\n let validators = formField.validators ? [dynamicFieldValidator(formField.validators)]: []\n let control = new FormControl(null, validators);\n\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 : 0);\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 } else if (formField.fieldType === \"singleSelect\") {\n const findSelectedValue = () => {\n let index = formField.itemsList.findIndex(item => item.value === formValue)\n return index > 0 ? formField.itemsList[index]: \"\";\n }\n if (formField.fieldInputType === \"dropdown\") {\n if (!formValue) control.setValue(formField.itemsList[0]);\n else control.setValue(findSelectedValue())\n }\n else if (formField.fieldInputType === \"radio\") {\n control.setValue(findSelectedValue())\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 } else if (formField.fieldType === \"boolean\") {\n control.setValue(!!formValue);\n } else control.setValue(null);\n return control;\n }\n mapFormFieldToFormValue(formField: NsDynamicForm.IDynamicField, 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 } else if (formField.fieldType === \"singleSelect\") {\n return formValue?.value ?? '';\n } else if (formField.fieldType === \"multiSelect\") {\n return formValue?.map(item => item.value);\n } else if (formField.fieldType === \"boolean\") {\n return formValue;\n } else return formValue;\n }\n}\n\nexport const dynamicFieldValidator = (validators: Array<NsDynamicForm.IDynamicFieldValidator>): ValidatorFn => {\n return (control: AbstractControl): ValidationErrors | null => {\n let value = control.value\n if (Array.isArray(value)) {\n return null;\n }\n else if (typeof value === 'object') {\n value = value?.value ? value.value : ''\n }\n let errors = null\n\n validators.forEach((validator) => {\n let error = null\n let message = validator.message\n switch (validator.type) {\n case \"Required\":\n error = Validators.required(control)\n if(error) error = {Required: message}\n break;\n case \"MinLength\":\n error = Validators.minLength(+validator.value)(control)\n message = message.replace('${0}', error?.minlength.requiredLength)\n if(error) error = { MinLength: message }\n break;\n case \"MaxLength\":\n error = Validators.maxLength(+validator.value)(control)\n message = message.replace('${0}', error?.actualLength)\n if(error) error = { MaxLength: message }\n break;\n case \"Email\":\n error = Validators.email(control)\n if(error) error = {Email: message}\n break;\n case \"Custom\":\n error = Validators.pattern(`${validator.value}`)(control)\n if(error) error = {Custom: message}\n break;\n default:\n break;\n }\n if (error) errors = { ...errors, ...error }\n })\n return errors\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@NgModule({\n declarations: [DynamicFormComponent],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n FormsModule,\n OverlayModule,\n ScrollingModule,\n DropdownModule,\n SwitchModule,\n MultiSelectDropdownModule,\n DatepickerModuleV2\n ],\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"],"names":["moment.tz"],"mappings":"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"}
|
|
@@ -5,28 +5,28 @@ import { CommonModule } from '@angular/common';
|
|
|
5
5
|
class SwitchComponent {
|
|
6
6
|
constructor() {
|
|
7
7
|
this.mobileView = false;
|
|
8
|
-
this.
|
|
8
|
+
this.control = new FormControl(false);
|
|
9
9
|
/** Emits value when toggled */
|
|
10
10
|
this.valueChanged = new EventEmitter();
|
|
11
11
|
}
|
|
12
12
|
set checked(value) {
|
|
13
|
-
this.
|
|
13
|
+
this.control.setValue(value);
|
|
14
14
|
}
|
|
15
15
|
set disabled(value) {
|
|
16
16
|
if (value)
|
|
17
|
-
this.
|
|
17
|
+
this.control.disable();
|
|
18
18
|
else
|
|
19
|
-
this.
|
|
19
|
+
this.control.enable();
|
|
20
20
|
}
|
|
21
21
|
ngOnInit() { }
|
|
22
22
|
onChange(event) {
|
|
23
|
-
this.valueChanged.emit(this.
|
|
23
|
+
this.valueChanged.emit(this.control.value);
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
SwitchComponent.decorators = [
|
|
27
27
|
{ type: Component, args: [{
|
|
28
28
|
selector: "mis-switch",
|
|
29
|
-
template: "<label class=\"toggle-switch\" [ngClass]=\"{ 'toggle-switch-mobile': mobileView }\">\n <input type=\"checkbox\" (change)=\"onChange($event)\" [formControl]=\"
|
|
29
|
+
template: "<label class=\"toggle-switch\" [ngClass]=\"{ 'toggle-switch-mobile': mobileView }\">\n <input type=\"checkbox\" (change)=\"onChange($event)\" [formControl]=\"control\" />\n <span class=\"slider\"></span>\n</label>\n",
|
|
30
30
|
styles: [".toggle-switch{height:28px;width:51px;display:inline-block;position:relative;cursor:pointer}.toggle-switch input{display:none}.toggle-switch input:checked+.slider{background-color:#0937b2}.toggle-switch input:checked+.slider:after{transform:translateX(23px)}.toggle-switch .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch .slider:after{position:absolute;content:\"\";height:24px;width:24px;background-color:#fff;border-radius:12px;left:2px;bottom:2px;transition:.25s}.toggle-switch-mobile{height:14px;width:34px;display:inline-block;position:relative}.toggle-switch-mobile input{display:none}.toggle-switch-mobile input:checked+.slider{background-color:#e0e0e0}.toggle-switch-mobile input:disabled+.slider{background-color:#f5f5f5!important}.toggle-switch-mobile input:checked+.slider:after{background-color:#0937b2;transform:translateX(34px)}.toggle-switch-mobile input:checked:disabled+.slider:after{background-color:#929dab}.toggle-switch-mobile .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch-mobile .slider:after{position:absolute;content:\"\";height:20px;width:20px;background-color:#fff;box-shadow:0 0 6px -2px #929dab;border-radius:12px;top:-3px;left:-10px;transition:.25s}"]
|
|
31
31
|
},] }
|
|
32
32
|
];
|
|
@@ -35,7 +35,7 @@ SwitchComponent.propDecorators = {
|
|
|
35
35
|
mobileView: [{ type: Input }],
|
|
36
36
|
checked: [{ type: Input }],
|
|
37
37
|
disabled: [{ type: Input }],
|
|
38
|
-
|
|
38
|
+
control: [{ type: Input }],
|
|
39
39
|
valueChanged: [{ type: Output }]
|
|
40
40
|
};
|
|
41
41
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-switch.js","sources":["../../../projects/mis-components/switch/switch.component.ts","../../../projects/mis-components/switch/switch.module.ts","../../../projects/mis-components/switch/mis-crystal-design-system-switch.ts"],"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.
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-switch.js","sources":["../../../projects/mis-components/switch/switch.component.ts","../../../projects/mis-components/switch/switch.module.ts","../../../projects/mis-components/switch/mis-crystal-design-system-switch.ts"],"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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAQa,eAAe;IAc1B;QAbS,eAAU,GAAY,KAAK,CAAC;QAQ5B,YAAO,GAAoB,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;;QAGjD,iBAAY,GAAG,IAAI,YAAY,EAAW,CAAC;KAErC;IAZhB,IAAa,OAAO,CAAC,KAAc;QACjC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KAC9B;IACD,IAAa,QAAQ,CAAC,KAAc;QAClC,IAAI,KAAK;YAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;;YAC7B,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;KAC5B;IAOD,QAAQ,MAAK;IACb,QAAQ,CAAC,KAAK;QACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KAC5C;;;YAvBF,SAAS,SAAC;gBACT,QAAQ,EAAE,YAAY;gBACtB,qOAAsC;;aAEvC;;;;yBAEE,KAAK;sBACL,KAAK;uBAGL,KAAK;sBAIL,KAAK;2BAGL,MAAM;;;MCTI,YAAY;IACvB,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAClD;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,eAAe,CAAC;gBAC/B,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,CAAC;gBAC5C,OAAO,EAAE,CAAC,eAAe,CAAC;aAC3B;;;ACVD;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"__symbolic":"module","version":4,"metadata":{"SwitchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mis-switch","template":"<label class=\"toggle-switch\" [ngClass]=\"{ 'toggle-switch-mobile': mobileView }\">\n <input type=\"checkbox\" (change)=\"onChange($event)\" [formControl]=\"
|
|
1
|
+
{"__symbolic":"module","version":4,"metadata":{"SwitchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mis-switch","template":"<label class=\"toggle-switch\" [ngClass]=\"{ 'toggle-switch-mobile': mobileView }\">\n <input type=\"checkbox\" (change)=\"onChange($event)\" [formControl]=\"control\" />\n <span class=\"slider\"></span>\n</label>\n","styles":[".toggle-switch{height:28px;width:51px;display:inline-block;position:relative;cursor:pointer}.toggle-switch input{display:none}.toggle-switch input:checked+.slider{background-color:#0937b2}.toggle-switch input:checked+.slider:after{transform:translateX(23px)}.toggle-switch .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch .slider:after{position:absolute;content:\"\";height:24px;width:24px;background-color:#fff;border-radius:12px;left:2px;bottom:2px;transition:.25s}.toggle-switch-mobile{height:14px;width:34px;display:inline-block;position:relative}.toggle-switch-mobile input{display:none}.toggle-switch-mobile input:checked+.slider{background-color:#e0e0e0}.toggle-switch-mobile input:disabled+.slider{background-color:#f5f5f5!important}.toggle-switch-mobile input:checked+.slider:after{background-color:#0937b2;transform:translateX(34px)}.toggle-switch-mobile input:checked:disabled+.slider:after{background-color:#929dab}.toggle-switch-mobile .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch-mobile .slider:after{position:absolute;content:\"\";height:20px;width:20px;background-color:#fff;box-shadow:0 0 6px -2px #929dab;border-radius:12px;top:-3px;left:-10px;transition:.25s}"]}]}],"members":{"mobileView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"valueChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}]}},"SwitchModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SwitchComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":8,"character":26}],"exports":[{"__symbolic":"reference","name":"SwitchComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"SwitchModule"},"providers":[]}}}}},"origins":{"SwitchComponent":"./switch.component","SwitchModule":"./switch.module"},"importAs":"mis-crystal-design-system/switch"}
|
|
@@ -4,7 +4,7 @@ export declare class SwitchComponent implements OnInit {
|
|
|
4
4
|
mobileView: boolean;
|
|
5
5
|
set checked(value: boolean);
|
|
6
6
|
set disabled(value: boolean);
|
|
7
|
-
|
|
7
|
+
control: AbstractControl;
|
|
8
8
|
/** Emits value when toggled */
|
|
9
9
|
valueChanged: EventEmitter<boolean>;
|
|
10
10
|
constructor();
|