mis-crystal-design-system 2.9.6-phone3 → 2.9.6-phone5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/mis-crystal-design-system-dropdown.umd.js +19 -7
- package/bundles/mis-crystal-design-system-dropdown.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-dropdown.umd.min.js +2 -2
- package/bundles/mis-crystal-design-system-dropdown.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-phone-input.umd.js +0 -1
- package/bundles/mis-crystal-design-system-phone-input.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-phone-input.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-phone-input.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-virtual-scroll.umd.js +472 -0
- package/bundles/mis-crystal-design-system-virtual-scroll.umd.js.map +1 -0
- package/bundles/mis-crystal-design-system-virtual-scroll.umd.min.js +16 -0
- package/bundles/mis-crystal-design-system-virtual-scroll.umd.min.js.map +1 -0
- package/dropdown/dropdown.component.d.ts +3 -0
- package/dropdown/mis-crystal-design-system-dropdown.metadata.json +1 -1
- package/esm2015/dropdown/dropdown.component.js +14 -3
- package/esm2015/dropdown/dropdown.module.js +3 -2
- package/esm2015/phone-input/phone-input.component.js +1 -2
- package/esm2015/virtual-scroll/index.js +2 -0
- package/esm2015/virtual-scroll/mis-crystal-design-system-virtual-scroll.js +5 -0
- package/esm2015/virtual-scroll/public_api.js +4 -0
- package/esm2015/virtual-scroll/virtual-scroll.component.js +112 -0
- package/esm2015/virtual-scroll/virtual-scroll.constants.js +2 -0
- package/esm2015/virtual-scroll/virtual-scroll.module.js +24 -0
- package/fesm2015/mis-crystal-design-system-dropdown.js +15 -3
- package/fesm2015/mis-crystal-design-system-dropdown.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-phone-input.js +0 -1
- package/fesm2015/mis-crystal-design-system-phone-input.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-virtual-scroll.js +142 -0
- package/fesm2015/mis-crystal-design-system-virtual-scroll.js.map +1 -0
- package/package.json +1 -1
- package/virtual-scroll/index.d.ts +1 -0
- package/virtual-scroll/mis-crystal-design-system-virtual-scroll.d.ts +4 -0
- package/virtual-scroll/mis-crystal-design-system-virtual-scroll.metadata.json +1 -0
- package/virtual-scroll/package.json +11 -0
- package/virtual-scroll/public_api.d.ts +3 -0
- package/virtual-scroll/virtual-scroll.component.d.ts +25 -0
- package/virtual-scroll/virtual-scroll.constants.d.ts +15 -0
- package/virtual-scroll/virtual-scroll.module.d.ts +4 -0
|
@@ -4,6 +4,7 @@ import { EventEmitter, Component, ElementRef, ViewContainerRef, Input, Output, V
|
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import { FormsModule } from '@angular/forms';
|
|
6
6
|
import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
|
|
7
|
+
import { LoaderModule } from 'mis-crystal-design-system/loader';
|
|
7
8
|
|
|
8
9
|
class DropdownComponent {
|
|
9
10
|
constructor(eRef, overlay, viewContainerRef) {
|
|
@@ -11,6 +12,7 @@ class DropdownComponent {
|
|
|
11
12
|
this.overlay = overlay;
|
|
12
13
|
this.viewContainerRef = viewContainerRef;
|
|
13
14
|
this.isOpen = false;
|
|
15
|
+
this.loading = false;
|
|
14
16
|
this.isSearchInputFocused = false;
|
|
15
17
|
this.searchInput = "";
|
|
16
18
|
this.searchData = [];
|
|
@@ -29,6 +31,15 @@ class DropdownComponent {
|
|
|
29
31
|
}
|
|
30
32
|
ngOnInit() {
|
|
31
33
|
}
|
|
34
|
+
setUpAsyncDataSearch() {
|
|
35
|
+
if (this.config) {
|
|
36
|
+
this.loading = true;
|
|
37
|
+
this.config.dataStream().pipe().subscribe(res => {
|
|
38
|
+
this.data = res;
|
|
39
|
+
this.loading = false;
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
}
|
|
32
43
|
filterByValue(array, string) {
|
|
33
44
|
return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));
|
|
34
45
|
}
|
|
@@ -109,8 +120,8 @@ class DropdownComponent {
|
|
|
109
120
|
DropdownComponent.decorators = [
|
|
110
121
|
{ type: Component, args: [{
|
|
111
122
|
selector: "mis-dropdown",
|
|
112
|
-
template: "<div\n class=\"main-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\">\n {{ multiLine ? selectedItem.label?.primaryText : selectedItem.label || label }}\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 >\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=\"
|
|
113
|
-
styles: [".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;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%;box-sizing:border-box;padding:0 12px}.main-container .dropdown:focus-visible,.main-container .dropdown:hover{background-color:#f5f7fc;outline:none}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.main-container .dropdown .label,.main-container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.main-container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0}.main-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 .dropdown-viewport{height:200px}.popup-container .items .dropdown-viewport .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:#181f33}.popup-container .items .dropdown-viewport .item:focus-visible,.popup-container .items .dropdown-viewport .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .dropdown-viewport .item .label{width:100%;line-height:20px;font-size:14px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .dropdown-viewport .item .label .primaryText{color:#181f33;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .label .secondaryText{color:#6a737d;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .dropdown-viewport .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed}.popup-container .items .item-disabled:focus-visible,.popup-container .items .item-disabled:hover{background-color:transparent;outline:none}.popup-container .items .item-disabled .label{color:#929dab;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::-webkit-scrollbar{height:8px;width:8px;background:#fff;border-radius:13px}::-webkit-scrollbar-thumb{background:#c8cdd3;border-radius:13px;cursor:pointer}"]
|
|
123
|
+
template: "<div (click)=\"setUpAsyncDataSearch()\"\n class=\"main-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\">\n {{ multiLine ? selectedItem.label?.primaryText : selectedItem.label || label }}\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 >\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=\"status-container\" *ngIf=\"loading\">\n <mis-loader [mobileView]=\"true\"></mis-loader>\n </div>\n <div class=\"items\" *ngIf=\"!loading\"> \n <cdk-virtual-scroll-viewport autosize class=\"dropdown-viewport\">\n <div\n class=\"item\"\n tabindex=\"0\"\n [ngClass]=\"{ 'item-disabled': item.disabled }\"\n (click)=\"item.disabled ? null : selectItem(item)\"\n (keyup.enter)=\"item.disabled ? null : selectItem(item)\"\n *cdkVirtualFor=\"let item of searchInput ? searchData : data\"\n >\n <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%', 'display': multiLine ? 'flex': 'inherit', 'flex-direction': multiLine ? 'column': 'inherit' }\">\n <span class=\"primaryText\">{{ multiLine ? item.label?.primaryText : item.label }}</span>\n <span class=\"secondaryText\" *ngIf=\"multiLine\"> {{ item.label?.secondaryText ? item.label?.secondaryText : additionalInfoMessage }} </span>\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 </cdk-virtual-scroll-viewport>\n <div class=\"noData\" *ngIf=\"(searchInput ? searchData : data).length === 0\">\n {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n </div>\n </div>\n </div>\n</ng-template>\n",
|
|
124
|
+
styles: [".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;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%;box-sizing:border-box;padding:0 12px}.main-container .dropdown:focus-visible,.main-container .dropdown:hover{background-color:#f5f7fc;outline:none}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.main-container .dropdown .label,.main-container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.main-container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0}.main-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 .dropdown-viewport{height:200px}.popup-container .items .dropdown-viewport .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:#181f33}.popup-container .items .dropdown-viewport .item:focus-visible,.popup-container .items .dropdown-viewport .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .dropdown-viewport .item .label{width:100%;line-height:20px;font-size:14px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .dropdown-viewport .item .label .primaryText{color:#181f33;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .label .secondaryText{color:#6a737d;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .dropdown-viewport .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed}.popup-container .items .item-disabled:focus-visible,.popup-container .items .item-disabled:hover{background-color:transparent;outline:none}.popup-container .items .item-disabled .label{color:#929dab;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::-webkit-scrollbar{height:8px;width:8px;background:#fff;border-radius:13px}::-webkit-scrollbar-thumb{background:#c8cdd3;border-radius:13px;cursor:pointer}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}"]
|
|
114
125
|
},] }
|
|
115
126
|
];
|
|
116
127
|
DropdownComponent.ctorParameters = () => [
|
|
@@ -126,6 +137,7 @@ DropdownComponent.propDecorators = {
|
|
|
126
137
|
dropdownListHeight: [{ type: Input }],
|
|
127
138
|
dropdownListWidth: [{ type: Input }],
|
|
128
139
|
dropdownListPosition: [{ type: Input }],
|
|
140
|
+
config: [{ type: Input }],
|
|
129
141
|
searchEnabled: [{ type: Input }],
|
|
130
142
|
selectedItem: [{ type: Input }],
|
|
131
143
|
noDataMessage: [{ type: Input }],
|
|
@@ -144,7 +156,7 @@ class DropdownModule {
|
|
|
144
156
|
DropdownModule.decorators = [
|
|
145
157
|
{ type: NgModule, args: [{
|
|
146
158
|
declarations: [DropdownComponent],
|
|
147
|
-
imports: [CommonModule, FormsModule, OverlayModule, ScrollingModule],
|
|
159
|
+
imports: [CommonModule, FormsModule, OverlayModule, ScrollingModule, LoaderModule],
|
|
148
160
|
exports: [DropdownComponent]
|
|
149
161
|
},] }
|
|
150
162
|
];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-dropdown.js","sources":["../../../projects/mis-components/dropdown/dropdown.component.ts","../../../projects/mis-components/dropdown/dropdown.module.ts","../../../projects/mis-components/dropdown/mis-crystal-design-system-dropdown.ts"],"sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Component, ElementRef, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef } from \"@angular/core\";\n\n@Component({\n selector: \"mis-dropdown\",\n templateUrl: \"./dropdown.component.html\",\n styleUrls: [\"./dropdown.component.scss\"]\n})\nexport class DropdownComponent implements OnInit {\n isOpen = false;\n isSearchInputFocused: boolean = false;\n searchInput: string = \"\";\n searchData: DropdownItem[] = [];\n\n @Input() data: DropdownItem[] = [];\n @Input() height: string = \"\";\n @Input() width: string = \"\";\n @Input() label: string = \"Select\";\n\n @Input() dropdownListHeight: string = \"\";\n @Input() dropdownListWidth: string = \"\";\n @Input() dropdownListPosition: \"Left\" | \"Right\" = \"Left\";\n\n @Input() searchEnabled: boolean = true;\n @Input() selectedItem: DropdownItem = { value: \"\", label: \"\" };\n @Input() noDataMessage: string = \"No Data\";\n @Input() multiLine: boolean = false;\n @Input() additionalInfoMessage : string;\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\n filterByValue(array, string: string) {\n return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));\n }\n\n filterByPrimaryText(array, string: string) {\n return array.filter(o => o.label.primaryText.toLowerCase().includes(string.toLowerCase()));\n }\n searchInputOnChange(newValue) {\n this.searchInput = newValue;\n if (newValue) {\n this.searchData = this.multiLine ? this.filterByPrimaryText(this.data, newValue) : this.filterByValue(this.data, newValue);\n } else {\n this.searchData = [];\n this.searchInput = \"\";\n }\n }\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) 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 selectItem(item) {\n this.onChange.emit(item);\n this.toggleDropdown();\n }\n onCancel() {\n this.isSearchInputFocused = false;\n this.isOpen = false;\n this.overlayRef?.detach();\n this.searchInput = \"\";\n }\n}\nexport interface DropdownItem {\n label: any ;\n value: string;\n icon?: string;\n disabled?: boolean;\n}\nexport interface ActionItemLabel {\n primaryText ?: string;\n secondaryText ?: string;\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { DropdownComponent } from \"./dropdown.component\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\n\n@NgModule({\n declarations: [DropdownComponent],\n imports: [CommonModule, FormsModule, OverlayModule, ScrollingModule],\n exports: [DropdownComponent]\n})\nexport class DropdownModule {\n static forRoot(): ModuleWithProviders<DropdownModule> {\n return { ngModule: DropdownModule, 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-dropdown.js","sources":["../../../projects/mis-components/dropdown/dropdown.component.ts","../../../projects/mis-components/dropdown/dropdown.module.ts","../../../projects/mis-components/dropdown/mis-crystal-design-system-dropdown.ts"],"sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Component, ElementRef, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef } from \"@angular/core\";\n\n@Component({\n selector: \"mis-dropdown\",\n templateUrl: \"./dropdown.component.html\",\n styleUrls: [\"./dropdown.component.scss\"]\n})\nexport class DropdownComponent implements OnInit {\n isOpen = false;\n loading: boolean = false;\n isSearchInputFocused: boolean = false;\n searchInput: string = \"\";\n searchData: DropdownItem[] = [];\n\n @Input() data: DropdownItem[] = [];\n @Input() height: string = \"\";\n @Input() width: string = \"\";\n @Input() label: string = \"Select\";\n\n @Input() dropdownListHeight: string = \"\";\n @Input() dropdownListWidth: string = \"\";\n @Input() dropdownListPosition: \"Left\" | \"Right\" = \"Left\";\n\n @Input() config\n\n @Input() searchEnabled: boolean = true;\n @Input() selectedItem: DropdownItem = { value: \"\", label: \"\" };\n @Input() noDataMessage: string = \"No Data\";\n @Input() multiLine: boolean = false;\n @Input() additionalInfoMessage : string;\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 \n \n}\n\nsetUpAsyncDataSearch()\n{\n if(this.config)\n {\n this.loading = true;\n this.config.dataStream().pipe().subscribe(res=> {\n this.data = res\n this.loading = false\n })\n }\n}\n filterByValue(array, string: string) {\n return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));\n }\n\n filterByPrimaryText(array, string: string) {\n return array.filter(o => o.label.primaryText.toLowerCase().includes(string.toLowerCase()));\n }\n searchInputOnChange(newValue) {\n this.searchInput = newValue;\n if (newValue) {\n this.searchData = this.multiLine ? this.filterByPrimaryText(this.data, newValue) : this.filterByValue(this.data, newValue);\n } else {\n this.searchData = [];\n this.searchInput = \"\";\n }\n }\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) 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 selectItem(item) {\n this.onChange.emit(item);\n this.toggleDropdown();\n }\n onCancel() {\n this.isSearchInputFocused = false;\n this.isOpen = false;\n this.overlayRef?.detach();\n this.searchInput = \"\";\n }\n}\nexport interface DropdownItem {\n label: any ;\n value: string;\n icon?: string;\n disabled?: boolean;\n}\nexport interface ActionItemLabel {\n primaryText ?: string;\n secondaryText ?: string;\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { DropdownComponent } from \"./dropdown.component\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { LoaderModule } from \"mis-crystal-design-system/loader\";\n\n@NgModule({\n declarations: [DropdownComponent],\n imports: [CommonModule, FormsModule, OverlayModule, ScrollingModule,LoaderModule],\n exports: [DropdownComponent]\n})\nexport class DropdownModule {\n static forRoot(): ModuleWithProviders<DropdownModule> {\n return { ngModule: DropdownModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,6 @@ class PhoneInputComponent {
|
|
|
9
9
|
constructor() {
|
|
10
10
|
this.dropdownData = [];
|
|
11
11
|
this.dropdownSelectedItem = { value: "", label: "" };
|
|
12
|
-
this.label = "+91";
|
|
13
12
|
this.inputPlaceholder = 'Enter';
|
|
14
13
|
this.inputFormControl = new FormControl();
|
|
15
14
|
this.onDropdownSelection = new EventEmitter();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-phone-input.js","sources":["../../../projects/mis-components/phone-input/phone-input.component.ts","../../../projects/mis-components/phone-input/phone-input.module.ts","../../../projects/mis-components/phone-input/mis-crystal-design-system-phone-input.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from \"@angular/core\";\nimport { FormControl } from \"@angular/forms\";\nimport { DropdownItem } from \"mis-crystal-design-system/dropdown\";\n\n@Component({\n selector: \"mis-phone-input\",\n templateUrl: \"./phone-input.component.html\",\n styleUrls: [\"./phone-input.component.scss\"]\n})\nexport class PhoneInputComponent implements OnInit {\n @Input() dropdownHeight?: string;\n @Input() dropdownWidth?: string;\n @Input() inputHeight?: string;\n @Input() dropdownData: DropdownItem[] = [];\n @Input() dropdownSelectedItem:DropdownItem = { value: \"\", label: \"\" } \n @Input() label: string
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-phone-input.js","sources":["../../../projects/mis-components/phone-input/phone-input.component.ts","../../../projects/mis-components/phone-input/phone-input.module.ts","../../../projects/mis-components/phone-input/mis-crystal-design-system-phone-input.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from \"@angular/core\";\nimport { FormControl } from \"@angular/forms\";\nimport { DropdownItem } from \"mis-crystal-design-system/dropdown\";\n\n@Component({\n selector: \"mis-phone-input\",\n templateUrl: \"./phone-input.component.html\",\n styleUrls: [\"./phone-input.component.scss\"]\n})\nexport class PhoneInputComponent implements OnInit {\n @Input() dropdownHeight?: string;\n @Input() dropdownWidth?: string;\n @Input() inputHeight?: string;\n @Input() dropdownData: DropdownItem[] = [];\n @Input() dropdownSelectedItem:DropdownItem = { value: \"\", label: \"\" } \n @Input() label: string;\n\n @Input() inputPlaceholder: string = 'Enter';\n @Input() inputFormControl: FormControl = new FormControl();\n\n @Output() onDropdownSelection = new EventEmitter<any>();\n \n\n\n constructor() {}\n ngOnInit() {\n }\n\n handleDropdownSelection(item: DropdownItem){\n this.onDropdownSelection.emit(item);\n }\n\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { PhoneInputComponent } from \"./phone-input.component\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { DropdownModule } from \"mis-crystal-design-system/dropdown\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n\n@NgModule({\n declarations: [PhoneInputComponent],\n imports: [CommonModule,ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule],\n exports: [PhoneInputComponent]\n})\nexport class PhoneInputModule {\n static forRoot(): ModuleWithProviders<PhoneInputModule> {\n return { ngModule: PhoneInputModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MASa,mBAAmB;IAe9B;QAXS,iBAAY,GAAmB,EAAE,CAAC;QAClC,yBAAoB,GAAgB,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;QAG5D,qBAAgB,GAAW,OAAO,CAAC;QACnC,qBAAgB,GAAgB,IAAI,WAAW,EAAE,CAAC;QAEjD,wBAAmB,GAAG,IAAI,YAAY,EAAO,CAAC;KAIxC;IAChB,QAAQ;KACP;IAED,uBAAuB,CAAC,IAAkB;QACxC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACrC;;;YA1BF,SAAS,SAAC;gBACT,QAAQ,EAAE,iBAAiB;gBAC3B,8mBAA2C;;aAE5C;;;;6BAEE,KAAK;4BACL,KAAK;0BACL,KAAK;2BACL,KAAK;mCACL,KAAK;oBACL,KAAK;+BAEL,KAAK;+BACL,KAAK;kCAEL,MAAM;;;MCLI,gBAAgB;IAC3B,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KACtD;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,mBAAmB,CAAC;gBACnC,OAAO,EAAE,CAAC,YAAY,EAAC,mBAAmB,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAC;gBACxG,OAAO,EAAE,CAAC,mBAAmB,CAAC;aAC/B;;;ACdD;;;;;;"}
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import { EventEmitter, Component, ChangeDetectorRef, Input, ViewChild, ContentChild, Output, NgModule } from '@angular/core';
|
|
4
|
+
import { LoaderModule } from 'mis-crystal-design-system/loader';
|
|
5
|
+
import { BehaviorSubject, of } from 'rxjs';
|
|
6
|
+
import { tap, catchError, throttleTime, mergeMap, scan } from 'rxjs/operators';
|
|
7
|
+
|
|
8
|
+
class VirtualScrollComponent {
|
|
9
|
+
constructor(changeDetectorRef) {
|
|
10
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
11
|
+
// Infinite scroll related variables
|
|
12
|
+
this.offset = new BehaviorSubject(null);
|
|
13
|
+
this.endOfInfiniteData = false;
|
|
14
|
+
this.rowsLoading = false;
|
|
15
|
+
// Main state managing variables
|
|
16
|
+
this.loading = false;
|
|
17
|
+
this.error = false;
|
|
18
|
+
this.config = {
|
|
19
|
+
minBufferPx: 2400,
|
|
20
|
+
maxBufferPx: 2400,
|
|
21
|
+
rowHeight: 128,
|
|
22
|
+
pageSize: 5,
|
|
23
|
+
infiniteScrollDataFunction: (offset, pageSize) => of([1, 2, 3, 4, 5])
|
|
24
|
+
};
|
|
25
|
+
this.intialized = new EventEmitter();
|
|
26
|
+
this.switchOffInfiniteScroll = () => {
|
|
27
|
+
this.error = false;
|
|
28
|
+
this.loading = true;
|
|
29
|
+
this.data$ = this.config.data$.pipe(tap(() => {
|
|
30
|
+
this.loading = false;
|
|
31
|
+
this.changeDetectorRef.detectChanges();
|
|
32
|
+
}), catchError(err => {
|
|
33
|
+
console.error("Error: Unknown error occurred while fetching calendar data", err);
|
|
34
|
+
this.loading = false;
|
|
35
|
+
this.error = true;
|
|
36
|
+
return [];
|
|
37
|
+
}));
|
|
38
|
+
};
|
|
39
|
+
this.switchOnInfiniteScroll = () => {
|
|
40
|
+
this.error = false;
|
|
41
|
+
this.loading = true;
|
|
42
|
+
this.offset.next(0);
|
|
43
|
+
this.setupInfiniteScroll();
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
ngOnInit() {
|
|
47
|
+
this.switchOnInfiniteScroll();
|
|
48
|
+
this.virtualScrollApi = {
|
|
49
|
+
toggleLoader: () => this.loading = !this.loading,
|
|
50
|
+
toggleError: () => this.error = !this.error,
|
|
51
|
+
switchOnInfiniteScroll: this.switchOnInfiniteScroll,
|
|
52
|
+
switchOffInfiniteScroll: this.switchOffInfiniteScroll
|
|
53
|
+
};
|
|
54
|
+
this.changeDetectorRef.detectChanges();
|
|
55
|
+
this.intialized.emit(this.virtualScrollApi);
|
|
56
|
+
}
|
|
57
|
+
setupInfiniteScroll() {
|
|
58
|
+
const batchMap = this.offset.pipe(throttleTime(500), mergeMap(offset => this.getBatch(offset)), scan((acc, batch) => {
|
|
59
|
+
return [...acc, ...batch];
|
|
60
|
+
}, []));
|
|
61
|
+
this.data$ = batchMap.pipe(tap(data => {
|
|
62
|
+
this.rowsLoading = false;
|
|
63
|
+
this.loading = false;
|
|
64
|
+
setTimeout(() => {
|
|
65
|
+
this.changeDetectorRef.detectChanges();
|
|
66
|
+
}, 50);
|
|
67
|
+
}));
|
|
68
|
+
}
|
|
69
|
+
nextBatch(offset) {
|
|
70
|
+
if (this.endOfInfiniteData) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
const end = this.viewPort.getRenderedRange().end;
|
|
74
|
+
const total = this.viewPort.getDataLength();
|
|
75
|
+
// console.log(`${end}, '>=', ${total}`);
|
|
76
|
+
// console.log("Offset->", offset)
|
|
77
|
+
offset = Math.ceil(offset / this.config.pageSize);
|
|
78
|
+
if (end === total && !this.rowsLoading) {
|
|
79
|
+
this.offset.next(offset);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
getBatch(offset) {
|
|
83
|
+
this.rowsLoading = true;
|
|
84
|
+
if (offset == null)
|
|
85
|
+
offset = 0;
|
|
86
|
+
return this.config
|
|
87
|
+
.infiniteScrollDataFunction(offset, this.config.pageSize)
|
|
88
|
+
.pipe(tap((arr) => {
|
|
89
|
+
arr.length < this.config.pageSize ? (this.endOfInfiniteData = true) : null;
|
|
90
|
+
}), catchError(err => {
|
|
91
|
+
console.error("Error: Unknown error occurred while fetching calendar data", err);
|
|
92
|
+
this.rowsLoading = false;
|
|
93
|
+
this.loading = false;
|
|
94
|
+
this.error = true;
|
|
95
|
+
return [];
|
|
96
|
+
}));
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
VirtualScrollComponent.decorators = [
|
|
100
|
+
{ type: Component, args: [{
|
|
101
|
+
selector: "mis-virtual-scroll",
|
|
102
|
+
template: "<div class=\"state-container\" *ngIf=\"loading\">\n <mis-loader></mis-loader>\n</div>\n<div class=\"state-container\" *ngIf=\"!loading && error\">\n <span>Unknown error has occurred.</span>\n</div>\n<ng-container *ngIf=\"data$ | async as data\">\n <cdk-virtual-scroll-viewport\n *ngIf=\"!loading && !error\"\n #viewport\n [minBufferPx]=\"config.minBufferPx\"\n [maxBufferPx]=\"config.maxBufferPx\"\n [itemSize]=\"this.config.rowHeight\"\n (scrolledIndexChange)=\"nextBatch(data.length)\"\n >\n <ng-container *cdkVirtualFor=\"let item of data\">\n <ng-container\n [ngTemplateOutlet]=\"customItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-container>\n </ng-container>\n <div id=\"loader-container\" *ngIf=\"rowsLoading\">\n <mis-loader></mis-loader>\n </div>\n </cdk-virtual-scroll-viewport>\n</ng-container>",
|
|
103
|
+
styles: ["cdk-virtual-scroll-viewport{height:100%}#main-container,.state-container{height:100%;width:100%}#loader-container,.state-container{display:flex;justify-content:center;align-items:center}#loader-container{width:100%;height:56px}::ng-deep #spinner{position:relative!important}"]
|
|
104
|
+
},] }
|
|
105
|
+
];
|
|
106
|
+
VirtualScrollComponent.ctorParameters = () => [
|
|
107
|
+
{ type: ChangeDetectorRef }
|
|
108
|
+
];
|
|
109
|
+
VirtualScrollComponent.propDecorators = {
|
|
110
|
+
config: [{ type: Input, args: ["config",] }],
|
|
111
|
+
viewPort: [{ type: ViewChild, args: [CdkVirtualScrollViewport,] }],
|
|
112
|
+
customItem: [{ type: ContentChild, args: ["virtualScrollItem", { static: false },] }],
|
|
113
|
+
intialized: [{ type: Output }]
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
class VirtualScrollModule {
|
|
117
|
+
static forRoot() {
|
|
118
|
+
return { ngModule: VirtualScrollModule, providers: [] };
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
VirtualScrollModule.decorators = [
|
|
122
|
+
{ type: NgModule, args: [{
|
|
123
|
+
declarations: [
|
|
124
|
+
VirtualScrollComponent
|
|
125
|
+
],
|
|
126
|
+
imports: [
|
|
127
|
+
CommonModule,
|
|
128
|
+
ScrollingModule,
|
|
129
|
+
LoaderModule
|
|
130
|
+
],
|
|
131
|
+
exports: [VirtualScrollComponent, ScrollingModule],
|
|
132
|
+
},] }
|
|
133
|
+
];
|
|
134
|
+
|
|
135
|
+
// import { VirtualScrollModule } from "./virtual-scroll.module";
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
* Generated bundle index. Do not edit.
|
|
139
|
+
*/
|
|
140
|
+
|
|
141
|
+
export { VirtualScrollComponent, VirtualScrollModule };
|
|
142
|
+
//# sourceMappingURL=mis-crystal-design-system-virtual-scroll.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-virtual-scroll.js","sources":["../../../projects/mis-components/virtual-scroll/virtual-scroll.component.ts","../../../projects/mis-components/virtual-scroll/virtual-scroll.module.ts","../../../projects/mis-components/virtual-scroll/public_api.ts","../../../projects/mis-components/virtual-scroll/mis-crystal-design-system-virtual-scroll.ts"],"sourcesContent":["import { ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from \"@angular/core\";\nimport { CdkVirtualScrollViewport } from \"@angular/cdk/scrolling\";\n\nimport { BehaviorSubject, Observable, of } from \"rxjs\";\nimport { catchError, mergeMap, scan, tap, throttleTime } from \"rxjs/operators\";\nimport { IVirtualScrollConfig } from \"./virtual-scroll.constants\";\n\n@Component({\n selector: \"mis-virtual-scroll\",\n templateUrl: \"./virtual-scroll.component.html\",\n styleUrls: [\"./virtual-scroll.component.scss\"],\n })\nexport class VirtualScrollComponent implements OnInit {\n\n // Infinite scroll related variables\n offset = new BehaviorSubject(null);\n endOfInfiniteData: boolean = false;\n rowsLoading: boolean = false;\n \n // Main state managing variables\n loading: boolean = false\n error: boolean = false\n \n // Scroll data related variables\n data$: Observable<any>\n @Input(\"config\") config: IVirtualScrollConfig = {\n minBufferPx: 2400,\n maxBufferPx: 2400,\n rowHeight: 128,\n pageSize: 5,\n infiniteScrollDataFunction: (offset, pageSize) => of([1,2,3,4,5])\n };\n @ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;\n @ContentChild(\"virtualScrollItem\", { static: false })\n customItem: TemplateRef<Element>;\n @Output() intialized = new EventEmitter<any>();\n\n virtualScrollApi: any\n\n\n constructor(private changeDetectorRef: ChangeDetectorRef){}\n ngOnInit(): void {\n this.switchOnInfiniteScroll()\n this.virtualScrollApi = {\n toggleLoader: () => this.loading = !this.loading,\n toggleError: () => this.error = !this.error,\n switchOnInfiniteScroll: this.switchOnInfiniteScroll,\n switchOffInfiniteScroll: this.switchOffInfiniteScroll\n }\n this.changeDetectorRef.detectChanges();\n this.intialized.emit(this.virtualScrollApi)\n }\n switchOffInfiniteScroll = (): void => {\n this.error = false\n this.loading = true\n this.data$ = this.config.data$.pipe(\n tap(() => {\n this.loading = false\n this.changeDetectorRef.detectChanges()\n }),\n catchError(err => {\n console.error(\"Error: Unknown error occurred while fetching calendar data\", err);\n this.loading = false;\n this.error = true;\n return [];\n })\n )\n }\n switchOnInfiniteScroll = (): void => {\n this.error = false\n this.loading = true\n this.offset.next(0)\n this.setupInfiniteScroll()\n }\n setupInfiniteScroll(): void {\n const batchMap = this.offset.pipe(\n throttleTime(500),\n mergeMap(offset => this.getBatch(offset)),\n scan((acc: Array<any>, batch: Array<any>) => {\n return [...acc, ...batch];\n }, [])\n );\n this.data$ = batchMap.pipe(\n tap(data => {\n this.rowsLoading = false;\n this.loading = false;\n setTimeout(() => {\n this.changeDetectorRef.detectChanges();\n }, 50)\n })\n );\n }\n nextBatch(offset): void {\n if (this.endOfInfiniteData) {\n return;\n }\n const end = this.viewPort.getRenderedRange().end;\n const total = this.viewPort.getDataLength();\n // console.log(`${end}, '>=', ${total}`);\n // console.log(\"Offset->\", offset)\n offset = Math.ceil(offset / this.config.pageSize)\n if (end === total && !this.rowsLoading) {\n this.offset.next(offset);\n }\n }\n getBatch(offset): Observable<any> {\n this.rowsLoading = true;\n if (offset == null) offset = 0;\n return this.config\n .infiniteScrollDataFunction(offset, this.config.pageSize)\n .pipe(\n tap((arr: Array<any>) => {\n arr.length < this.config.pageSize ? (this.endOfInfiniteData = true) : null;\n }),\n catchError(err => {\n console.error(\"Error: Unknown error occurred while fetching calendar data\", err);\n this.rowsLoading = false;\n this.loading = false;\n this.error = true;\n return [];\n })\n );\n }\n \n}","import { ScrollingModule } from \"@angular/cdk/scrolling\";\nimport { CommonModule } from \"@angular/common\";\nimport { ModuleWithProviders, NgModule } from \"@angular/core\"\n\nimport { LoaderModule} from \"mis-crystal-design-system/loader\"\n\nimport { VirtualScrollComponent } from \"./virtual-scroll.component\";\n\n@NgModule({\n declarations:[\n VirtualScrollComponent\n ],\n imports: [\n CommonModule,\n ScrollingModule,\n LoaderModule\n ],\n exports:[VirtualScrollComponent, ScrollingModule],\n})\nexport class VirtualScrollModule{ \n static forRoot() : ModuleWithProviders<VirtualScrollModule> {\n return { ngModule: VirtualScrollModule, providers: []}\n }\n}","// import { VirtualScrollModule } from \"./virtual-scroll.module\";\n\nexport { VirtualScrollModule } from \"./virtual-scroll.module\";\nexport { VirtualScrollComponent } from \"./virtual-scroll.component\";\nexport { IVirtualScrollApi, IVirtualScrollConfig } from \"./virtual-scroll.constants\"\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./public_api";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"__symbolic":"module","version":4,"metadata":{"VirtualScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":8},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollingModule","line":14,"character":8},{"__symbolic":"reference","module":"mis-crystal-design-system/loader","name":"LoaderModule","line":15,"character":8}],"exports":[{"__symbolic":"reference","name":"VirtualScrollComponent"},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollingModule","line":17,"character":37}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"VirtualScrollModule"},"providers":[]}}}},"VirtualScrollComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"mis-virtual-scroll","template":"<div class=\"state-container\" *ngIf=\"loading\">\n <mis-loader></mis-loader>\n</div>\n<div class=\"state-container\" *ngIf=\"!loading && error\">\n <span>Unknown error has occurred.</span>\n</div>\n<ng-container *ngIf=\"data$ | async as data\">\n <cdk-virtual-scroll-viewport\n *ngIf=\"!loading && !error\"\n #viewport\n [minBufferPx]=\"config.minBufferPx\"\n [maxBufferPx]=\"config.maxBufferPx\"\n [itemSize]=\"this.config.rowHeight\"\n (scrolledIndexChange)=\"nextBatch(data.length)\"\n >\n <ng-container *cdkVirtualFor=\"let item of data\">\n <ng-container\n [ngTemplateOutlet]=\"customItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-container>\n </ng-container>\n <div id=\"loader-container\" *ngIf=\"rowsLoading\">\n <mis-loader></mis-loader>\n </div>\n </cdk-virtual-scroll-viewport>\n</ng-container>","styles":["cdk-virtual-scroll-viewport{height:100%}#main-container,.state-container{height:100%;width:100%}#loader-container,.state-container{display:flex;justify-content:center;align-items:center}#loader-container{width:100%;height:56px}::ng-deep #spinner{position:relative!important}"]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5},"arguments":["config"]}]}],"viewPort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"CdkVirtualScrollViewport","line":32,"character":15}]}]}],"customItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":33,"character":5},"arguments":["virtualScrollItem",{"static":false}]}]}],"intialized":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":40,"character":43}]}],"ngOnInit":[{"__symbolic":"method"}],"setupInfiniteScroll":[{"__symbolic":"method"}],"nextBatch":[{"__symbolic":"method"}],"getBatch":[{"__symbolic":"method"}]}},"IVirtualScrollApi":{"__symbolic":"interface"},"IVirtualScrollConfig":{"__symbolic":"interface"}},"origins":{"VirtualScrollModule":"./virtual-scroll.module","VirtualScrollComponent":"./virtual-scroll.component","IVirtualScrollApi":"./virtual-scroll.constants","IVirtualScrollConfig":"./virtual-scroll.constants"},"importAs":"mis-crystal-design-system/virtual-scroll"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{
|
|
2
|
+
"main": "../bundles/mis-crystal-design-system-virtual-scroll.umd.js",
|
|
3
|
+
"module": "../fesm2015/mis-crystal-design-system-virtual-scroll.js",
|
|
4
|
+
"es2015": "../fesm2015/mis-crystal-design-system-virtual-scroll.js",
|
|
5
|
+
"esm2015": "../esm2015/virtual-scroll/mis-crystal-design-system-virtual-scroll.js",
|
|
6
|
+
"fesm2015": "../fesm2015/mis-crystal-design-system-virtual-scroll.js",
|
|
7
|
+
"typings": "mis-crystal-design-system-virtual-scroll.d.ts",
|
|
8
|
+
"metadata": "mis-crystal-design-system-virtual-scroll.metadata.json",
|
|
9
|
+
"sideEffects": false,
|
|
10
|
+
"name": "mis-crystal-design-system/virtual-scroll"
|
|
11
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { ChangeDetectorRef, EventEmitter, OnInit, TemplateRef } from "@angular/core";
|
|
2
|
+
import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
|
|
3
|
+
import { BehaviorSubject, Observable } from "rxjs";
|
|
4
|
+
import { IVirtualScrollConfig } from "./virtual-scroll.constants";
|
|
5
|
+
export declare class VirtualScrollComponent implements OnInit {
|
|
6
|
+
private changeDetectorRef;
|
|
7
|
+
offset: BehaviorSubject<any>;
|
|
8
|
+
endOfInfiniteData: boolean;
|
|
9
|
+
rowsLoading: boolean;
|
|
10
|
+
loading: boolean;
|
|
11
|
+
error: boolean;
|
|
12
|
+
data$: Observable<any>;
|
|
13
|
+
config: IVirtualScrollConfig;
|
|
14
|
+
viewPort: CdkVirtualScrollViewport;
|
|
15
|
+
customItem: TemplateRef<Element>;
|
|
16
|
+
intialized: EventEmitter<any>;
|
|
17
|
+
virtualScrollApi: any;
|
|
18
|
+
constructor(changeDetectorRef: ChangeDetectorRef);
|
|
19
|
+
ngOnInit(): void;
|
|
20
|
+
switchOffInfiniteScroll: () => void;
|
|
21
|
+
switchOnInfiniteScroll: () => void;
|
|
22
|
+
setupInfiniteScroll(): void;
|
|
23
|
+
nextBatch(offset: any): void;
|
|
24
|
+
getBatch(offset: any): Observable<any>;
|
|
25
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Observable } from "rxjs";
|
|
2
|
+
export interface IVirtualScrollConfig {
|
|
3
|
+
minBufferPx?: number;
|
|
4
|
+
maxBufferPx?: number;
|
|
5
|
+
rowHeight: number;
|
|
6
|
+
pageSize: number;
|
|
7
|
+
data$?: Observable<Array<any>>;
|
|
8
|
+
infiniteScrollDataFunction: (offset: number, pageSize: number) => Observable<Array<any>>;
|
|
9
|
+
}
|
|
10
|
+
export interface IVirtualScrollApi {
|
|
11
|
+
toggleLoader: () => void;
|
|
12
|
+
toggleError: () => void;
|
|
13
|
+
switchOnInfiniteScroll: () => void;
|
|
14
|
+
switchOffInfiniteScroll: () => void;
|
|
15
|
+
}
|