mis-crystal-design-system 4.0.49 → 4.0.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/action-list/mis-crystal-design-system-action-list.metadata.json +1 -1
- package/bundles/mis-crystal-design-system-action-list.umd.js +655 -495
- package/bundles/mis-crystal-design-system-action-list.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-action-list.umd.min.js +1 -15
- package/bundles/mis-crystal-design-system-action-list.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-analytics.umd.js +568 -409
- package/bundles/mis-crystal-design-system-analytics.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-analytics.umd.min.js +1 -15
- package/bundles/mis-crystal-design-system-analytics.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-checkbox.umd.js +1 -1
- package/bundles/mis-crystal-design-system-checkbox.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-checkbox.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-datepicker_v2.umd.js +849 -690
- package/bundles/mis-crystal-design-system-datepicker_v2.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-datepicker_v2.umd.min.js +1 -15
- package/bundles/mis-crystal-design-system-datepicker_v2.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-daterangepicker_v2.umd.js +2 -3
- package/bundles/mis-crystal-design-system-daterangepicker_v2.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-daterangepicker_v2.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-daterangepicker_v2.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-dropdown.umd.js +703 -544
- package/bundles/mis-crystal-design-system-dropdown.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-dropdown.umd.min.js +1 -15
- package/bundles/mis-crystal-design-system-dropdown.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-dynamic-form.umd.js +882 -723
- package/bundles/mis-crystal-design-system-dynamic-form.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-dynamic-form.umd.min.js +1 -15
- package/bundles/mis-crystal-design-system-dynamic-form.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-input-stepper.umd.js +2 -0
- package/bundles/mis-crystal-design-system-input-stepper.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-input-stepper.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-input-stepper.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-input.umd.js +1 -1
- package/bundles/mis-crystal-design-system-input.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-input.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-loader.umd.js +1 -1
- package/bundles/mis-crystal-design-system-loader.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-loader.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.js +769 -610
- package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.min.js +1 -15
- package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-nested-multi-select-dropdown.umd.js +782 -623
- package/bundles/mis-crystal-design-system-nested-multi-select-dropdown.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-nested-multi-select-dropdown.umd.min.js +1 -15
- package/bundles/mis-crystal-design-system-nested-multi-select-dropdown.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-ske-loader.umd.js +1 -1
- package/bundles/mis-crystal-design-system-ske-loader.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-ske-loader.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-snackbar.umd.js +19 -11
- package/bundles/mis-crystal-design-system-snackbar.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-snackbar.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-snackbar.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-specificdatepicker.umd.js +1120 -961
- package/bundles/mis-crystal-design-system-specificdatepicker.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-specificdatepicker.umd.min.js +1 -15
- package/bundles/mis-crystal-design-system-specificdatepicker.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-star-rating.umd.js +2 -2
- package/bundles/mis-crystal-design-system-star-rating.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-star-rating.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-star-rating.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-table.umd.js +927 -768
- package/bundles/mis-crystal-design-system-table.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-table.umd.min.js +1 -15
- package/bundles/mis-crystal-design-system-table.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-timepicker.umd.js +829 -670
- package/bundles/mis-crystal-design-system-timepicker.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-timepicker.umd.min.js +1 -15
- package/bundles/mis-crystal-design-system-timepicker.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-virtual-scroll.umd.js +616 -457
- package/bundles/mis-crystal-design-system-virtual-scroll.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-virtual-scroll.umd.min.js +1 -15
- package/bundles/mis-crystal-design-system-virtual-scroll.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-widgets.umd.js +621 -462
- package/bundles/mis-crystal-design-system-widgets.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-widgets.umd.min.js +1 -15
- package/bundles/mis-crystal-design-system-widgets.umd.min.js.map +1 -1
- package/checkbox/mis-crystal-design-system-checkbox.metadata.json +1 -1
- package/datepicker_v2/mis-crystal-design-system-datepicker_v2.metadata.json +1 -1
- package/daterangepicker_v2/mis-crystal-design-system-daterangepicker_v2.metadata.json +1 -1
- package/daterangepicker_v2/tz-drp-container/tz-drp-container.component.d.ts +0 -1
- package/dropdown/mis-crystal-design-system-dropdown.metadata.json +1 -1
- package/dynamic-form/mis-crystal-design-system-dynamic-form.metadata.json +1 -1
- package/esm2015/action-list/action-list.component.js +6 -5
- package/esm2015/checkbox/checkbox.component.js +1 -1
- package/esm2015/datepicker_v2/tz-dp-container/tz-dp-container.component.js +1 -1
- package/esm2015/daterangepicker_v2/tz-drp-container/tz-drp-container.component.js +3 -4
- package/esm2015/dropdown/dropdown.component.js +1 -1
- package/esm2015/dynamic-form/dynamic-form.component.js +1 -1
- package/esm2015/input/mis-input.component.js +1 -1
- package/esm2015/input-stepper/input-stepper/input-stepper.component.js +3 -1
- package/esm2015/loader/loader.component.js +1 -1
- package/esm2015/multi-select-dropdown/multi-select-dropdown.component.js +1 -1
- package/esm2015/nested-multi-select-dropdown/nested-multi-select-dropdown.component.js +1 -1
- package/esm2015/ske-loader/ske-loader.component.js +1 -1
- package/esm2015/snackbar/snackbar/snackbar.component.js +9 -13
- package/esm2015/snackbar/snackbar.module.js +13 -2
- package/esm2015/specificdatepicker/tz-sdp-container/tz-sdp-container.component.js +1 -1
- package/esm2015/star-rating/star-rating.component.js +3 -3
- package/esm2015/table/table.component.js +1 -1
- package/fesm2015/mis-crystal-design-system-action-list.js +5 -4
- package/fesm2015/mis-crystal-design-system-action-list.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-checkbox.js +1 -1
- package/fesm2015/mis-crystal-design-system-datepicker_v2.js +1 -1
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.js +2 -3
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-dropdown.js +1 -1
- package/fesm2015/mis-crystal-design-system-dynamic-form.js +1 -1
- package/fesm2015/mis-crystal-design-system-input-stepper.js +2 -0
- package/fesm2015/mis-crystal-design-system-input-stepper.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-input.js +1 -1
- package/fesm2015/mis-crystal-design-system-loader.js +1 -1
- package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js +1 -1
- package/fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.js +1 -1
- package/fesm2015/mis-crystal-design-system-ske-loader.js +1 -1
- package/fesm2015/mis-crystal-design-system-snackbar.js +20 -12
- package/fesm2015/mis-crystal-design-system-snackbar.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-specificdatepicker.js +1 -1
- package/fesm2015/mis-crystal-design-system-star-rating.js +2 -2
- package/fesm2015/mis-crystal-design-system-star-rating.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-table.js +1 -1
- package/input/mis-crystal-design-system-input.metadata.json +1 -1
- package/loader/mis-crystal-design-system-loader.metadata.json +1 -1
- package/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.metadata.json +1 -1
- package/nested-multi-select-dropdown/mis-crystal-design-system-nested-multi-select-dropdown.metadata.json +1 -1
- package/package.json +1 -1
- package/ske-loader/mis-crystal-design-system-ske-loader.metadata.json +1 -1
- package/snackbar/mis-crystal-design-system-snackbar.metadata.json +1 -1
- package/snackbar/snackbar/snackbar.component.d.ts +5 -5
- package/snackbar/snackbar.module.d.ts +3 -0
- package/specificdatepicker/mis-crystal-design-system-specificdatepicker.metadata.json +1 -1
- package/table/mis-crystal-design-system-table.metadata.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"__symbolic":"module","version":4,"metadata":{"ActionListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mis-action-list","template":"<div\n class=\"main-container\"\n [ngStyle]=\"{\n height: height.length > 0 ? height : '',\n width: width.length > 0 ? width : ''\n }\"\n>\n <div\n class=\"dropdown\"\n #select\n tabindex=\"0\"\n (keyup.enter)=\"toggleDropdown()\"\n (click)=\"toggleDropdown()\"\n [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n >\n <div class=\"label\">\n <p class=\"text\">\n {{ label }}\n </p>\n <p *ngIf=\"selectedItems?.length > 1\" class=\"count\">+{{ selectedItems?.length - 1 }}</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\n<ng-template #popupContainer>\n <div\n class=\"popup-container\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n >\n <div class=\"items\">\n <div\n #singleItem\n class=\"item\"\n tabindex=\"0\"\n [ngClass]=\"{ 'item-disabled': item?.disabled }\"\n (mouseenter)=\"onHover(item, true, singleItem)\"\n *ngFor=\"let item of data\"\n >\n <div class=\"label\" [ngStyle]=\"{ width: item?.icon ? '90%' : '100%' }\">\n <span>{{ item?.label }}</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 <div class=\"noData\" *ngIf=\"data.length === 0\">\n {{ noDataMessage || \"No results\" }}\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #subPopupContainer>\n <div\n class=\"popup-container\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n >\n <div class=\"items\">\n <div\n class=\"item\"\n tabindex=\"0\"\n [ngClass]=\"{ 'item-disabled': item.disabled }\"\n (click)=\"!item.disabled && selectItem(item)\"\n *ngFor=\"let item of subItems\"\n >\n <div class=\"checkbox-container\" *ngIf=\"item.type === 'MULTIPLE'\">\n <mis-checkbox [disabled]=\"item.disabled\" [checked]=\"item.checked\"></mis-checkbox>\n </div>\n <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%' }\">\n <span>{{ item.label }}</span>\n </div>\n <div class=\"icon-container\" *ngIf=\"item.icon || item.checked\">\n <img *ngIf=\"!item.checked\" class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n <ng-container *ngIf=\"item.type === 'SINGLE' && item.checked\">\n <ng-container *ngTemplateOutlet=\"tickIcon\"></ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"noData\" *ngIf=\"data.length === 0\">\n {{ noDataMessage || \"No results\" }}\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #tickIcon>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.47697 14.8237L3.49922 10.5519C3.2776 10.3169 3.2776 9.93437 3.49922 9.69684L4.30273 8.84298C4.52434 8.60795 4.88462 8.60795 5.10623 8.84298L7.87929 11.8334L14.0607 5.17627C14.2823 4.94124 14.6426 4.94124 14.8642 5.17627L15.6677 6.03138C15.8894 6.26641 15.8894 6.65021 15.6677 6.88399L8.28048 14.8237C8.05886 15.0588 7.69859 15.0588 7.47697 14.8237Z\"\n fill=\"#181F33\"\n />\n </svg>\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:4px 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:16px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.main-container .dropdown .label .count{width:24px;height:24px;background-color:#e0e0e0;border-radius:50%;padding:2px 4px;margin:0 0 0 8px;font-style:normal;font-weight:400;box-sizing:border-box;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.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{justify-content:center;font-style:normal;font-weight:400;font-size:16px;line-height:20px}.popup-container .items .item,.popup-container .items .noData{display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .items .item{cursor:pointer;justify-content:flex-start;gap:10px;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 .label{width:100%;line-height:20px;font-size:16px;font-style:normal;font-weight:400;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 .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}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"width":[{"__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":17,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"selectElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":29,"character":3},"arguments":["select",{"static":false}]}]}],"popupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":3},"arguments":["popupContainer",{"static":false}]}]}],"subPopupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":31,"character":3},"arguments":["subPopupContainer",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":35,"character":28},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":35,"character":57},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":35,"character":92}]}],"ngOnInit":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"onHover":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"ActionItem":{"__symbolic":"interface"},"ActionListModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ActionListComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":26},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":9,"character":39},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":9,"character":54}],"exports":[{"__symbolic":"reference","name":"ActionListComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ActionListModule"},"providers":[]}}}}},"origins":{"ActionListComponent":"./action-list.component","ActionItem":"./action-list.component","ActionListModule":"./action-list.module"},"importAs":"mis-crystal-design-system/action-list"}
|
|
1
|
+
{"__symbolic":"module","version":4,"metadata":{"ActionListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mis-action-list","template":"<div\n class=\"main-container\"\n [ngStyle]=\"{\n height: height.length > 0 ? height : '',\n width: width.length > 0 ? width : ''\n }\"\n>\n <div\n class=\"dropdown\"\n #select\n tabindex=\"0\"\n (keyup.enter)=\"toggleDropdown()\"\n (click)=\"toggleDropdown()\"\n [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n >\n <div class=\"label\">\n <p class=\"text\">\n {{ label }}\n </p>\n <p *ngIf=\"selectedItems?.length > 1\" class=\"count\">+{{ selectedItems?.length - 1 }}</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\n<ng-template #popupContainer>\n <div\n class=\"popup-container\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n >\n <div class=\"items\">\n <div\n #singleItem\n class=\"item\"\n tabindex=\"0\"\n [ngClass]=\"{ 'item-disabled': item?.disabled }\"\n (mouseenter)=\"onHover(item, true, singleItem)\"\n *ngFor=\"let item of data\"\n >\n <div class=\"label\" [ngStyle]=\"{ width: item?.icon ? '90%' : '100%' }\">\n <span>{{ item?.label }}</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 <div class=\"noData\" *ngIf=\"data.length === 0\">\n {{ noDataMessage || \"No results\" }}\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #subPopupContainer>\n <div\n class=\"popup-container\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n >\n <div class=\"items\">\n <div\n class=\"item\"\n tabindex=\"0\"\n [ngClass]=\"{ 'item-disabled': item.disabled }\"\n (click)=\"!item.disabled && selectItem(item)\"\n *ngFor=\"let item of subItems\"\n >\n <div class=\"checkbox-container\" *ngIf=\"item.type === 'MULTIPLE'\">\n <mis-checkbox [disabled]=\"item.disabled\" [checked]=\"item.checked\"></mis-checkbox>\n </div>\n <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%' }\">\n <span>{{ item.label }}</span>\n </div>\n <div class=\"icon-container\" *ngIf=\"item.icon || item.checked\">\n <img *ngIf=\"!item.checked\" class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n <ng-container *ngIf=\"item.type === 'SINGLE' && item.checked\">\n <ng-container *ngTemplateOutlet=\"tickIcon\"></ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"noData\" *ngIf=\"data.length === 0\">\n {{ noDataMessage || \"No results\" }}\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #tickIcon>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.47697 14.8237L3.49922 10.5519C3.2776 10.3169 3.2776 9.93437 3.49922 9.69684L4.30273 8.84298C4.52434 8.60795 4.88462 8.60795 5.10623 8.84298L7.87929 11.8334L14.0607 5.17627C14.2823 4.94124 14.6426 4.94124 14.8642 5.17627L15.6677 6.03138C15.8894 6.26641 15.8894 6.65021 15.6677 6.88399L8.28048 14.8237C8.05886 15.0588 7.69859 15.0588 7.47697 14.8237Z\"\n fill=\"#181F33\"\n />\n </svg>\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:4px 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:16px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.main-container .dropdown .label .count{width:24px;height:24px;background-color:#e0e0e0;border-radius:50%;padding:2px 4px;margin:0 0 0 8px;font-style:normal;font-weight:400;box-sizing:border-box;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.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{justify-content:center;font-style:normal;font-weight:400;font-size:16px;line-height:20px}.popup-container .items .item,.popup-container .items .noData{display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .items .item{cursor:pointer;justify-content:flex-start;gap:10px;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 .label{width:100%;line-height:20px;font-size:16px;font-style:normal;font-weight:400;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 .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;user-select:none}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"width":[{"__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":17,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"selectElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":29,"character":3},"arguments":["select",{"static":false}]}]}],"popupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":3},"arguments":["popupContainer",{"static":false}]}]}],"subPopupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":31,"character":3},"arguments":["subPopupContainer",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":35,"character":28},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":35,"character":57},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":35,"character":92}]}],"ngOnInit":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"onHover":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"ActionItem":{"__symbolic":"interface"},"ActionListModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ActionListComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":26},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":9,"character":39},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":9,"character":54}],"exports":[{"__symbolic":"reference","name":"ActionListComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ActionListModule"},"providers":[]}}}}},"origins":{"ActionListComponent":"./action-list.component","ActionItem":"./action-list.component","ActionListModule":"./action-list.module"},"importAs":"mis-crystal-design-system/action-list"}
|