npm - mis-crystal-design-system - Versions diffs - 2.9.7 → 2.9.8 - Mend

mis-crystal-design-system 2.9.7 → 2.9.8

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

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

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"DropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mis-dropdown","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","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}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"selectedItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"multiLine":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"additionalInfoMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":3}}]}],"selectElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":35,"character":3},"arguments":["select",{"static":false}]}]}],"popupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":36,"character":3},"arguments":["popupContainer",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":39,"character":28},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":39,"character":57},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":39,"character":92}]}],"ngOnInit":[{"__symbolic":"method"}],"setUpAsyncDataSearch":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"filterByPrimaryText":[{"__symbolic":"method"}],"searchInputOnChange":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"DropdownItem":{"__symbolic":"interface"},"DropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":10,"character":26},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":10,"character":39},{"__symbolic":"reference","module":"@angular/cdk-experimental/scrolling","name":"ScrollingModule","line":10,"character":54},{"__symbolic":"reference","module":"mis-crystal-design-system/loader","name":"LoaderModule","line":10,"character":70}],"exports":[{"__symbolic":"reference","name":"DropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"DropdownModule"},"providers":[]}}}}},"origins":{"DropdownComponent":"./dropdown.component","DropdownItem":"./dropdown.component","DropdownModule":"./dropdown.module"},"importAs":"mis-crystal-design-system/dropdown"}
1	+ {"__symbolic":"module","version":4,"metadata":{"DropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mis-dropdown","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","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}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"selectedItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"multiLine":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"additionalInfoMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":3}}]}],"selectElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":35,"character":3},"arguments":["select",{"static":false}]}]}],"popupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":36,"character":3},"arguments":["popupContainer",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":39,"character":28},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":39,"character":57},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":39,"character":92}]}],"ngOnInit":[{"__symbolic":"method"}],"setUpAsyncDataSearch":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"filterByPrimaryText":[{"__symbolic":"method"}],"searchInputOnChange":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"DropdownItem":{"__symbolic":"interface"},"DropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":10,"character":26},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":10,"character":39},{"__symbolic":"reference","module":"@angular/cdk-experimental/scrolling","name":"ScrollingModule","line":10,"character":54},{"__symbolic":"reference","module":"mis-crystal-design-system/loader","name":"LoaderModule","line":10,"character":70}],"exports":[{"__symbolic":"reference","name":"DropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"DropdownModule"},"providers":[]}}}}},"origins":{"DropdownComponent":"./dropdown.component","DropdownItem":"./dropdown.component","DropdownModule":"./dropdown.module"},"importAs":"mis-crystal-design-system/dropdown"}

package/esm2015/dropdown/dropdown.component.js CHANGED Viewed

@@ -116,7 +116,7 @@ DropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: "mis-dropdown",
                 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",
-                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}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}"]
+                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}"]
             },] }
 ];
 DropdownComponent.ctorParameters = () => [

package/esm2015/phone-input/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./public_api";
2	+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9taXMtY29tcG9uZW50cy9waG9uZS1pbnB1dC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gXCIuL3B1YmxpY19hcGlcIjtcbiJdfQ==

package/esm2015/phone-input/mis-crystal-design-system-phone-input.js ADDED Viewed

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWlzLWNyeXN0YWwtZGVzaWduLXN5c3RlbS1waG9uZS1pbnB1dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL3Bob25lLWlucHV0L21pcy1jcnlzdGFsLWRlc2lnbi1zeXN0ZW0tcGhvbmUtaW5wdXQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=

package/esm2015/phone-input/phone-input.component.js ADDED Viewed

@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { FormControl } from "@angular/forms";
+export class PhoneInputComponent {
+    constructor() {
+        this.dropdownData = [];
+        this.dropdownSelectedItem = { value: "", label: "" };
+        this.inputPlaceholder = 'Enter';
+        this.inputFormControl = new FormControl();
+        this.onDropdownSelection = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    handleDropdownSelection(item) {
+        this.onDropdownSelection.emit(item);
+    }
+}
+PhoneInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: "mis-phone-input",
+                template: "<div class=\"main-container-phone\">\n  <mis-dropdown [height]=\"dropdownHeight\" [width]=\"dropdownWidth\" [data]=\"dropdownData\" [selectedItem]=\"dropdownSelectedItem\" [label]=\"label\" [searchEnabled]=\"false\" [multiLine]=\"false\" (onChange)=\"handleDropdownSelection($event)\"></mis-dropdown>\n  <div class=\"details-field\">\n    <div class=\"input-box\">\n      <input\n      [ngStyle]=\"{'height': inputHeight }\"\n        class=\"black-text\"\n        [placeholder]=\"inputPlaceholder\"\n        [formControl]=\"inputFormControl\" \n        type=\"number\"\n      />\n    </div>\n  </div>\n</div>\n",
+                styles: [".main-container-phone{display:flex;border:1px solid #e0e0e0;border-radius:6px}.details-field label{display:inline-block;min-width:224px;margin-right:24px}.details-field .input-box{width:100%}.details-field .input-box input{width:100%;height:32px}input{padding:10px 16px;border:none;outline:none;width:100%;height:auto;border-radius:6px}.black-text,input{color:#181f33;line-height:24px;font-size:16px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.main-container-phone ::ng-deep .item{padding:8px!important}.main-container-phone ::ng-deep .dropdown{border:unset!important}"]
+            },] }
+];
+PhoneInputComponent.ctorParameters = () => [];
+PhoneInputComponent.propDecorators = {
+    dropdownHeight: [{ type: Input }],
+    dropdownWidth: [{ type: Input }],
+    inputHeight: [{ type: Input }],
+    dropdownData: [{ type: Input }],
+    dropdownSelectedItem: [{ type: Input }],
+    label: [{ type: Input }],
+    inputPlaceholder: [{ type: Input }],
+    inputFormControl: [{ type: Input }],
+    onDropdownSelection: [{ type: Output }]
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvbmUtaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbWlzLWNvbXBvbmVudHMvcGhvbmUtaW5wdXQvcGhvbmUtaW5wdXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUcsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEYsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBUTdDLE1BQU0sT0FBTyxtQkFBbUI7SUFlOUI7UUFYUyxpQkFBWSxHQUFtQixFQUFFLENBQUM7UUFDbEMseUJBQW9CLEdBQWdCLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLENBQUE7UUFHNUQscUJBQWdCLEdBQVcsT0FBTyxDQUFDO1FBQ25DLHFCQUFnQixHQUFnQixJQUFJLFdBQVcsRUFBRSxDQUFDO1FBRWpELHdCQUFtQixHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFJekMsQ0FBQztJQUNoQixRQUFRO0lBQ1IsQ0FBQztJQUVELHVCQUF1QixDQUFDLElBQWtCO1FBQ3hDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDdEMsQ0FBQzs7O1lBMUJGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQiw4bUJBQTJDOzthQUU1Qzs7Ozs2QkFFRSxLQUFLOzRCQUNMLEtBQUs7MEJBQ0wsS0FBSzsyQkFDTCxLQUFLO21DQUNMLEtBQUs7b0JBQ0wsS0FBSzsrQkFFTCxLQUFLOytCQUNMLEtBQUs7a0NBRUwsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEZvcm1Db250cm9sIH0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XG5pbXBvcnQgeyBEcm9wZG93bkl0ZW0gfSBmcm9tIFwibWlzLWNyeXN0YWwtZGVzaWduLXN5c3RlbS9kcm9wZG93blwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwibWlzLXBob25lLWlucHV0XCIsXG4gIHRlbXBsYXRlVXJsOiBcIi4vcGhvbmUtaW5wdXQuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL3Bob25lLWlucHV0LmNvbXBvbmVudC5zY3NzXCJdXG59KVxuZXhwb3J0IGNsYXNzIFBob25lSW5wdXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBkcm9wZG93bkhlaWdodD86IHN0cmluZztcbiAgQElucHV0KCkgZHJvcGRvd25XaWR0aD86IHN0cmluZztcbiAgQElucHV0KCkgaW5wdXRIZWlnaHQ/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGRyb3Bkb3duRGF0YTogRHJvcGRvd25JdGVtW10gPSBbXTtcbiAgQElucHV0KCkgZHJvcGRvd25TZWxlY3RlZEl0ZW06RHJvcGRvd25JdGVtID0geyB2YWx1ZTogXCJcIiwgbGFiZWw6IFwiXCIgfSBcbiAgQElucHV0KCkgbGFiZWw6IHN0cmluZztcblxuICBASW5wdXQoKSBpbnB1dFBsYWNlaG9sZGVyOiBzdHJpbmcgPSAnRW50ZXInO1xuICBASW5wdXQoKSBpbnB1dEZvcm1Db250cm9sOiBGb3JtQ29udHJvbCA9IG5ldyBGb3JtQ29udHJvbCgpO1xuXG4gIEBPdXRwdXQoKSBvbkRyb3Bkb3duU2VsZWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIFxuXG5cbiAgY29uc3RydWN0b3IoKSB7fVxuICBuZ09uSW5pdCgpIHtcbiAgfVxuXG4gIGhhbmRsZURyb3Bkb3duU2VsZWN0aW9uKGl0ZW06IERyb3Bkb3duSXRlbSl7XG4gICAgdGhpcy5vbkRyb3Bkb3duU2VsZWN0aW9uLmVtaXQoaXRlbSk7XG4gIH1cblxufVxuIl19

package/esm2015/phone-input/phone-input.module.js ADDED Viewed

@@ -0,0 +1,21 @@
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { NgModule } from "@angular/core";
+import { PhoneInputComponent } from "./phone-input.component";
+import { OverlayModule } from "@angular/cdk/overlay";
+import { ScrollingModule } from "@angular/cdk-experimental/scrolling";
+import { DropdownModule } from "mis-crystal-design-system/dropdown";
+import { ReactiveFormsModule } from "@angular/forms";
+export class PhoneInputModule {
+    static forRoot() {
+        return { ngModule: PhoneInputModule, providers: [] };
+    }
+}
+PhoneInputModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [PhoneInputComponent],
+                imports: [CommonModule, ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule],
+                exports: [PhoneInputComponent]
+            },] }
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvbmUtaW5wdXQubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbWlzLWNvbXBvbmVudHMvcGhvbmUtaW5wdXQvcGhvbmUtaW5wdXQubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLFFBQVEsRUFBdUIsTUFBTSxlQUFlLENBQUM7QUFDOUQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDOUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUN0RSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDcEUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFRckQsTUFBTSxPQUFPLGdCQUFnQjtJQUMzQixNQUFNLENBQUMsT0FBTztRQUNaLE9BQU8sRUFBRSxRQUFRLEVBQUUsZ0JBQWdCLEVBQUUsU0FBUyxFQUFFLEVBQUUsRUFBRSxDQUFDO0lBQ3ZELENBQUM7OztZQVJGLFFBQVEsU0FBQztnQkFDUixZQUFZLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQztnQkFDbkMsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFDLG1CQUFtQixFQUFFLFdBQVcsRUFBRSxhQUFhLEVBQUUsZUFBZSxFQUFFLGNBQWMsQ0FBQztnQkFDeEcsT0FBTyxFQUFFLENBQUMsbUJBQW1CLENBQUM7YUFDL0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9mb3Jtc1wiO1xuaW1wb3J0IHsgTmdNb2R1bGUsIE1vZHVsZVdpdGhQcm92aWRlcnMgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgUGhvbmVJbnB1dENvbXBvbmVudCB9IGZyb20gXCIuL3Bob25lLWlucHV0LmNvbXBvbmVudFwiO1xuaW1wb3J0IHsgT3ZlcmxheU1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jZGsvb3ZlcmxheVwiO1xuaW1wb3J0IHsgU2Nyb2xsaW5nTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2Nkay1leHBlcmltZW50YWwvc2Nyb2xsaW5nXCI7XG5pbXBvcnQgeyBEcm9wZG93bk1vZHVsZSB9IGZyb20gXCJtaXMtY3J5c3RhbC1kZXNpZ24tc3lzdGVtL2Ryb3Bkb3duXCI7XG5pbXBvcnQgeyBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XG5cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbUGhvbmVJbnB1dENvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsUmVhY3RpdmVGb3Jtc01vZHVsZSwgRm9ybXNNb2R1bGUsIE92ZXJsYXlNb2R1bGUsIFNjcm9sbGluZ01vZHVsZSwgRHJvcGRvd25Nb2R1bGVdLFxuICBleHBvcnRzOiBbUGhvbmVJbnB1dENvbXBvbmVudF1cbn0pXG5leHBvcnQgY2xhc3MgUGhvbmVJbnB1dE1vZHVsZSB7XG4gIHN0YXRpYyBmb3JSb290KCk6IE1vZHVsZVdpdGhQcm92aWRlcnM8UGhvbmVJbnB1dE1vZHVsZT4ge1xuICAgIHJldHVybiB7IG5nTW9kdWxlOiBQaG9uZUlucHV0TW9kdWxlLCBwcm92aWRlcnM6IFtdIH07XG4gIH1cbn1cbiJdfQ==

package/esm2015/phone-input/public_api.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { PhoneInputComponent } from "./phone-input.component";
+export { PhoneInputModule } from "./phone-input.module";
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL3Bob25lLWlucHV0L3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDOUQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgeyBQaG9uZUlucHV0Q29tcG9uZW50IH0gZnJvbSBcIi4vcGhvbmUtaW5wdXQuY29tcG9uZW50XCI7XG5leHBvcnQgeyBQaG9uZUlucHV0TW9kdWxlIH0gZnJvbSBcIi4vcGhvbmUtaW5wdXQubW9kdWxlXCI7XG4iXX0=

package/esm2015/virtual-scroll/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./public_api";
2	+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9taXMtY29tcG9uZW50cy92aXJ0dWFsLXNjcm9sbC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGNBQWMsQ0FBQSIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gXCIuL3B1YmxpY19hcGlcIiJdfQ==

package/esm2015/virtual-scroll/mis-crystal-design-system-virtual-scroll.js ADDED Viewed

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWlzLWNyeXN0YWwtZGVzaWduLXN5c3RlbS12aXJ0dWFsLXNjcm9sbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL3ZpcnR1YWwtc2Nyb2xsL21pcy1jcnlzdGFsLWRlc2lnbi1zeXN0ZW0tdmlydHVhbC1zY3JvbGwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=

package/esm2015/virtual-scroll/public_api.js ADDED Viewed

@@ -0,0 +1,4 @@
+// import { VirtualScrollModule } from "./virtual-scroll.module";
+export { VirtualScrollModule } from "./virtual-scroll.module";
+export { VirtualScrollComponent } from "./virtual-scroll.component";
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL3ZpcnR1YWwtc2Nyb2xsL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsaUVBQWlFO0FBRWpFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQzlELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLy8gaW1wb3J0IHsgVmlydHVhbFNjcm9sbE1vZHVsZSB9IGZyb20gXCIuL3ZpcnR1YWwtc2Nyb2xsLm1vZHVsZVwiO1xuXG5leHBvcnQgeyBWaXJ0dWFsU2Nyb2xsTW9kdWxlIH0gZnJvbSBcIi4vdmlydHVhbC1zY3JvbGwubW9kdWxlXCI7XG5leHBvcnQgeyBWaXJ0dWFsU2Nyb2xsQ29tcG9uZW50IH0gZnJvbSBcIi4vdmlydHVhbC1zY3JvbGwuY29tcG9uZW50XCI7XG5leHBvcnQgeyBJVmlydHVhbFNjcm9sbEFwaSwgSVZpcnR1YWxTY3JvbGxDb25maWcgfSBmcm9tIFwiLi92aXJ0dWFsLXNjcm9sbC5jb25zdGFudHNcIlxuIl19

package/esm2015/virtual-scroll/virtual-scroll.component.js ADDED Viewed

@@ -0,0 +1,112 @@
+import { ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, Output, ViewChild } from "@angular/core";
+import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
+import { BehaviorSubject, of } from "rxjs";
+import { catchError, mergeMap, scan, tap, throttleTime } from "rxjs/operators";
+export class VirtualScrollComponent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        // Infinite scroll related variables
+        this.offset = new BehaviorSubject(null);
+        this.endOfInfiniteData = false;
+        this.rowsLoading = false;
+        // Main state managing variables
+        this.loading = false;
+        this.error = false;
+        this.config = {
+            minBufferPx: 2400,
+            maxBufferPx: 2400,
+            rowHeight: 128,
+            pageSize: 5,
+            infiniteScrollDataFunction: (offset, pageSize) => of([1, 2, 3, 4, 5])
+        };
+        this.intialized = new EventEmitter();
+        this.switchOffInfiniteScroll = () => {
+            this.error = false;
+            this.loading = true;
+            this.data$ = this.config.data$.pipe(tap(() => {
+                this.loading = false;
+                this.changeDetectorRef.detectChanges();
+            }), catchError(err => {
+                console.error("Error: Unknown error occurred while fetching calendar data", err);
+                this.loading = false;
+                this.error = true;
+                return [];
+            }));
+        };
+        this.switchOnInfiniteScroll = () => {
+            this.error = false;
+            this.loading = true;
+            this.offset.next(0);
+            this.setupInfiniteScroll();
+        };
+    }
+    ngOnInit() {
+        this.switchOnInfiniteScroll();
+        this.virtualScrollApi = {
+            toggleLoader: () => this.loading = !this.loading,
+            toggleError: () => this.error = !this.error,
+            switchOnInfiniteScroll: this.switchOnInfiniteScroll,
+            switchOffInfiniteScroll: this.switchOffInfiniteScroll
+        };
+        this.changeDetectorRef.detectChanges();
+        this.intialized.emit(this.virtualScrollApi);
+    }
+    setupInfiniteScroll() {
+        const batchMap = this.offset.pipe(throttleTime(500), mergeMap(offset => this.getBatch(offset)), scan((acc, batch) => {
+            return [...acc, ...batch];
+        }, []));
+        this.data$ = batchMap.pipe(tap(data => {
+            this.rowsLoading = false;
+            this.loading = false;
+            setTimeout(() => {
+                this.changeDetectorRef.detectChanges();
+            }, 50);
+        }));
+    }
+    nextBatch(offset) {
+        if (this.endOfInfiniteData) {
+            return;
+        }
+        const end = this.viewPort.getRenderedRange().end;
+        const total = this.viewPort.getDataLength();
+        // console.log(`${end}, '>=', ${total}`);
+        // console.log("Offset->", offset)
+        offset = Math.ceil(offset / this.config.pageSize);
+        if (end === total && !this.rowsLoading) {
+            this.offset.next(offset);
+        }
+    }
+    getBatch(offset) {
+        this.rowsLoading = true;
+        if (offset == null)
+            offset = 0;
+        return this.config
+            .infiniteScrollDataFunction(offset, this.config.pageSize)
+            .pipe(tap((arr) => {
+            arr.length < this.config.pageSize ? (this.endOfInfiniteData = true) : null;
+        }), catchError(err => {
+            console.error("Error: Unknown error occurred while fetching calendar data", err);
+            this.rowsLoading = false;
+            this.loading = false;
+            this.error = true;
+            return [];
+        }));
+    }
+}
+VirtualScrollComponent.decorators = [
+    { type: Component, args: [{
+                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}"]
+            },] }
+];
+VirtualScrollComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+VirtualScrollComponent.propDecorators = {
+    config: [{ type: Input, args: ["config",] }],
+    viewPort: [{ type: ViewChild, args: [CdkVirtualScrollViewport,] }],
+    customItem: [{ type: ContentChild, args: ["virtualScrollItem", { static: false },] }],
+    intialized: [{ type: Output }]
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlydHVhbC1zY3JvbGwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbWlzLWNvbXBvbmVudHMvdmlydHVhbC1zY3JvbGwvdmlydHVhbC1zY3JvbGwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFlLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN4SSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUVsRSxPQUFPLEVBQUUsZUFBZSxFQUFjLEVBQUUsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUN2RCxPQUFPLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLFlBQVksRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBUS9FLE1BQU0sT0FBTyxzQkFBc0I7SUE0Qi9CLFlBQW9CLGlCQUFvQztRQUFwQyxzQkFBaUIsR0FBakIsaUJBQWlCLENBQW1CO1FBMUJ4RCxvQ0FBb0M7UUFDcEMsV0FBTSxHQUFHLElBQUksZUFBZSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ25DLHNCQUFpQixHQUFZLEtBQUssQ0FBQztRQUNuQyxnQkFBVyxHQUFZLEtBQUssQ0FBQztRQUU3QixnQ0FBZ0M7UUFDaEMsWUFBTyxHQUFZLEtBQUssQ0FBQTtRQUN4QixVQUFLLEdBQVksS0FBSyxDQUFBO1FBSUwsV0FBTSxHQUF5QjtZQUM1QyxXQUFXLEVBQUUsSUFBSTtZQUNqQixXQUFXLEVBQUUsSUFBSTtZQUNqQixTQUFTLEVBQUUsR0FBRztZQUNkLFFBQVEsRUFBRSxDQUFDO1lBQ1gsMEJBQTBCLEVBQUUsQ0FBQyxNQUFNLEVBQUUsUUFBUSxFQUFFLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUMsQ0FBQyxFQUFDLENBQUMsRUFBQyxDQUFDLEVBQUMsQ0FBQyxDQUFDLENBQUM7U0FDcEUsQ0FBQztRQUlRLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBaUIvQyw0QkFBdUIsR0FBRyxHQUFTLEVBQUU7WUFDakMsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUE7WUFDbEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUE7WUFDbkIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQy9CLEdBQUcsQ0FBQyxHQUFHLEVBQUU7Z0JBQ0wsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUE7Z0JBQ3BCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLEVBQUUsQ0FBQTtZQUMxQyxDQUFDLENBQUMsRUFDRixVQUFVLENBQUMsR0FBRyxDQUFDLEVBQUU7Z0JBQ2IsT0FBTyxDQUFDLEtBQUssQ0FBQyw0REFBNEQsRUFBRSxHQUFHLENBQUMsQ0FBQztnQkFDakYsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7Z0JBQ3JCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDO2dCQUNsQixPQUFPLEVBQUUsQ0FBQztZQUNkLENBQUMsQ0FBQyxDQUNMLENBQUE7UUFDTCxDQUFDLENBQUE7UUFDRCwyQkFBc0IsR0FBRyxHQUFTLEVBQUU7WUFDaEMsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUE7WUFDbEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUE7WUFDbkIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUE7WUFDbkIsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUE7UUFDOUIsQ0FBQyxDQUFBO0lBakN5RCxDQUFDO0lBQzNELFFBQVE7UUFDSixJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQTtRQUM3QixJQUFJLENBQUMsZ0JBQWdCLEdBQUc7WUFDcEIsWUFBWSxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxPQUFPLEdBQUcsQ0FBQyxJQUFJLENBQUMsT0FBTztZQUNoRCxXQUFXLEVBQUUsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLO1lBQzNDLHNCQUFzQixFQUFFLElBQUksQ0FBQyxzQkFBc0I7WUFDbkQsdUJBQXVCLEVBQUUsSUFBSSxDQUFDLHVCQUF1QjtTQUN4RCxDQUFBO1FBQ0QsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ3ZDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFBO0lBQy9DLENBQUM7SUF1QkQsbUJBQW1CO1FBQ2YsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQy9CLFlBQVksQ0FBQyxHQUFHLENBQUMsRUFDakIsUUFBUSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQyxFQUN6QyxJQUFJLENBQUMsQ0FBQyxHQUFlLEVBQUUsS0FBaUIsRUFBRSxFQUFFO1lBQzFDLE9BQU8sQ0FBQyxHQUFHLEdBQUcsRUFBRSxHQUFHLEtBQUssQ0FBQyxDQUFDO1FBQzVCLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FDUCxDQUFDO1FBQ0YsSUFBSSxDQUFDLEtBQUssR0FBRyxRQUFRLENBQUMsSUFBSSxDQUN0QixHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUU7WUFDUCxJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztZQUN6QixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztZQUNyQixVQUFVLENBQUMsR0FBRyxFQUFFO2dCQUNaLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUMzQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUE7UUFDVixDQUFDLENBQUMsQ0FDTCxDQUFDO0lBQ04sQ0FBQztJQUNELFNBQVMsQ0FBQyxNQUFNO1FBQ1osSUFBSSxJQUFJLENBQUMsaUJBQWlCLEVBQUU7WUFDeEIsT0FBTztTQUNWO1FBQ0QsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDLEdBQUcsQ0FBQztRQUNqRCxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQzVDLHlDQUF5QztRQUN6QyxrQ0FBa0M7UUFDbEMsTUFBTSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUE7UUFDakQsSUFBSSxHQUFHLEtBQUssS0FBSyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNwQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztTQUM1QjtJQUNMLENBQUM7SUFDRCxRQUFRLENBQUMsTUFBTTtRQUNYLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO1FBQ3hCLElBQUksTUFBTSxJQUFJLElBQUk7WUFBRSxNQUFNLEdBQUcsQ0FBQyxDQUFDO1FBQy9CLE9BQU8sSUFBSSxDQUFDLE1BQU07YUFDYiwwQkFBMEIsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUM7YUFDeEQsSUFBSSxDQUNELEdBQUcsQ0FBQyxDQUFDLEdBQWUsRUFBRSxFQUFFO1lBQ3BCLEdBQUcsQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7UUFDL0UsQ0FBQyxDQUFDLEVBQ0YsVUFBVSxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQ2IsT0FBTyxDQUFDLEtBQUssQ0FBQyw0REFBNEQsRUFBRSxHQUFHLENBQUMsQ0FBQztZQUNqRixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztZQUN6QixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztZQUNyQixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztZQUNsQixPQUFPLEVBQUUsQ0FBQztRQUNkLENBQUMsQ0FBQyxDQUNMLENBQUM7SUFDVixDQUFDOzs7WUFuSEosU0FBUyxTQUFDO2dCQUNQLFFBQVEsRUFBRSxvQkFBb0I7Z0JBQzlCLGs5QkFBOEM7O2FBRS9DOzs7WUFYTSxpQkFBaUI7OztxQkF5QnJCLEtBQUssU0FBQyxRQUFRO3VCQU9kLFNBQVMsU0FBQyx3QkFBd0I7eUJBQ2xDLFlBQVksU0FBQyxtQkFBbUIsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUU7eUJBRW5ELE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBUZW1wbGF0ZVJlZiwgVmlld0NoaWxkIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IENka1ZpcnR1YWxTY3JvbGxWaWV3cG9ydCB9IGZyb20gXCJAYW5ndWxhci9jZGsvc2Nyb2xsaW5nXCI7XG5cbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCwgT2JzZXJ2YWJsZSwgb2YgfSBmcm9tIFwicnhqc1wiO1xuaW1wb3J0IHsgY2F0Y2hFcnJvciwgbWVyZ2VNYXAsIHNjYW4sIHRhcCwgdGhyb3R0bGVUaW1lIH0gZnJvbSBcInJ4anMvb3BlcmF0b3JzXCI7XG5pbXBvcnQgeyBJVmlydHVhbFNjcm9sbENvbmZpZyB9IGZyb20gXCIuL3ZpcnR1YWwtc2Nyb2xsLmNvbnN0YW50c1wiO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogXCJtaXMtdmlydHVhbC1zY3JvbGxcIixcbiAgICB0ZW1wbGF0ZVVybDogXCIuL3ZpcnR1YWwtc2Nyb2xsLmNvbXBvbmVudC5odG1sXCIsXG4gICAgc3R5bGVVcmxzOiBbXCIuL3ZpcnR1YWwtc2Nyb2xsLmNvbXBvbmVudC5zY3NzXCJdLFxuICB9KVxuZXhwb3J0IGNsYXNzIFZpcnR1YWxTY3JvbGxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gICAgLy8gSW5maW5pdGUgc2Nyb2xsIHJlbGF0ZWQgdmFyaWFibGVzXG4gICAgb2Zmc2V0ID0gbmV3IEJlaGF2aW9yU3ViamVjdChudWxsKTtcbiAgICBlbmRPZkluZmluaXRlRGF0YTogYm9vbGVhbiA9IGZhbHNlO1xuICAgIHJvd3NMb2FkaW5nOiBib29sZWFuID0gZmFsc2U7XG4gICAgXG4gICAgLy8gTWFpbiBzdGF0ZSBtYW5hZ2luZyB2YXJpYWJsZXNcbiAgICBsb2FkaW5nOiBib29sZWFuID0gZmFsc2VcbiAgICBlcnJvcjogYm9vbGVhbiA9IGZhbHNlXG4gICAgXG4gICAgLy8gU2Nyb2xsIGRhdGEgcmVsYXRlZCB2YXJpYWJsZXNcbiAgICBkYXRhJDogT2JzZXJ2YWJsZTxhbnk+XG4gICAgQElucHV0KFwiY29uZmlnXCIpIGNvbmZpZzogSVZpcnR1YWxTY3JvbGxDb25maWcgPSB7XG4gICAgICAgIG1pbkJ1ZmZlclB4OiAyNDAwLFxuICAgICAgICBtYXhCdWZmZXJQeDogMjQwMCxcbiAgICAgICAgcm93SGVpZ2h0OiAxMjgsXG4gICAgICAgIHBhZ2VTaXplOiA1LFxuICAgICAgICBpbmZpbml0ZVNjcm9sbERhdGFGdW5jdGlvbjogKG9mZnNldCwgcGFnZVNpemUpID0+IG9mKFsxLDIsMyw0LDVdKVxuICAgIH07XG4gICAgQFZpZXdDaGlsZChDZGtWaXJ0dWFsU2Nyb2xsVmlld3BvcnQpIHZpZXdQb3J0OiBDZGtWaXJ0dWFsU2Nyb2xsVmlld3BvcnQ7XG4gICAgQENvbnRlbnRDaGlsZChcInZpcnR1YWxTY3JvbGxJdGVtXCIsIHsgc3RhdGljOiBmYWxzZSB9KVxuICAgIGN1c3RvbUl0ZW06IFRlbXBsYXRlUmVmPEVsZW1lbnQ+O1xuICAgIEBPdXRwdXQoKSBpbnRpYWxpemVkID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgICB2aXJ0dWFsU2Nyb2xsQXBpOiBhbnlcblxuXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBjaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYpe31cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5zd2l0Y2hPbkluZmluaXRlU2Nyb2xsKClcbiAgICAgICAgdGhpcy52aXJ0dWFsU2Nyb2xsQXBpID0ge1xuICAgICAgICAgICAgdG9nZ2xlTG9hZGVyOiAoKSA9PiB0aGlzLmxvYWRpbmcgPSAhdGhpcy5sb2FkaW5nLFxuICAgICAgICAgICAgdG9nZ2xlRXJyb3I6ICgpID0+IHRoaXMuZXJyb3IgPSAhdGhpcy5lcnJvcixcbiAgICAgICAgICAgIHN3aXRjaE9uSW5maW5pdGVTY3JvbGw6IHRoaXMuc3dpdGNoT25JbmZpbml0ZVNjcm9sbCxcbiAgICAgICAgICAgIHN3aXRjaE9mZkluZmluaXRlU2Nyb2xsOiB0aGlzLnN3aXRjaE9mZkluZmluaXRlU2Nyb2xsXG4gICAgICAgIH1cbiAgICAgICAgdGhpcy5jaGFuZ2VEZXRlY3RvclJlZi5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgICAgIHRoaXMuaW50aWFsaXplZC5lbWl0KHRoaXMudmlydHVhbFNjcm9sbEFwaSlcbiAgICB9XG4gICAgc3dpdGNoT2ZmSW5maW5pdGVTY3JvbGwgPSAoKTogdm9pZCA9PiB7XG4gICAgICAgIHRoaXMuZXJyb3IgPSBmYWxzZVxuICAgICAgICB0aGlzLmxvYWRpbmcgPSB0cnVlXG4gICAgICAgIHRoaXMuZGF0YSQgPSB0aGlzLmNvbmZpZy5kYXRhJC5waXBlKFxuICAgICAgICAgICAgdGFwKCgpID0+IHtcbiAgICAgICAgICAgICAgICB0aGlzLmxvYWRpbmcgPSBmYWxzZVxuICAgICAgICAgICAgICAgIHRoaXMuY2hhbmdlRGV0ZWN0b3JSZWYuZGV0ZWN0Q2hhbmdlcygpXG4gICAgICAgICAgICB9KSxcbiAgICAgICAgICAgIGNhdGNoRXJyb3IoZXJyID0+IHtcbiAgICAgICAgICAgICAgICBjb25zb2xlLmVycm9yKFwiRXJyb3I6IFVua25vd24gZXJyb3Igb2NjdXJyZWQgd2hpbGUgZmV0Y2hpbmcgY2FsZW5kYXIgZGF0YVwiLCBlcnIpO1xuICAgICAgICAgICAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlO1xuICAgICAgICAgICAgICAgIHRoaXMuZXJyb3IgPSB0cnVlO1xuICAgICAgICAgICAgICAgIHJldHVybiBbXTtcbiAgICAgICAgICAgIH0pXG4gICAgICAgIClcbiAgICB9XG4gICAgc3dpdGNoT25JbmZpbml0ZVNjcm9sbCA9ICgpOiB2b2lkID0+IHtcbiAgICAgICAgdGhpcy5lcnJvciA9IGZhbHNlXG4gICAgICAgIHRoaXMubG9hZGluZyA9IHRydWVcbiAgICAgICAgdGhpcy5vZmZzZXQubmV4dCgwKVxuICAgICAgICB0aGlzLnNldHVwSW5maW5pdGVTY3JvbGwoKVxuICAgIH1cbiAgICBzZXR1cEluZmluaXRlU2Nyb2xsKCk6IHZvaWQge1xuICAgICAgICBjb25zdCBiYXRjaE1hcCA9IHRoaXMub2Zmc2V0LnBpcGUoXG4gICAgICAgICAgdGhyb3R0bGVUaW1lKDUwMCksXG4gICAgICAgICAgbWVyZ2VNYXAob2Zmc2V0ID0+IHRoaXMuZ2V0QmF0Y2gob2Zmc2V0KSksXG4gICAgICAgICAgc2NhbigoYWNjOiBBcnJheTxhbnk+LCBiYXRjaDogQXJyYXk8YW55PikgPT4ge1xuICAgICAgICAgICAgcmV0dXJuIFsuLi5hY2MsIC4uLmJhdGNoXTtcbiAgICAgICAgICB9LCBbXSlcbiAgICAgICAgKTtcbiAgICAgICAgdGhpcy5kYXRhJCA9IGJhdGNoTWFwLnBpcGUoXG4gICAgICAgICAgICB0YXAoZGF0YSA9PiB7XG4gICAgICAgICAgICAgICAgdGhpcy5yb3dzTG9hZGluZyA9IGZhbHNlO1xuICAgICAgICAgICAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlO1xuICAgICAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTtcbiAgICAgICAgICAgICAgICB9LCA1MClcbiAgICAgICAgICAgIH0pXG4gICAgICAgICk7XG4gICAgfVxuICAgIG5leHRCYXRjaChvZmZzZXQpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuZW5kT2ZJbmZpbml0ZURhdGEpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuICAgICAgICBjb25zdCBlbmQgPSB0aGlzLnZpZXdQb3J0LmdldFJlbmRlcmVkUmFuZ2UoKS5lbmQ7XG4gICAgICAgIGNvbnN0IHRvdGFsID0gdGhpcy52aWV3UG9ydC5nZXREYXRhTGVuZ3RoKCk7XG4gICAgICAgIC8vIGNvbnNvbGUubG9nKGAke2VuZH0sICc+PScsICR7dG90YWx9YCk7XG4gICAgICAgIC8vIGNvbnNvbGUubG9nKFwiT2Zmc2V0LT5cIiwgb2Zmc2V0KVxuICAgICAgICBvZmZzZXQgPSBNYXRoLmNlaWwob2Zmc2V0IC8gdGhpcy5jb25maWcucGFnZVNpemUpXG4gICAgICAgIGlmIChlbmQgPT09IHRvdGFsICYmICF0aGlzLnJvd3NMb2FkaW5nKSB7XG4gICAgICAgICAgICB0aGlzLm9mZnNldC5uZXh0KG9mZnNldCk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgZ2V0QmF0Y2gob2Zmc2V0KTogT2JzZXJ2YWJsZTxhbnk+IHtcbiAgICAgICAgdGhpcy5yb3dzTG9hZGluZyA9IHRydWU7XG4gICAgICAgIGlmIChvZmZzZXQgPT0gbnVsbCkgb2Zmc2V0ID0gMDtcbiAgICAgICAgcmV0dXJuIHRoaXMuY29uZmlnXG4gICAgICAgICAgICAuaW5maW5pdGVTY3JvbGxEYXRhRnVuY3Rpb24ob2Zmc2V0LCB0aGlzLmNvbmZpZy5wYWdlU2l6ZSlcbiAgICAgICAgICAgIC5waXBlKFxuICAgICAgICAgICAgICAgIHRhcCgoYXJyOiBBcnJheTxhbnk+KSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIGFyci5sZW5ndGggPCB0aGlzLmNvbmZpZy5wYWdlU2l6ZSA/ICh0aGlzLmVuZE9mSW5maW5pdGVEYXRhID0gdHJ1ZSkgOiBudWxsO1xuICAgICAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgICAgIGNhdGNoRXJyb3IoZXJyID0+IHtcbiAgICAgICAgICAgICAgICAgICAgY29uc29sZS5lcnJvcihcIkVycm9yOiBVbmtub3duIGVycm9yIG9jY3VycmVkIHdoaWxlIGZldGNoaW5nIGNhbGVuZGFyIGRhdGFcIiwgZXJyKTtcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5yb3dzTG9hZGluZyA9IGZhbHNlO1xuICAgICAgICAgICAgICAgICAgICB0aGlzLmxvYWRpbmcgPSBmYWxzZTtcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5lcnJvciA9IHRydWU7XG4gICAgICAgICAgICAgICAgICAgIHJldHVybiBbXTtcbiAgICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgKTtcbiAgICB9XG4gICAgXG59Il19

package/esm2015/virtual-scroll/virtual-scroll.constants.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlydHVhbC1zY3JvbGwuY29uc3RhbnRzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbWlzLWNvbXBvbmVudHMvdmlydHVhbC1zY3JvbGwvdmlydHVhbC1zY3JvbGwuY29uc3RhbnRzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBPYnNlcnZhYmxlIH0gZnJvbSBcInJ4anNcIlxuXG5leHBvcnQgaW50ZXJmYWNlIElWaXJ0dWFsU2Nyb2xsQ29uZmlne1xuICAgIG1pbkJ1ZmZlclB4PzogbnVtYmVyXG4gICAgbWF4QnVmZmVyUHg/OiBudW1iZXJcbiAgICByb3dIZWlnaHQ6IG51bWJlclxuICAgIHBhZ2VTaXplOiBudW1iZXJcbiAgICBkYXRhJD86IE9ic2VydmFibGU8QXJyYXk8YW55Pj5cbiAgICBpbmZpbml0ZVNjcm9sbERhdGFGdW5jdGlvbjogKG9mZnNldDogbnVtYmVyLCBwYWdlU2l6ZTogbnVtYmVyKSA9PiBPYnNlcnZhYmxlPEFycmF5PGFueT4+XG59XG5leHBvcnQgaW50ZXJmYWNlIElWaXJ0dWFsU2Nyb2xsQXBpe1xuICAgIHRvZ2dsZUxvYWRlcjogKCkgPT4gdm9pZFxuICAgIHRvZ2dsZUVycm9yOiAoKSA9PiB2b2lkLFxuICAgIHN3aXRjaE9uSW5maW5pdGVTY3JvbGw6ICgpID0+IHZvaWQsXG4gICAgc3dpdGNoT2ZmSW5maW5pdGVTY3JvbGw6ICgpID0+IHZvaWRcbn0iXX0=

package/esm2015/virtual-scroll/virtual-scroll.module.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { ScrollingModule } from "@angular/cdk/scrolling";
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { LoaderModule } from "mis-crystal-design-system/loader";
+import { VirtualScrollComponent } from "./virtual-scroll.component";
+export class VirtualScrollModule {
+    static forRoot() {
+        return { ngModule: VirtualScrollModule, providers: [] };
+    }
+}
+VirtualScrollModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    VirtualScrollComponent
+                ],
+                imports: [
+                    CommonModule,
+                    ScrollingModule,
+                    LoaderModule
+                ],
+                exports: [VirtualScrollComponent, ScrollingModule],
+            },] }
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlydHVhbC1zY3JvbGwubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbWlzLWNvbXBvbmVudHMvdmlydHVhbC1zY3JvbGwvdmlydHVhbC1zY3JvbGwubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN6RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUF1QixRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUE7QUFFN0QsT0FBTyxFQUFFLFlBQVksRUFBQyxNQUFNLGtDQUFrQyxDQUFBO0FBRTlELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBYXBFLE1BQU0sT0FBTyxtQkFBbUI7SUFDNUIsTUFBTSxDQUFDLE9BQU87UUFDVixPQUFPLEVBQUUsUUFBUSxFQUFFLG1CQUFtQixFQUFFLFNBQVMsRUFBRSxFQUFFLEVBQUMsQ0FBQTtJQUMxRCxDQUFDOzs7WUFkSixRQUFRLFNBQUM7Z0JBQ04sWUFBWSxFQUFDO29CQUNULHNCQUFzQjtpQkFDekI7Z0JBQ0QsT0FBTyxFQUFFO29CQUNMLFlBQVk7b0JBQ1osZUFBZTtvQkFDZixZQUFZO2lCQUNmO2dCQUNELE9BQU8sRUFBQyxDQUFDLHNCQUFzQixFQUFFLGVBQWUsQ0FBQzthQUNwRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFNjcm9sbGluZ01vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jZGsvc2Nyb2xsaW5nXCI7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQgeyBNb2R1bGVXaXRoUHJvdmlkZXJzLCBOZ01vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCJcblxuaW1wb3J0IHsgTG9hZGVyTW9kdWxlfSBmcm9tIFwibWlzLWNyeXN0YWwtZGVzaWduLXN5c3RlbS9sb2FkZXJcIlxuXG5pbXBvcnQgeyBWaXJ0dWFsU2Nyb2xsQ29tcG9uZW50IH0gZnJvbSBcIi4vdmlydHVhbC1zY3JvbGwuY29tcG9uZW50XCI7XG5cbkBOZ01vZHVsZSh7XG4gICAgZGVjbGFyYXRpb25zOltcbiAgICAgICAgVmlydHVhbFNjcm9sbENvbXBvbmVudFxuICAgIF0sXG4gICAgaW1wb3J0czogW1xuICAgICAgICBDb21tb25Nb2R1bGUsXG4gICAgICAgIFNjcm9sbGluZ01vZHVsZSxcbiAgICAgICAgTG9hZGVyTW9kdWxlXG4gICAgXSxcbiAgICBleHBvcnRzOltWaXJ0dWFsU2Nyb2xsQ29tcG9uZW50LCBTY3JvbGxpbmdNb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBWaXJ0dWFsU2Nyb2xsTW9kdWxleyBcbiAgICBzdGF0aWMgZm9yUm9vdCgpIDogTW9kdWxlV2l0aFByb3ZpZGVyczxWaXJ0dWFsU2Nyb2xsTW9kdWxlPiB7XG4gICAgICAgIHJldHVybiB7IG5nTW9kdWxlOiBWaXJ0dWFsU2Nyb2xsTW9kdWxlLCBwcm92aWRlcnM6IFtdfVxuICAgIH1cbn0iXX0=

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

@@ -121,7 +121,7 @@ DropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: "mis-dropdown",
                 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",
-                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}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}"]
+                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}"]
             },] }
 ];
 DropdownComponent.ctorParameters = () => [

package/fesm2015/mis-crystal-design-system-phone-input.js ADDED Viewed

@@ -0,0 +1,60 @@
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
+import { DropdownModule } from 'mis-crystal-design-system/dropdown';
+class PhoneInputComponent {
+    constructor() {
+        this.dropdownData = [];
+        this.dropdownSelectedItem = { value: "", label: "" };
+        this.inputPlaceholder = 'Enter';
+        this.inputFormControl = new FormControl();
+        this.onDropdownSelection = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    handleDropdownSelection(item) {
+        this.onDropdownSelection.emit(item);
+    }
+}
+PhoneInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: "mis-phone-input",
+                template: "<div class=\"main-container-phone\">\n  <mis-dropdown [height]=\"dropdownHeight\" [width]=\"dropdownWidth\" [data]=\"dropdownData\" [selectedItem]=\"dropdownSelectedItem\" [label]=\"label\" [searchEnabled]=\"false\" [multiLine]=\"false\" (onChange)=\"handleDropdownSelection($event)\"></mis-dropdown>\n  <div class=\"details-field\">\n    <div class=\"input-box\">\n      <input\n      [ngStyle]=\"{'height': inputHeight }\"\n        class=\"black-text\"\n        [placeholder]=\"inputPlaceholder\"\n        [formControl]=\"inputFormControl\" \n        type=\"number\"\n      />\n    </div>\n  </div>\n</div>\n",
+                styles: [".main-container-phone{display:flex;border:1px solid #e0e0e0;border-radius:6px}.details-field label{display:inline-block;min-width:224px;margin-right:24px}.details-field .input-box{width:100%}.details-field .input-box input{width:100%;height:32px}input{padding:10px 16px;border:none;outline:none;width:100%;height:auto;border-radius:6px}.black-text,input{color:#181f33;line-height:24px;font-size:16px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.main-container-phone ::ng-deep .item{padding:8px!important}.main-container-phone ::ng-deep .dropdown{border:unset!important}"]
+            },] }
+];
+PhoneInputComponent.ctorParameters = () => [];
+PhoneInputComponent.propDecorators = {
+    dropdownHeight: [{ type: Input }],
+    dropdownWidth: [{ type: Input }],
+    inputHeight: [{ type: Input }],
+    dropdownData: [{ type: Input }],
+    dropdownSelectedItem: [{ type: Input }],
+    label: [{ type: Input }],
+    inputPlaceholder: [{ type: Input }],
+    inputFormControl: [{ type: Input }],
+    onDropdownSelection: [{ type: Output }]
+};
+class PhoneInputModule {
+    static forRoot() {
+        return { ngModule: PhoneInputModule, providers: [] };
+    }
+}
+PhoneInputModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [PhoneInputComponent],
+                imports: [CommonModule, ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule],
+                exports: [PhoneInputComponent]
+            },] }
+];
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { PhoneInputComponent, PhoneInputModule };
+//# sourceMappingURL=mis-crystal-design-system-phone-input.js.map

package/fesm2015/mis-crystal-design-system-phone-input.js.map ADDED Viewed

@@ -0,0 +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;;;;;;"}