npm - mis-crystal-design-system - Versions diffs - 2.2.3 → 2.2.4 - Mend

mis-crystal-design-system 2.2.3 → 2.2.4

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 (19) hide show

package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js CHANGED Viewed

@@ -22,6 +22,7 @@ class MultiSelectDropdownComponent {
         this.searchEnabled = true;
         this.showSelectedCount = false;
         this.noDataMessage = 'No Data';
+        this.hideApplyButton = false;
         this.onChange = new EventEmitter();
         this.isSearchInputFocused = false;
     }
@@ -113,6 +114,9 @@ class MultiSelectDropdownComponent {
         if (this.searchEnabled) {
             this.searchInputOnChange(this.searchInput);
         }
+        if (this.hideApplyButton) {
+            this.applyFilters();
+        }
     }
     applyFilters() {
         this.onChange.emit(this.localData
@@ -123,7 +127,9 @@ class MultiSelectDropdownComponent {
             const { checked } = item, data = __rest(item, ["checked"]);
             return data;
         }));
-        this.onCancel();
+        if (!this.hideApplyButton) {
+            this.onCancel();
+        }
     }
     onReset() {
         this.isSearchInputFocused = false;
@@ -148,7 +154,7 @@ class MultiSelectDropdownComponent {
 MultiSelectDropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'mis-multi-select-dropdown',
-                template: "<div class=\"container\" [ngStyle]=\"{\n        'height': height.length > 0? height: '',\n        'width': width.length > 0? width: ''\n     }\"\n>\n    <div class=\"dropdown\" (click)=\"toggleDropdown()\" [ngStyle]=\"{'background': isOpen ? '#E6EBF7': ''}\">\n        <div class=\"label\">\n            <p class=\"text\">{{ label }}</p>\n            <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n                {{ localSelectedItems?.length }}\n            </p>\n        </div>\n        <svg class=\"handle\" [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)': 'rotate(0deg)' }\" width=\"20\" height=\"20\"\n             viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                  d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\" fill=\"#181F33\" />\n        </svg>\n    </div>\n    <div style=\"flex-basis: 0;\"></div>\n    <div style=\"width: 100%; position: relative;\">\n        <div *ngIf=\"isOpen\" class=\"popup-container\"\n             [ngStyle]=\"{\n                'height': dropdownListHeight,\n                'width': dropdownListWidth\n             }\"\n             [ngClass]=\"{\n                'position-left': dropdownListPosition === 'Left',\n                'position-right': dropdownListPosition === 'Right'\n             }\"\n        >\n            <div *ngIf=\"searchEnabled\" class=\"search-container\">\n                <svg *ngIf=\"!isSearchInputFocused\" class=\"search-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                     xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n                          fill=\"#6A737D\" />\n                </svg>\n                <input\n                        [ngModel]=\"searchInput\"\n                        [ngStyle]=\"{ paddingLeft: isSearchInputFocused ? '12px' : '45px', border:isSearchInputFocused? '1px solid #0937B2':'1px solid #e0e0e0', paddingRight: isSearchInputFocused ? '45px' : '10px' }\"\n                        (ngModelChange)=\"searchInputOnChange($event)\"\n                        [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n                        (focus)=\"searchInputFocused(true)\"\n                        class=\"search-input\"\n                />\n                <svg *ngIf=\"isSearchInputFocused\" class=\"cancel-icon\" (click)=\"searchInputCanceled($event)\" width=\"24\" height=\"24\"\n                     viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n                          fill=\"#6A737D\" />\n                </svg>\n            </div>\n            <div class=\"items\">\n                <div class=\"item\" (click)=\"toggleSelectedItems($event, item)\" *ngFor=\"let item of searchInput ? searchData : localData\">\n                    <div class=\"checkbox-container-wrapper\">\n                        <div class=\"checkbox-container\">\n                            <mis-checkbox\n                                [checked]=\"item.checked\"\n                            ></mis-checkbox>\n                        </div>\n                        <p class=\"label\">\n                            {{ item.label }}\n                        </p>\n                    </div>\n                    <div class=\"icon-container\" *ngIf=\"item.icon\">\n                        <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\">\n                    </div>\n                </div>\n                <div class=\"noData\" *ngIf=\"(searchInput ? searchData : localData).length === 0\">\n                    {{ searchInput === '' ? noDataMessage : 'No results' }}\n                </div>\n            </div>\n            <div *ngIf=\"localData.length !== 0\" class=\"actions-container\">\n                <div style=\"width: calc(50% - 4px)\">\n                    <mis-button\n                            [name]=\"'Reset'\"\n                            [type]=\"'Text'\"\n                            [width]=\"'100%'\"\n                            (click)=\"onReset()\"\n                    ></mis-button>\n                </div>\n                <div style=\"width: calc(50% - 4px)\">\n                    <mis-button\n                            [name]=\"'Apply'\"\n                            [type]=\"'Solid'\"\n                            [width]=\"'100%'\"\n                            (click)=\"applyFilters()\"\n                    ></mis-button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n</div>\n",
+                template: "<div class=\"container\" [ngStyle]=\"{\n        'height': height.length > 0? height: '',\n        'width': width.length > 0? width: ''\n     }\"\n>\n    <div class=\"dropdown\" (click)=\"toggleDropdown()\" [ngStyle]=\"{'background': isOpen ? '#E6EBF7': ''}\">\n        <div class=\"label\">\n            <p class=\"text\">{{ label }}</p>\n            <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n                {{ localSelectedItems?.length }}\n            </p>\n        </div>\n        <svg class=\"handle\" [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)': 'rotate(0deg)' }\" width=\"20\" height=\"20\"\n             viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                  d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\" fill=\"#181F33\" />\n        </svg>\n    </div>\n    <div style=\"flex-basis: 0;\"></div>\n    <div style=\"width: 100%; position: relative;\">\n        <div *ngIf=\"isOpen\" class=\"popup-container\"\n             [ngStyle]=\"{\n                'height': dropdownListHeight,\n                'width': dropdownListWidth\n             }\"\n             [ngClass]=\"{\n                'position-left': dropdownListPosition === 'Left',\n                'position-right': dropdownListPosition === 'Right'\n             }\"\n        >\n            <div *ngIf=\"searchEnabled\" class=\"search-container\">\n                <svg *ngIf=\"!isSearchInputFocused\" class=\"search-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                     xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n                          fill=\"#6A737D\" />\n                </svg>\n                <input\n                        [ngModel]=\"searchInput\"\n                        [ngStyle]=\"{ paddingLeft: isSearchInputFocused ? '12px' : '45px', border:isSearchInputFocused? '1px solid #0937B2':'1px solid #e0e0e0', paddingRight: isSearchInputFocused ? '45px' : '10px' }\"\n                        (ngModelChange)=\"searchInputOnChange($event)\"\n                        [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n                        (focus)=\"searchInputFocused(true)\"\n                        class=\"search-input\"\n                />\n                <svg *ngIf=\"isSearchInputFocused\" class=\"cancel-icon\" (click)=\"searchInputCanceled($event)\" width=\"24\" height=\"24\"\n                     viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n                          fill=\"#6A737D\" />\n                </svg>\n            </div>\n            <div class=\"items\">\n                <div class=\"item\" (click)=\"toggleSelectedItems($event, item)\" *ngFor=\"let item of searchInput ? searchData : localData\">\n                    <div class=\"checkbox-container-wrapper\">\n                        <div class=\"checkbox-container\">\n                            <mis-checkbox\n                                [checked]=\"item.checked\"\n                            ></mis-checkbox>\n                        </div>\n                        <p class=\"label\">\n                            {{ item.label }}\n                        </p>\n                    </div>\n                    <div class=\"icon-container\" *ngIf=\"item.icon\">\n                        <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\">\n                    </div>\n                </div>\n                <div class=\"noData\" *ngIf=\"(searchInput ? searchData : localData).length === 0\">\n                    {{ searchInput === '' ? noDataMessage : 'No results' }}\n                </div>\n            </div>\n            <div *ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n                <div style=\"width: calc(50% - 4px)\">\n                    <mis-button\n                            [name]=\"'Reset'\"\n                            [type]=\"'Text'\"\n                            [width]=\"'100%'\"\n                            (click)=\"onReset()\"\n                    ></mis-button>\n                </div>\n                <div style=\"width: calc(50% - 4px)\">\n                    <mis-button\n                            [name]=\"'Apply'\"\n                            [type]=\"'Solid'\"\n                            [width]=\"'100%'\"\n                            (click)=\"applyFilters()\"\n                    ></mis-button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n</div>\n",
                 styles: [".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:hover{background-color:#f5f7fc}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.container .popup-container{position:absolute;top:4px;width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);overflow:scroll;overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.container .popup-container::-webkit-scrollbar{width:0;height:0}.container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.container .popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.container .popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.container .popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.container .popup-container .items .item:hover{background-color:#f5f7fc}.container .popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.container .popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.200000003px}.container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.container .popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.container .popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.container .popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.container .popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}.position-left{right:0}.position-right{left:0}"]
             },] }
 ];
@@ -167,6 +173,7 @@ MultiSelectDropdownComponent.propDecorators = {
     showSelectedCount: [{ type: Input }],
     noDataMessage: [{ type: Input }],
     selectedItems: [{ type: Input }],
+    hideApplyButton: [{ type: Input }],
     onChange: [{ type: Output }],
     clickout: [{ type: HostListener, args: ['document:click', ['$event'],] }]
 };

package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mis-crystal-design-system-multi-select-dropdown.js","sources":["../../../projects/mis-components/multi-select-dropdown/multi-select-dropdown.component.ts","../../../projects/mis-components/multi-select-dropdown/multi-select-dropdown.module.ts","../../../projects/mis-components/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.ts"],"sourcesContent":["import {\n Component,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnInit,\n Output\n} from '@angular/core';\n\n@Component({\n selector: 'mis-multi-select-dropdown',\n templateUrl: './multi-select-dropdown.component.html',\n styleUrls: ['./multi-select-dropdown.component.scss']\n})\nexport class MultiSelectDropdownComponent implements OnInit {\n\n searchInput: string = '';\n isOpen = false;\n localSelectedItems: MultiSelectDropdownItem[] = [];\n localData: MultiSelectDropdownItem[] = [];\n searchData: MultiSelectDropdownItem[] = [];\n\n @Input() set data(values: MultiSelectDropdownItem[]) {\n this.localData = values.map(item => {\n return {...item, checked: false};\n });\n }\n @Input() label: string = 'Select';\n @Input() height: string = ''\n @Input() width: string = ''\n\n @Input() dropdownListHeight: string = ''\n @Input() dropdownListWidth: string = ''\n @Input() dropdownListPosition: 'Left' \| 'Right' = 'Left'\n\n @Input() searchEnabled: boolean = true;\n @Input() showSelectedCount: boolean = false;\n @Input() noDataMessage: string = 'No Data';\n @Input() set selectedItems(values: MultiSelectDropdownItem[]) {\n this.handlerSetLocalSelectedItems(values);\n }\n\n @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n @HostListener('document:click', ['$event'])\n clickout(event) {\n const isClickedOutside = !this.eRef.nativeElement.contains(event.target);\n if (isClickedOutside) {\n this.onCancel();\n }\n }\n constructor(private eRef: ElementRef) {}\n ngOnInit() {}\n\n handlerSetLocalSelectedItems(values) {\n this.localSelectedItems = values;\n this.localData = this.localData.map(item => {\n if (values.some(base => base.value === item.value)) {\n return { ...item, checked: true };\n } else {\n return { ...item, checked: false };\n }\n });\n }\n isSearchInputFocused: boolean = false;\n searchInputFocused(isFocused: boolean) {\n this.isSearchInputFocused = isFocused;\n }\n searchInputCanceled(event) {\n event.stopPropagation();\n this.searchInput = '';\n this.isSearchInputFocused = false;\n }\n toggleDropdown() {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.handlerSetLocalSelectedItems(this.localSelectedItems);\n this.localData = this.formatValues(this.localData);\n }\n }\n filterByValue(array: MultiSelectDropdownItem[], string: string) {\n return array.filter(o =>\n o.label.toLowerCase().includes(string.toLowerCase())\n );\n }\n searchInputOnChange(newValue) {\n this.searchInput = newValue;\n if (newValue) {\n this.searchData = this.filterByValue(this.localData, newValue);\n } else {\n this.searchData = [];\n this.searchInput = '';\n }\n }\n formatValues(array: MultiSelectDropdownItem[]) {\n const checkedValues = array\n .filter(a => a.checked)\n .sort((a: MultiSelectDropdownItem, b: MultiSelectDropdownItem) =>\n a.label > b.label ? 1 : b.label > a.label ? -1 : 0\n );\n const unCheckedValues = array\n .filter(a => !a.checked)\n .sort((a: MultiSelectDropdownItem, b: MultiSelectDropdownItem) =>\n a.label > b.label ? 1 : b.label > a.label ? -1 : 0\n );\n return [...checkedValues, ...unCheckedValues];\n }\n toggleSelectedItems(event, item: MultiSelectDropdownItem) {\n event.stopPropagation();\n if (item.checked) {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n return {\n ...a,\n checked: false\n };\n }\n return a;\n })\n ];\n } else {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n return {\n ...a,\n checked: true\n };\n }\n return a;\n })\n ];\n }\n if (this.searchEnabled) {\n this.searchInputOnChange(this.searchInput);\n }\n }\n applyFilters() {\n this.onChange.emit(\n this.localData\n .filter(a => {\n return a.checked;\n })\n .map(item => {\n const { checked, ...data } = item;\n return data;\n })\n );\n this.onCancel();\n }\n onReset(){\n this.isSearchInputFocused = false;\n this.onChange.emit([])\n this.isOpen = false;\n this.searchInput = '';\n }\n onCancel() {\n this.isSearchInputFocused = false;\n this.localData = this.localData.map(a => {\n if (\n this.localSelectedItems.some(\n b => b.value === a.value && String(b.checked) !== String(a.checked)\n )\n ) {\n return a;\n } else {\n return {\n ...a,\n checked: false\n };\n }\n });\n this.isOpen = false;\n this.searchInput = '';\n }\n}\nexport interface MultiSelectDropdownItem {\n label: string;\n value: string;\n checked?: boolean;\n icon?: string;\n}\n","import { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { NgModule, ModuleWithProviders } from '@angular/core';\nimport { MultiSelectDropdownComponent } from './multi-select-dropdown.component';\nimport { CheckboxModule } from 'mis-crystal-design-system/checkbox';\nimport { ButtonModule } from 'mis-crystal-design-system/button';\n\n@NgModule({\n declarations: [MultiSelectDropdownComponent],\n imports: [CommonModule, FormsModule, CheckboxModule, ButtonModule],\n exports: [MultiSelectDropdownComponent]\n})\nexport class MultiSelectDropdownModule {\n static forRoot(): ModuleWithProviders<MultiSelectDropdownModule> {\n return { ngModule: MultiSelectDropdownModule, providers: [] };\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"mis-crystal-design-system-multi-select-dropdown.js","sources":["../../../projects/mis-components/multi-select-dropdown/multi-select-dropdown.component.ts","../../../projects/mis-components/multi-select-dropdown/multi-select-dropdown.module.ts","../../../projects/mis-components/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.ts"],"sourcesContent":["import {\n Component,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnInit,\n Output\n} from '@angular/core';\n\n@Component({\n selector: 'mis-multi-select-dropdown',\n templateUrl: './multi-select-dropdown.component.html',\n styleUrls: ['./multi-select-dropdown.component.scss']\n})\nexport class MultiSelectDropdownComponent implements OnInit {\n\n searchInput: string = '';\n isOpen = false;\n localSelectedItems: MultiSelectDropdownItem[] = [];\n localData: MultiSelectDropdownItem[] = [];\n searchData: MultiSelectDropdownItem[] = [];\n\n @Input() set data(values: MultiSelectDropdownItem[]) {\n this.localData = values.map(item => {\n return {...item, checked: false};\n });\n }\n @Input() label: string = 'Select';\n @Input() height: string = ''\n @Input() width: string = ''\n\n @Input() dropdownListHeight: string = ''\n @Input() dropdownListWidth: string = ''\n @Input() dropdownListPosition: 'Left' \| 'Right' = 'Left'\n\n @Input() searchEnabled: boolean = true;\n @Input() showSelectedCount: boolean = false;\n @Input() noDataMessage: string = 'No Data';\n @Input() set selectedItems(values: MultiSelectDropdownItem[]) {\n this.handlerSetLocalSelectedItems(values);\n }\n @Input() hideApplyButton: boolean = false;\n\n @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n @HostListener('document:click', ['$event'])\n clickout(event) {\n const isClickedOutside = !this.eRef.nativeElement.contains(event.target);\n if (isClickedOutside) {\n this.onCancel();\n }\n }\n constructor(private eRef: ElementRef) {}\n ngOnInit() {}\n\n handlerSetLocalSelectedItems(values) {\n this.localSelectedItems = values;\n this.localData = this.localData.map(item => {\n if (values.some(base => base.value === item.value)) {\n return { ...item, checked: true };\n } else {\n return { ...item, checked: false };\n }\n });\n }\n isSearchInputFocused: boolean = false;\n searchInputFocused(isFocused: boolean) {\n this.isSearchInputFocused = isFocused;\n }\n searchInputCanceled(event) {\n event.stopPropagation();\n this.searchInput = '';\n this.isSearchInputFocused = false;\n }\n toggleDropdown() {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.handlerSetLocalSelectedItems(this.localSelectedItems);\n this.localData = this.formatValues(this.localData);\n }\n }\n filterByValue(array: MultiSelectDropdownItem[], string: string) {\n return array.filter(o =>\n o.label.toLowerCase().includes(string.toLowerCase())\n );\n }\n searchInputOnChange(newValue) {\n this.searchInput = newValue;\n if (newValue) {\n this.searchData = this.filterByValue(this.localData, newValue);\n } else {\n this.searchData = [];\n this.searchInput = '';\n }\n }\n formatValues(array: MultiSelectDropdownItem[]) {\n const checkedValues = array\n .filter(a => a.checked)\n .sort((a: MultiSelectDropdownItem, b: MultiSelectDropdownItem) =>\n a.label > b.label ? 1 : b.label > a.label ? -1 : 0\n );\n const unCheckedValues = array\n .filter(a => !a.checked)\n .sort((a: MultiSelectDropdownItem, b: MultiSelectDropdownItem) =>\n a.label > b.label ? 1 : b.label > a.label ? -1 : 0\n );\n return [...checkedValues, ...unCheckedValues];\n }\n toggleSelectedItems(event, item: MultiSelectDropdownItem) {\n event.stopPropagation();\n if (item.checked) {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n return {\n ...a,\n checked: false\n };\n }\n return a;\n })\n ];\n } else {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n return {\n ...a,\n checked: true\n };\n }\n return a;\n })\n ];\n }\n if (this.searchEnabled) {\n this.searchInputOnChange(this.searchInput);\n }\n if (this.hideApplyButton) {\n this.applyFilters();\n }\n }\n applyFilters() {\n this.onChange.emit(\n this.localData\n .filter(a => {\n return a.checked;\n })\n .map(item => {\n const { checked, ...data } = item;\n return data;\n })\n );\n \n if (!this.hideApplyButton) {\n this.onCancel();\n }\n }\n onReset(){\n this.isSearchInputFocused = false;\n this.onChange.emit([])\n this.isOpen = false;\n this.searchInput = '';\n }\n onCancel() {\n this.isSearchInputFocused = false;\n this.localData = this.localData.map(a => {\n if (\n this.localSelectedItems.some(\n b => b.value === a.value && String(b.checked) !== String(a.checked)\n )\n ) {\n return a;\n } else {\n return {\n ...a,\n checked: false\n };\n }\n });\n this.isOpen = false;\n this.searchInput = '';\n }\n}\nexport interface MultiSelectDropdownItem {\n label: string;\n value: string;\n checked?: boolean;\n icon?: string;\n}\n","import { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { NgModule, ModuleWithProviders } from '@angular/core';\nimport { MultiSelectDropdownComponent } from './multi-select-dropdown.component';\nimport { CheckboxModule } from 'mis-crystal-design-system/checkbox';\nimport { ButtonModule } from 'mis-crystal-design-system/button';\n\n@NgModule({\n declarations: [MultiSelectDropdownComponent],\n imports: [CommonModule, FormsModule, CheckboxModule, ButtonModule],\n exports: [MultiSelectDropdownComponent]\n})\nexport class MultiSelectDropdownModule {\n static forRoot(): ModuleWithProviders<MultiSelectDropdownModule> {\n return { ngModule: MultiSelectDropdownModule, providers: [] };\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"MultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"mis-multi-select-dropdown","template":"<div class=\"container\" [ngStyle]=\"{\n 'height': height.length > 0? height: '',\n 'width': width.length > 0? width: ''\n }\"\n>\n <div class=\"dropdown\" (click)=\"toggleDropdown()\" [ngStyle]=\"{'background': isOpen ? '#E6EBF7': ''}\">\n <div class=\"label\">\n <p class=\"text\">{{ label }}</p>\n <p ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n {{ localSelectedItems?.length }}\n </p>\n </div>\n <svg class=\"handle\" [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)': 'rotate(0deg)' }\" width=\"20\" height=\"20\"\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\" fill=\"#181F33\" />\n </svg>\n </div>\n <div style=\"flex-basis: 0;\"></div>\n <div style=\"width: 100%; position: relative;\">\n <div ngIf=\"isOpen\" class=\"popup-container\"\n [ngStyle]=\"{\n 'height': dropdownListHeight,\n 'width': dropdownListWidth\n }\"\n [ngClass]=\"{\n 'position-left': dropdownListPosition === 'Left',\n 'position-right': dropdownListPosition === 'Right'\n }\"\n >\n <div ngIf=\"searchEnabled\" class=\"search-container\">\n <svg ngIf=\"!isSearchInputFocused\" class=\"search-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n fill=\"#6A737D\" />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{ paddingLeft: isSearchInputFocused ? '12px' : '45px', border:isSearchInputFocused? '1px solid #0937B2':'1px solid #e0e0e0', paddingRight: isSearchInputFocused ? '45px' : '10px' }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg ngIf=\"isSearchInputFocused\" class=\"cancel-icon\" (click)=\"searchInputCanceled($event)\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n fill=\"#6A737D\" />\n </svg>\n </div>\n <div class=\"items\">\n <div class=\"item\" (click)=\"toggleSelectedItems($event, item)\" ngFor=\"let item of searchInput ? searchData : localData\">\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox\n [checked]=\"item.checked\"\n ></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ item.label }}\n </p>\n </div>\n <div class=\"icon-container\" ngIf=\"item.icon\">\n <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\">\n </div>\n </div>\n <div class=\"noData\" ngIf=\"(searchInput ? searchData : localData).length === 0\">\n {{ searchInput === '' ? noDataMessage : 'No results' }}\n </div>\n </div>\n <div *ngIf=\"localData.length !== 0\" class=\"actions-container\">\n <div style=\"width: calc(50% - 4px)\">\n <mis-button\n [name]=\"'Reset'\"\n [type]=\"'Text'\"\n [width]=\"'100%'\"\n (click)=\"onReset()\"\n ></mis-button>\n </div>\n <div style=\"width: calc(50% - 4px)\">\n <mis-button\n [name]=\"'Apply'\"\n [type]=\"'Solid'\"\n [width]=\"'100%'\"\n (click)=\"applyFilters()\"\n ></mis-button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n","styles":[".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:hover{background-color:#f5f7fc}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.container .popup-container{position:absolute;top:4px;width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);overflow:scroll;overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.container .popup-container::-webkit-scrollbar{width:0;height:0}.container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.container .popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.container .popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.container .popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.container .popup-container .items .item:hover{background-color:#f5f7fc}.container .popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.container .popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.200000003px}.container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.container .popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.container .popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.container .popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.container .popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}.position-left{right:0}.position-right{left:0}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"showSelectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":5}}]}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":45,"character":5},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":52,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"handlerSetLocalSelectedItems":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"searchInputOnChange":[{"__symbolic":"method"}],"formatValues":[{"__symbolic":"method"}],"toggleSelectedItems":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"MultiSelectDropdownItem":{"__symbolic":"interface"},"MultiSelectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":14},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":28},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":9,"character":41},{"__symbolic":"reference","module":"mis-crystal-design-system/button","name":"ButtonModule","line":9,"character":57}],"exports":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MultiSelectDropdownModule"},"providers":[]}}}}},"origins":{"MultiSelectDropdownComponent":"./multi-select-dropdown.component","MultiSelectDropdownItem":"./multi-select-dropdown.component","MultiSelectDropdownModule":"./multi-select-dropdown.module"},"importAs":"mis-crystal-design-system/multi-select-dropdown"}
1	+ {"__symbolic":"module","version":4,"metadata":{"MultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"mis-multi-select-dropdown","template":"<div class=\"container\" [ngStyle]=\"{\n 'height': height.length > 0? height: '',\n 'width': width.length > 0? width: ''\n }\"\n>\n <div class=\"dropdown\" (click)=\"toggleDropdown()\" [ngStyle]=\"{'background': isOpen ? '#E6EBF7': ''}\">\n <div class=\"label\">\n <p class=\"text\">{{ label }}</p>\n <p ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n {{ localSelectedItems?.length }}\n </p>\n </div>\n <svg class=\"handle\" [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)': 'rotate(0deg)' }\" width=\"20\" height=\"20\"\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\" fill=\"#181F33\" />\n </svg>\n </div>\n <div style=\"flex-basis: 0;\"></div>\n <div style=\"width: 100%; position: relative;\">\n <div ngIf=\"isOpen\" class=\"popup-container\"\n [ngStyle]=\"{\n 'height': dropdownListHeight,\n 'width': dropdownListWidth\n }\"\n [ngClass]=\"{\n 'position-left': dropdownListPosition === 'Left',\n 'position-right': dropdownListPosition === 'Right'\n }\"\n >\n <div ngIf=\"searchEnabled\" class=\"search-container\">\n <svg ngIf=\"!isSearchInputFocused\" class=\"search-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n fill=\"#6A737D\" />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{ paddingLeft: isSearchInputFocused ? '12px' : '45px', border:isSearchInputFocused? '1px solid #0937B2':'1px solid #e0e0e0', paddingRight: isSearchInputFocused ? '45px' : '10px' }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg ngIf=\"isSearchInputFocused\" class=\"cancel-icon\" (click)=\"searchInputCanceled($event)\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n fill=\"#6A737D\" />\n </svg>\n </div>\n <div class=\"items\">\n <div class=\"item\" (click)=\"toggleSelectedItems($event, item)\" ngFor=\"let item of searchInput ? searchData : localData\">\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox\n [checked]=\"item.checked\"\n ></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ item.label }}\n </p>\n </div>\n <div class=\"icon-container\" ngIf=\"item.icon\">\n <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\">\n </div>\n </div>\n <div class=\"noData\" ngIf=\"(searchInput ? searchData : localData).length === 0\">\n {{ searchInput === '' ? noDataMessage : 'No results' }}\n </div>\n </div>\n <div *ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n <div style=\"width: calc(50% - 4px)\">\n <mis-button\n [name]=\"'Reset'\"\n [type]=\"'Text'\"\n [width]=\"'100%'\"\n (click)=\"onReset()\"\n ></mis-button>\n </div>\n <div style=\"width: calc(50% - 4px)\">\n <mis-button\n [name]=\"'Apply'\"\n [type]=\"'Solid'\"\n [width]=\"'100%'\"\n (click)=\"applyFilters()\"\n ></mis-button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n","styles":[".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:hover{background-color:#f5f7fc}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.container .popup-container{position:absolute;top:4px;width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);overflow:scroll;overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.container .popup-container::-webkit-scrollbar{width:0;height:0}.container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.container .popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.container .popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.container .popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.container .popup-container .items .item:hover{background-color:#f5f7fc}.container .popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.container .popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.200000003px}.container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.container .popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.container .popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.container .popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.container .popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}.position-left{right:0}.position-right{left:0}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"showSelectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"hideApplyButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":5}}]}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":46,"character":5},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":53,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"handlerSetLocalSelectedItems":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"searchInputOnChange":[{"__symbolic":"method"}],"formatValues":[{"__symbolic":"method"}],"toggleSelectedItems":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"MultiSelectDropdownItem":{"__symbolic":"interface"},"MultiSelectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":14},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":28},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":9,"character":41},{"__symbolic":"reference","module":"mis-crystal-design-system/button","name":"ButtonModule","line":9,"character":57}],"exports":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MultiSelectDropdownModule"},"providers":[]}}}}},"origins":{"MultiSelectDropdownComponent":"./multi-select-dropdown.component","MultiSelectDropdownItem":"./multi-select-dropdown.component","MultiSelectDropdownModule":"./multi-select-dropdown.module"},"importAs":"mis-crystal-design-system/multi-select-dropdown"}

package/multi-select-dropdown/multi-select-dropdown.component.d.ts CHANGED Viewed

@@ -17,6 +17,7 @@ export declare class MultiSelectDropdownComponent implements OnInit {
     showSelectedCount: boolean;
     noDataMessage: string;
     set selectedItems(values: MultiSelectDropdownItem[]);
+    hideApplyButton: boolean;
     onChange: EventEmitter<any>;
     clickout(event: any): void;
     constructor(eRef: ElementRef);

package/package.json CHANGED Viewed

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