mis-crystal-design-system 2.3.17 → 2.3.20

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 (10) hide show
  1. package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.js +71 -24
  2. package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.js.map +1 -1
  3. package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.min.js +2 -2
  4. package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.min.js.map +1 -1
  5. package/esm2015/multi-select-dropdown/multi-select-dropdown.component.js +83 -38
  6. package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js +81 -36
  7. package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js.map +1 -1
  8. package/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.metadata.json +1 -1
  9. package/multi-select-dropdown/multi-select-dropdown.component.d.ts +9 -3
  10. package/package.json +1 -1
package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js CHANGED
@@ -8,26 +8,31 @@ import { ButtonModule } from 'mis-crystal-design-system/button';
8
8
  class MultiSelectDropdownComponent {
9
9
  constructor(eRef) {
10
10
  this.eRef = eRef;
11
- this.searchInput = '';
11
+ this.searchInput = "";
12
12
  this.isOpen = false;
13
13
  this.localSelectedItems = [];
14
14
  this.localData = [];
15
15
  this.searchData = [];
16
- this.label = 'Select';
17
- this.height = '';
18
- this.width = '';
19
- this.dropdownListHeight = '';
20
- this.dropdownListWidth = '';
21
- this.dropdownListPosition = 'Left';
16
+ this.isSearchInputFocused = false;
17
+ this.SELECT_ALL_ENUM = "SELECT_ALL_ENABLED";
18
+ this.label = "Select";
19
+ this.height = "";
20
+ this.width = "";
21
+ this.dropdownListHeight = "";
22
+ this.dropdownListWidth = "";
23
+ this.dropdownListPosition = "Left";
24
+ this.enableSelectAll = false;
22
25
  this.searchEnabled = true;
23
26
  this.showSelectedCount = false;
24
- this.noDataMessage = 'No Data';
27
+ this.noDataMessage = "No Data";
28
+ this.options = {
29
+ sortLabels: true,
30
+ };
25
31
  this.hideApplyButton = false;
26
32
  this.onChange = new EventEmitter();
27
- this.isSearchInputFocused = false;
28
33
  }
29
34
  set data(values) {
30
- this.localData = values.map(item => {
35
+ this.localData = values.map((item) => {
31
36
  return Object.assign(Object.assign({}, item), { checked: false });
32
37
  });
33
38
  }
@@ -43,21 +48,26 @@ class MultiSelectDropdownComponent {
43
48
  ngOnInit() { }
44
49
  handlerSetLocalSelectedItems(values) {
45
50
  this.localSelectedItems = values;
46
- this.localData = this.localData.map(item => {
47
- if (values.some(base => base.value === item.value)) {
51
+ this.localData = this.localData.map((item) => {
52
+ if (item.value === this.SELECT_ALL_ENUM &&
53
+ this.localData.every((a) => a.checked)) {
54
+ return Object.assign(Object.assign({}, item), { checked: true });
55
+ }
56
+ if (values.some((base) => base.value === item.value)) {
48
57
  return Object.assign(Object.assign({}, item), { checked: true });
49
58
  }
50
59
  else {
51
60
  return Object.assign(Object.assign({}, item), { checked: false });
52
61
  }
53
62
  });
63
+ this.localData = this.formatValues(this.localData);
54
64
  }
55
65
  searchInputFocused(isFocused) {
56
66
  this.isSearchInputFocused = isFocused;
57
67
  }
58
68
  searchInputCanceled(event) {
59
69
  event.stopPropagation();
60
- this.searchInput = '';
70
+ this.searchInput = "";
61
71
  this.isSearchInputFocused = false;
62
72
  }
63
73
  toggleDropdown() {
@@ -68,7 +78,7 @@ class MultiSelectDropdownComponent {
68
78
  }
69
79
  }
70
80
  filterByValue(array, string) {
71
- return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));
81
+ return array.filter((o) => o.label.toLowerCase().includes(string.toLowerCase()));
72
82
  }
73
83
  searchInputOnChange(newValue) {
74
84
  this.searchInput = newValue;
@@ -77,39 +87,72 @@ class MultiSelectDropdownComponent {
77
87
  }
78
88
  else {
79
89
  this.searchData = [];
80
- this.searchInput = '';
90
+ this.searchInput = "";
81
91
  }
82
92
  }
83
93
  formatValues(array) {
84
- const checkedValues = array
85
- .filter(a => a.checked)
86
- .sort((a, b) => a.label > b.label ? 1 : b.label > a.label ? -1 : 0);
87
- const unCheckedValues = array
88
- .filter(a => !a.checked)
89
- .sort((a, b) => a.label > b.label ? 1 : b.label > a.label ? -1 : 0);
90
- return [...checkedValues, ...unCheckedValues];
94
+ let sortedArray = array;
95
+ if (this.options.sortLabels) {
96
+ const checkedValues = array
97
+ .filter((a) => a.checked)
98
+ .sort((a, b) => a.label > b.label ? 1 : b.label > a.label ? -1 : 0);
99
+ const unCheckedValues = array
100
+ .filter((a) => !a.checked)
101
+ .sort((a, b) => a.label > b.label ? 1 : b.label > a.label ? -1 : 0);
102
+ sortedArray = [...checkedValues, ...unCheckedValues].filter((t) => t.value !== this.SELECT_ALL_ENUM);
103
+ }
104
+ if (!sortedArray.some((option) => option.value === this.SELECT_ALL_ENUM) &&
105
+ this.enableSelectAll &&
106
+ sortedArray.length > 0) {
107
+ sortedArray.unshift({
108
+ label: "Select all",
109
+ value: this.SELECT_ALL_ENUM,
110
+ checked: sortedArray.every((y) => y.checked),
111
+ });
112
+ }
113
+ return sortedArray;
91
114
  }
92
115
  toggleSelectedItems(event, item) {
93
116
  event.stopPropagation();
117
+ if (this.enableSelectAll && item.value === this.SELECT_ALL_ENUM) {
118
+ this.localData = this.localData.map((t) => (Object.assign(Object.assign({}, t), { checked: !item.checked })));
119
+ if (this.hideApplyButton) {
120
+ this.applyFilters();
121
+ }
122
+ return;
123
+ }
94
124
  if (item.checked) {
95
125
  this.localData = [
96
- ...this.localData.map(a => {
97
- if (a.value === item.value) {
126
+ ...this.localData.map((a) => {
127
+ if (a.value === item.value || a.value === this.SELECT_ALL_ENUM) {
98
128
  return Object.assign(Object.assign({}, a), { checked: false });
99
129
  }
100
130
  return a;
101
- })
131
+ }),
102
132
  ];
103
133
  }
104
134
  else {
105
135
  this.localData = [
106
- ...this.localData.map(a => {
136
+ ...this.localData.map((a) => {
107
137
  if (a.value === item.value) {
108
138
  return Object.assign(Object.assign({}, a), { checked: true });
109
139
  }
110
140
  return a;
111
- })
141
+ }),
112
142
  ];
143
+ if (this.enableSelectAll &&
144
+ this.localData
145
+ .filter((r) => r.value !== this.SELECT_ALL_ENUM)
146
+ .every((t) => t.checked)) {
147
+ this.localData = [
148
+ ...this.localData.map((a) => {
149
+ if (a.value === this.SELECT_ALL_ENUM) {
150
+ return Object.assign(Object.assign({}, a), { checked: true });
151
+ }
152
+ return a;
153
+ }),
154
+ ];
155
+ }
113
156
  }
114
157
  if (this.searchEnabled) {
115
158
  this.searchInputOnChange(this.searchInput);
@@ -120,10 +163,10 @@ class MultiSelectDropdownComponent {
120
163
  }
121
164
  applyFilters() {
122
165
  this.onChange.emit(this.localData
123
- .filter(a => {
124
- return a.checked;
166
+ .filter((a) => {
167
+ return a.checked && a.value !== this.SELECT_ALL_ENUM;
125
168
  })
126
- .map(item => {
169
+ .map((item) => {
127
170
  const { checked } = item, data = __rest(item, ["checked"]);
128
171
  return data;
129
172
  }));
@@ -135,12 +178,12 @@ class MultiSelectDropdownComponent {
135
178
  this.isSearchInputFocused = false;
136
179
  this.onChange.emit([]);
137
180
  this.isOpen = false;
138
- this.searchInput = '';
181
+ this.searchInput = "";
139
182
  }
140
183
  onCancel() {
141
184
  this.isSearchInputFocused = false;
142
- this.localData = this.localData.map(a => {
143
- if (this.localSelectedItems.some(b => b.value === a.value && String(b.checked) !== String(a.checked))) {
185
+ this.localData = this.localData.map((a) => {
186
+ if (this.localSelectedItems.some((b) => b.value === a.value && String(b.checked) !== String(a.checked))) {
144
187
  return a;
145
188
  }
146
189
  else {
@@ -148,12 +191,12 @@ class MultiSelectDropdownComponent {
148
191
  }
149
192
  });
150
193
  this.isOpen = false;
151
- this.searchInput = '';
194
+ this.searchInput = "";
152
195
  }
153
196
  }
154
197
  MultiSelectDropdownComponent.decorators = [
155
198
  { type: Component, args: [{
156
- selector: 'mis-multi-select-dropdown',
199
+ selector: "mis-multi-select-dropdown",
157
200
  template: "<div class=\"container\" [ngStyle]=\"{\n 'height': height.length > 0? height: '',\n 'width': width.length > 0? width: ''\n }\"\n>\n <div class=\"dropdown\" (click)=\"toggleDropdown()\" [ngStyle]=\"{'background': isOpen ? '#E6EBF7': ''}\">\n <div class=\"label\">\n <p class=\"text\">{{ label }}</p>\n <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n {{ localSelectedItems?.length }}\n </p>\n </div>\n <svg class=\"handle\" [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)': 'rotate(0deg)' }\" width=\"20\" height=\"20\"\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\" fill=\"#181F33\" />\n </svg>\n </div>\n <div style=\"flex-basis: 0;\"></div>\n <div style=\"width: 100%; position: relative;\">\n <div *ngIf=\"isOpen\" class=\"popup-container\"\n [ngStyle]=\"{\n 'height': dropdownListHeight,\n 'width': dropdownListWidth\n }\"\n [ngClass]=\"{\n 'position-left': dropdownListPosition === 'Left',\n 'position-right': dropdownListPosition === 'Right'\n }\"\n >\n <div *ngIf=\"searchEnabled\" class=\"search-container\">\n <svg *ngIf=\"!isSearchInputFocused\" class=\"search-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n fill=\"#6A737D\" />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{ paddingLeft: isSearchInputFocused ? '12px' : '45px', border:isSearchInputFocused? '1px solid #0937B2':'1px solid #e0e0e0', paddingRight: isSearchInputFocused ? '45px' : '10px' }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg *ngIf=\"isSearchInputFocused\" class=\"cancel-icon\" (click)=\"searchInputCanceled($event)\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n fill=\"#6A737D\" />\n </svg>\n </div>\n <div class=\"items\">\n <div class=\"item\" (click)=\"toggleSelectedItems($event, item)\" *ngFor=\"let item of searchInput ? searchData : localData\">\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox\n [checked]=\"item.checked\"\n ></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ item.label }}\n </p>\n </div>\n <div class=\"icon-container\" *ngIf=\"item.icon\">\n <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\">\n </div>\n </div>\n <div class=\"noData\" *ngIf=\"(searchInput ? searchData : localData).length === 0\">\n {{ searchInput === '' ? noDataMessage : 'No results' }}\n </div>\n </div>\n <div *ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n <div style=\"width: calc(50% - 4px)\">\n <mis-button\n [name]=\"'Reset'\"\n [type]=\"'Text'\"\n [width]=\"'100%'\"\n (click)=\"onReset()\"\n ></mis-button>\n </div>\n <div style=\"width: calc(50% - 4px)\">\n <mis-button\n [name]=\"'Apply'\"\n [type]=\"'Solid'\"\n [width]=\"'100%'\"\n (click)=\"applyFilters()\"\n ></mis-button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n",
158
201
  styles: [".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:hover{background-color:#f5f7fc}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.container .popup-container{position:absolute;top:4px;width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);overflow:scroll;overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.container .popup-container::-webkit-scrollbar{width:0;height:0}.container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.container .popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.container .popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.container .popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.container .popup-container .items .item:hover{background-color:#f5f7fc}.container .popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.container .popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.200000003px}.container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.container .popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.container .popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.container .popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.container .popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}.position-left{right:0}.position-right{left:0}"]
159
202
  },] }
@@ -169,13 +212,15 @@ MultiSelectDropdownComponent.propDecorators = {
169
212
  dropdownListHeight: [{ type: Input }],
170
213
  dropdownListWidth: [{ type: Input }],
171
214
  dropdownListPosition: [{ type: Input }],
215
+ enableSelectAll: [{ type: Input }],
172
216
  searchEnabled: [{ type: Input }],
173
217
  showSelectedCount: [{ type: Input }],
174
218
  noDataMessage: [{ type: Input }],
219
+ options: [{ type: Input }],
175
220
  selectedItems: [{ type: Input }],
176
221
  hideApplyButton: [{ type: Input }],
177
222
  onChange: [{ type: Output }],
178
- clickout: [{ type: HostListener, args: ['document:click', ['$event'],] }]
223
+ clickout: [{ type: HostListener, args: ["document:click", ["$event"],] }]
179
224
  };
180
225
 
181
226
  class MultiSelectDropdownModule {
package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"mis-crystal-design-system-multi-select-dropdown.js","sources":["../../../projects/mis-components/multi-select-dropdown/multi-select-dropdown.component.ts","../../../projects/mis-components/multi-select-dropdown/multi-select-dropdown.module.ts","../../../projects/mis-components/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.ts"],"sourcesContent":["import {\n Component,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnInit,\n Output\n} from '@angular/core';\n\n@Component({\n selector: 'mis-multi-select-dropdown',\n templateUrl: './multi-select-dropdown.component.html',\n styleUrls: ['./multi-select-dropdown.component.scss']\n})\nexport class MultiSelectDropdownComponent implements OnInit {\n\n searchInput: string = '';\n isOpen = false;\n localSelectedItems: MultiSelectDropdownItem[] = [];\n localData: MultiSelectDropdownItem[] = [];\n searchData: MultiSelectDropdownItem[] = [];\n\n @Input() set data(values: MultiSelectDropdownItem[]) {\n this.localData = values.map(item => {\n return {...item, checked: false};\n });\n }\n @Input() label: string = 'Select';\n @Input() height: string = ''\n @Input() width: string = ''\n\n @Input() dropdownListHeight: string = ''\n @Input() dropdownListWidth: string = ''\n @Input() dropdownListPosition: 'Left' | 'Right' = 'Left'\n\n @Input() searchEnabled: boolean = true;\n @Input() showSelectedCount: boolean = false;\n @Input() noDataMessage: string = 'No Data';\n @Input() set selectedItems(values: MultiSelectDropdownItem[]) {\n this.handlerSetLocalSelectedItems(values);\n }\n @Input() hideApplyButton: boolean = false;\n\n @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n @HostListener('document:click', ['$event'])\n clickout(event) {\n const isClickedOutside = !this.eRef.nativeElement.contains(event.target);\n if (isClickedOutside) {\n this.onCancel();\n }\n }\n constructor(private eRef: ElementRef) {}\n ngOnInit() {}\n\n handlerSetLocalSelectedItems(values) {\n this.localSelectedItems = values;\n this.localData = this.localData.map(item => {\n if (values.some(base => base.value === item.value)) {\n return { ...item, checked: true };\n } else {\n return { ...item, checked: false };\n }\n });\n }\n isSearchInputFocused: boolean = false;\n searchInputFocused(isFocused: boolean) {\n this.isSearchInputFocused = isFocused;\n }\n searchInputCanceled(event) {\n event.stopPropagation();\n this.searchInput = '';\n this.isSearchInputFocused = false;\n }\n toggleDropdown() {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.handlerSetLocalSelectedItems(this.localSelectedItems);\n this.localData = this.formatValues(this.localData);\n }\n }\n filterByValue(array: MultiSelectDropdownItem[], string: string) {\n return array.filter(o =>\n o.label.toLowerCase().includes(string.toLowerCase())\n );\n }\n searchInputOnChange(newValue) {\n this.searchInput = newValue;\n if (newValue) {\n this.searchData = this.filterByValue(this.localData, newValue);\n } else {\n this.searchData = [];\n this.searchInput = '';\n }\n }\n formatValues(array: MultiSelectDropdownItem[]) {\n const checkedValues = array\n .filter(a => a.checked)\n .sort((a: MultiSelectDropdownItem, b: MultiSelectDropdownItem) =>\n a.label > b.label ? 1 : b.label > a.label ? -1 : 0\n );\n const unCheckedValues = array\n .filter(a => !a.checked)\n .sort((a: MultiSelectDropdownItem, b: MultiSelectDropdownItem) =>\n a.label > b.label ? 1 : b.label > a.label ? -1 : 0\n );\n return [...checkedValues, ...unCheckedValues];\n }\n toggleSelectedItems(event, item: MultiSelectDropdownItem) {\n event.stopPropagation();\n if (item.checked) {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n return {\n ...a,\n checked: false\n };\n }\n return a;\n })\n ];\n } else {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n return {\n ...a,\n checked: true\n };\n }\n return a;\n })\n ];\n }\n if (this.searchEnabled) {\n this.searchInputOnChange(this.searchInput);\n }\n if (this.hideApplyButton) {\n this.applyFilters();\n }\n }\n applyFilters() {\n this.onChange.emit(\n this.localData\n .filter(a => {\n return a.checked;\n })\n .map(item => {\n const { checked, ...data } = item;\n return data;\n })\n );\n \n if (!this.hideApplyButton) {\n this.onCancel();\n }\n }\n onReset(){\n this.isSearchInputFocused = false;\n this.onChange.emit([])\n this.isOpen = false;\n this.searchInput = '';\n }\n onCancel() {\n this.isSearchInputFocused = false;\n this.localData = this.localData.map(a => {\n if (\n this.localSelectedItems.some(\n b => b.value === a.value && String(b.checked) !== String(a.checked)\n )\n ) {\n return a;\n } else {\n return {\n ...a,\n checked: false\n };\n }\n });\n this.isOpen = false;\n this.searchInput = '';\n }\n}\nexport interface MultiSelectDropdownItem {\n label: string;\n value: string;\n checked?: boolean;\n icon?: string;\n}\n","import { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { NgModule, ModuleWithProviders } from '@angular/core';\nimport { MultiSelectDropdownComponent } from './multi-select-dropdown.component';\nimport { CheckboxModule } from 'mis-crystal-design-system/checkbox';\nimport { ButtonModule } from 'mis-crystal-design-system/button';\n\n@NgModule({\n declarations: [MultiSelectDropdownComponent],\n imports: [CommonModule, FormsModule, CheckboxModule, ButtonModule],\n exports: [MultiSelectDropdownComponent]\n})\nexport class MultiSelectDropdownModule {\n static forRoot(): ModuleWithProviders<MultiSelectDropdownModule> {\n return { ngModule: MultiSelectDropdownModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"mis-crystal-design-system-multi-select-dropdown.js","sources":["../../../projects/mis-components/multi-select-dropdown/multi-select-dropdown.component.ts","../../../projects/mis-components/multi-select-dropdown/multi-select-dropdown.module.ts","../../../projects/mis-components/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.ts"],"sourcesContent":["import {\n Component,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnInit,\n Output,\n} from \"@angular/core\";\n@Component({\n selector: \"mis-multi-select-dropdown\",\n templateUrl: \"./multi-select-dropdown.component.html\",\n styleUrls: [\"./multi-select-dropdown.component.scss\"],\n})\nexport class MultiSelectDropdownComponent implements OnInit {\n searchInput: string = \"\";\n isOpen = false;\n localSelectedItems: MultiSelectDropdownItem[] = [];\n localData: MultiSelectDropdownItem[] = [];\n searchData: MultiSelectDropdownItem[] = [];\n isSearchInputFocused: boolean = false;\n SELECT_ALL_ENUM = \"SELECT_ALL_ENABLED\";\n @Input() set data(values: MultiSelectDropdownItem[]) {\n this.localData = values.map((item) => {\n return { ...item, checked: false };\n });\n }\n @Input() label: string = \"Select\";\n @Input() height: string = \"\";\n @Input() width: string = \"\";\n @Input() dropdownListHeight: string = \"\";\n @Input() dropdownListWidth: string = \"\";\n @Input() dropdownListPosition: \"Left\" | \"Right\" = \"Left\";\n @Input() enableSelectAll: boolean = false;\n @Input() searchEnabled: boolean = true;\n @Input() showSelectedCount: boolean = false;\n @Input() noDataMessage: string = \"No Data\";\n @Input() options: OPTIONS = {\n sortLabels: true,\n };\n @Input() set selectedItems(values: MultiSelectDropdownItem[]) {\n this.handlerSetLocalSelectedItems(values);\n }\n @Input() hideApplyButton: boolean = false;\n @Output() onChange: EventEmitter<any> = new EventEmitter();\n @HostListener(\"document:click\", [\"$event\"])\n clickout(event) {\n const isClickedOutside = !this.eRef.nativeElement.contains(event.target);\n if (isClickedOutside) {\n this.onCancel();\n }\n }\n constructor(private eRef: ElementRef) {}\n\n ngOnInit() {}\n\n handlerSetLocalSelectedItems(values) {\n this.localSelectedItems = values;\n this.localData = this.localData.map((item) => {\n if (\n item.value === this.SELECT_ALL_ENUM &&\n this.localData.every((a) => a.checked)\n ) {\n return { ...item, checked: true };\n }\n if (values.some((base) => base.value === item.value)) {\n return { ...item, checked: true };\n } else {\n return { ...item, checked: false };\n }\n });\n this.localData = this.formatValues(this.localData);\n }\n\n searchInputFocused(isFocused: boolean) {\n this.isSearchInputFocused = isFocused;\n }\n\n searchInputCanceled(event) {\n event.stopPropagation();\n this.searchInput = \"\";\n this.isSearchInputFocused = false;\n }\n\n toggleDropdown() {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.handlerSetLocalSelectedItems(this.localSelectedItems);\n this.localData = this.formatValues(this.localData);\n }\n }\n\n filterByValue(array: MultiSelectDropdownItem[], string: string) {\n return array.filter((o) =>\n o.label.toLowerCase().includes(string.toLowerCase())\n );\n }\n\n searchInputOnChange(newValue) {\n this.searchInput = newValue;\n if (newValue) {\n this.searchData = this.filterByValue(this.localData, newValue);\n } else {\n this.searchData = [];\n this.searchInput = \"\";\n }\n }\n\n formatValues(array: MultiSelectDropdownItem[]) {\n let sortedArray = array;\n if (this.options.sortLabels) {\n const checkedValues = array\n .filter((a) => a.checked)\n .sort((a: MultiSelectDropdownItem, b: MultiSelectDropdownItem) =>\n a.label > b.label ? 1 : b.label > a.label ? -1 : 0\n );\n const unCheckedValues = array\n .filter((a) => !a.checked)\n .sort((a: MultiSelectDropdownItem, b: MultiSelectDropdownItem) =>\n a.label > b.label ? 1 : b.label > a.label ? -1 : 0\n );\n sortedArray = [...checkedValues, ...unCheckedValues].filter(\n (t) => t.value !== this.SELECT_ALL_ENUM\n );\n }\n if (\n !sortedArray.some((option) => option.value === this.SELECT_ALL_ENUM) &&\n this.enableSelectAll &&\n sortedArray.length > 0\n ) {\n sortedArray.unshift({\n label: \"Select all\",\n value: this.SELECT_ALL_ENUM,\n checked: sortedArray.every((y) => y.checked),\n });\n }\n return sortedArray;\n }\n\n toggleSelectedItems(event, item: MultiSelectDropdownItem) {\n event.stopPropagation();\n if (this.enableSelectAll && item.value === this.SELECT_ALL_ENUM) {\n this.localData = this.localData.map((t) => ({\n ...t,\n checked: !item.checked,\n }));\n if (this.hideApplyButton) {\n this.applyFilters();\n }\n return;\n }\n if (item.checked) {\n this.localData = [\n ...this.localData.map((a) => {\n if (a.value === item.value || a.value === this.SELECT_ALL_ENUM) {\n return {\n ...a,\n checked: false,\n };\n }\n return a;\n }),\n ];\n } else {\n this.localData = [\n ...this.localData.map((a) => {\n if (a.value === item.value) {\n return {\n ...a,\n checked: true,\n };\n }\n return a;\n }),\n ];\n if (\n this.enableSelectAll &&\n this.localData\n .filter((r) => r.value !== this.SELECT_ALL_ENUM)\n .every((t) => t.checked)\n ) {\n this.localData = [\n ...this.localData.map((a) => {\n if (a.value === this.SELECT_ALL_ENUM) {\n return {\n ...a,\n checked: true,\n };\n }\n return a;\n }),\n ];\n }\n }\n if (this.searchEnabled) {\n this.searchInputOnChange(this.searchInput);\n }\n if (this.hideApplyButton) {\n this.applyFilters();\n }\n }\n\n applyFilters() {\n this.onChange.emit(\n this.localData\n .filter((a) => {\n return a.checked && a.value !== this.SELECT_ALL_ENUM;\n })\n .map((item) => {\n const { checked, ...data } = item;\n return data;\n })\n );\n if (!this.hideApplyButton) {\n this.onCancel();\n }\n }\n\n onReset() {\n this.isSearchInputFocused = false;\n this.onChange.emit([]);\n this.isOpen = false;\n this.searchInput = \"\";\n }\n\n onCancel() {\n this.isSearchInputFocused = false;\n this.localData = this.localData.map((a) => {\n if (\n this.localSelectedItems.some(\n (b) => b.value === a.value && String(b.checked) !== String(a.checked)\n )\n ) {\n return a;\n } else {\n return {\n ...a,\n checked: false,\n };\n }\n });\n this.isOpen = false;\n this.searchInput = \"\";\n }\n}\nexport interface MultiSelectDropdownItem {\n label: string;\n value: string;\n checked?: boolean;\n icon?: string;\n}\nexport interface OPTIONS {\n sortLabels: boolean;\n}\n","import { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { NgModule, ModuleWithProviders } from '@angular/core';\nimport { MultiSelectDropdownComponent } from './multi-select-dropdown.component';\nimport { CheckboxModule } from 'mis-crystal-design-system/checkbox';\nimport { ButtonModule } from 'mis-crystal-design-system/button';\n\n@NgModule({\n declarations: [MultiSelectDropdownComponent],\n imports: [CommonModule, FormsModule, CheckboxModule, ButtonModule],\n exports: [MultiSelectDropdownComponent]\n})\nexport class MultiSelectDropdownModule {\n static forRoot(): ModuleWithProviders<MultiSelectDropdownModule> {\n return { ngModule: MultiSelectDropdownModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.metadata.json CHANGED
@@ -1 +1 @@
1
- {"__symbolic":"module","version":4,"metadata":{"MultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"mis-multi-select-dropdown","template":"<div class=\"container\" [ngStyle]=\"{\n 'height': height.length > 0? height: '',\n 'width': width.length > 0? width: ''\n }\"\n>\n <div class=\"dropdown\" (click)=\"toggleDropdown()\" [ngStyle]=\"{'background': isOpen ? '#E6EBF7': ''}\">\n <div class=\"label\">\n <p class=\"text\">{{ label }}</p>\n <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n {{ localSelectedItems?.length }}\n </p>\n </div>\n <svg class=\"handle\" [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)': 'rotate(0deg)' }\" width=\"20\" height=\"20\"\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\" fill=\"#181F33\" />\n </svg>\n </div>\n <div style=\"flex-basis: 0;\"></div>\n <div style=\"width: 100%; position: relative;\">\n <div *ngIf=\"isOpen\" class=\"popup-container\"\n [ngStyle]=\"{\n 'height': dropdownListHeight,\n 'width': dropdownListWidth\n }\"\n [ngClass]=\"{\n 'position-left': dropdownListPosition === 'Left',\n 'position-right': dropdownListPosition === 'Right'\n }\"\n >\n <div *ngIf=\"searchEnabled\" class=\"search-container\">\n <svg *ngIf=\"!isSearchInputFocused\" class=\"search-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n fill=\"#6A737D\" />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{ paddingLeft: isSearchInputFocused ? '12px' : '45px', border:isSearchInputFocused? '1px solid #0937B2':'1px solid #e0e0e0', paddingRight: isSearchInputFocused ? '45px' : '10px' }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg *ngIf=\"isSearchInputFocused\" class=\"cancel-icon\" (click)=\"searchInputCanceled($event)\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n fill=\"#6A737D\" />\n </svg>\n </div>\n <div class=\"items\">\n <div class=\"item\" (click)=\"toggleSelectedItems($event, item)\" *ngFor=\"let item of searchInput ? searchData : localData\">\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox\n [checked]=\"item.checked\"\n ></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ item.label }}\n </p>\n </div>\n <div class=\"icon-container\" *ngIf=\"item.icon\">\n <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\">\n </div>\n </div>\n <div class=\"noData\" *ngIf=\"(searchInput ? searchData : localData).length === 0\">\n {{ searchInput === '' ? noDataMessage : 'No results' }}\n </div>\n </div>\n <div *ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n <div style=\"width: calc(50% - 4px)\">\n <mis-button\n [name]=\"'Reset'\"\n [type]=\"'Text'\"\n [width]=\"'100%'\"\n (click)=\"onReset()\"\n ></mis-button>\n </div>\n <div style=\"width: calc(50% - 4px)\">\n <mis-button\n [name]=\"'Apply'\"\n [type]=\"'Solid'\"\n [width]=\"'100%'\"\n (click)=\"applyFilters()\"\n ></mis-button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n","styles":[".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:hover{background-color:#f5f7fc}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.container .popup-container{position:absolute;top:4px;width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);overflow:scroll;overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.container .popup-container::-webkit-scrollbar{width:0;height:0}.container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.container .popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.container .popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.container .popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.container .popup-container .items .item:hover{background-color:#f5f7fc}.container .popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.container .popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.200000003px}.container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.container .popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.container .popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.container .popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.container .popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}.position-left{right:0}.position-right{left:0}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"showSelectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"hideApplyButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":5}}]}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":46,"character":5},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":53,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"handlerSetLocalSelectedItems":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"searchInputOnChange":[{"__symbolic":"method"}],"formatValues":[{"__symbolic":"method"}],"toggleSelectedItems":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"MultiSelectDropdownItem":{"__symbolic":"interface"},"MultiSelectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":14},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":28},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":9,"character":41},{"__symbolic":"reference","module":"mis-crystal-design-system/button","name":"ButtonModule","line":9,"character":57}],"exports":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MultiSelectDropdownModule"},"providers":[]}}}}},"origins":{"MultiSelectDropdownComponent":"./multi-select-dropdown.component","MultiSelectDropdownItem":"./multi-select-dropdown.component","MultiSelectDropdownModule":"./multi-select-dropdown.module"},"importAs":"mis-crystal-design-system/multi-select-dropdown"}
1
+ {"__symbolic":"module","version":4,"metadata":{"MultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"mis-multi-select-dropdown","template":"<div class=\"container\" [ngStyle]=\"{\n 'height': height.length > 0? height: '',\n 'width': width.length > 0? width: ''\n }\"\n>\n <div class=\"dropdown\" (click)=\"toggleDropdown()\" [ngStyle]=\"{'background': isOpen ? '#E6EBF7': ''}\">\n <div class=\"label\">\n <p class=\"text\">{{ label }}</p>\n <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n {{ localSelectedItems?.length }}\n </p>\n </div>\n <svg class=\"handle\" [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)': 'rotate(0deg)' }\" width=\"20\" height=\"20\"\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\" fill=\"#181F33\" />\n </svg>\n </div>\n <div style=\"flex-basis: 0;\"></div>\n <div style=\"width: 100%; position: relative;\">\n <div *ngIf=\"isOpen\" class=\"popup-container\"\n [ngStyle]=\"{\n 'height': dropdownListHeight,\n 'width': dropdownListWidth\n }\"\n [ngClass]=\"{\n 'position-left': dropdownListPosition === 'Left',\n 'position-right': dropdownListPosition === 'Right'\n }\"\n >\n <div *ngIf=\"searchEnabled\" class=\"search-container\">\n <svg *ngIf=\"!isSearchInputFocused\" class=\"search-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n fill=\"#6A737D\" />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{ paddingLeft: isSearchInputFocused ? '12px' : '45px', border:isSearchInputFocused? '1px solid #0937B2':'1px solid #e0e0e0', paddingRight: isSearchInputFocused ? '45px' : '10px' }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg *ngIf=\"isSearchInputFocused\" class=\"cancel-icon\" (click)=\"searchInputCanceled($event)\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n fill=\"#6A737D\" />\n </svg>\n </div>\n <div class=\"items\">\n <div class=\"item\" (click)=\"toggleSelectedItems($event, item)\" *ngFor=\"let item of searchInput ? searchData : localData\">\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox\n [checked]=\"item.checked\"\n ></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ item.label }}\n </p>\n </div>\n <div class=\"icon-container\" *ngIf=\"item.icon\">\n <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\">\n </div>\n </div>\n <div class=\"noData\" *ngIf=\"(searchInput ? searchData : localData).length === 0\">\n {{ searchInput === '' ? noDataMessage : 'No results' }}\n </div>\n </div>\n <div *ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n <div style=\"width: calc(50% - 4px)\">\n <mis-button\n [name]=\"'Reset'\"\n [type]=\"'Text'\"\n [width]=\"'100%'\"\n (click)=\"onReset()\"\n ></mis-button>\n </div>\n <div style=\"width: calc(50% - 4px)\">\n <mis-button\n [name]=\"'Apply'\"\n [type]=\"'Solid'\"\n [width]=\"'100%'\"\n (click)=\"applyFilters()\"\n ></mis-button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n","styles":[".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:hover{background-color:#f5f7fc}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.container .popup-container{position:absolute;top:4px;width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);overflow:scroll;overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.container .popup-container::-webkit-scrollbar{width:0;height:0}.container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.container .popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.container .popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.container .popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.container .popup-container .items .item:hover{background-color:#f5f7fc}.container .popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.container .popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.200000003px}.container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.container .popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.container .popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.container .popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.container .popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}.position-left{right:0}.position-right{left:0}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"enableSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"showSelectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"hideApplyButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":3}}]}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":45,"character":3},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":52,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"handlerSetLocalSelectedItems":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"searchInputOnChange":[{"__symbolic":"method"}],"formatValues":[{"__symbolic":"method"}],"toggleSelectedItems":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"MultiSelectDropdownItem":{"__symbolic":"interface"},"MultiSelectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":14},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":28},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":9,"character":41},{"__symbolic":"reference","module":"mis-crystal-design-system/button","name":"ButtonModule","line":9,"character":57}],"exports":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MultiSelectDropdownModule"},"providers":[]}}}}},"origins":{"MultiSelectDropdownComponent":"./multi-select-dropdown.component","MultiSelectDropdownItem":"./multi-select-dropdown.component","MultiSelectDropdownModule":"./multi-select-dropdown.module"},"importAs":"mis-crystal-design-system/multi-select-dropdown"}
package/multi-select-dropdown/multi-select-dropdown.component.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ElementRef, EventEmitter, OnInit } from '@angular/core';
1
+ import { ElementRef, EventEmitter, OnInit } from "@angular/core";
2
2
  export declare class MultiSelectDropdownComponent implements OnInit {
3
3
  private eRef;
4
4
  searchInput: string;
@@ -6,16 +6,20 @@ export declare class MultiSelectDropdownComponent implements OnInit {
6
6
  localSelectedItems: MultiSelectDropdownItem[];
7
7
  localData: MultiSelectDropdownItem[];
8
8
  searchData: MultiSelectDropdownItem[];
9
+ isSearchInputFocused: boolean;
10
+ SELECT_ALL_ENUM: string;
9
11
  set data(values: MultiSelectDropdownItem[]);
10
12
  label: string;
11
13
  height: string;
12
14
  width: string;
13
15
  dropdownListHeight: string;
14
16
  dropdownListWidth: string;
15
- dropdownListPosition: 'Left' | 'Right';
17
+ dropdownListPosition: "Left" | "Right";
18
+ enableSelectAll: boolean;
16
19
  searchEnabled: boolean;
17
20
  showSelectedCount: boolean;
18
21
  noDataMessage: string;
22
+ options: OPTIONS;
19
23
  set selectedItems(values: MultiSelectDropdownItem[]);
20
24
  hideApplyButton: boolean;
21
25
  onChange: EventEmitter<any>;
@@ -23,7 +27,6 @@ export declare class MultiSelectDropdownComponent implements OnInit {
23
27
  constructor(eRef: ElementRef);
24
28
  ngOnInit(): void;
25
29
  handlerSetLocalSelectedItems(values: any): void;
26
- isSearchInputFocused: boolean;
27
30
  searchInputFocused(isFocused: boolean): void;
28
31
  searchInputCanceled(event: any): void;
29
32
  toggleDropdown(): void;
@@ -41,3 +44,6 @@ export interface MultiSelectDropdownItem {
41
44
  checked?: boolean;
42
45
  icon?: string;
43
46
  }
47
+ export interface OPTIONS {
48
+ sortLabels: boolean;
49
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mis-crystal-design-system",
3
- "version": "2.3.17",
3
+ "version": "2.3.20",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "*",
6
6
  "@angular/core": "*",