mis-crystal-design-system 2.4.9 → 2.5.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 (37) hide show
  1. package/bundles/mis-crystal-design-system-datepicker_v2.umd.js +0 -11
  2. package/bundles/mis-crystal-design-system-datepicker_v2.umd.js.map +1 -1
  3. package/bundles/mis-crystal-design-system-datepicker_v2.umd.min.js +2 -2
  4. package/bundles/mis-crystal-design-system-datepicker_v2.umd.min.js.map +1 -1
  5. package/bundles/mis-crystal-design-system-dropdown.umd.js +384 -22
  6. package/bundles/mis-crystal-design-system-dropdown.umd.js.map +1 -1
  7. package/bundles/mis-crystal-design-system-dropdown.umd.min.js +15 -1
  8. package/bundles/mis-crystal-design-system-dropdown.umd.min.js.map +1 -1
  9. package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.js +61 -22
  10. package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.js.map +1 -1
  11. package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.min.js +2 -2
  12. package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.min.js.map +1 -1
  13. package/bundles/mis-crystal-design-system-nested-multi-select-dropdown.umd.js +72 -26
  14. package/bundles/mis-crystal-design-system-nested-multi-select-dropdown.umd.js.map +1 -1
  15. package/bundles/mis-crystal-design-system-nested-multi-select-dropdown.umd.min.js +2 -2
  16. package/bundles/mis-crystal-design-system-nested-multi-select-dropdown.umd.min.js.map +1 -1
  17. package/datepicker_v2/mis-crystal-design-system-datepicker_v2.metadata.json +1 -1
  18. package/datepicker_v2/tz-datepicker.directive.d.ts +0 -1
  19. package/dropdown/dropdown.component.d.ts +10 -3
  20. package/dropdown/mis-crystal-design-system-dropdown.metadata.json +1 -1
  21. package/esm2015/datepicker_v2/tz-datepicker.directive.js +2 -13
  22. package/esm2015/dropdown/dropdown.component.js +68 -20
  23. package/esm2015/multi-select-dropdown/multi-select-dropdown.component.js +81 -38
  24. package/esm2015/nested-multi-select-dropdown/nested-multi-select-dropdown.component.js +74 -24
  25. package/fesm2015/mis-crystal-design-system-datepicker_v2.js +1 -12
  26. package/fesm2015/mis-crystal-design-system-datepicker_v2.js.map +1 -1
  27. package/fesm2015/mis-crystal-design-system-dropdown.js +67 -19
  28. package/fesm2015/mis-crystal-design-system-dropdown.js.map +1 -1
  29. package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js +80 -37
  30. package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js.map +1 -1
  31. package/fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.js +73 -23
  32. package/fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.js.map +1 -1
  33. package/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.metadata.json +1 -1
  34. package/multi-select-dropdown/multi-select-dropdown.component.d.ts +10 -3
  35. package/nested-multi-select-dropdown/mis-crystal-design-system-nested-multi-select-dropdown.metadata.json +1 -1
  36. package/nested-multi-select-dropdown/nested-multi-select-dropdown.component.d.ts +11 -4
  37. package/package.json +1 -1
package/fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.js CHANGED
@@ -1,27 +1,31 @@
1
- import { EventEmitter, Component, ElementRef, Input, Output, HostListener, NgModule } from '@angular/core';
1
+ import { ConnectionPositionPair, OverlayConfig, Overlay } from '@angular/cdk/overlay';
2
+ import { TemplatePortal } from '@angular/cdk/portal';
3
+ import { EventEmitter, Component, ElementRef, ViewContainerRef, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
2
4
  import { CommonModule } from '@angular/common';
3
5
  import { FormsModule } from '@angular/forms';
4
6
  import { CheckboxModule } from 'mis-crystal-design-system/checkbox';
5
7
  import { ButtonModule } from 'mis-crystal-design-system/button';
6
8
 
7
9
  class NestedMultiSelectDropdownComponent {
8
- constructor(eRef) {
10
+ constructor(eRef, overlay, viewContainerRef) {
9
11
  this.eRef = eRef;
10
- this.searchInput = '';
12
+ this.overlay = overlay;
13
+ this.viewContainerRef = viewContainerRef;
14
+ this.searchInput = "";
11
15
  this.isOpen = false;
12
16
  this.localSelectedItems = [];
13
17
  this.localData = [];
14
18
  this.searchData = [];
15
19
  this.selectedCount = 0;
16
- this.label = 'Select';
17
- this.height = '';
18
- this.width = '';
19
- this.dropdownListHeight = '';
20
- this.dropdownListWidth = '';
21
- this.dropdownListPosition = 'Left';
20
+ this.label = "Select";
21
+ this.height = "";
22
+ this.width = "";
23
+ this.dropdownListHeight = "";
24
+ this.dropdownListWidth = "";
25
+ this.dropdownListPosition = "Left";
22
26
  this.searchEnabled = true;
23
27
  this.showSelectedCount = false;
24
- this.noDataMessage = 'No Data';
28
+ this.noDataMessage = "No Data";
25
29
  this.onChange = new EventEmitter();
26
30
  this.isSearchInputFocused = false;
27
31
  }
@@ -36,13 +40,13 @@ class NestedMultiSelectDropdownComponent {
36
40
  set selectedItems(values) {
37
41
  this.handlerSetLocalSelectedItems(values);
38
42
  }
43
+ ngOnInit() { }
39
44
  clickout(event) {
40
45
  const isClickedOutside = !this.eRef.nativeElement.contains(event.target);
41
46
  if (isClickedOutside) {
42
47
  this.onCancel();
43
48
  }
44
49
  }
45
- ngOnInit() { }
46
50
  handlerSetLocalSelectedItems(values) {
47
51
  this.localSelectedItems = values;
48
52
  }
@@ -51,7 +55,7 @@ class NestedMultiSelectDropdownComponent {
51
55
  }
52
56
  searchInputCanceled(event) {
53
57
  event.stopPropagation();
54
- this.searchInput = '';
58
+ this.searchInput = "";
55
59
  this.isSearchInputFocused = false;
56
60
  }
57
61
  toggleDropdown() {
@@ -60,10 +64,50 @@ class NestedMultiSelectDropdownComponent {
60
64
  this.handlerSetLocalSelectedItems(this.localSelectedItems);
61
65
  this.localData = this.formatValues(this.localData);
62
66
  }
67
+ if (this.isOpen)
68
+ this.openDropdown(this.popupContainer, this.selectElement.nativeElement);
69
+ else
70
+ this.onCancel();
71
+ }
72
+ openDropdown(template, origin) {
73
+ const positionsBottom = [
74
+ new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, 0, 4),
75
+ new ConnectionPositionPair({ originX: "end", originY: "bottom" }, { overlayX: "end", overlayY: "top" }, 0, 4)
76
+ ];
77
+ const positionsTop = [
78
+ new ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" }, 0, -4),
79
+ new ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" }, 0, -4)
80
+ ];
81
+ const positionStrategy = this.overlay
82
+ .position()
83
+ .flexibleConnectedTo(origin)
84
+ .withPositions([
85
+ ...(this.dropdownListPosition === "Right" ? positionsBottom.reverse() : positionsBottom),
86
+ ...(this.dropdownListPosition === "Right" ? positionsTop.reverse() : positionsTop)
87
+ ])
88
+ .withPush(true);
89
+ const configs = new OverlayConfig({
90
+ hasBackdrop: true,
91
+ backdropClass: "cdk-overlay-transparent-backdrop",
92
+ scrollStrategy: this.overlay.scrollStrategies.reposition(),
93
+ positionStrategy,
94
+ width: origin.clientWidth
95
+ });
96
+ this.overlayRef = this.overlay.create(configs);
97
+ if (this.dropdownListWidth)
98
+ this.overlayRef.updateSize({ width: this.dropdownListWidth });
99
+ if (this.dropdownListHeight)
100
+ this.overlayRef.updateSize({ height: this.dropdownListHeight });
101
+ this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
102
+ this.overlayRef.backdropClick().subscribe(res => {
103
+ this.onCancel();
104
+ });
63
105
  }
64
106
  // tslint:disable-next-line:variable-name
65
107
  filterByValue(array, string) {
66
- return array.filter(o => { var _a; return o.label.toLowerCase().includes(string.toLowerCase()) || ((_a = o.children) === null || _a === void 0 ? void 0 : _a.some(g => { var _a; return (_a = g === null || g === void 0 ? void 0 : g.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(string.toLowerCase()); })); }).map(v => {
108
+ return array
109
+ .filter(o => { var _a; return o.label.toLowerCase().includes(string.toLowerCase()) || ((_a = o.children) === null || _a === void 0 ? void 0 : _a.some(g => { var _a; return (_a = g === null || g === void 0 ? void 0 : g.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(string.toLowerCase()); })); })
110
+ .map(v => {
67
111
  var _a;
68
112
  return Object.assign(Object.assign({}, v), { children: (_a = v === null || v === void 0 ? void 0 : v.children) === null || _a === void 0 ? void 0 : _a.filter(l => { var _a; return (_a = l === null || l === void 0 ? void 0 : l.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(string.toLowerCase()); }) });
69
113
  });
@@ -75,16 +119,16 @@ class NestedMultiSelectDropdownComponent {
75
119
  }
76
120
  else {
77
121
  this.searchData = [];
78
- this.searchInput = '';
122
+ this.searchInput = "";
79
123
  }
80
124
  }
81
125
  formatValues(array) {
82
126
  const checkedValues = array
83
127
  .filter(a => a.checked)
84
- .sort((a, b) => a.label > b.label ? 1 : b.label > a.label ? -1 : 0);
128
+ .sort((a, b) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));
85
129
  const unCheckedValues = array
86
130
  .filter(a => !a.checked)
87
- .sort((a, b) => a.label > b.label ? 1 : b.label > a.label ? -1 : 0);
131
+ .sort((a, b) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));
88
132
  return [...checkedValues, ...unCheckedValues];
89
133
  }
90
134
  // tslint:disable-next-line:no-shadowed-variable
@@ -191,23 +235,27 @@ class NestedMultiSelectDropdownComponent {
191
235
  }
192
236
  this.onChange.emit([]);
193
237
  this.isOpen = false;
194
- this.searchInput = '';
238
+ this.searchInput = "";
195
239
  }
196
240
  onCancel() {
241
+ var _a;
197
242
  this.isSearchInputFocused = false;
198
243
  this.isOpen = false;
199
- this.searchInput = '';
244
+ (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
245
+ this.searchInput = "";
200
246
  }
201
247
  }
202
248
  NestedMultiSelectDropdownComponent.decorators = [
203
249
  { type: Component, args: [{
204
- selector: 'mis-nested-multi-select-dropdown',
205
- 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 && selectedCount > 0\" class=\"count\">\n {{ selectedCount }}\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 (click)=\"toggleSelectedItems($event, item)\" *ngFor=\"let item of searchInput ? searchData : localData\">\n <div class=\"item\">\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 *ngIf=\"item?.children?.length > 0\" class=\"items sub\" style=\"padding-right: 0;\">\n <div class=\"item\" (click)=\"toggleSelectedItems($event, item, cItem)\" *ngFor=\"let cItem of item?.children\">\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox\n [checked]=\"cItem.checked\"\n ></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ cItem.label }}\n </p>\n </div>\n <div class=\"icon-container\" *ngIf=\"cItem.icon\">\n <img class=\"icon\" [src]=\"cItem.icon\" alt=\"no img\">\n </div>\n </div>\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\" 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</div>\n",
206
- styles: ["::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#9aa7b4}.container{position:relative;display:flex;justify-content:center;align-items:center;height:32px;width:256px;flex-wrap:wrap;font-family:Lato,sans-serif}.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;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.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}"]
250
+ selector: "mis-nested-multi-select-dropdown",
251
+ template: "<div\n class=\"container\"\n [ngStyle]=\"{\n height: height.length > 0 ? height : '',\n width: width.length > 0 ? width : ''\n }\"\n>\n <div\n class=\"dropdown\"\n #select\n tabindex=\"0\"\n (keyup.enter)=\"toggleDropdown()\"\n (click)=\"toggleDropdown()\"\n [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n >\n <div class=\"label\">\n <p class=\"text\">{{ label }}</p>\n <p *ngIf=\"showSelectedCount && selectedCount > 0\" class=\"count\">\n {{ selectedCount }}\n </p>\n </div>\n <svg\n class=\"handle\"\n [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n fill=\"#181F33\"\n />\n </svg>\n </div>\n</div>\n<ng-template #popupContainer>\n <div\n 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\n *ngIf=\"!isSearchInputFocused\"\n class=\"search-icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n 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 />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{\n paddingLeft: isSearchInputFocused ? '12px' : '45px',\n border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n paddingRight: isSearchInputFocused ? '45px' : '10px'\n }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg\n *ngIf=\"isSearchInputFocused\"\n class=\"cancel-icon\"\n (click)=\"searchInputCanceled($event)\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n 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 />\n </svg>\n </div>\n <div class=\"items\">\n <div\n tabindex=\"0\"\n (keyup.enter)=\"toggleSelectedItems($event, item)\"\n (click)=\"toggleSelectedItems($event, item)\"\n *ngFor=\"let item of searchInput ? searchData : localData\"\n >\n <div class=\"item\">\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox [checked]=\"item.checked\"></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 *ngIf=\"item?.children?.length > 0\" class=\"items sub\" style=\"padding-right: 0\">\n <div\n class=\"item\"\n tabindex=\"0\"\n (keyup.enter)=\"toggleSelectedItems($event, item, cItem)\"\n (click)=\"toggleSelectedItems($event, item, cItem)\"\n *ngFor=\"let cItem of item?.children\"\n >\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox [checked]=\"cItem.checked\"></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ cItem.label }}\n </p>\n </div>\n <div class=\"icon-container\" *ngIf=\"cItem.icon\">\n <img class=\"icon\" [src]=\"cItem.icon\" alt=\"no img\" />\n </div>\n </div>\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\" class=\"actions-container\">\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n </div>\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n </div>\n </div>\n </div>\n</ng-template>\n",
252
+ styles: ["::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#9aa7b4}.container{position:relative;display:flex;justify-content:center;align-items:center;height:32px;width:256px;flex-wrap:wrap;font-family:Lato,sans-serif}.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:focus-visible,.container .dropdown:hover{background-color:#f5f7fc;outline:none}.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}.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-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.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}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.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}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:focus-visible,.popup-container .items .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.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}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.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}.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)}.popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.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}.popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.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}"]
207
253
  },] }
208
254
  ];
209
255
  NestedMultiSelectDropdownComponent.ctorParameters = () => [
210
- { type: ElementRef }
256
+ { type: ElementRef },
257
+ { type: Overlay },
258
+ { type: ViewContainerRef }
211
259
  ];
212
260
  NestedMultiSelectDropdownComponent.propDecorators = {
213
261
  data: [{ type: Input }],
@@ -222,7 +270,9 @@ NestedMultiSelectDropdownComponent.propDecorators = {
222
270
  noDataMessage: [{ type: Input }],
223
271
  selectedItems: [{ type: Input }],
224
272
  onChange: [{ type: Output }],
225
- clickout: [{ type: HostListener, args: ['document:click', ['$event'],] }]
273
+ selectElement: [{ type: ViewChild, args: ["select", { static: false },] }],
274
+ popupContainer: [{ type: ViewChild, args: ["popupContainer", { static: false },] }],
275
+ clickout: [{ type: HostListener, args: ["document:click", ["$event"],] }]
226
276
  };
227
277
 
228
278
  class NestedMultiSelectDropdownModule {
package/fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"mis-crystal-design-system-nested-multi-select-dropdown.js","sources":["../../../projects/mis-components/nested-multi-select-dropdown/nested-multi-select-dropdown.component.ts","../../../projects/mis-components/nested-multi-select-dropdown/nested-multi-select-dropdown.module.ts","../../../projects/mis-components/nested-multi-select-dropdown/mis-crystal-design-system-nested-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-nested-multi-select-dropdown',\n templateUrl: './nested-multi-select-dropdown.component.html',\n styleUrls: ['./nested-multi-select-dropdown.component.scss']\n})\nexport class NestedMultiSelectDropdownComponent implements OnInit {\n\n searchInput: string = '';\n isOpen = false;\n localSelectedItems: NestedMultiSelectDropdownItem[] = [];\n localData: NestedMultiSelectDropdownItem[] = [];\n searchData: NestedMultiSelectDropdownItem[] = [];\n selectedCount: number = 0;\n\n @Input() set data(values: NestedMultiSelectDropdownItem[]) {\n // tslint:disable-next-line:no-shadowed-variable\n this.localData = values.map(item => {\n return {\n ...item,\n checked: false,\n children: item.children.map(a => {\n return {\n ...a,\n checked: false\n };\n })\n };\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: NestedMultiSelectDropdownItem[]) {\n this.handlerSetLocalSelectedItems(values);\n }\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\n constructor(private eRef: ElementRef) {}\n ngOnInit() {}\n\n handlerSetLocalSelectedItems(values) {\n this.localSelectedItems = values;\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 // tslint:disable-next-line:variable-name\n filterByValue(array: NestedMultiSelectDropdownItem[], string: string) {\n return array.filter(o =>\n o.label.toLowerCase().includes(string.toLowerCase()) || o.children?.some(g => g?.label?.toLowerCase().includes(string.toLowerCase()))\n ).map(v => {\n return {\n ...v,\n children: v?.children?.filter(l => l?.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 formatValues(array: NestedMultiSelectDropdownItem[]) {\n const checkedValues = array\n .filter(a => a.checked)\n .sort((a: NestedMultiSelectDropdownItem, b: NestedMultiSelectDropdownItem) =>\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: NestedMultiSelectDropdownItem, b: NestedMultiSelectDropdownItem) =>\n a.label > b.label ? 1 : b.label > a.label ? -1 : 0\n );\n return [...checkedValues, ...unCheckedValues];\n }\n // tslint:disable-next-line:no-shadowed-variable\n toggleSelectedItems(event, item: NestedMultiSelectDropdownItem, cItem?: any) {\n event.stopPropagation();\n if (!cItem){\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 // tslint:disable-next-line:no-shadowed-variable\n children: item.children.map(a => {\n return {\n ...a,\n checked: false\n };\n })\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 // tslint:disable-next-line:no-shadowed-variable\n children: item.children.map(a => {\n return {\n ...a,\n checked: true\n };\n })\n };\n }\n return a;\n })\n ];\n }\n } else {\n if (cItem.checked) {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n // tslint:disable-next-line:no-shadowed-variable\n const children = a?.children.map(a => {\n if (cItem?.value === a?.value){\n return {\n ...a,\n checked: false\n };\n }\n return a;\n });\n return {\n ...a,\n checked: children.every(q => q.checked),\n // tslint:disable-next-line:no-shadowed-variable\n children\n };\n }\n return a;\n })\n ];\n } else {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n // tslint:disable-next-line:no-shadowed-variable\n const children = a?.children.map(a => {\n if (cItem?.value === a?.value){\n return {\n ...a,\n checked: true\n };\n }\n return a;\n });\n return {\n ...a,\n checked: children.every(q => q.checked),\n // tslint:disable-next-line:no-shadowed-variable\n children\n };\n }\n return a;\n })\n ];\n }\n }\n if (this.searchEnabled) {\n this.searchInputOnChange(this.searchInput);\n }\n }\n\n applyFilters() {\n let localCount = 0;\n this.localData.forEach(a => a?.children?.forEach(b => {\n if (b.checked){\n localCount += 1;\n }\n }));\n this.selectedCount = localCount;\n const w = this.localData\n .filter(r => !(!r.checked && !r?.children?.some(f => f?.checked)))\n .map(a => {\n return {\n ...a,\n children: a?.children?.filter(s => s.checked)\n };\n });\n this.onChange.emit(w);\n this.onCancel();\n }\n onReset(){\n this.isSearchInputFocused = false;\n for(let item of this.localData){\n for(let child of item.children){\n child.checked = false\n }\n item.checked = false\n }\n this.onChange.emit([])\n this.isOpen = false;\n this.searchInput = '';\n }\n onCancel() {\n this.isSearchInputFocused = false;\n this.isOpen = false;\n this.searchInput = '';\n }\n}\nexport interface NestedMultiSelectDropdownItem {\n label: string;\n value: string;\n checked?: boolean;\n icon?: string;\n children: Array<{\n label: string\n value: string\n checked?: boolean;\n icon?: string;\n }>;\n}\n","import { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { NgModule, ModuleWithProviders } from '@angular/core';\nimport { NestedMultiSelectDropdownComponent } from './nested-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: [NestedMultiSelectDropdownComponent],\n imports: [CommonModule, FormsModule, CheckboxModule, ButtonModule],\n exports: [NestedMultiSelectDropdownComponent]\n})\nexport class NestedMultiSelectDropdownModule {\n static forRoot(): ModuleWithProviders<NestedMultiSelectDropdownModule> {\n return { ngModule: NestedMultiSelectDropdownModule, 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-nested-multi-select-dropdown.js","sources":["../../../projects/mis-components/nested-multi-select-dropdown/nested-multi-select-dropdown.component.ts","../../../projects/mis-components/nested-multi-select-dropdown/nested-multi-select-dropdown.module.ts","../../../projects/mis-components/nested-multi-select-dropdown/mis-crystal-design-system-nested-multi-select-dropdown.ts"],"sourcesContent":["import { OverlayRef, Overlay, ConnectionPositionPair, OverlayConfig } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef } from \"@angular/core\";\n\n@Component({\n selector: \"mis-nested-multi-select-dropdown\",\n templateUrl: \"./nested-multi-select-dropdown.component.html\",\n styleUrls: [\"./nested-multi-select-dropdown.component.scss\"]\n})\nexport class NestedMultiSelectDropdownComponent implements OnInit {\n searchInput: string = \"\";\n isOpen = false;\n localSelectedItems: NestedMultiSelectDropdownItem[] = [];\n localData: NestedMultiSelectDropdownItem[] = [];\n searchData: NestedMultiSelectDropdownItem[] = [];\n selectedCount: number = 0;\n\n @Input() set data(values: NestedMultiSelectDropdownItem[]) {\n // tslint:disable-next-line:no-shadowed-variable\n this.localData = values.map(item => {\n return {\n ...item,\n checked: false,\n children: item.children.map(a => {\n return {\n ...a,\n checked: false\n };\n })\n };\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: NestedMultiSelectDropdownItem[]) {\n this.handlerSetLocalSelectedItems(values);\n }\n\n @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n @ViewChild(\"select\", { static: false }) selectElement: ElementRef;\n @ViewChild(\"popupContainer\", { static: false }) popupContainer: TemplateRef<Element>;\n private overlayRef: OverlayRef;\n\n constructor(private eRef: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n ngOnInit() {}\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\n handlerSetLocalSelectedItems(values) {\n this.localSelectedItems = values;\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 if (this.isOpen) this.openDropdown(this.popupContainer, this.selectElement.nativeElement);\n else this.onCancel();\n }\n private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): void {\n const positionsBottom = [\n new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, 0, 4),\n new ConnectionPositionPair({ originX: \"end\", originY: \"bottom\" }, { overlayX: \"end\", overlayY: \"top\" }, 0, 4)\n ];\n const positionsTop = [\n new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" }, 0, -4),\n new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" }, 0, -4)\n ];\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(origin)\n .withPositions([\n ...(this.dropdownListPosition === \"Right\" ? positionsBottom.reverse() : positionsBottom),\n ...(this.dropdownListPosition === \"Right\" ? positionsTop.reverse() : positionsTop)\n ])\n .withPush(true);\n const configs = new OverlayConfig({\n hasBackdrop: true,\n backdropClass: \"cdk-overlay-transparent-backdrop\",\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n positionStrategy,\n width: origin.clientWidth\n });\n this.overlayRef = this.overlay.create(configs);\n if (this.dropdownListWidth) this.overlayRef.updateSize({ width: this.dropdownListWidth });\n if (this.dropdownListHeight) this.overlayRef.updateSize({ height: this.dropdownListHeight });\n this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n this.overlayRef.backdropClick().subscribe(res => {\n this.onCancel();\n });\n }\n // tslint:disable-next-line:variable-name\n filterByValue(array: NestedMultiSelectDropdownItem[], string: string) {\n return array\n .filter(\n o => o.label.toLowerCase().includes(string.toLowerCase()) || o.children?.some(g => g?.label?.toLowerCase().includes(string.toLowerCase()))\n )\n .map(v => {\n return {\n ...v,\n children: v?.children?.filter(l => l?.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 formatValues(array: NestedMultiSelectDropdownItem[]) {\n const checkedValues = array\n .filter(a => a.checked)\n .sort((a: NestedMultiSelectDropdownItem, b: NestedMultiSelectDropdownItem) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));\n const unCheckedValues = array\n .filter(a => !a.checked)\n .sort((a: NestedMultiSelectDropdownItem, b: NestedMultiSelectDropdownItem) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));\n return [...checkedValues, ...unCheckedValues];\n }\n // tslint:disable-next-line:no-shadowed-variable\n toggleSelectedItems(event, item: NestedMultiSelectDropdownItem, cItem?: any) {\n event.stopPropagation();\n if (!cItem) {\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 // tslint:disable-next-line:no-shadowed-variable\n children: item.children.map(a => {\n return {\n ...a,\n checked: false\n };\n })\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 // tslint:disable-next-line:no-shadowed-variable\n children: item.children.map(a => {\n return {\n ...a,\n checked: true\n };\n })\n };\n }\n return a;\n })\n ];\n }\n } else {\n if (cItem.checked) {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n // tslint:disable-next-line:no-shadowed-variable\n const children = a?.children.map(a => {\n if (cItem?.value === a?.value) {\n return {\n ...a,\n checked: false\n };\n }\n return a;\n });\n return {\n ...a,\n checked: children.every(q => q.checked),\n // tslint:disable-next-line:no-shadowed-variable\n children\n };\n }\n return a;\n })\n ];\n } else {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n // tslint:disable-next-line:no-shadowed-variable\n const children = a?.children.map(a => {\n if (cItem?.value === a?.value) {\n return {\n ...a,\n checked: true\n };\n }\n return a;\n });\n return {\n ...a,\n checked: children.every(q => q.checked),\n // tslint:disable-next-line:no-shadowed-variable\n children\n };\n }\n return a;\n })\n ];\n }\n }\n if (this.searchEnabled) {\n this.searchInputOnChange(this.searchInput);\n }\n }\n\n applyFilters() {\n let localCount = 0;\n this.localData.forEach(a =>\n a?.children?.forEach(b => {\n if (b.checked) {\n localCount += 1;\n }\n })\n );\n this.selectedCount = localCount;\n const w = this.localData\n .filter(r => !(!r.checked && !r?.children?.some(f => f?.checked)))\n .map(a => {\n return {\n ...a,\n children: a?.children?.filter(s => s.checked)\n };\n });\n this.onChange.emit(w);\n this.onCancel();\n }\n onReset() {\n this.isSearchInputFocused = false;\n for (let item of this.localData) {\n for (let child of item.children) {\n child.checked = false;\n }\n item.checked = false;\n }\n this.onChange.emit([]);\n this.isOpen = false;\n this.searchInput = \"\";\n }\n onCancel() {\n this.isSearchInputFocused = false;\n this.isOpen = false;\n this.overlayRef?.detach();\n this.searchInput = \"\";\n }\n}\nexport interface NestedMultiSelectDropdownItem {\n label: string;\n value: string;\n checked?: boolean;\n icon?: string;\n children: Array<{\n label: string;\n value: string;\n checked?: boolean;\n icon?: string;\n }>;\n}\n","import { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { NgModule, ModuleWithProviders } from '@angular/core';\nimport { NestedMultiSelectDropdownComponent } from './nested-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: [NestedMultiSelectDropdownComponent],\n imports: [CommonModule, FormsModule, CheckboxModule, ButtonModule],\n exports: [NestedMultiSelectDropdownComponent]\n})\nexport class NestedMultiSelectDropdownModule {\n static forRoot(): ModuleWithProviders<NestedMultiSelectDropdownModule> {\n return { ngModule: NestedMultiSelectDropdownModule, 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":9,"character":1},"arguments":[{"selector":"mis-multi-select-dropdown","template":"<div\n class=\"container\"\n [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\n class=\"handle\"\n [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n fill=\"#181F33\"\n />\n </svg>\n </div>\n <div style=\"flex-basis: 0\"></div>\n <div style=\"width: 100%; position: relative\">\n <div\n *ngIf=\"isOpen\"\n 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\n *ngIf=\"!isSearchInputFocused\"\n class=\"search-icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n 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 />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{\n paddingLeft: isSearchInputFocused ? '12px' : '45px',\n border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n paddingRight: isSearchInputFocused ? '45px' : '10px'\n }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg\n *ngIf=\"isSearchInputFocused\"\n class=\"cancel-icon\"\n (click)=\"searchInputCanceled($event)\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n 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 />\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 [checked]=\"item.checked\"></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 [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n </div>\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n </div>\n </div>\n </div>\n </div>\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"}
1
+ {"__symbolic":"module","version":4,"metadata":{"MultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mis-multi-select-dropdown","template":"<div\n class=\"container\"\n [ngStyle]=\"{\n height: height.length > 0 ? height : '',\n width: width.length > 0 ? width : ''\n }\"\n>\n <div\n class=\"dropdown\"\n #select\n tabindex=\"0\"\n (keyup.enter)=\"toggleDropdown()\"\n (click)=\"toggleDropdown()\"\n [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n >\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\n class=\"handle\"\n [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n fill=\"#181F33\"\n />\n </svg>\n </div>\n</div>\n<ng-template #popupContainer>\n <div\n 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\n *ngIf=\"!isSearchInputFocused\"\n class=\"search-icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n 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 />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{\n paddingLeft: isSearchInputFocused ? '12px' : '45px',\n border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n paddingRight: isSearchInputFocused ? '45px' : '10px'\n }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg\n *ngIf=\"isSearchInputFocused\"\n class=\"cancel-icon\"\n (click)=\"searchInputCanceled($event)\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n 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 />\n </svg>\n </div>\n <div class=\"items\">\n <div\n class=\"item\"\n tabindex=\"0\"\n (keyup.enter)=\"toggleSelectedItems($event, item)\"\n (click)=\"toggleSelectedItems($event, item)\"\n *ngFor=\"let item of searchInput ? searchData : localData\"\n >\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox [checked]=\"item.checked\" tabindex=\"-1\"></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 [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n </div>\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n </div>\n </div>\n </div>\n</ng-template>\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:focus-visible,.container .dropdown:hover{background-color:#f5f7fc;outline:none}.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}.popup-container{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);display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.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}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.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}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:focus-visible,.popup-container .items .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.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}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.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}.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)}.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:.2;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.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}.popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.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}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"enableSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"showSelectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"hideApplyButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":3}}]}],"selectElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":3},"arguments":["select",{"static":false}]}]}],"popupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":41,"character":3},"arguments":["popupContainer",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":44,"character":28},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":44,"character":57},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":44,"character":92}]}],"ngOnInit":[{"__symbolic":"method"}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":47,"character":3},"arguments":["document:click",["$event"]]}]}],"handlerSetLocalSelectedItems":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__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,6 +1,9 @@
1
- import { ElementRef, EventEmitter, OnInit } from "@angular/core";
1
+ import { ElementRef, EventEmitter, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
2
+ import { Overlay } from "@angular/cdk/overlay";
2
3
  export declare class MultiSelectDropdownComponent implements OnInit {
3
4
  private eRef;
5
+ private overlay;
6
+ private viewContainerRef;
4
7
  searchInput: string;
5
8
  isOpen: boolean;
6
9
  localSelectedItems: MultiSelectDropdownItem[];
@@ -23,13 +26,17 @@ export declare class MultiSelectDropdownComponent implements OnInit {
23
26
  set selectedItems(values: MultiSelectDropdownItem[]);
24
27
  hideApplyButton: boolean;
25
28
  onChange: EventEmitter<any>;
26
- clickout(event: any): void;
27
- constructor(eRef: ElementRef);
29
+ selectElement: ElementRef;
30
+ popupContainer: TemplateRef<Element>;
31
+ private overlayRef;
32
+ constructor(eRef: ElementRef, overlay: Overlay, viewContainerRef: ViewContainerRef);
28
33
  ngOnInit(): void;
34
+ clickout(event: any): void;
29
35
  handlerSetLocalSelectedItems(values: any): void;
30
36
  searchInputFocused(isFocused: boolean): void;
31
37
  searchInputCanceled(event: any): void;
32
38
  toggleDropdown(): void;
39
+ private openDropdown;
33
40
  filterByValue(array: MultiSelectDropdownItem[], string: string): MultiSelectDropdownItem[];
34
41
  searchInputOnChange(newValue: any): void;
35
42
  formatValues(array: MultiSelectDropdownItem[]): MultiSelectDropdownItem[];
package/nested-multi-select-dropdown/mis-crystal-design-system-nested-multi-select-dropdown.metadata.json CHANGED
@@ -1 +1 @@
1
- {"__symbolic":"module","version":4,"metadata":{"NestedMultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"mis-nested-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 && selectedCount > 0\" class=\"count\">\n {{ selectedCount }}\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 (click)=\"toggleSelectedItems($event, item)\" *ngFor=\"let item of searchInput ? searchData : localData\">\n <div class=\"item\">\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 *ngIf=\"item?.children?.length > 0\" class=\"items sub\" style=\"padding-right: 0;\">\n <div class=\"item\" (click)=\"toggleSelectedItems($event, item, cItem)\" *ngFor=\"let cItem of item?.children\">\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox\n [checked]=\"cItem.checked\"\n ></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ cItem.label }}\n </p>\n </div>\n <div class=\"icon-container\" *ngIf=\"cItem.icon\">\n <img class=\"icon\" [src]=\"cItem.icon\" alt=\"no img\">\n </div>\n </div>\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\" 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</div>\n","styles":["::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#9aa7b4}.container{position:relative;display:flex;justify-content:center;align-items:center;height:32px;width:256px;flex-wrap:wrap;font-family:Lato,sans-serif}.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;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.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":24,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"showSelectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":56,"character":5},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":64,"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"}]}},"NestedMultiSelectDropdownItem":{"__symbolic":"interface"},"NestedMultiSelectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NestedMultiSelectDropdownComponent"}],"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":"NestedMultiSelectDropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NestedMultiSelectDropdownModule"},"providers":[]}}}}},"origins":{"NestedMultiSelectDropdownComponent":"./nested-multi-select-dropdown.component","NestedMultiSelectDropdownItem":"./nested-multi-select-dropdown.component","NestedMultiSelectDropdownModule":"./nested-multi-select-dropdown.module"},"importAs":"mis-crystal-design-system/nested-multi-select-dropdown"}
1
+ {"__symbolic":"module","version":4,"metadata":{"NestedMultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mis-nested-multi-select-dropdown","template":"<div\n class=\"container\"\n [ngStyle]=\"{\n height: height.length > 0 ? height : '',\n width: width.length > 0 ? width : ''\n }\"\n>\n <div\n class=\"dropdown\"\n #select\n tabindex=\"0\"\n (keyup.enter)=\"toggleDropdown()\"\n (click)=\"toggleDropdown()\"\n [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n >\n <div class=\"label\">\n <p class=\"text\">{{ label }}</p>\n <p *ngIf=\"showSelectedCount && selectedCount > 0\" class=\"count\">\n {{ selectedCount }}\n </p>\n </div>\n <svg\n class=\"handle\"\n [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n fill=\"#181F33\"\n />\n </svg>\n </div>\n</div>\n<ng-template #popupContainer>\n <div\n 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\n *ngIf=\"!isSearchInputFocused\"\n class=\"search-icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n 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 />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{\n paddingLeft: isSearchInputFocused ? '12px' : '45px',\n border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n paddingRight: isSearchInputFocused ? '45px' : '10px'\n }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg\n *ngIf=\"isSearchInputFocused\"\n class=\"cancel-icon\"\n (click)=\"searchInputCanceled($event)\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n 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 />\n </svg>\n </div>\n <div class=\"items\">\n <div\n tabindex=\"0\"\n (keyup.enter)=\"toggleSelectedItems($event, item)\"\n (click)=\"toggleSelectedItems($event, item)\"\n *ngFor=\"let item of searchInput ? searchData : localData\"\n >\n <div class=\"item\">\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox [checked]=\"item.checked\"></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 *ngIf=\"item?.children?.length > 0\" class=\"items sub\" style=\"padding-right: 0\">\n <div\n class=\"item\"\n tabindex=\"0\"\n (keyup.enter)=\"toggleSelectedItems($event, item, cItem)\"\n (click)=\"toggleSelectedItems($event, item, cItem)\"\n *ngFor=\"let cItem of item?.children\"\n >\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox [checked]=\"cItem.checked\"></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ cItem.label }}\n </p>\n </div>\n <div class=\"icon-container\" *ngIf=\"cItem.icon\">\n <img class=\"icon\" [src]=\"cItem.icon\" alt=\"no img\" />\n </div>\n </div>\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\" class=\"actions-container\">\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n </div>\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n </div>\n </div>\n </div>\n</ng-template>\n","styles":["::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#9aa7b4}.container{position:relative;display:flex;justify-content:center;align-items:center;height:32px;width:256px;flex-wrap:wrap;font-family:Lato,sans-serif}.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:focus-visible,.container .dropdown:hover{background-color:#f5f7fc;outline:none}.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}.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-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.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}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.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}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:focus-visible,.popup-container .items .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.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}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.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}.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)}.popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.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}.popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.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}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"showSelectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"selectedItems":[{"__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":47,"character":3}}]}],"selectElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":49,"character":3},"arguments":["select",{"static":false}]}]}],"popupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":50,"character":3},"arguments":["popupContainer",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":53,"character":28},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":53,"character":57},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":53,"character":92}]}],"ngOnInit":[{"__symbolic":"method"}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":56,"character":3},"arguments":["document:click",["$event"]]}]}],"handlerSetLocalSelectedItems":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"searchInputOnChange":[{"__symbolic":"method"}],"formatValues":[{"__symbolic":"method"}],"toggleSelectedItems":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"NestedMultiSelectDropdownItem":{"__symbolic":"interface"},"NestedMultiSelectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NestedMultiSelectDropdownComponent"}],"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":"NestedMultiSelectDropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NestedMultiSelectDropdownModule"},"providers":[]}}}}},"origins":{"NestedMultiSelectDropdownComponent":"./nested-multi-select-dropdown.component","NestedMultiSelectDropdownItem":"./nested-multi-select-dropdown.component","NestedMultiSelectDropdownModule":"./nested-multi-select-dropdown.module"},"importAs":"mis-crystal-design-system/nested-multi-select-dropdown"}