mis-crystal-design-system 3.1.18 → 4.0.0

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 (21) hide show
  1. package/bundles/mis-crystal-design-system-dynamic-form.umd.js +157 -52
  2. package/bundles/mis-crystal-design-system-dynamic-form.umd.js.map +1 -1
  3. package/bundles/mis-crystal-design-system-dynamic-form.umd.min.js +2 -2
  4. package/bundles/mis-crystal-design-system-dynamic-form.umd.min.js.map +1 -1
  5. package/bundles/mis-crystal-design-system-switch.umd.js +7 -7
  6. package/bundles/mis-crystal-design-system-switch.umd.js.map +1 -1
  7. package/bundles/mis-crystal-design-system-switch.umd.min.js +1 -1
  8. package/bundles/mis-crystal-design-system-switch.umd.min.js.map +1 -1
  9. package/dynamic-form/dynamic-form.component.d.ts +20 -10
  10. package/dynamic-form/dynamic-form.namespace.d.ts +14 -3
  11. package/dynamic-form/mis-crystal-design-system-dynamic-form.metadata.json +1 -1
  12. package/esm2015/dynamic-form/dynamic-form.component.js +130 -34
  13. package/esm2015/dynamic-form/dynamic-form.namespace.js +1 -1
  14. package/esm2015/switch/switch.component.js +8 -8
  15. package/fesm2015/mis-crystal-design-system-dynamic-form.js +129 -33
  16. package/fesm2015/mis-crystal-design-system-dynamic-form.js.map +1 -1
  17. package/fesm2015/mis-crystal-design-system-switch.js +7 -7
  18. package/fesm2015/mis-crystal-design-system-switch.js.map +1 -1
  19. package/package.json +1 -1
  20. package/switch/mis-crystal-design-system-switch.metadata.json +1 -1
  21. package/switch/switch.component.d.ts +1 -1
package/fesm2015/mis-crystal-design-system-dynamic-form.js CHANGED
@@ -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,95 @@ 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
- this.initializedDynamicForm = new EventEmitter();
30
- this.setupFormControls = () => {
31
- let formArray = new FormArray([]);
32
- for (let field of this.formFields) {
33
- let control = this.mapFormValueToFormField(field, this.formValues && this.formValues[field.configName] ? this.formValues[field.configName] : null);
34
- formArray.push(control);
35
- }
36
- this.dynamicForm = new FormGroup({
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.setupFormControls();
41
+ this.dynamicForm = this.generateDynamicForm(this.formFields, this.formValues);
44
42
  // Subscribing to form changes and emiting values.
45
43
  this.dynamicForm.valueChanges.subscribe(formValue => {
46
44
  let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
45
+ this.formValid.emit(this.dynamicForm.valid);
47
46
  this.formUpdated.emit(formValues);
48
47
  });
49
48
  //api to expose functions
50
- this.dynamicFieldsAPI = {
49
+ this.dynamicFormAPI = {
51
50
  defaultFormValues: () => {
52
51
  return this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
53
52
  }
54
53
  };
55
- this.initializedDynamicForm.emit(this.dynamicFieldsAPI);
54
+ this.formInitialized.emit(this.dynamicFormAPI);
56
55
  }
57
56
  generateDynamicFieldsValueObject(formValues) {
58
57
  let dynamicFieldsValue = {};
59
- formValues.forEach((value, index) => {
60
- dynamicFieldsValue[this.formFields[index].configName] = this.mapFormFieldToFormValue(this.formFields[index], value);
58
+ formValues.forEach((fieldValue, index) => {
59
+ let formattedValue = this.mapFormFieldToFormValue(this.formFields[index], fieldValue.value);
60
+ if (fieldValue.subFields.length > 0) {
61
+ let formattedSubFieldsValues = {};
62
+ fieldValue.subFields.forEach((subFieldValue, subIndex) => {
63
+ let subFormField = this.formFields[index].subFields[subIndex];
64
+ formattedSubFieldsValues[subFormField.configName] = this.mapFormFieldToFormValue(subFormField, subFieldValue);
65
+ });
66
+ dynamicFieldsValue[this.formFields[index].configName] = {
67
+ value: formattedValue,
68
+ subFields: formattedSubFieldsValues
69
+ };
70
+ }
71
+ else {
72
+ dynamicFieldsValue[this.formFields[index].configName] = formattedValue;
73
+ }
61
74
  });
62
75
  return dynamicFieldsValue;
63
76
  }
77
+ generateDynamicForm(formFields, formValues) {
78
+ var _a, _b, _c;
79
+ let formArray = new FormArray([]);
80
+ for (let field of formFields) {
81
+ let fieldValue = ((_a = formValues[field.configName]) === null || _a === void 0 ? void 0 : _a.value) ? formValues[field.configName].value : formValues[field.configName];
82
+ let fieldControl = this.mapFormValueToFormField(field, fieldValue);
83
+ let subFieldsControls = new FormArray([]);
84
+ let subFieldsValues = ((_b = formValues[field.configName]) === null || _b === void 0 ? void 0 : _b.subFields) ? formValues[field.configName].subFields : {};
85
+ if (((_c = field === null || field === void 0 ? void 0 : field.subFields) === null || _c === void 0 ? void 0 : _c.length) > 0) {
86
+ for (let subField of field.subFields) {
87
+ subFieldsControls.push(this.mapFormValueToFormField(subField, subFieldsValues[subField.configName]));
88
+ }
89
+ }
90
+ formArray.push(new FormGroup({
91
+ value: fieldControl,
92
+ subFields: subFieldsControls
93
+ }));
94
+ }
95
+ return new FormGroup({
96
+ dynamicFields: formArray
97
+ });
98
+ }
64
99
  getDynamicFieldsControls() {
65
100
  return this.dynamicForm.get("dynamicFields");
66
101
  }
67
- updateSelectedValueForField(index, value) {
68
- let array = this.dynamicForm.get("dynamicFields").controls;
69
- array[index].setValue(value);
102
+ updateSelectedValueForField(control, value) {
103
+ var _a;
104
+ if (((_a = control.value) === null || _a === void 0 ? void 0 : _a.value) !== value.value) {
105
+ control.setValue(value);
106
+ }
107
+ else
108
+ control.setValue('');
109
+ control.markAsTouched();
70
110
  }
71
- updateSelectedValueForMultiSelect(index, values) {
72
- let control = this.dynamicForm.get("dynamicFields").controls[index];
111
+ updateSelectedValueForMultiSelect(control, values) {
73
112
  let selectedValues = control.value;
74
113
  for (let value of values) {
75
114
  let itemIndex = selectedValues.findIndex(item => item.label === value.label);
@@ -81,12 +120,14 @@ class DynamicFormComponent {
81
120
  }
82
121
  }
83
122
  control.setValue(selectedValues);
123
+ control.markAsTouched();
84
124
  }
85
125
  isCheckBoxSelected(value, selectedValues) {
86
126
  return selectedValues.findIndex(item => item.label === value) > -1;
87
127
  }
88
128
  mapFormValueToFormField(formField, formValue) {
89
- let control = new FormControl();
129
+ let validators = formField.validators ? [dynamicFieldValidator(formField.validators)] : [];
130
+ let control = new FormControl(null, validators);
90
131
  if (formField.fieldType === "input") {
91
132
  if (formField.fieldInputType === "text" || formField.fieldInputType === "textarea")
92
133
  control.setValue(formValue ? formValue : "");
@@ -102,14 +143,18 @@ class DynamicFormComponent {
102
143
  }
103
144
  }
104
145
  else if (formField.fieldType === "singleSelect") {
146
+ const findSelectedValue = () => {
147
+ let index = formField.itemsList.findIndex(item => item.value === formValue);
148
+ return index > 0 ? formField.itemsList[index] : "";
149
+ };
105
150
  if (formField.fieldInputType === "dropdown") {
106
151
  if (!formValue)
107
152
  control.setValue(formField.itemsList[0]);
108
- else {
109
- let f = formField.itemsList.filter(item => item.value === formValue);
110
- if (f[0])
111
- control.setValue(f[0]);
112
- }
153
+ else
154
+ control.setValue(findSelectedValue());
155
+ }
156
+ else if (formField.fieldInputType === "radio") {
157
+ control.setValue(findSelectedValue());
113
158
  }
114
159
  }
115
160
  else if (formField.fieldType === "multiSelect") {
@@ -134,6 +179,7 @@ class DynamicFormComponent {
134
179
  return control;
135
180
  }
136
181
  mapFormFieldToFormValue(formField, formValue) {
182
+ var _a;
137
183
  if (formField.fieldType === "input") {
138
184
  if (formField.fieldInputType === "text" || formField.fieldInputType === "textarea")
139
185
  return formValue;
@@ -144,8 +190,7 @@ class DynamicFormComponent {
144
190
  }
145
191
  }
146
192
  else if (formField.fieldType === "singleSelect") {
147
- if (formField.fieldInputType === "dropdown")
148
- return formValue === null || formValue === void 0 ? void 0 : formValue.value;
193
+ return (_a = formValue === null || formValue === void 0 ? void 0 : formValue.value) !== null && _a !== void 0 ? _a : '';
149
194
  }
150
195
  else if (formField.fieldType === "multiSelect") {
151
196
  return formValue === null || formValue === void 0 ? void 0 : formValue.map(item => item.value);
@@ -160,8 +205,8 @@ class DynamicFormComponent {
160
205
  DynamicFormComponent.decorators = [
161
206
  { type: Component, args: [{
162
207
  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 *ngIf=\"formFields[i].fieldType === 'input' && (formFields[i].fieldInputType === 'text' || formFields[i].fieldInputType === 'number')\"\n >\n <p class=\"h7 field-title-sm\">\n {{ formFields[i].title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <input\n class=\"input-field ip-text\"\n [type]=\"formFields[i].fieldInputType\"\n [formControl]=\"fieldControl\"\n [placeholder]=\"formFields[i].placeholderText ? formFields[i].placeholderText : 'Input Text'\"\n />\n </div>\n <div\n class=\"dynamic-field single-line-field-container\"\n *ngIf=\"formFields[i].fieldType === 'singleSelect' && formFields[i].fieldInputType === 'dropdown'\"\n >\n <p class=\"h6\">\n {{ formFields[i].title }}\n </p>\n <mis-dropdown\n [searchEnabled]=\"false\"\n [width]=\"'140px'\"\n [data]=\"formFields[i].itemsList\"\n [selectedItem]=\"fieldControl.value\"\n (onChange)=\"updateSelectedValueForField(i, $event)\"\n >\n </mis-dropdown>\n </div>\n <div\n class=\"dynamic-field single-line-field-container\"\n *ngIf=\"formFields[i].fieldType === 'boolean' && formFields[i].fieldInputType === 'toggle'\"\n >\n <p class=\"h6\">\n {{ formFields[i].title }}\n </p>\n <mis-switch [formControl]=\"fieldControl\"></mis-switch>\n </div>\n <div\n class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"formFields[i].fieldType === 'input' && formFields[i].fieldInputType === 'textarea'\"\n >\n <p class=\"h7 field-title-sm\">\n {{ formFields[i].title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <textarea\n class=\"input-field ip-textarea\"\n type=\"text\"\n [placeholder]=\"formFields[i].placeholderText ? formFields[i].placeholderText : 'Input Text'\"\n [formControl]=\"fieldControl\"\n ></textarea>\n </div>\n <div class=\"dynamic-field single-line-field-container\" *ngIf=\"formFields[i].fieldType === 'input' && formFields[i].fieldInputType === 'date'\">\n <p class=\"h6\">\n {{ formFields[i].title }}\n </p>\n <div class=\"date-picker-container\">\n <input\n class=\"date-picker\"\n readonly\n misTzDp\n [dpConfig]=\"formFields[i].fieldConfig\"\n (dateChange)=\"updateSelectedValueForField(i, $event)\"\n [selectedDate]=\"fieldControl.value\"\n [offsetY]=\"0\"\n [value]=\"fieldControl.value\"\n #dp\n />\n <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\" (click)=\"dp.click()\" />\n </div>\n </div>\n <div\n class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"formFields[i].fieldType === 'multiSelect' && formFields[i].fieldInputType === 'checkbox'\"\n >\n <p class=\"h7 field-title-sm\">\n {{ formFields[i].title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <div id=\"checkboxes-container\">\n <div\n class=\"radio-checkbox-common\"\n *ngFor=\"let item of formFields[i].itemsList\"\n [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, fieldControl.value) }\"\n (click)=\"updateSelectedValueForMultiSelect(i, [item])\"\n >\n <img *ngIf=\"isCheckBoxSelected(item.label, fieldControl.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n <p class=\"h6\">{{ item.label }}</p>\n </div>\n </div>\n </div>\n <div\n class=\"dynamic-field single-line-field-container\"\n *ngIf=\"formFields[i].fieldType === 'multiSelect' && formFields[i].fieldInputType === 'dropdown'\"\n >\n <p class=\"h6\">\n {{ formFields[i].title }}\n </p>\n <mis-multi-select-dropdown\n [width]=\"'140px'\"\n [showSelectedCount]=\"true\"\n [dropdownListWidth]=\"'256px'\"\n [searchEnabled]=\"false\"\n [hideApplyButton]=\"true\"\n [data]=\"formFields[i].itemsList\"\n [selectedItems]=\"fieldControl.value\"\n (onChange)=\"fieldControl.setValue($event)\"\n ></mis-multi-select-dropdown>\n </div>\n </ng-container>\n </ng-container>\n</form>\n",
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)}"]
208
+ 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 control: fieldControl.controls.value\n }\"\n >\n <div class=\"sub-dynamic-form\" *ngIf=\"formFields[i]?.subFields?.length > 0 && fieldControl.value\">\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\">\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 [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\"></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\"></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)=\"updateSelectedValueForField(control, $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)=\"updateSelectedValueForField(control, 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(control, [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)=\"control.setValue($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 &nbsp;\" + error.value}}\n </p>\n <div style=\"flex-basis: 100%; height: 0\"></div>\n </ng-container>\n </div>\n</ng-template>",
209
+ 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
210
  },] }
166
211
  ];
167
212
  DynamicFormComponent.ctorParameters = () => [];
@@ -171,7 +216,58 @@ DynamicFormComponent.propDecorators = {
171
216
  activeBtnIconUrl: [{ type: Input }],
172
217
  calendarIconUrl: [{ type: Input }],
173
218
  formUpdated: [{ type: Output }],
174
- initializedDynamicForm: [{ type: Output }]
219
+ formValid: [{ type: Output }],
220
+ formInitialized: [{ type: Output }]
221
+ };
222
+ const dynamicFieldValidator = (validators) => {
223
+ return (control) => {
224
+ let value = control.value;
225
+ if (Array.isArray(value)) {
226
+ return null;
227
+ }
228
+ else if (typeof value === 'object') {
229
+ value = (value === null || value === void 0 ? void 0 : value.value) ? value.value : '';
230
+ }
231
+ let errors = null;
232
+ validators.forEach((validator) => {
233
+ let error = null;
234
+ let message = validator.message;
235
+ switch (validator.type) {
236
+ case "Required":
237
+ error = Validators.required(control);
238
+ if (error)
239
+ error = { Required: message };
240
+ break;
241
+ case "MinLength":
242
+ error = Validators.minLength(+validator.value)(control);
243
+ message = message.replace('${0}', error === null || error === void 0 ? void 0 : error.minlength.requiredLength);
244
+ if (error)
245
+ error = { MinLength: message };
246
+ break;
247
+ case "MaxLength":
248
+ error = Validators.maxLength(+validator.value)(control);
249
+ message = message.replace('${0}', error === null || error === void 0 ? void 0 : error.actualLength);
250
+ if (error)
251
+ error = { MaxLength: message };
252
+ break;
253
+ case "Email":
254
+ error = Validators.email(control);
255
+ if (error)
256
+ error = { Email: message };
257
+ break;
258
+ case "Custom":
259
+ error = Validators.pattern(`${validator.value}`)(control);
260
+ if (error)
261
+ error = { Custom: message };
262
+ break;
263
+ default:
264
+ break;
265
+ }
266
+ if (error)
267
+ errors = Object.assign(Object.assign({}, errors), error);
268
+ });
269
+ return errors;
270
+ };
175
271
  };
176
272
 
177
273
  class DynamicFormModule {
package/fesm2015/mis-crystal-design-system-dynamic-form.js.map CHANGED
@@ -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, Input, 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\";\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<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\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.dynamicForm.valueChanges.subscribe(formValue => {\n let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);\n this.formValid.emit(this.dynamicForm.valid);\n this.formUpdated.emit(formValues);\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 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 = new FormArray([])\n let subFieldsValues = formValues[field.configName]?.subFields ? formValues[field.configName].subFields : {}\n if (field?.subFields?.length > 0) {\n for (let subField of field.subFields) {\n subFieldsControls.push(this.mapFormValueToFormField(subField, subFieldsValues[subField.configName]))\n }\n }\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 updateSelectedValueForField(control: FormControl, value: any): void {\n if (control.value?.value !== value.value) {\n control.setValue(value);\n }\n else control.setValue('');\n control.markAsTouched();\n }\n updateSelectedValueForMultiSelect(control: FormControl, values: Array<any>): 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 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 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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"}
package/fesm2015/mis-crystal-design-system-switch.js CHANGED
@@ -5,28 +5,28 @@ import { CommonModule } from '@angular/common';
5
5
  class SwitchComponent {
6
6
  constructor() {
7
7
  this.mobileView = false;
8
- this.formControl = new FormControl(false);
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.formControl.setValue(value);
13
+ this.control.setValue(value);
14
14
  }
15
15
  set disabled(value) {
16
16
  if (value)
17
- this.formControl.disable();
17
+ this.control.disable();
18
18
  else
19
- this.formControl.enable();
19
+ this.control.enable();
20
20
  }
21
21
  ngOnInit() { }
22
22
  onChange(event) {
23
- this.valueChanged.emit(this.formControl.value);
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]=\"formControl\" />\n <span class=\"slider\"></span>\n</label>\n",
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
- formControl: [{ type: Input }],
38
+ control: [{ type: Input }],
39
39
  valueChanged: [{ type: Output }]
40
40
  };
41
41
 
package/fesm2015/mis-crystal-design-system-switch.js.map CHANGED
@@ -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.formControl.setValue(value);\n }\n @Input() set disabled(value: boolean) {\n if (value) this.formControl.disable();\n else this.formControl.enable();\n }\n @Input() formControl: AbstractControl = new FormControl(false);\n\n /** Emits value when toggled */\n @Output() valueChanged = new EventEmitter<boolean>();\n\n constructor() {}\n ngOnInit() {}\n onChange(event) {\n this.valueChanged.emit(this.formControl.value);\n }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { SwitchComponent } from \"./switch.component\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n@NgModule({\n declarations: [SwitchComponent],\n imports: [CommonModule, ReactiveFormsModule],\n exports: [SwitchComponent]\n})\nexport class SwitchModule {\n static forRoot(): ModuleWithProviders<SwitchModule> {\n return { ngModule: SwitchModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAQa,eAAe;IAc1B;QAbS,eAAU,GAAY,KAAK,CAAC;QAQ5B,gBAAW,GAAoB,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;;QAGrD,iBAAY,GAAG,IAAI,YAAY,EAAW,CAAC;KAErC;IAZhB,IAAa,OAAO,CAAC,KAAc;QACjC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KAClC;IACD,IAAa,QAAQ,CAAC,KAAc;QAClC,IAAI,KAAK;YAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;;YACjC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;KAChC;IAOD,QAAQ,MAAK;IACb,QAAQ,CAAC,KAAK;QACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KAChD;;;YAvBF,SAAS,SAAC;gBACT,QAAQ,EAAE,YAAY;gBACtB,yOAAsC;;aAEvC;;;;yBAEE,KAAK;sBACL,KAAK;uBAGL,KAAK;0BAIL,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;;;;;;"}
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,6 +1,6 @@
1
1
  {
2
2
  "name": "mis-crystal-design-system",
3
- "version": "3.1.18",
3
+ "version": "4.0.0",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "*",
6
6
  "@angular/core": "*",
package/switch/mis-crystal-design-system-switch.metadata.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]=\"formControl\" />\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}}]}],"formControl":[{"__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"}
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"}
package/switch/switch.component.d.ts CHANGED
@@ -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
- formControl: AbstractControl;
7
+ control: AbstractControl;
8
8
  /** Emits value when toggled */
9
9
  valueChanged: EventEmitter<boolean>;
10
10
  constructor();