npm - mis-crystal-design-system - Versions diffs - 4.0.51 → 4.0.54 - Mend

mis-crystal-design-system 4.0.51 → 4.0.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

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

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

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

@@ -51,6 +51,7 @@ export interface MultiSelectDropdownItem {
     value: string;
     checked?: boolean;
     icon?: string;
+    disabled?: boolean;
 }
 export interface OPTIONS {
     sortLabels: boolean;

package/package.json CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"TimePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"mis-timepicker","template":"<div class=\"timepicker-container\" [ngStyle]=\"{ height: height }\">\n <input\n type=\"text\"\n [(ngModel)]=\"chosenTime\"\n (ngModelChange)=\"onTimeChange(chosenTime)\"\n [ngClass]=\"{ invalid: isInvalid \|\| !rangeValidity }\"\n [ngStyle]=\"{ width: inputWidth }\"\n (click)=\"openDropdown()\"\n misToolTip\n [showToolTip]=\"showTooltip && (isInvalid \|\| !rangeValidity) && dispayToolTip\"\n [text]=\"'Invalid Time'\"\n [position]=\"'top'\"\n [showOnHover]=\"false\"\n #input\n cdkOverlayOrigin\n class=\"h7\"\n />\n\n <ng-template #dropdownContainer libDropdownScroll libTimepicker [originEl]=\"input\" [openStatus]=\"openStatus\" (statusEmitter)=\"closeDropdown()\">\n <div ngIf=\"openStatus\" class=\"timepicker-dropdown\" [ngStyle]=\"{ width: dropdownWidth \|\| inputWidth }\">\n <ul #dropdown>\n <li #timeInterval (click)=\"onTimeSelect(interval)\" ngFor=\"let interval of timeIntervals; index as i\" [ngClass]=\"{ highlight: i === isHighlighted }\">\n {{ interval }}\n <div class=\"ic-ui-check-24 selected-icon\" ngIf=\"interval === chosenTime\"></div>\n </li>\n </ul>\n </div>\n </ng-template>\n</div>\n","styles":[".h1{font-size:40px;line-height:48px}.h1,.h2{font-weight:400;letter-spacing:0}.h2{font-size:32px;line-height:40px}.h3{font-size:28px;line-height:36px}.h3,.h4{font-weight:400;letter-spacing:0}.h4{font-size:24px;line-height:32px}.h5-b{font-weight:700;letter-spacing:.25px}.h5,.h5-b{font-size:20px;line-height:28px}.h5{font-weight:400;letter-spacing:.15px}.h6-b{font-weight:700}.h6,.h6-b{font-size:16px;letter-spacing:0;line-height:24px}.h6,.p{font-weight:400}.p{font-size:16px;letter-spacing:0;line-height:180%}.h7-b{font-weight:700;letter-spacing:.25px}.h7,.h7-b{font-size:14px;line-height:20px}.h7{font-weight:400;letter-spacing:.2px}.h8-b{font-weight:700;letter-spacing:.25px}.h8,.h8-b{font-size:12px;line-height:18px}.h8{letter-spacing:.2px}.h8,.h9{font-weight:400}.h9{font-size:10px;letter-spacing:0;line-height:15px}.btn-lg-b{font-weight:700;letter-spacing:.5px}.btn-lg,.btn-lg-b{font-size:16px;line-height:24px}.btn-lg{font-weight:400;letter-spacing:.2px}.btn-sm{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link{font-size:16px;line-height:24px}.btn-link,.display-1{font-weight:400;letter-spacing:0}.display-1{font-size:48px;line-height:56px}.display-2{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}{box-sizing:border-box;font-family:Lato}.timepicker-container{display:inline-block;position:relative}input{text-align:center;border:none;border-bottom:1px solid #e0e0e0;outline:none;height:100%;width:100px;padding:4px 16px}input:hover{background:#f5f7fc}input:active,input:focus{background:#e6ebf7;border-bottom:1px solid #0937b2}.timepicker-dropdown{position:absolute;top:calc(100% + 4px);left:0;max-height:200px;overflow-y:auto;border:1px solid #e0e0e0;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:4px;padding:8px;background:#fff}.timepicker-dropdown::-webkit-scrollbar{display:none}.timepicker-dropdown ul{margin:0;padding:0}.timepicker-dropdown li{text-align:start;list-style:none;padding:6px 12px;cursor:pointer;font-size:14px;color:#181f33;display:flex;justify-content:space-between;align-items:center}.timepicker-dropdown li:hover{background:#f5f7fc;border-radius:6px}.timepicker-dropdown li .selected-icon{font-weight:900}.highlight{background-color:#f5f7fc;border-radius:6px}.invalid{background:#fae1ea!important;border-bottom:1px solid #b00020!important}"]}]}],"members":{"clockFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"timezone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"inputWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"dropdownWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"interval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"dateAsEpoch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"firstInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"rangeValidity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"showTooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"givenTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"minTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"triggerChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"timeEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":3},"arguments":["input",{"static":true}]}]}],"timepickerDirective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":41,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵa"}]}]}],"tooltipDirective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":42,"character":3},"arguments":[{"__symbolic":"reference","module":"mis-crystal-design-system/tooltip","name":"ToolTipDirective","line":42,"character":13}]}]}],"timeIntervalRefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":45,"character":3},"arguments":["timeInterval"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"emitTime":[{"__symbolic":"method"}],"getMoment":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"checkTimeValidity":[{"__symbolic":"method"}],"onTimeSelect":[{"__symbolic":"method"}],"onTimeChange":[{"__symbolic":"method"}],"calculateClosestInterval":[{"__symbolic":"method"}],"populateDropdown":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TimePickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TimePickerComponent"},{"__symbolic":"reference","name":"ɵa"}],"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":"mis-crystal-design-system/tooltip","name":"ToolTipModule","line":10,"character":39},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":10,"character":54}],"exports":[{"__symbolic":"reference","name":"TimePickerComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"TimePickerModule"},"providers":[]}}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"[libTimepicker]"}]}],"members":{"originEl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3},"arguments":["originEl"]}]}],"statusEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"createOverlayOnInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3},"arguments":["openStatus"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":47,"context":{"typeName":"Element"},"module":"./timepicker.directive"}]},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":18,"character":74},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":109}]}],"createOverlay":[{"__symbolic":"method"}],"destroyOverlay":[{"__symbolic":"method"}]}}},"origins":{"TimePickerComponent":"./timepicker.component","TimePickerModule":"./timepicker.module","ɵa":"./timepicker.directive"},"importAs":"mis-crystal-design-system/timepicker"}
1	+ {"__symbolic":"module","version":4,"metadata":{"TimePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"mis-timepicker","template":"<div class=\"timepicker-container\" [ngStyle]=\"{ height: height }\" [ngClass]=\"{'disable': disable}\">\n <input\n type=\"text\"\n [(ngModel)]=\"chosenTime\"\n (ngModelChange)=\"onTimeChange(chosenTime)\"\n [ngClass]=\"{ invalid: isInvalid \|\| !rangeValidity }\"\n [ngStyle]=\"{ width: inputWidth }\"\n (click)=\"openDropdown()\"\n misToolTip\n [showToolTip]=\"showTooltip && (isInvalid \|\| !rangeValidity) && dispayToolTip\"\n [text]=\"'Invalid Time'\"\n [position]=\"'top'\"\n [showOnHover]=\"false\"\n #input\n cdkOverlayOrigin\n class=\"h7\"\n />\n\n <ng-template #dropdownContainer libDropdownScroll libTimepicker [originEl]=\"input\" [openStatus]=\"openStatus\" (statusEmitter)=\"closeDropdown()\">\n <div ngIf=\"openStatus\" class=\"timepicker-dropdown\" [ngStyle]=\"{ width: dropdownWidth \|\| inputWidth }\">\n <ul #dropdown>\n <li #timeInterval (click)=\"onTimeSelect(interval)\" ngFor=\"let interval of timeIntervals; index as i\" [ngClass]=\"{ highlight: i === isHighlighted }\">\n {{ interval }}\n <div class=\"ic-ui-check-24 selected-icon\" ngIf=\"interval === chosenTime\"></div>\n </li>\n </ul>\n </div>\n </ng-template>\n</div>\n","styles":[".h1{font-size:40px;line-height:48px}.h1,.h2{font-weight:400;letter-spacing:0}.h2{font-size:32px;line-height:40px}.h3{font-size:28px;line-height:36px}.h3,.h4{font-weight:400;letter-spacing:0}.h4{font-size:24px;line-height:32px}.h5-b{font-weight:700;letter-spacing:.25px}.h5,.h5-b{font-size:20px;line-height:28px}.h5{font-weight:400;letter-spacing:.15px}.h6-b{font-weight:700}.h6,.h6-b{font-size:16px;letter-spacing:0;line-height:24px}.h6,.p{font-weight:400}.p{font-size:16px;letter-spacing:0;line-height:180%}.h7-b{font-weight:700;letter-spacing:.25px}.h7,.h7-b{font-size:14px;line-height:20px}.h7{font-weight:400;letter-spacing:.2px}.h8-b{font-weight:700;letter-spacing:.25px}.h8,.h8-b{font-size:12px;line-height:18px}.h8{letter-spacing:.2px}.h8,.h9{font-weight:400}.h9{font-size:10px;letter-spacing:0;line-height:15px}.btn-lg-b{font-weight:700;letter-spacing:.5px}.btn-lg,.btn-lg-b{font-size:16px;line-height:24px}.btn-lg{font-weight:400;letter-spacing:.2px}.btn-sm{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link{font-size:16px;line-height:24px}.btn-link,.display-1{font-weight:400;letter-spacing:0}.display-1{font-size:48px;line-height:56px}.display-2{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}{box-sizing:border-box;font-family:Lato}.timepicker-container{display:inline-block;position:relative}input{text-align:center;border:none;border-bottom:1px solid #e0e0e0;outline:none;height:100%;width:100px;padding:4px 16px}input:hover{background:#f5f7fc}input:active,input:focus{background:#e6ebf7;border-bottom:1px solid #0937b2}.timepicker-dropdown{position:absolute;top:calc(100% + 4px);left:0;max-height:200px;overflow-y:auto;border:1px solid #e0e0e0;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:4px;padding:8px;background:#fff}.timepicker-dropdown::-webkit-scrollbar{display:none}.timepicker-dropdown ul{margin:0;padding:0}.timepicker-dropdown li{text-align:start;list-style:none;padding:6px 12px;cursor:pointer;font-size:14px;color:#181f33;display:flex;justify-content:space-between;align-items:center}.timepicker-dropdown li:hover{background:#f5f7fc;border-radius:6px}.timepicker-dropdown li .selected-icon{font-weight:900}.highlight{background-color:#f5f7fc;border-radius:6px}.invalid{background:#fae1ea!important;border-bottom:1px solid #b00020!important}.disable{pointer-events:none!important;opacity:.5!important}"]}]}],"members":{"clockFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"timezone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"inputWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"dropdownWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"interval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"dateAsEpoch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"firstInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"rangeValidity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"showTooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"givenTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"minTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"triggerChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"disable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"timeEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":3},"arguments":["input",{"static":true}]}]}],"timepickerDirective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":41,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵa"}]}]}],"tooltipDirective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":42,"character":3},"arguments":[{"__symbolic":"reference","module":"mis-crystal-design-system/tooltip","name":"ToolTipDirective","line":42,"character":13}]}]}],"timeIntervalRefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":45,"character":3},"arguments":["timeInterval"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"emitTime":[{"__symbolic":"method"}],"getMoment":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"checkTimeValidity":[{"__symbolic":"method"}],"onTimeSelect":[{"__symbolic":"method"}],"onTimeChange":[{"__symbolic":"method"}],"calculateClosestInterval":[{"__symbolic":"method"}],"populateDropdown":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TimePickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TimePickerComponent"},{"__symbolic":"reference","name":"ɵa"}],"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":"mis-crystal-design-system/tooltip","name":"ToolTipModule","line":10,"character":39},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":10,"character":54}],"exports":[{"__symbolic":"reference","name":"TimePickerComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"TimePickerModule"},"providers":[]}}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"[libTimepicker]"}]}],"members":{"originEl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3},"arguments":["originEl"]}]}],"statusEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"createOverlayOnInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3},"arguments":["openStatus"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":47,"context":{"typeName":"Element"},"module":"./timepicker.directive"}]},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":18,"character":74},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":109}]}],"createOverlay":[{"__symbolic":"method"}],"destroyOverlay":[{"__symbolic":"method"}]}}},"origins":{"TimePickerComponent":"./timepicker.component","TimePickerModule":"./timepicker.module","ɵa":"./timepicker.directive"},"importAs":"mis-crystal-design-system/timepicker"}

package/timepicker/timepicker.component.d.ts CHANGED Viewed

@@ -28,6 +28,7 @@ export declare class TimePickerComponent implements OnInit, OnChanges, OnDestroy
     givenTime: number;
     minTime?: number;
     triggerChange: boolean;
+    disable: boolean;
     timeEmitter: EventEmitter<ITime>;
     input: ElementRef;
     timepickerDirective: TimepickerDirective;

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

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"TimeRangePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mis-timerangepicker","template":"<div class=\"rangepicker-container\" [ngStyle]=\"{'flexDirection': direction, 'gap': gap}\">\n <mis-timepicker\n [clockFormat]=\"clockFormat\"\n [interval]=\"interval\"\n [dateAsEpoch]=\"startDateEpoch\"\n [firstInterval]=\"firstIntervalForStartPicker\"\n (timeEmitter)=\"startPickerHandler($event)\"\n [timezone]=\"timezone\"\n [height]=\"height\"\n [inputWidth]=\"inputWidth\"\n [dropdownWidth]=\"dropdownWidth\"\n [showTooltip]=\"showTooltip\"\n [givenTime]=\"givenStartTime\"\n ></mis-timepicker>\n <p *ngIf=\"direction === 'row'\">-</p>\n <mis-timepicker\n [clockFormat]=\"clockFormat\"\n [interval]=\"interval\"\n [dateAsEpoch]=\"endDateEpoch\"\n [firstInterval]=\"firstIntervalForEndPicker\"\n (timeEmitter)=\"endPickerHandler($event)\"\n [rangeValidity]=\"rangeValidity\"\n [timezone]=\"timezone\"\n [height]=\"height\"\n [inputWidth]=\"inputWidth\"\n [dropdownWidth]=\"dropdownWidth\"\n [showTooltip]=\"showTooltip\"\n [givenTime]=\"givenEndTime\"\n [triggerChange]=\"triggerChange\"\n ></mis-timepicker>\n</div>\n","styles":[".rangepicker-container{display:flex;gap:1rem;align-items:center}p{margin:0;display:inline-flex;align-items:center}"]}]}],"members":{"inputWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"dropdownWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"timezone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"startDateEpoch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"endDateEpoch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"givenStartTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"givenEndTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"clockFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"interval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"showTooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"gap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"timeRangeEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":37,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setFirstIntervals":[{"__symbolic":"method"}],"emitTimeRange":[{"__symbolic":"method"}],"startPickerHandler":[{"__symbolic":"method"}],"endPickerHandler":[{"__symbolic":"method"}],"checkTimeValidity":[{"__symbolic":"method"}],"rangeValidation":[{"__symbolic":"method"}]}},"TimeRangePickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TimeRangePickerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":26},{"__symbolic":"reference","module":"mis-crystal-design-system/timepicker","name":"TimePickerModule","line":8,"character":39}],"exports":[{"__symbolic":"reference","name":"TimeRangePickerComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"TimeRangePickerModule"},"providers":[]}}}}},"origins":{"TimeRangePickerComponent":"./timerangepicker.component","TimeRangePickerModule":"./timerangepicker.module"},"importAs":"mis-crystal-design-system/timerangepicker"}
1	+ {"__symbolic":"module","version":4,"metadata":{"TimeRangePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mis-timerangepicker","template":"<div class=\"rangepicker-container\" [ngStyle]=\"{'flexDirection': direction, 'gap': gap}\">\n <mis-timepicker\n [clockFormat]=\"clockFormat\"\n [interval]=\"interval\"\n [dateAsEpoch]=\"startDateEpoch\"\n [firstInterval]=\"firstIntervalForStartPicker\"\n (timeEmitter)=\"startPickerHandler($event)\"\n [timezone]=\"timezone\"\n [height]=\"height\"\n [inputWidth]=\"inputWidth\"\n [dropdownWidth]=\"dropdownWidth\"\n [showTooltip]=\"showTooltip\"\n [givenTime]=\"givenStartTime\"\n [disable]=\"disableStartTime\"\n ></mis-timepicker>\n <p *ngIf=\"direction === 'row'\">-</p>\n <mis-timepicker\n [clockFormat]=\"clockFormat\"\n [interval]=\"interval\"\n [dateAsEpoch]=\"endDateEpoch\"\n [firstInterval]=\"firstIntervalForEndPicker\"\n (timeEmitter)=\"endPickerHandler($event)\"\n [rangeValidity]=\"rangeValidity\"\n [timezone]=\"timezone\"\n [height]=\"height\"\n [inputWidth]=\"inputWidth\"\n [dropdownWidth]=\"dropdownWidth\"\n [showTooltip]=\"showTooltip\"\n [givenTime]=\"givenEndTime\"\n [triggerChange]=\"triggerChange\"\n [disable]=\"disableEndTime\"\n ></mis-timepicker>\n</div>\n","styles":[".rangepicker-container{display:flex;gap:1rem;align-items:center}p{margin:0;display:inline-flex;align-items:center}"]}]}],"members":{"inputWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"dropdownWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"timezone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"startDateEpoch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"endDateEpoch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"givenStartTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"givenEndTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"clockFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"interval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"showTooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"gap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"disableStartTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"disableEndTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"timeRangeEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":38,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setFirstIntervals":[{"__symbolic":"method"}],"emitTimeRange":[{"__symbolic":"method"}],"startPickerHandler":[{"__symbolic":"method"}],"endPickerHandler":[{"__symbolic":"method"}],"checkTimeValidity":[{"__symbolic":"method"}],"rangeValidation":[{"__symbolic":"method"}]}},"TimeRangePickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TimeRangePickerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":26},{"__symbolic":"reference","module":"mis-crystal-design-system/timepicker","name":"TimePickerModule","line":8,"character":39}],"exports":[{"__symbolic":"reference","name":"TimeRangePickerComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"TimeRangePickerModule"},"providers":[]}}}}},"origins":{"TimeRangePickerComponent":"./timerangepicker.component","TimeRangePickerModule":"./timerangepicker.module"},"importAs":"mis-crystal-design-system/timerangepicker"}

package/timerangepicker/timerangepicker.component.d.ts CHANGED Viewed

@@ -15,6 +15,8 @@ export declare class TimeRangePickerComponent {
     showTooltip: boolean;
     direction: TDirection;
     gap: string;
+    disableStartTime: boolean;
+    disableEndTime: boolean;
     timeRangeEmitter: EventEmitter<ITimeRange>;
     startDate: string;
     endDate: string;