angular2-multiselect-dropdown - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

angular2-multiselect-dropdown.d.ts

 export { AngularMultiSelect } from './angular2-multiselect-dropdown/multiselect.component';
 export { ClickOutsideDirective } from './angular2-multiselect-dropdown/clickOutside';
 export { ListFilterPipe } from './angular2-multiselect-dropdown/list-filter';
+export { groupByPipe } from './angular2-multiselect-dropdown/group-by';
 export { AngularMultiSelectModule } from './angular2-multiselect-dropdown/multiselect.component';

angular2-multiselect-dropdown.js

 export { AngularMultiSelect } from './angular2-multiselect-dropdown/multiselect.component';
 export { ClickOutsideDirective } from './angular2-multiselect-dropdown/clickOutside';
 export { ListFilterPipe } from './angular2-multiselect-dropdown/list-filter';
+export { groupByPipe } from './angular2-multiselect-dropdown/group-by';
 export { AngularMultiSelectModule } from './angular2-multiselect-dropdown/multiselect.component';
 //# sourceMappingURL=angular2-multiselect-dropdown.js.map

angular2-multiselect-dropdown.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelect"]},{"from":"./angular2-multiselect-dropdown/clickOutside","export":["ClickOutsideDirective"]},{"from":"./angular2-multiselect-dropdown/list-filter","export":["ListFilterPipe"]},{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelectModule"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelect"]},{"from":"./angular2-multiselect-dropdown/clickOutside","export":["ClickOutsideDirective"]},{"from":"./angular2-multiselect-dropdown/list-filter","export":["ListFilterPipe"]},{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelectModule"]}]}]
+[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelect"]},{"from":"./angular2-multiselect-dropdown/clickOutside","export":["ClickOutsideDirective"]},{"from":"./angular2-multiselect-dropdown/list-filter","export":["ListFilterPipe"]},{"from":"./angular2-multiselect-dropdown/group-by","export":["groupByPipe"]},{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelectModule"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelect"]},{"from":"./angular2-multiselect-dropdown/clickOutside","export":["ClickOutsideDirective"]},{"from":"./angular2-multiselect-dropdown/list-filter","export":["ListFilterPipe"]},{"from":"./angular2-multiselect-dropdown/group-by","export":["groupByPipe"]},{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelectModule"]}]}]

angular2-multiselect-dropdown.umd.js

 /**
  * angular2-multiselect-dropdown - undefined
- * @version v1.3.0
+ * @version v1.3.1
  * @author undefined
@@ -17,3 +17,3 @@ * @link undefined
 		root["ticktock"] = factory(root["ng"]["core"], root["ng"]["common"], root["ng"]["forms"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_10__) {
+})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_10__, __WEBPACK_EXTERNAL_MODULE_11__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -84,3 +84,3 @@ /******/ 	// The module cache
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 11);
+/******/ 	return __webpack_require__(__webpack_require__.s = 12);
 /******/ })
@@ -90,2 +90,8 @@ /************************************************************************/
 /* 0 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
+
+/***/ }),
+/* 1 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -105,8 +111,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = __webpack_require__(1);
-var forms_1 = __webpack_require__(10);
-var common_1 = __webpack_require__(9);
-var multiselect_model_1 = __webpack_require__(4);
+var core_1 = __webpack_require__(0);
+var forms_1 = __webpack_require__(11);
+var common_1 = __webpack_require__(10);
+var multiselect_model_1 = __webpack_require__(5);
 var clickOutside_1 = __webpack_require__(2);
-var list_filter_1 = __webpack_require__(3);
+var list_filter_1 = __webpack_require__(4);
+var group_by_1 = __webpack_require__(3);
 exports.DROPDOWN_CONTROL_VALUE_ACCESSOR = {
@@ -305,5 +312,5 @@ provide: forms_1.NG_VALUE_ACCESSOR,
             selector: 'angular2-multiselect',
-            template: __webpack_require__(7),
+            template: __webpack_require__(8),
             host: { '[class]': 'defaultSettings.classes' },
-            styles: [__webpack_require__(8)],
+            styles: [__webpack_require__(9)],
             providers: [exports.DROPDOWN_CONTROL_VALUE_ACCESSOR]
@@ -322,4 +329,4 @@ }),
             imports: [common_1.CommonModule, forms_1.FormsModule],
-            declarations: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, list_filter_1.ListFilterPipe],
-            exports: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, list_filter_1.ListFilterPipe]
+            declarations: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, list_filter_1.ListFilterPipe, group_by_1.groupByPipe],
+            exports: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, list_filter_1.ListFilterPipe, group_by_1.groupByPipe]
         })
@@ -333,8 +340,2 @@ ], AngularMultiSelectModule);
 /***/ }),
-/* 1 */
-/***/ (function(module, exports) {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
-
-/***/ }),
 /* 2 */
@@ -355,3 +356,3 @@ /***/ (function(module, exports, __webpack_require__) {
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = __webpack_require__(1);
+var core_1 = __webpack_require__(0);
 var ClickOutsideDirective = (function () {
@@ -405,3 +406,43 @@ function ClickOutsideDirective(_elementRef) {
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = __webpack_require__(1);
+var core_1 = __webpack_require__(0);
+var groupByPipe = (function () {
+    function groupByPipe() {
+    }
+    groupByPipe.prototype.transform = function (value, field) {
+        var groupedObj = value.reduce(function (prev, cur) {
+            if (!prev[cur[field]]) {
+                prev[cur[field]] = [cur];
+            }
+            else {
+                prev[cur[field]].push(cur);
+            }
+            return prev;
+        }, {});
+        return Object.keys(groupedObj).map(function (key) { return ({ key: key, value: groupedObj[key] }); });
+    };
+    groupByPipe = __decorate([
+        core_1.Pipe({
+            name: 'groupBy',
+            pure: false
+        })
+    ], groupByPipe);
+    return groupByPipe;
+}());
+exports.groupByPipe = groupByPipe;
+
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = __webpack_require__(0);
 var ListFilterPipe = (function () {
@@ -440,3 +481,3 @@ function ListFilterPipe() {
 /***/ }),
-/* 4 */
+/* 5 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -464,6 +505,6 @@
 /***/ }),
-/* 5 */
+/* 6 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(6)(undefined);
+exports = module.exports = __webpack_require__(7)(undefined);
 // imports
@@ -473,3 +514,3 @@
 // module
-exports.push([module.i, ".cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px; }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 25%; }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ul::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ul::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ul::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type=\"checkbox\"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type=\"checkbox\"]:focus + label:before,\n.pure-checkbox input[type=\"checkbox\"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type=\"checkbox\"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type=\"checkbox\"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:before {\n  box-sizing: content-box;\n  content: '';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  box-sizing: content-box;\n  content: '';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:focus + label:before\n.pure-checkbox input[type=\"checkbox\"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  content: '';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:before {\n  animation: borderscale 300ms ease-in;\n  background-color: white; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type=\"radio\"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:before {\n  animation: borderscale 200ms ease-in;\n  background: #0079FE; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n@keyframes borderscale {\n  50% {\n    box-shadow: 0 0 0 2px #0079FE; } }\n\n.list-message {\n  text-align: center; }\n", ""]);
+exports.push([module.i, ".cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px; }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 25%; }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ul::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ul::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ul::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type=\"checkbox\"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type=\"checkbox\"]:focus + label:before,\n.pure-checkbox input[type=\"checkbox\"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type=\"checkbox\"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type=\"checkbox\"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:before {\n  box-sizing: content-box;\n  content: '';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  box-sizing: content-box;\n  content: '';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:focus + label:before\n.pure-checkbox input[type=\"checkbox\"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  content: '';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:before {\n  animation: borderscale 300ms ease-in;\n  background-color: white; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type=\"radio\"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:before {\n  animation: borderscale 200ms ease-in;\n  background: #0079FE; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n@keyframes borderscale {\n  50% {\n    box-shadow: 0 0 0 2px #0079FE; } }\n\n.list-message {\n  text-align: center; }\n\n.list-grp {\n  padding: 0 15px !important; }\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700; }\n\n.list-grp > li {\n  padding-left: 15px !important; }\n", ""]);
 
@@ -480,3 +521,3 @@ // exports
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, exports) {
@@ -563,13 +604,13 @@
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports) {
 
-module.exports = "<div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"selected-list\">\r\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\r\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\r\n            <span *ngIf=\"settings.singleSelection\">\r\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\r\n                    {{item.itemName}}\r\n                </span>\r\n            </span>\r\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\r\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\r\n                    <span class=\"c-label\">{{item.itemName}}</span>\r\n                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\" disabled=\"true\"></span>\r\n                </div>\r\n            </div> \r\n            <span *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\r\n        </div>      \r\n    </div>\r\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\r\n    <div class=\"arrow-up\"></div>\r\n    <div class=\"list-area\">\r\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\r\n            <input type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\r\n            <label>\r\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\r\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n        </div>   \r\n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\r\n            <span class=\"fa fa-search\"></span>\r\n            <input type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter.itemName\">\r\n        </div> \r\n    <ul [style.maxHeight] = \"settings.maxHeight+'px'\">\r\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item.itemName}}</label>\r\n        </li>\r\n    </ul>\r\n    <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">No Data Available</h5>\r\n    </div>\r\n    </div>\r\n</div>"
+module.exports = "<div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"selected-list\">\r\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\r\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\r\n            <span *ngIf=\"settings.singleSelection\">\r\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\r\n                    {{item.itemName}}\r\n                </span>\r\n            </span>\r\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\r\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\r\n                    <span class=\"c-label\">{{item.itemName}}</span>\r\n                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\" disabled=\"true\"></span>\r\n                </div>\r\n            </div> \r\n            <span *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\r\n        </div>      \r\n    </div>\r\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\r\n    <div class=\"arrow-up\"></div>\r\n    <div class=\"list-area\">\r\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\r\n            <input type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\r\n            <label>\r\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\r\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n        </div>   \r\n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\r\n            <span class=\"fa fa-search\"></span>\r\n            <input type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter.itemName\">\r\n        </div> \r\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\">\r\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item.itemName}}</label>\r\n        </li>\r\n    </ul>\r\n    <div *ngIf=\"settings.groupBy\">\r\n    <ul *ngFor=\"let obj of data | groupBy:'category'; let i = index;\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"list-grp\">\r\n        <h4>{{obj.key}}</h4>\r\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item.itemName}}</label>\r\n        </li>\r\n    </ul>\r\n    </div>\r\n    <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">No Data Available</h5>\r\n    </div>\r\n    </div>\r\n</div>"
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports, __webpack_require__) {
 
 
-        var result = __webpack_require__(5);
+        var result = __webpack_require__(6);
 
@@ -584,15 +625,15 @@ if (typeof result === "string") {
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
 
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_11__;
 
 /***/ }),
-/* 11 */
+/* 12 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -603,9 +644,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
-var multiselect_component_1 = __webpack_require__(0);
+var multiselect_component_1 = __webpack_require__(1);
 exports.AngularMultiSelect = multiselect_component_1.AngularMultiSelect;
 var clickOutside_1 = __webpack_require__(2);
 exports.ClickOutsideDirective = clickOutside_1.ClickOutsideDirective;
-var list_filter_1 = __webpack_require__(3);
+var list_filter_1 = __webpack_require__(4);
 exports.ListFilterPipe = list_filter_1.ListFilterPipe;
-var multiselect_component_2 = __webpack_require__(0);
+var group_by_1 = __webpack_require__(3);
+exports.groupByPipe = group_by_1.groupByPipe;
+var multiselect_component_2 = __webpack_require__(1);
 exports.AngularMultiSelectModule = multiselect_component_2.AngularMultiSelectModule;
@@ -612,0 +655,0 @@

angular2-multiselect-dropdown.umd.min.js

 /**
  * angular2-multiselect-dropdown - undefined
- * @version v1.3.0
+ * @version v1.3.1
  * @author undefined
@@ -8,3 +8,3 @@ * @link undefined
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/common","@angular/forms"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):e.ticktock=t(e.ng.core,e.ng.common,e.ng.forms)}(this,function(e,t,n){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=11)}([function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(l<3?o(s):l>3?o(t,n,s):o(t,n))||s);return l>3&&s&&Object.defineProperty(t,n,s),s},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var l=n(1),s=n(10),r=n(9),c=n(4),a=n(2),d=n(3);t.DROPDOWN_CONTROL_VALUE_ACCESSOR={provide:s.NG_VALUE_ACCESSOR,useExisting:l.forwardRef(function(){return u}),multi:!0};var p=function(){},u=function(){function e(){this.onSelect=new l.EventEmitter,this.onDeSelect=new l.EventEmitter,this.onSelectAll=new l.EventEmitter,this.onDeSelectAll=new l.EventEmitter,this.isActive=!1,this.isSelectAll=!1,this.filter=new c.ListItem,this.defaultSettings={singleSelection:!1,text:"Select",enableCheckAll:!0,selectAllText:"Select All",unSelectAllText:"UnSelect All",enableSearchFilter:!1,maxHeight:300,badgeShowLimit:999999999999,classes:"",disabled:!1,searchPlaceholderText:"Search"},this.onTouchedCallback=p,this.onChangeCallback=p}return e.prototype.ngOnInit=function(){this.settings=Object.assign(this.defaultSettings,this.settings)},e.prototype.ngDoCheck=function(){this.selectedItems&&(0==this.selectedItems.length||0==this.data.length||this.selectedItems.length<this.data.length)&&(this.isSelectAll=!1)},e.prototype.onItemClick=function(e,t,n){if(this.settings.disabled)return!1;var i=this.isSelected(e),o=this.selectedItems.length<this.settings.limitSelection;i?(this.removeSelected(e),this.onDeSelect.emit(e)):this.settings.limitSelection?o&&(this.addSelected(e),this.onSelect.emit(e)):(this.addSelected(e),this.onSelect.emit(e)),(this.isSelectAll||this.data.length>this.selectedItems.length)&&(this.isSelectAll=!1),this.data.length==this.selectedItems.length&&(this.isSelectAll=!0)},e.prototype.writeValue=function(e){if(void 0!==e&&null!==e)if(this.settings.singleSelection)try{if(e.length>1)throw this.selectedItems=[e[0]],new c.MyException(404,{msg:"Single Selection Mode, Selected Items cannot have more than one item."});this.selectedItems=e}catch(e){console.error(e.body.msg)}else this.settings.limitSelection?this.selectedItems=e.splice(0,this.settings.limitSelection):this.selectedItems=e,this.selectedItems.length===this.data.length&&this.data.length>0&&(this.isSelectAll=!0);else this.selectedItems=[]},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.trackByFn=function(e,t){return t.id},e.prototype.isSelected=function(e){var t=!1;return this.selectedItems&&this.selectedItems.forEach(function(n){e.id===n.id&&(t=!0)}),t},e.prototype.addSelected=function(e){this.settings.singleSelection?(this.selectedItems=[],this.selectedItems.push(e)):this.selectedItems.push(e),this.onChangeCallback(this.selectedItems)},e.prototype.removeSelected=function(e){var t=this;this.selectedItems&&this.selectedItems.forEach(function(n){e.id===n.id&&t.selectedItems.splice(t.selectedItems.indexOf(n),1)}),this.onChangeCallback(this.selectedItems)},e.prototype.toggleDropdown=function(e){if(this.settings.disabled)return!1;this.isActive=!this.isActive,e.preventDefault()},e.prototype.closeDropdown=function(){this.isActive=!1},e.prototype.toggleSelectAll=function(){this.isSelectAll?(this.selectedItems=[],this.isSelectAll=!1,this.onChangeCallback(this.selectedItems),this.onDeSelectAll.emit(this.selectedItems)):(this.selectedItems=[],this.selectedItems=this.data.slice(),this.isSelectAll=!0,this.onChangeCallback(this.selectedItems),this.onSelectAll.emit(this.selectedItems))},i([l.Input(),o("design:type",Array)],e.prototype,"data",void 0),i([l.Input(),o("design:type",Object)],e.prototype,"settings",void 0),i([l.Output("onSelect"),o("design:type",l.EventEmitter)],e.prototype,"onSelect",void 0),i([l.Output("onDeSelect"),o("design:type",l.EventEmitter)],e.prototype,"onDeSelect",void 0),i([l.Output("onSelectAll"),o("design:type",l.EventEmitter)],e.prototype,"onSelectAll",void 0),i([l.Output("onDeSelectAll"),o("design:type",l.EventEmitter)],e.prototype,"onDeSelectAll",void 0),e=i([l.Component({selector:"angular2-multiselect",template:n(7),host:{"[class]":"defaultSettings.classes"},styles:[n(8)],providers:[t.DROPDOWN_CONTROL_VALUE_ACCESSOR]}),o("design:paramtypes",[])],e)}();t.AngularMultiSelect=u;var f=function(){function e(){}return e=i([l.NgModule({imports:[r.CommonModule,s.FormsModule],declarations:[u,a.ClickOutsideDirective,d.ListFilterPipe],exports:[u,a.ClickOutsideDirective,d.ListFilterPipe]})],e)}();t.AngularMultiSelectModule=f},function(t,n){t.exports=e},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(l<3?o(s):l>3?o(t,n,s):o(t,n))||s);return l>3&&s&&Object.defineProperty(t,n,s),s},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var l=n(1),s=function(){function e(e){this._elementRef=e,this.clickOutside=new l.EventEmitter}return e.prototype.onClick=function(e,t){if(t){this._elementRef.nativeElement.contains(t)||this.clickOutside.emit(e)}},i([l.Output(),o("design:type",Object)],e.prototype,"clickOutside",void 0),i([l.HostListener("document:click",["$event","$event.target"]),o("design:type",Function),o("design:paramtypes",[MouseEvent,HTMLElement]),o("design:returntype",void 0)],e.prototype,"onClick",null),e=i([l.Directive({selector:"[clickOutside]"}),o("design:paramtypes",[l.ElementRef])],e)}();t.ClickOutsideDirective=s},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(l<3?o(s):l>3?o(t,n,s):o(t,n))||s);return l>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=function(){function e(){}return e.prototype.transform=function(e,t){var n=this;return e&&t?e.filter(function(e){return n.applyFilter(e,t)}):e},e.prototype.applyFilter=function(e,t){return!(t.itemName&&e.itemName&&-1===e.itemName.toLowerCase().indexOf(t.itemName.toLowerCase()))},e=i([o.Pipe({name:"listFilter",pure:!1})],e)}();t.ListFilterPipe=l},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(){}return e}();t.ListItem=i;var o=function(){function e(e,t){this.status=e,this.body=t}return e}();t.MyException=o},function(e,t,n){t=e.exports=n(6)(void 0),t.push([e.i,'.cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px; }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 25%; }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ul::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ul::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ul::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type="checkbox"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type="checkbox"]:focus + label:before,\n.pure-checkbox input[type="checkbox"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type="checkbox"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type="checkbox"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000; }\n\n.pure-checkbox input[type="checkbox"] + label:before {\n  box-sizing: content-box;\n  content: \'\';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  box-sizing: content-box;\n  content: \'\';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="checkbox"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"]:disabled:focus + label:before\n.pure-checkbox input[type="checkbox"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type="checkbox"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  content: \'\';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="radio"]:checked + label:before {\n  animation: borderscale 300ms ease-in;\n  background-color: white; }\n\n.pure-checkbox input[type="radio"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type="radio"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:before {\n  animation: borderscale 200ms ease-in;\n  background: #0079FE; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n@keyframes borderscale {\n  50% {\n    box-shadow: 0 0 0 2px #0079FE; } }\n\n.list-message {\n  text-align: center; }\n',""])},function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var l=i(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([l]).join("\n")}return[n].join("\n")}function i(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var i=n(t,e);return t[2]?"@media "+t[2]+"{"+i+"}":i}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},o=0;o<this.length;o++){var l=this[o][0];"number"==typeof l&&(i[l]=!0)}for(o=0;o<e.length;o++){var s=e[o];"number"==typeof s[0]&&i[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),t.push(s))}},t}},function(e,t){e.exports='<div class="cuppa-dropdown" (clickOutside)="closeDropdown()">\r\n    <div class="selected-list">\r\n        <div class="c-btn" (click)="toggleDropdown($event)" [ngClass]="{\'disabled\': settings.disabled}">\r\n            <span *ngIf="selectedItems?.length == 0">{{settings.text}}</span>\r\n            <span *ngIf="settings.singleSelection">\r\n                <span *ngFor="let item of selectedItems;trackBy: trackByFn;">\r\n                    {{item.itemName}}\r\n                </span>\r\n            </span>\r\n            <div class="c-list" *ngIf="selectedItems?.length > 0 && !settings.singleSelection">\r\n                <div class="c-token" *ngFor="let item of selectedItems;trackBy: trackByFn;let k = index" [hidden]="k > settings.badgeShowLimit-1">\r\n                    <span class="c-label">{{item.itemName}}</span>\r\n                    <span class="fa fa-remove" (click)="onItemClick(item,k,$event)" disabled="true"></span>\r\n                </div>\r\n            </div> \r\n            <span *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class="fa" [ngClass]="{\'fa-angle-down\': !isActive,\'fa-angle-up\':isActive}"></span>\r\n        </div>      \r\n    </div>\r\n    <div class="dropdown-list" [hidden]="!isActive">\r\n    <div class="arrow-up"></div>\r\n    <div class="list-area">\r\n        <div class="pure-checkbox select-all" *ngIf="settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection" (click)="toggleSelectAll()">\r\n            <input type="checkbox" [checked]="isSelectAll" [disabled]="settings.limitSelection == selectedItems?.length"/>\r\n            <label>\r\n                <span [hidden]="isSelectAll">{{settings.selectAllText}}</span>\r\n                <span [hidden]="!isSelectAll">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n        </div>   \r\n        <div class="list-filter" *ngIf="settings.enableSearchFilter">\r\n            <span class="fa fa-search"></span>\r\n            <input type="text" [placeholder]="settings.searchPlaceholderText" [(ngModel)]="filter.itemName">\r\n        </div> \r\n    <ul [style.maxHeight] = "settings.maxHeight+\'px\'">\r\n        <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item.itemName}}</label>\r\n        </li>\r\n    </ul>\r\n    <h5 class="list-message" *ngIf="data?.length == 0">No Data Available</h5>\r\n    </div>\r\n    </div>\r\n</div>'},function(e,t,n){var i=n(5);e.exports="string"==typeof i?i:i.toString()},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0);t.AngularMultiSelect=i.AngularMultiSelect;var o=n(2);t.ClickOutsideDirective=o.ClickOutsideDirective;var l=n(3);t.ListFilterPipe=l.ListFilterPipe;var s=n(0);t.AngularMultiSelectModule=s.AngularMultiSelectModule}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/common","@angular/forms"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):e.ticktock=t(e.ng.core,e.ng.common,e.ng.forms)}(this,function(e,t,n){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=12)}([function(t,n){t.exports=e},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,r=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(l<3?o(r):l>3?o(t,n,r):o(t,n))||r);return l>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var l=n(0),r=n(11),s=n(10),c=n(5),a=n(2),p=n(4),d=n(3);t.DROPDOWN_CONTROL_VALUE_ACCESSOR={provide:r.NG_VALUE_ACCESSOR,useExisting:l.forwardRef(function(){return f}),multi:!0};var u=function(){},f=function(){function e(){this.onSelect=new l.EventEmitter,this.onDeSelect=new l.EventEmitter,this.onSelectAll=new l.EventEmitter,this.onDeSelectAll=new l.EventEmitter,this.isActive=!1,this.isSelectAll=!1,this.filter=new c.ListItem,this.defaultSettings={singleSelection:!1,text:"Select",enableCheckAll:!0,selectAllText:"Select All",unSelectAllText:"UnSelect All",enableSearchFilter:!1,maxHeight:300,badgeShowLimit:999999999999,classes:"",disabled:!1,searchPlaceholderText:"Search"},this.onTouchedCallback=u,this.onChangeCallback=u}return e.prototype.ngOnInit=function(){this.settings=Object.assign(this.defaultSettings,this.settings)},e.prototype.ngDoCheck=function(){this.selectedItems&&(0==this.selectedItems.length||0==this.data.length||this.selectedItems.length<this.data.length)&&(this.isSelectAll=!1)},e.prototype.onItemClick=function(e,t,n){if(this.settings.disabled)return!1;var i=this.isSelected(e),o=this.selectedItems.length<this.settings.limitSelection;i?(this.removeSelected(e),this.onDeSelect.emit(e)):this.settings.limitSelection?o&&(this.addSelected(e),this.onSelect.emit(e)):(this.addSelected(e),this.onSelect.emit(e)),(this.isSelectAll||this.data.length>this.selectedItems.length)&&(this.isSelectAll=!1),this.data.length==this.selectedItems.length&&(this.isSelectAll=!0)},e.prototype.writeValue=function(e){if(void 0!==e&&null!==e)if(this.settings.singleSelection)try{if(e.length>1)throw this.selectedItems=[e[0]],new c.MyException(404,{msg:"Single Selection Mode, Selected Items cannot have more than one item."});this.selectedItems=e}catch(e){console.error(e.body.msg)}else this.settings.limitSelection?this.selectedItems=e.splice(0,this.settings.limitSelection):this.selectedItems=e,this.selectedItems.length===this.data.length&&this.data.length>0&&(this.isSelectAll=!0);else this.selectedItems=[]},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.trackByFn=function(e,t){return t.id},e.prototype.isSelected=function(e){var t=!1;return this.selectedItems&&this.selectedItems.forEach(function(n){e.id===n.id&&(t=!0)}),t},e.prototype.addSelected=function(e){this.settings.singleSelection?(this.selectedItems=[],this.selectedItems.push(e)):this.selectedItems.push(e),this.onChangeCallback(this.selectedItems)},e.prototype.removeSelected=function(e){var t=this;this.selectedItems&&this.selectedItems.forEach(function(n){e.id===n.id&&t.selectedItems.splice(t.selectedItems.indexOf(n),1)}),this.onChangeCallback(this.selectedItems)},e.prototype.toggleDropdown=function(e){if(this.settings.disabled)return!1;this.isActive=!this.isActive,e.preventDefault()},e.prototype.closeDropdown=function(){this.isActive=!1},e.prototype.toggleSelectAll=function(){this.isSelectAll?(this.selectedItems=[],this.isSelectAll=!1,this.onChangeCallback(this.selectedItems),this.onDeSelectAll.emit(this.selectedItems)):(this.selectedItems=[],this.selectedItems=this.data.slice(),this.isSelectAll=!0,this.onChangeCallback(this.selectedItems),this.onSelectAll.emit(this.selectedItems))},i([l.Input(),o("design:type",Array)],e.prototype,"data",void 0),i([l.Input(),o("design:type",Object)],e.prototype,"settings",void 0),i([l.Output("onSelect"),o("design:type",l.EventEmitter)],e.prototype,"onSelect",void 0),i([l.Output("onDeSelect"),o("design:type",l.EventEmitter)],e.prototype,"onDeSelect",void 0),i([l.Output("onSelectAll"),o("design:type",l.EventEmitter)],e.prototype,"onSelectAll",void 0),i([l.Output("onDeSelectAll"),o("design:type",l.EventEmitter)],e.prototype,"onDeSelectAll",void 0),e=i([l.Component({selector:"angular2-multiselect",template:n(8),host:{"[class]":"defaultSettings.classes"},styles:[n(9)],providers:[t.DROPDOWN_CONTROL_VALUE_ACCESSOR]}),o("design:paramtypes",[])],e)}();t.AngularMultiSelect=f;var h=function(){function e(){}return e=i([l.NgModule({imports:[s.CommonModule,r.FormsModule],declarations:[f,a.ClickOutsideDirective,p.ListFilterPipe,d.groupByPipe],exports:[f,a.ClickOutsideDirective,p.ListFilterPipe,d.groupByPipe]})],e)}();t.AngularMultiSelectModule=h},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,r=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(l<3?o(r):l>3?o(t,n,r):o(t,n))||r);return l>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var l=n(0),r=function(){function e(e){this._elementRef=e,this.clickOutside=new l.EventEmitter}return e.prototype.onClick=function(e,t){if(t){this._elementRef.nativeElement.contains(t)||this.clickOutside.emit(e)}},i([l.Output(),o("design:type",Object)],e.prototype,"clickOutside",void 0),i([l.HostListener("document:click",["$event","$event.target"]),o("design:type",Function),o("design:paramtypes",[MouseEvent,HTMLElement]),o("design:returntype",void 0)],e.prototype,"onClick",null),e=i([l.Directive({selector:"[clickOutside]"}),o("design:paramtypes",[l.ElementRef])],e)}();t.ClickOutsideDirective=r},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,r=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(l<3?o(r):l>3?o(t,n,r):o(t,n))||r);return l>3&&r&&Object.defineProperty(t,n,r),r};Object.defineProperty(t,"__esModule",{value:!0});var o=n(0),l=function(){function e(){}return e.prototype.transform=function(e,t){var n=e.reduce(function(e,n){return e[n[t]]?e[n[t]].push(n):e[n[t]]=[n],e},{});return Object.keys(n).map(function(e){return{key:e,value:n[e]}})},e=i([o.Pipe({name:"groupBy",pure:!1})],e)}();t.groupByPipe=l},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,r=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(l<3?o(r):l>3?o(t,n,r):o(t,n))||r);return l>3&&r&&Object.defineProperty(t,n,r),r};Object.defineProperty(t,"__esModule",{value:!0});var o=n(0),l=function(){function e(){}return e.prototype.transform=function(e,t){var n=this;return e&&t?e.filter(function(e){return n.applyFilter(e,t)}):e},e.prototype.applyFilter=function(e,t){return!(t.itemName&&e.itemName&&-1===e.itemName.toLowerCase().indexOf(t.itemName.toLowerCase()))},e=i([o.Pipe({name:"listFilter",pure:!1})],e)}();t.ListFilterPipe=l},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(){}return e}();t.ListItem=i;var o=function(){function e(e,t){this.status=e,this.body=t}return e}();t.MyException=o},function(e,t,n){t=e.exports=n(7)(void 0),t.push([e.i,'.cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px; }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 25%; }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ul::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ul::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ul::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type="checkbox"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type="checkbox"]:focus + label:before,\n.pure-checkbox input[type="checkbox"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type="checkbox"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type="checkbox"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300; }\n\n.pure-checkbox input[type="checkbox"] + label:before {\n  box-sizing: content-box;\n  content: \'\';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  box-sizing: content-box;\n  content: \'\';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="checkbox"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"]:disabled:focus + label:before\n.pure-checkbox input[type="checkbox"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type="checkbox"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  content: \'\';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="radio"]:checked + label:before {\n  animation: borderscale 300ms ease-in;\n  background-color: white; }\n\n.pure-checkbox input[type="radio"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type="radio"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:before {\n  animation: borderscale 200ms ease-in;\n  background: #0079FE; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n@keyframes borderscale {\n  50% {\n    box-shadow: 0 0 0 2px #0079FE; } }\n\n.list-message {\n  text-align: center; }\n\n.list-grp {\n  padding: 0 15px !important; }\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700; }\n\n.list-grp > li {\n  padding-left: 15px !important; }\n',""])},function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var l=i(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([l]).join("\n")}return[n].join("\n")}function i(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var i=n(t,e);return t[2]?"@media "+t[2]+"{"+i+"}":i}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},o=0;o<this.length;o++){var l=this[o][0];"number"==typeof l&&(i[l]=!0)}for(o=0;o<e.length;o++){var r=e[o];"number"==typeof r[0]&&i[r[0]]||(n&&!r[2]?r[2]=n:n&&(r[2]="("+r[2]+") and ("+n+")"),t.push(r))}},t}},function(e,t){e.exports='<div class="cuppa-dropdown" (clickOutside)="closeDropdown()">\r\n    <div class="selected-list">\r\n        <div class="c-btn" (click)="toggleDropdown($event)" [ngClass]="{\'disabled\': settings.disabled}">\r\n            <span *ngIf="selectedItems?.length == 0">{{settings.text}}</span>\r\n            <span *ngIf="settings.singleSelection">\r\n                <span *ngFor="let item of selectedItems;trackBy: trackByFn;">\r\n                    {{item.itemName}}\r\n                </span>\r\n            </span>\r\n            <div class="c-list" *ngIf="selectedItems?.length > 0 && !settings.singleSelection">\r\n                <div class="c-token" *ngFor="let item of selectedItems;trackBy: trackByFn;let k = index" [hidden]="k > settings.badgeShowLimit-1">\r\n                    <span class="c-label">{{item.itemName}}</span>\r\n                    <span class="fa fa-remove" (click)="onItemClick(item,k,$event)" disabled="true"></span>\r\n                </div>\r\n            </div> \r\n            <span *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class="fa" [ngClass]="{\'fa-angle-down\': !isActive,\'fa-angle-up\':isActive}"></span>\r\n        </div>      \r\n    </div>\r\n    <div class="dropdown-list" [hidden]="!isActive">\r\n    <div class="arrow-up"></div>\r\n    <div class="list-area">\r\n        <div class="pure-checkbox select-all" *ngIf="settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection" (click)="toggleSelectAll()">\r\n            <input type="checkbox" [checked]="isSelectAll" [disabled]="settings.limitSelection == selectedItems?.length"/>\r\n            <label>\r\n                <span [hidden]="isSelectAll">{{settings.selectAllText}}</span>\r\n                <span [hidden]="!isSelectAll">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n        </div>   \r\n        <div class="list-filter" *ngIf="settings.enableSearchFilter">\r\n            <span class="fa fa-search"></span>\r\n            <input type="text" [placeholder]="settings.searchPlaceholderText" [(ngModel)]="filter.itemName">\r\n        </div> \r\n    <ul *ngIf="!settings.groupBy" [style.maxHeight] = "settings.maxHeight+\'px\'">\r\n        <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item.itemName}}</label>\r\n        </li>\r\n    </ul>\r\n    <div *ngIf="settings.groupBy">\r\n    <ul *ngFor="let obj of data | groupBy:\'category\'; let i = index;" [style.maxHeight] = "settings.maxHeight+\'px\'" class="list-grp">\r\n        <h4>{{obj.key}}</h4>\r\n        <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item.itemName}}</label>\r\n        </li>\r\n    </ul>\r\n    </div>\r\n    <h5 class="list-message" *ngIf="data?.length == 0">No Data Available</h5>\r\n    </div>\r\n    </div>\r\n</div>'},function(e,t,n){var i=n(6);e.exports="string"==typeof i?i:i.toString()},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(1);t.AngularMultiSelect=i.AngularMultiSelect;var o=n(2);t.ClickOutsideDirective=o.ClickOutsideDirective;var l=n(4);t.ListFilterPipe=l.ListFilterPipe;var r=n(3);t.groupByPipe=r.groupByPipe;var s=n(1);t.AngularMultiSelectModule=s.AngularMultiSelectModule}])});
 //# sourceMappingURL=angular2-multiselect-dropdown.umd.min.js.map

angular2-multiselect-dropdown/multiselect.component.js

@@ -7,2 +7,3 @@ import { Component, NgModule, forwardRef, Input, Output, EventEmitter } from '@angular/core';
 import { ListFilterPipe } from './list-filter';
+import { groupByPipe } from './group-by';
 export var DROPDOWN_CONTROL_VALUE_ACCESSOR = {
@@ -177,5 +178,5 @@ provide: NG_VALUE_ACCESSOR,
                     selector: 'angular2-multiselect',
-                    template: "\n      <div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\n          <div class=\"selected-list\">\n              <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n                  <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n                  <span *ngIf=\"settings.singleSelection\">\n                      <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                          {{item.itemName}}\n                      </span>\n                  </span>\n                  <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                      <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n                          <span class=\"c-label\">{{item.itemName}}</span>\n                          <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\" disabled=\"true\"></span>\n                      </div>\n                  </div> \n                  <span *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n                  <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n              </div>      \n          </div>\n          <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n          <div class=\"arrow-up\"></div>\n          <div class=\"list-area\">\n              <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n                  <input type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n                  <label>\n                      <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                      <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n                  </label>\n              </div>   \n              <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                  <span class=\"fa fa-search\"></span>\n                  <input type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter.itemName\">\n              </div> \n          <ul [style.maxHeight] = \"settings.maxHeight+'px'\">\n              <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item.itemName}}</label>\n              </li>\n          </ul>\n          <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">No Data Available</h5>\n          </div>\n          </div>\n      </div>\n    ",
+                    template: "\n      <div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\n          <div class=\"selected-list\">\n              <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n                  <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n                  <span *ngIf=\"settings.singleSelection\">\n                      <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                          {{item.itemName}}\n                      </span>\n                  </span>\n                  <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                      <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n                          <span class=\"c-label\">{{item.itemName}}</span>\n                          <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\" disabled=\"true\"></span>\n                      </div>\n                  </div> \n                  <span *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n                  <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n              </div>      \n          </div>\n          <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n          <div class=\"arrow-up\"></div>\n          <div class=\"list-area\">\n              <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n                  <input type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n                  <label>\n                      <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                      <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n                  </label>\n              </div>   \n              <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                  <span class=\"fa fa-search\"></span>\n                  <input type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter.itemName\">\n              </div> \n          <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\">\n              <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item.itemName}}</label>\n              </li>\n          </ul>\n          <div *ngIf=\"settings.groupBy\">\n          <ul *ngFor=\"let obj of data | groupBy:'category'; let i = index;\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"list-grp\">\n              <h4>{{obj.key}}</h4>\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item.itemName}}</label>\n              </li>\n          </ul>\n          </div>\n          <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">No Data Available</h5>\n          </div>\n          </div>\n      </div>\n    ",
                     host: { '[class]': 'defaultSettings.classes' },
-                    styles: ["\n      .cuppa-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{float:left;padding:0px;margin:0px}.selected-list .c-list .c-token{list-style:none;padding:0px 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px;z-index:100000000}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:25%}.selected-list .c-btn{width:100%;box-shadow:0px 1px 5px #959595;padding:10px;cursor:pointer}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0px;list-style:none;overflow:auto;margin:0px}.dropdown-list ul li{padding:10px 10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ul::-webkit-scrollbar{width:8px}.dropdown-list ul::-webkit-scrollbar-thumb{background:#cccccc;border-radius:5px}.dropdown-list ul::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0px;box-shadow:0px 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0px 0px 0px 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.pure-checkbox input[type=\"checkbox\"]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=\"checkbox\"]:focus+label:before,.pure-checkbox input[type=\"checkbox\"]:hover+label:before{border-color:#0079FE;background-color:#f2f2f2}.pure-checkbox input[type=\"checkbox\"]:active+label:before{transition-duration:0s}.pure-checkbox input[type=\"checkbox\"]+label{position:relative;padding-left:2em;vertical-align:middle;user-select:none;cursor:pointer;margin:0px;color:#000}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';color:#0079FE;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';background-color:#0079FE;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform 200ms ease-out}.pure-checkbox input[type=\"checkbox\"]:disabled+label:before{border-color:#cccccc}.pure-checkbox input[type=\"checkbox\"]:disabled:focus+label:before .pure-checkbox input[type=\"checkbox\"]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=\"checkbox\"]:disabled:checked+label:before{background-color:#cccccc}.pure-checkbox input[type=\"checkbox\"]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#ffffff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{content:'';transform:rotate(-45deg) scale(1);transition:transform 200ms ease-out}.pure-checkbox input[type=\"radio\"]:checked+label:before{animation:borderscale 300ms ease-in;background-color:white}.pure-checkbox input[type=\"radio\"]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=\"radio\"]+label:before{border-radius:50%}.pure-checkbox input[type=\"checkbox\"]:checked+label:before{animation:borderscale 200ms ease-in;background:#0079FE}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{transform:rotate(-45deg) scale(1)}@keyframes borderscale{50%{box-shadow:0 0 0 2px #0079FE}}.list-message{text-align:center}\n    "],
+                    styles: ["\n      .cuppa-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{float:left;padding:0px;margin:0px}.selected-list .c-list .c-token{list-style:none;padding:0px 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px;z-index:100000000}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:25%}.selected-list .c-btn{width:100%;box-shadow:0px 1px 5px #959595;padding:10px;cursor:pointer}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0px;list-style:none;overflow:auto;margin:0px}.dropdown-list ul li{padding:10px 10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ul::-webkit-scrollbar{width:8px}.dropdown-list ul::-webkit-scrollbar-thumb{background:#cccccc;border-radius:5px}.dropdown-list ul::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0px;box-shadow:0px 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0px 0px 0px 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.pure-checkbox input[type=\"checkbox\"]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=\"checkbox\"]:focus+label:before,.pure-checkbox input[type=\"checkbox\"]:hover+label:before{border-color:#0079FE;background-color:#f2f2f2}.pure-checkbox input[type=\"checkbox\"]:active+label:before{transition-duration:0s}.pure-checkbox input[type=\"checkbox\"]+label{position:relative;padding-left:2em;vertical-align:middle;user-select:none;cursor:pointer;margin:0px;color:#000;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';color:#0079FE;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';background-color:#0079FE;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform 200ms ease-out}.pure-checkbox input[type=\"checkbox\"]:disabled+label:before{border-color:#cccccc}.pure-checkbox input[type=\"checkbox\"]:disabled:focus+label:before .pure-checkbox input[type=\"checkbox\"]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=\"checkbox\"]:disabled:checked+label:before{background-color:#cccccc}.pure-checkbox input[type=\"checkbox\"]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#ffffff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{content:'';transform:rotate(-45deg) scale(1);transition:transform 200ms ease-out}.pure-checkbox input[type=\"radio\"]:checked+label:before{animation:borderscale 300ms ease-in;background-color:white}.pure-checkbox input[type=\"radio\"]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=\"radio\"]+label:before{border-radius:50%}.pure-checkbox input[type=\"checkbox\"]:checked+label:before{animation:borderscale 200ms ease-in;background:#0079FE}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{transform:rotate(-45deg) scale(1)}@keyframes borderscale{50%{box-shadow:0 0 0 2px #0079FE}}.list-message{text-align:center}.list-grp{padding:0 15px !important}.list-grp h4{text-transform:capitalize;margin:15px 0px 0px 0px;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px !important}\n    "],
                     providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR]
@@ -203,4 +204,4 @@ },] },
                     imports: [CommonModule, FormsModule],
-                    declarations: [AngularMultiSelect, ClickOutsideDirective, ListFilterPipe],
-                    exports: [AngularMultiSelect, ClickOutsideDirective, ListFilterPipe]
+                    declarations: [AngularMultiSelect, ClickOutsideDirective, ListFilterPipe, groupByPipe],
+                    exports: [AngularMultiSelect, ClickOutsideDirective, ListFilterPipe, groupByPipe]
                 },] },
@@ -207,0 +208,0 @@ ];

angular2-multiselect-dropdown/multiselect.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DROPDOWN_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"AngularMultiSelect"},"multi":true},"AngularMultiSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"angular2-multiselect","template":"\n      <div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\n          <div class=\"selected-list\">\n              <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n                  <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n                  <span *ngIf=\"settings.singleSelection\">\n                      <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                          {{item.itemName}}\n                      </span>\n                  </span>\n                  <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                      <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n                          <span class=\"c-label\">{{item.itemName}}</span>\n                          <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\" disabled=\"true\"></span>\n                      </div>\n                  </div> \n                  <span *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n                  <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n              </div>      \n          </div>\n          <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n          <div class=\"arrow-up\"></div>\n          <div class=\"list-area\">\n              <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n                  <input type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n                  <label>\n                      <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                      <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n                  </label>\n              </div>   \n              <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                  <span class=\"fa fa-search\"></span>\n                  <input type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter.itemName\">\n              </div> \n          <ul [style.maxHeight] = \"settings.maxHeight+'px'\">\n              <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item.itemName}}</label>\n              </li>\n          </ul>\n          <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">No Data Available</h5>\n          </div>\n          </div>\n      </div>\n    ","host":{"[class]":"defaultSettings.classes","$quoted$":["[class]"]},"styles":["\n      .cuppa-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{float:left;padding:0px;margin:0px}.selected-list .c-list .c-token{list-style:none;padding:0px 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px;z-index:100000000}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:25%}.selected-list .c-btn{width:100%;box-shadow:0px 1px 5px #959595;padding:10px;cursor:pointer}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0px;list-style:none;overflow:auto;margin:0px}.dropdown-list ul li{padding:10px 10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ul::-webkit-scrollbar{width:8px}.dropdown-list ul::-webkit-scrollbar-thumb{background:#cccccc;border-radius:5px}.dropdown-list ul::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0px;box-shadow:0px 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0px 0px 0px 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.pure-checkbox input[type=\"checkbox\"]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=\"checkbox\"]:focus+label:before,.pure-checkbox input[type=\"checkbox\"]:hover+label:before{border-color:#0079FE;background-color:#f2f2f2}.pure-checkbox input[type=\"checkbox\"]:active+label:before{transition-duration:0s}.pure-checkbox input[type=\"checkbox\"]+label{position:relative;padding-left:2em;vertical-align:middle;user-select:none;cursor:pointer;margin:0px;color:#000}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';color:#0079FE;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';background-color:#0079FE;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform 200ms ease-out}.pure-checkbox input[type=\"checkbox\"]:disabled+label:before{border-color:#cccccc}.pure-checkbox input[type=\"checkbox\"]:disabled:focus+label:before .pure-checkbox input[type=\"checkbox\"]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=\"checkbox\"]:disabled:checked+label:before{background-color:#cccccc}.pure-checkbox input[type=\"checkbox\"]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#ffffff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{content:'';transform:rotate(-45deg) scale(1);transition:transform 200ms ease-out}.pure-checkbox input[type=\"radio\"]:checked+label:before{animation:borderscale 300ms ease-in;background-color:white}.pure-checkbox input[type=\"radio\"]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=\"radio\"]+label:before{border-radius:50%}.pure-checkbox input[type=\"checkbox\"]:checked+label:before{animation:borderscale 200ms ease-in;background:#0079FE}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{transform:rotate(-45deg) scale(1)}@keyframes borderscale{50%{box-shadow:0 0 0 2px #0079FE}}.list-message{text-align:center}\n    "],"providers":[{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALUE_ACCESSOR"}]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelect"]}]}],"onDeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelect"]}]}],"onSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelectAll"]}]}],"onDeSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelectAll"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"addSelected":[{"__symbolic":"method"}],"removeSelected":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"toggleSelectAll":[{"__symbolic":"method"}]}},"AngularMultiSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"}],"exports":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"DROPDOWN_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"AngularMultiSelect"},"multi":true},"AngularMultiSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"angular2-multiselect","template":"\n      <div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\n          <div class=\"selected-list\">\n              <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n                  <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n                  <span *ngIf=\"settings.singleSelection\">\n                      <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                          {{item.itemName}}\n                      </span>\n                  </span>\n                  <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                      <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n                          <span class=\"c-label\">{{item.itemName}}</span>\n                          <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\" disabled=\"true\"></span>\n                      </div>\n                  </div> \n                  <span *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n                  <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n              </div>      \n          </div>\n          <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n          <div class=\"arrow-up\"></div>\n          <div class=\"list-area\">\n              <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n                  <input type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n                  <label>\n                      <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                      <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n                  </label>\n              </div>   \n              <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                  <span class=\"fa fa-search\"></span>\n                  <input type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter.itemName\">\n              </div> \n          <ul [style.maxHeight] = \"settings.maxHeight+'px'\">\n              <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item.itemName}}</label>\n              </li>\n          </ul>\n          <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">No Data Available</h5>\n          </div>\n          </div>\n      </div>\n    ","host":{"[class]":"defaultSettings.classes"},"styles":["\n      .cuppa-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{float:left;padding:0px;margin:0px}.selected-list .c-list .c-token{list-style:none;padding:0px 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px;z-index:100000000}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:25%}.selected-list .c-btn{width:100%;box-shadow:0px 1px 5px #959595;padding:10px;cursor:pointer}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0px;list-style:none;overflow:auto;margin:0px}.dropdown-list ul li{padding:10px 10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ul::-webkit-scrollbar{width:8px}.dropdown-list ul::-webkit-scrollbar-thumb{background:#cccccc;border-radius:5px}.dropdown-list ul::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0px;box-shadow:0px 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0px 0px 0px 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.pure-checkbox input[type=\"checkbox\"]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=\"checkbox\"]:focus+label:before,.pure-checkbox input[type=\"checkbox\"]:hover+label:before{border-color:#0079FE;background-color:#f2f2f2}.pure-checkbox input[type=\"checkbox\"]:active+label:before{transition-duration:0s}.pure-checkbox input[type=\"checkbox\"]+label{position:relative;padding-left:2em;vertical-align:middle;user-select:none;cursor:pointer;margin:0px;color:#000}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';color:#0079FE;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';background-color:#0079FE;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform 200ms ease-out}.pure-checkbox input[type=\"checkbox\"]:disabled+label:before{border-color:#cccccc}.pure-checkbox input[type=\"checkbox\"]:disabled:focus+label:before .pure-checkbox input[type=\"checkbox\"]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=\"checkbox\"]:disabled:checked+label:before{background-color:#cccccc}.pure-checkbox input[type=\"checkbox\"]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#ffffff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{content:'';transform:rotate(-45deg) scale(1);transition:transform 200ms ease-out}.pure-checkbox input[type=\"radio\"]:checked+label:before{animation:borderscale 300ms ease-in;background-color:white}.pure-checkbox input[type=\"radio\"]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=\"radio\"]+label:before{border-radius:50%}.pure-checkbox input[type=\"checkbox\"]:checked+label:before{animation:borderscale 200ms ease-in;background:#0079FE}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{transform:rotate(-45deg) scale(1)}@keyframes borderscale{50%{box-shadow:0 0 0 2px #0079FE}}.list-message{text-align:center}\n    "],"providers":[{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALUE_ACCESSOR"}]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelect"]}]}],"onDeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelect"]}]}],"onSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelectAll"]}]}],"onDeSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelectAll"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"addSelected":[{"__symbolic":"method"}],"removeSelected":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"toggleSelectAll":[{"__symbolic":"method"}]}},"AngularMultiSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"}],"exports":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"}]}]}]}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DROPDOWN_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"AngularMultiSelect"},"multi":true},"AngularMultiSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"angular2-multiselect","template":"\n      <div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\n          <div class=\"selected-list\">\n              <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n                  <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n                  <span *ngIf=\"settings.singleSelection\">\n                      <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                          {{item.itemName}}\n                      </span>\n                  </span>\n                  <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                      <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n                          <span class=\"c-label\">{{item.itemName}}</span>\n                          <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\" disabled=\"true\"></span>\n                      </div>\n                  </div> \n                  <span *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n                  <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n              </div>      \n          </div>\n          <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n          <div class=\"arrow-up\"></div>\n          <div class=\"list-area\">\n              <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n                  <input type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n                  <label>\n                      <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                      <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n                  </label>\n              </div>   \n              <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                  <span class=\"fa fa-search\"></span>\n                  <input type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter.itemName\">\n              </div> \n          <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\">\n              <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item.itemName}}</label>\n              </li>\n          </ul>\n          <div *ngIf=\"settings.groupBy\">\n          <ul *ngFor=\"let obj of data | groupBy:'category'; let i = index;\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"list-grp\">\n              <h4>{{obj.key}}</h4>\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item.itemName}}</label>\n              </li>\n          </ul>\n          </div>\n          <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">No Data Available</h5>\n          </div>\n          </div>\n      </div>\n    ","host":{"[class]":"defaultSettings.classes","$quoted$":["[class]"]},"styles":["\n      .cuppa-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{float:left;padding:0px;margin:0px}.selected-list .c-list .c-token{list-style:none;padding:0px 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px;z-index:100000000}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:25%}.selected-list .c-btn{width:100%;box-shadow:0px 1px 5px #959595;padding:10px;cursor:pointer}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0px;list-style:none;overflow:auto;margin:0px}.dropdown-list ul li{padding:10px 10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ul::-webkit-scrollbar{width:8px}.dropdown-list ul::-webkit-scrollbar-thumb{background:#cccccc;border-radius:5px}.dropdown-list ul::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0px;box-shadow:0px 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0px 0px 0px 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.pure-checkbox input[type=\"checkbox\"]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=\"checkbox\"]:focus+label:before,.pure-checkbox input[type=\"checkbox\"]:hover+label:before{border-color:#0079FE;background-color:#f2f2f2}.pure-checkbox input[type=\"checkbox\"]:active+label:before{transition-duration:0s}.pure-checkbox input[type=\"checkbox\"]+label{position:relative;padding-left:2em;vertical-align:middle;user-select:none;cursor:pointer;margin:0px;color:#000;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';color:#0079FE;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';background-color:#0079FE;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform 200ms ease-out}.pure-checkbox input[type=\"checkbox\"]:disabled+label:before{border-color:#cccccc}.pure-checkbox input[type=\"checkbox\"]:disabled:focus+label:before .pure-checkbox input[type=\"checkbox\"]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=\"checkbox\"]:disabled:checked+label:before{background-color:#cccccc}.pure-checkbox input[type=\"checkbox\"]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#ffffff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{content:'';transform:rotate(-45deg) scale(1);transition:transform 200ms ease-out}.pure-checkbox input[type=\"radio\"]:checked+label:before{animation:borderscale 300ms ease-in;background-color:white}.pure-checkbox input[type=\"radio\"]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=\"radio\"]+label:before{border-radius:50%}.pure-checkbox input[type=\"checkbox\"]:checked+label:before{animation:borderscale 200ms ease-in;background:#0079FE}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{transform:rotate(-45deg) scale(1)}@keyframes borderscale{50%{box-shadow:0 0 0 2px #0079FE}}.list-message{text-align:center}.list-grp{padding:0 15px !important}.list-grp h4{text-transform:capitalize;margin:15px 0px 0px 0px;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px !important}\n    "],"providers":[{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALUE_ACCESSOR"}]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelect"]}]}],"onDeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelect"]}]}],"onSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelectAll"]}]}],"onDeSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelectAll"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"addSelected":[{"__symbolic":"method"}],"removeSelected":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"toggleSelectAll":[{"__symbolic":"method"}]}},"AngularMultiSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"},{"__symbolic":"reference","module":"./group-by","name":"groupByPipe"}],"exports":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"},{"__symbolic":"reference","module":"./group-by","name":"groupByPipe"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"DROPDOWN_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"AngularMultiSelect"},"multi":true},"AngularMultiSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"angular2-multiselect","template":"\n      <div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\n          <div class=\"selected-list\">\n              <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n                  <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n                  <span *ngIf=\"settings.singleSelection\">\n                      <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                          {{item.itemName}}\n                      </span>\n                  </span>\n                  <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n                      <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n                          <span class=\"c-label\">{{item.itemName}}</span>\n                          <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\" disabled=\"true\"></span>\n                      </div>\n                  </div> \n                  <span *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n                  <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n              </div>      \n          </div>\n          <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n          <div class=\"arrow-up\"></div>\n          <div class=\"list-area\">\n              <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n                  <input type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n                  <label>\n                      <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                      <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n                  </label>\n              </div>   \n              <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                  <span class=\"fa fa-search\"></span>\n                  <input type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter.itemName\">\n              </div> \n          <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\">\n              <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item.itemName}}</label>\n              </li>\n          </ul>\n          <div *ngIf=\"settings.groupBy\">\n          <ul *ngFor=\"let obj of data | groupBy:'category'; let i = index;\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"list-grp\">\n              <h4>{{obj.key}}</h4>\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item.itemName}}</label>\n              </li>\n          </ul>\n          </div>\n          <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">No Data Available</h5>\n          </div>\n          </div>\n      </div>\n    ","host":{"[class]":"defaultSettings.classes"},"styles":["\n      .cuppa-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{float:left;padding:0px;margin:0px}.selected-list .c-list .c-token{list-style:none;padding:0px 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px;z-index:100000000}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:25%}.selected-list .c-btn{width:100%;box-shadow:0px 1px 5px #959595;padding:10px;cursor:pointer}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0px;list-style:none;overflow:auto;margin:0px}.dropdown-list ul li{padding:10px 10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ul li:hover{background:#f5f5f5}.dropdown-list ul::-webkit-scrollbar{width:8px}.dropdown-list ul::-webkit-scrollbar-thumb{background:#cccccc;border-radius:5px}.dropdown-list ul::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0px;box-shadow:0px 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0px 0px 0px 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#888}.pure-checkbox input[type=\"checkbox\"]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=\"checkbox\"]:focus+label:before,.pure-checkbox input[type=\"checkbox\"]:hover+label:before{border-color:#0079FE;background-color:#f2f2f2}.pure-checkbox input[type=\"checkbox\"]:active+label:before{transition-duration:0s}.pure-checkbox input[type=\"checkbox\"]+label{position:relative;padding-left:2em;vertical-align:middle;user-select:none;cursor:pointer;margin:0px;color:#000;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';color:#0079FE;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';background-color:#0079FE;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform 200ms ease-out}.pure-checkbox input[type=\"checkbox\"]:disabled+label:before{border-color:#cccccc}.pure-checkbox input[type=\"checkbox\"]:disabled:focus+label:before .pure-checkbox input[type=\"checkbox\"]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=\"checkbox\"]:disabled:checked+label:before{background-color:#cccccc}.pure-checkbox input[type=\"checkbox\"]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#ffffff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{content:'';transform:rotate(-45deg) scale(1);transition:transform 200ms ease-out}.pure-checkbox input[type=\"radio\"]:checked+label:before{animation:borderscale 300ms ease-in;background-color:white}.pure-checkbox input[type=\"radio\"]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=\"radio\"]+label:before{border-radius:50%}.pure-checkbox input[type=\"checkbox\"]:checked+label:before{animation:borderscale 200ms ease-in;background:#0079FE}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{transform:rotate(-45deg) scale(1)}@keyframes borderscale{50%{box-shadow:0 0 0 2px #0079FE}}.list-message{text-align:center}.list-grp{padding:0 15px !important}.list-grp h4{text-transform:capitalize;margin:15px 0px 0px 0px;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px !important}\n    "],"providers":[{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALUE_ACCESSOR"}]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelect"]}]}],"onDeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelect"]}]}],"onSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelectAll"]}]}],"onDeSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelectAll"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"addSelected":[{"__symbolic":"method"}],"removeSelected":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"toggleSelectAll":[{"__symbolic":"method"}]}},"AngularMultiSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"},{"__symbolic":"reference","module":"./group-by","name":"groupByPipe"}],"exports":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"},{"__symbolic":"reference","module":"./group-by","name":"groupByPipe"}]}]}]}}}]

angular2-multiselect-dropdown/multiselect.interface.d.ts

@@ -14,2 +14,3 @@ export interface DropdownSettings {
     searchPlaceholderText: String;
+    groupBy?: String;
 }

index.d.ts

 export { AngularMultiSelect } from './angular2-multiselect-dropdown/multiselect.component';
 export { ClickOutsideDirective } from './angular2-multiselect-dropdown/clickOutside';
 export { ListFilterPipe } from './angular2-multiselect-dropdown/list-filter';
+export { groupByPipe } from './angular2-multiselect-dropdown/group-by';
 export { AngularMultiSelectModule } from './angular2-multiselect-dropdown/multiselect.component';

index.js

 export { AngularMultiSelect } from './angular2-multiselect-dropdown/multiselect.component';
 export { ClickOutsideDirective } from './angular2-multiselect-dropdown/clickOutside';
 export { ListFilterPipe } from './angular2-multiselect-dropdown/list-filter';
+export { groupByPipe } from './angular2-multiselect-dropdown/group-by';
 export { AngularMultiSelectModule } from './angular2-multiselect-dropdown/multiselect.component';
 //# sourceMappingURL=index.js.map

index.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelect"]},{"from":"./angular2-multiselect-dropdown/clickOutside","export":["ClickOutsideDirective"]},{"from":"./angular2-multiselect-dropdown/list-filter","export":["ListFilterPipe"]},{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelectModule"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelect"]},{"from":"./angular2-multiselect-dropdown/clickOutside","export":["ClickOutsideDirective"]},{"from":"./angular2-multiselect-dropdown/list-filter","export":["ListFilterPipe"]},{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelectModule"]}]}]
+[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelect"]},{"from":"./angular2-multiselect-dropdown/clickOutside","export":["ClickOutsideDirective"]},{"from":"./angular2-multiselect-dropdown/list-filter","export":["ListFilterPipe"]},{"from":"./angular2-multiselect-dropdown/group-by","export":["groupByPipe"]},{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelectModule"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelect"]},{"from":"./angular2-multiselect-dropdown/clickOutside","export":["ClickOutsideDirective"]},{"from":"./angular2-multiselect-dropdown/list-filter","export":["ListFilterPipe"]},{"from":"./angular2-multiselect-dropdown/group-by","export":["groupByPipe"]},{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelectModule"]}]}]

index.umd.js

 /**
  * angular2-multiselect-dropdown - undefined
- * @version v1.3.0
+ * @version v1.3.1
  * @author undefined
@@ -17,3 +17,3 @@ * @link undefined
 		root["ticktock"] = factory(root["ng"]["core"], root["ng"]["common"], root["ng"]["forms"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_10__) {
+})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_10__, __WEBPACK_EXTERNAL_MODULE_11__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -84,3 +84,3 @@ /******/ 	// The module cache
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 12);
+/******/ 	return __webpack_require__(__webpack_require__.s = 13);
 /******/ })
@@ -90,2 +90,8 @@ /************************************************************************/
 /* 0 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
+
+/***/ }),
+/* 1 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -105,8 +111,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = __webpack_require__(1);
-var forms_1 = __webpack_require__(10);
-var common_1 = __webpack_require__(9);
-var multiselect_model_1 = __webpack_require__(4);
+var core_1 = __webpack_require__(0);
+var forms_1 = __webpack_require__(11);
+var common_1 = __webpack_require__(10);
+var multiselect_model_1 = __webpack_require__(5);
 var clickOutside_1 = __webpack_require__(2);
-var list_filter_1 = __webpack_require__(3);
+var list_filter_1 = __webpack_require__(4);
+var group_by_1 = __webpack_require__(3);
 exports.DROPDOWN_CONTROL_VALUE_ACCESSOR = {
@@ -305,5 +312,5 @@ provide: forms_1.NG_VALUE_ACCESSOR,
             selector: 'angular2-multiselect',
-            template: __webpack_require__(7),
+            template: __webpack_require__(8),
             host: { '[class]': 'defaultSettings.classes' },
-            styles: [__webpack_require__(8)],
+            styles: [__webpack_require__(9)],
             providers: [exports.DROPDOWN_CONTROL_VALUE_ACCESSOR]
@@ -322,4 +329,4 @@ }),
             imports: [common_1.CommonModule, forms_1.FormsModule],
-            declarations: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, list_filter_1.ListFilterPipe],
-            exports: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, list_filter_1.ListFilterPipe]
+            declarations: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, list_filter_1.ListFilterPipe, group_by_1.groupByPipe],
+            exports: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, list_filter_1.ListFilterPipe, group_by_1.groupByPipe]
         })
@@ -333,8 +340,2 @@ ], AngularMultiSelectModule);
 /***/ }),
-/* 1 */
-/***/ (function(module, exports) {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
-
-/***/ }),
 /* 2 */
@@ -355,3 +356,3 @@ /***/ (function(module, exports, __webpack_require__) {
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = __webpack_require__(1);
+var core_1 = __webpack_require__(0);
 var ClickOutsideDirective = (function () {
@@ -405,3 +406,43 @@ function ClickOutsideDirective(_elementRef) {
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = __webpack_require__(1);
+var core_1 = __webpack_require__(0);
+var groupByPipe = (function () {
+    function groupByPipe() {
+    }
+    groupByPipe.prototype.transform = function (value, field) {
+        var groupedObj = value.reduce(function (prev, cur) {
+            if (!prev[cur[field]]) {
+                prev[cur[field]] = [cur];
+            }
+            else {
+                prev[cur[field]].push(cur);
+            }
+            return prev;
+        }, {});
+        return Object.keys(groupedObj).map(function (key) { return ({ key: key, value: groupedObj[key] }); });
+    };
+    groupByPipe = __decorate([
+        core_1.Pipe({
+            name: 'groupBy',
+            pure: false
+        })
+    ], groupByPipe);
+    return groupByPipe;
+}());
+exports.groupByPipe = groupByPipe;
+
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = __webpack_require__(0);
 var ListFilterPipe = (function () {
@@ -440,3 +481,3 @@ function ListFilterPipe() {
 /***/ }),
-/* 4 */
+/* 5 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -464,6 +505,6 @@
 /***/ }),
-/* 5 */
+/* 6 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(6)(undefined);
+exports = module.exports = __webpack_require__(7)(undefined);
 // imports
@@ -473,3 +514,3 @@
 // module
-exports.push([module.i, ".cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px; }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 25%; }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ul::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ul::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ul::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type=\"checkbox\"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type=\"checkbox\"]:focus + label:before,\n.pure-checkbox input[type=\"checkbox\"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type=\"checkbox\"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type=\"checkbox\"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:before {\n  box-sizing: content-box;\n  content: '';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  box-sizing: content-box;\n  content: '';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:focus + label:before\n.pure-checkbox input[type=\"checkbox\"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  content: '';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:before {\n  animation: borderscale 300ms ease-in;\n  background-color: white; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type=\"radio\"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:before {\n  animation: borderscale 200ms ease-in;\n  background: #0079FE; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n@keyframes borderscale {\n  50% {\n    box-shadow: 0 0 0 2px #0079FE; } }\n\n.list-message {\n  text-align: center; }\n", ""]);
+exports.push([module.i, ".cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px; }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 25%; }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ul::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ul::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ul::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type=\"checkbox\"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type=\"checkbox\"]:focus + label:before,\n.pure-checkbox input[type=\"checkbox\"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type=\"checkbox\"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type=\"checkbox\"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:before {\n  box-sizing: content-box;\n  content: '';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  box-sizing: content-box;\n  content: '';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:focus + label:before\n.pure-checkbox input[type=\"checkbox\"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  content: '';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:before {\n  animation: borderscale 300ms ease-in;\n  background-color: white; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type=\"radio\"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:before {\n  animation: borderscale 200ms ease-in;\n  background: #0079FE; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n@keyframes borderscale {\n  50% {\n    box-shadow: 0 0 0 2px #0079FE; } }\n\n.list-message {\n  text-align: center; }\n\n.list-grp {\n  padding: 0 15px !important; }\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700; }\n\n.list-grp > li {\n  padding-left: 15px !important; }\n", ""]);
 
@@ -480,3 +521,3 @@ // exports
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, exports) {
@@ -563,13 +604,13 @@
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports) {
 
-module.exports = "<div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"selected-list\">\r\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\r\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\r\n            <span *ngIf=\"settings.singleSelection\">\r\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\r\n                    {{item.itemName}}\r\n                </span>\r\n            </span>\r\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\r\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\r\n                    <span class=\"c-label\">{{item.itemName}}</span>\r\n                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\" disabled=\"true\"></span>\r\n                </div>\r\n            </div> \r\n            <span *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\r\n        </div>      \r\n    </div>\r\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\r\n    <div class=\"arrow-up\"></div>\r\n    <div class=\"list-area\">\r\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\r\n            <input type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\r\n            <label>\r\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\r\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n        </div>   \r\n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\r\n            <span class=\"fa fa-search\"></span>\r\n            <input type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter.itemName\">\r\n        </div> \r\n    <ul [style.maxHeight] = \"settings.maxHeight+'px'\">\r\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item.itemName}}</label>\r\n        </li>\r\n    </ul>\r\n    <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">No Data Available</h5>\r\n    </div>\r\n    </div>\r\n</div>"
+module.exports = "<div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"selected-list\">\r\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\r\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\r\n            <span *ngIf=\"settings.singleSelection\">\r\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\r\n                    {{item.itemName}}\r\n                </span>\r\n            </span>\r\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\r\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\r\n                    <span class=\"c-label\">{{item.itemName}}</span>\r\n                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\" disabled=\"true\"></span>\r\n                </div>\r\n            </div> \r\n            <span *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\r\n        </div>      \r\n    </div>\r\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\r\n    <div class=\"arrow-up\"></div>\r\n    <div class=\"list-area\">\r\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\r\n            <input type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\r\n            <label>\r\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\r\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n        </div>   \r\n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\r\n            <span class=\"fa fa-search\"></span>\r\n            <input type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter.itemName\">\r\n        </div> \r\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\">\r\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item.itemName}}</label>\r\n        </li>\r\n    </ul>\r\n    <div *ngIf=\"settings.groupBy\">\r\n    <ul *ngFor=\"let obj of data | groupBy:'category'; let i = index;\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"list-grp\">\r\n        <h4>{{obj.key}}</h4>\r\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item.itemName}}</label>\r\n        </li>\r\n    </ul>\r\n    </div>\r\n    <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">No Data Available</h5>\r\n    </div>\r\n    </div>\r\n</div>"
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports, __webpack_require__) {
 
 
-        var result = __webpack_require__(5);
+        var result = __webpack_require__(6);
 
@@ -584,16 +625,16 @@ if (typeof result === "string") {
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
 
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_11__;
 
 /***/ }),
-/* 11 */,
-/* 12 */
+/* 12 */,
+/* 13 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -604,9 +645,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
-var multiselect_component_1 = __webpack_require__(0);
+var multiselect_component_1 = __webpack_require__(1);
 exports.AngularMultiSelect = multiselect_component_1.AngularMultiSelect;
 var clickOutside_1 = __webpack_require__(2);
 exports.ClickOutsideDirective = clickOutside_1.ClickOutsideDirective;
-var list_filter_1 = __webpack_require__(3);
+var list_filter_1 = __webpack_require__(4);
 exports.ListFilterPipe = list_filter_1.ListFilterPipe;
-var multiselect_component_2 = __webpack_require__(0);
+var group_by_1 = __webpack_require__(3);
+exports.groupByPipe = group_by_1.groupByPipe;
+var multiselect_component_2 = __webpack_require__(1);
 exports.AngularMultiSelectModule = multiselect_component_2.AngularMultiSelectModule;
@@ -613,0 +656,0 @@

index.umd.min.js

 /**
  * angular2-multiselect-dropdown - undefined
- * @version v1.3.0
+ * @version v1.3.1
  * @author undefined
@@ -8,3 +8,3 @@ * @link undefined
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/common","@angular/forms"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):e.ticktock=t(e.ng.core,e.ng.common,e.ng.forms)}(this,function(e,t,n){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=12)}([function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(l<3?o(s):l>3?o(t,n,s):o(t,n))||s);return l>3&&s&&Object.defineProperty(t,n,s),s},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var l=n(1),s=n(10),r=n(9),c=n(4),a=n(2),d=n(3);t.DROPDOWN_CONTROL_VALUE_ACCESSOR={provide:s.NG_VALUE_ACCESSOR,useExisting:l.forwardRef(function(){return u}),multi:!0};var p=function(){},u=function(){function e(){this.onSelect=new l.EventEmitter,this.onDeSelect=new l.EventEmitter,this.onSelectAll=new l.EventEmitter,this.onDeSelectAll=new l.EventEmitter,this.isActive=!1,this.isSelectAll=!1,this.filter=new c.ListItem,this.defaultSettings={singleSelection:!1,text:"Select",enableCheckAll:!0,selectAllText:"Select All",unSelectAllText:"UnSelect All",enableSearchFilter:!1,maxHeight:300,badgeShowLimit:999999999999,classes:"",disabled:!1,searchPlaceholderText:"Search"},this.onTouchedCallback=p,this.onChangeCallback=p}return e.prototype.ngOnInit=function(){this.settings=Object.assign(this.defaultSettings,this.settings)},e.prototype.ngDoCheck=function(){this.selectedItems&&(0==this.selectedItems.length||0==this.data.length||this.selectedItems.length<this.data.length)&&(this.isSelectAll=!1)},e.prototype.onItemClick=function(e,t,n){if(this.settings.disabled)return!1;var i=this.isSelected(e),o=this.selectedItems.length<this.settings.limitSelection;i?(this.removeSelected(e),this.onDeSelect.emit(e)):this.settings.limitSelection?o&&(this.addSelected(e),this.onSelect.emit(e)):(this.addSelected(e),this.onSelect.emit(e)),(this.isSelectAll||this.data.length>this.selectedItems.length)&&(this.isSelectAll=!1),this.data.length==this.selectedItems.length&&(this.isSelectAll=!0)},e.prototype.writeValue=function(e){if(void 0!==e&&null!==e)if(this.settings.singleSelection)try{if(e.length>1)throw this.selectedItems=[e[0]],new c.MyException(404,{msg:"Single Selection Mode, Selected Items cannot have more than one item."});this.selectedItems=e}catch(e){console.error(e.body.msg)}else this.settings.limitSelection?this.selectedItems=e.splice(0,this.settings.limitSelection):this.selectedItems=e,this.selectedItems.length===this.data.length&&this.data.length>0&&(this.isSelectAll=!0);else this.selectedItems=[]},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.trackByFn=function(e,t){return t.id},e.prototype.isSelected=function(e){var t=!1;return this.selectedItems&&this.selectedItems.forEach(function(n){e.id===n.id&&(t=!0)}),t},e.prototype.addSelected=function(e){this.settings.singleSelection?(this.selectedItems=[],this.selectedItems.push(e)):this.selectedItems.push(e),this.onChangeCallback(this.selectedItems)},e.prototype.removeSelected=function(e){var t=this;this.selectedItems&&this.selectedItems.forEach(function(n){e.id===n.id&&t.selectedItems.splice(t.selectedItems.indexOf(n),1)}),this.onChangeCallback(this.selectedItems)},e.prototype.toggleDropdown=function(e){if(this.settings.disabled)return!1;this.isActive=!this.isActive,e.preventDefault()},e.prototype.closeDropdown=function(){this.isActive=!1},e.prototype.toggleSelectAll=function(){this.isSelectAll?(this.selectedItems=[],this.isSelectAll=!1,this.onChangeCallback(this.selectedItems),this.onDeSelectAll.emit(this.selectedItems)):(this.selectedItems=[],this.selectedItems=this.data.slice(),this.isSelectAll=!0,this.onChangeCallback(this.selectedItems),this.onSelectAll.emit(this.selectedItems))},i([l.Input(),o("design:type",Array)],e.prototype,"data",void 0),i([l.Input(),o("design:type",Object)],e.prototype,"settings",void 0),i([l.Output("onSelect"),o("design:type",l.EventEmitter)],e.prototype,"onSelect",void 0),i([l.Output("onDeSelect"),o("design:type",l.EventEmitter)],e.prototype,"onDeSelect",void 0),i([l.Output("onSelectAll"),o("design:type",l.EventEmitter)],e.prototype,"onSelectAll",void 0),i([l.Output("onDeSelectAll"),o("design:type",l.EventEmitter)],e.prototype,"onDeSelectAll",void 0),e=i([l.Component({selector:"angular2-multiselect",template:n(7),host:{"[class]":"defaultSettings.classes"},styles:[n(8)],providers:[t.DROPDOWN_CONTROL_VALUE_ACCESSOR]}),o("design:paramtypes",[])],e)}();t.AngularMultiSelect=u;var f=function(){function e(){}return e=i([l.NgModule({imports:[r.CommonModule,s.FormsModule],declarations:[u,a.ClickOutsideDirective,d.ListFilterPipe],exports:[u,a.ClickOutsideDirective,d.ListFilterPipe]})],e)}();t.AngularMultiSelectModule=f},function(t,n){t.exports=e},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(l<3?o(s):l>3?o(t,n,s):o(t,n))||s);return l>3&&s&&Object.defineProperty(t,n,s),s},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var l=n(1),s=function(){function e(e){this._elementRef=e,this.clickOutside=new l.EventEmitter}return e.prototype.onClick=function(e,t){if(t){this._elementRef.nativeElement.contains(t)||this.clickOutside.emit(e)}},i([l.Output(),o("design:type",Object)],e.prototype,"clickOutside",void 0),i([l.HostListener("document:click",["$event","$event.target"]),o("design:type",Function),o("design:paramtypes",[MouseEvent,HTMLElement]),o("design:returntype",void 0)],e.prototype,"onClick",null),e=i([l.Directive({selector:"[clickOutside]"}),o("design:paramtypes",[l.ElementRef])],e)}();t.ClickOutsideDirective=s},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(l<3?o(s):l>3?o(t,n,s):o(t,n))||s);return l>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=function(){function e(){}return e.prototype.transform=function(e,t){var n=this;return e&&t?e.filter(function(e){return n.applyFilter(e,t)}):e},e.prototype.applyFilter=function(e,t){return!(t.itemName&&e.itemName&&-1===e.itemName.toLowerCase().indexOf(t.itemName.toLowerCase()))},e=i([o.Pipe({name:"listFilter",pure:!1})],e)}();t.ListFilterPipe=l},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(){}return e}();t.ListItem=i;var o=function(){function e(e,t){this.status=e,this.body=t}return e}();t.MyException=o},function(e,t,n){t=e.exports=n(6)(void 0),t.push([e.i,'.cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px; }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 25%; }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ul::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ul::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ul::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type="checkbox"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type="checkbox"]:focus + label:before,\n.pure-checkbox input[type="checkbox"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type="checkbox"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type="checkbox"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000; }\n\n.pure-checkbox input[type="checkbox"] + label:before {\n  box-sizing: content-box;\n  content: \'\';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  box-sizing: content-box;\n  content: \'\';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="checkbox"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"]:disabled:focus + label:before\n.pure-checkbox input[type="checkbox"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type="checkbox"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  content: \'\';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="radio"]:checked + label:before {\n  animation: borderscale 300ms ease-in;\n  background-color: white; }\n\n.pure-checkbox input[type="radio"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type="radio"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:before {\n  animation: borderscale 200ms ease-in;\n  background: #0079FE; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n@keyframes borderscale {\n  50% {\n    box-shadow: 0 0 0 2px #0079FE; } }\n\n.list-message {\n  text-align: center; }\n',""])},function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var l=i(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([l]).join("\n")}return[n].join("\n")}function i(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var i=n(t,e);return t[2]?"@media "+t[2]+"{"+i+"}":i}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},o=0;o<this.length;o++){var l=this[o][0];"number"==typeof l&&(i[l]=!0)}for(o=0;o<e.length;o++){var s=e[o];"number"==typeof s[0]&&i[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),t.push(s))}},t}},function(e,t){e.exports='<div class="cuppa-dropdown" (clickOutside)="closeDropdown()">\r\n    <div class="selected-list">\r\n        <div class="c-btn" (click)="toggleDropdown($event)" [ngClass]="{\'disabled\': settings.disabled}">\r\n            <span *ngIf="selectedItems?.length == 0">{{settings.text}}</span>\r\n            <span *ngIf="settings.singleSelection">\r\n                <span *ngFor="let item of selectedItems;trackBy: trackByFn;">\r\n                    {{item.itemName}}\r\n                </span>\r\n            </span>\r\n            <div class="c-list" *ngIf="selectedItems?.length > 0 && !settings.singleSelection">\r\n                <div class="c-token" *ngFor="let item of selectedItems;trackBy: trackByFn;let k = index" [hidden]="k > settings.badgeShowLimit-1">\r\n                    <span class="c-label">{{item.itemName}}</span>\r\n                    <span class="fa fa-remove" (click)="onItemClick(item,k,$event)" disabled="true"></span>\r\n                </div>\r\n            </div> \r\n            <span *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class="fa" [ngClass]="{\'fa-angle-down\': !isActive,\'fa-angle-up\':isActive}"></span>\r\n        </div>      \r\n    </div>\r\n    <div class="dropdown-list" [hidden]="!isActive">\r\n    <div class="arrow-up"></div>\r\n    <div class="list-area">\r\n        <div class="pure-checkbox select-all" *ngIf="settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection" (click)="toggleSelectAll()">\r\n            <input type="checkbox" [checked]="isSelectAll" [disabled]="settings.limitSelection == selectedItems?.length"/>\r\n            <label>\r\n                <span [hidden]="isSelectAll">{{settings.selectAllText}}</span>\r\n                <span [hidden]="!isSelectAll">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n        </div>   \r\n        <div class="list-filter" *ngIf="settings.enableSearchFilter">\r\n            <span class="fa fa-search"></span>\r\n            <input type="text" [placeholder]="settings.searchPlaceholderText" [(ngModel)]="filter.itemName">\r\n        </div> \r\n    <ul [style.maxHeight] = "settings.maxHeight+\'px\'">\r\n        <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item.itemName}}</label>\r\n        </li>\r\n    </ul>\r\n    <h5 class="list-message" *ngIf="data?.length == 0">No Data Available</h5>\r\n    </div>\r\n    </div>\r\n</div>'},function(e,t,n){var i=n(5);e.exports="string"==typeof i?i:i.toString()},function(e,n){e.exports=t},function(e,t){e.exports=n},,function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0);t.AngularMultiSelect=i.AngularMultiSelect;var o=n(2);t.ClickOutsideDirective=o.ClickOutsideDirective;var l=n(3);t.ListFilterPipe=l.ListFilterPipe;var s=n(0);t.AngularMultiSelectModule=s.AngularMultiSelectModule}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/common","@angular/forms"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):e.ticktock=t(e.ng.core,e.ng.common,e.ng.forms)}(this,function(e,t,n){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=13)}([function(t,n){t.exports=e},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,r=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(l<3?o(r):l>3?o(t,n,r):o(t,n))||r);return l>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var l=n(0),r=n(11),s=n(10),c=n(5),a=n(2),p=n(4),d=n(3);t.DROPDOWN_CONTROL_VALUE_ACCESSOR={provide:r.NG_VALUE_ACCESSOR,useExisting:l.forwardRef(function(){return f}),multi:!0};var u=function(){},f=function(){function e(){this.onSelect=new l.EventEmitter,this.onDeSelect=new l.EventEmitter,this.onSelectAll=new l.EventEmitter,this.onDeSelectAll=new l.EventEmitter,this.isActive=!1,this.isSelectAll=!1,this.filter=new c.ListItem,this.defaultSettings={singleSelection:!1,text:"Select",enableCheckAll:!0,selectAllText:"Select All",unSelectAllText:"UnSelect All",enableSearchFilter:!1,maxHeight:300,badgeShowLimit:999999999999,classes:"",disabled:!1,searchPlaceholderText:"Search"},this.onTouchedCallback=u,this.onChangeCallback=u}return e.prototype.ngOnInit=function(){this.settings=Object.assign(this.defaultSettings,this.settings)},e.prototype.ngDoCheck=function(){this.selectedItems&&(0==this.selectedItems.length||0==this.data.length||this.selectedItems.length<this.data.length)&&(this.isSelectAll=!1)},e.prototype.onItemClick=function(e,t,n){if(this.settings.disabled)return!1;var i=this.isSelected(e),o=this.selectedItems.length<this.settings.limitSelection;i?(this.removeSelected(e),this.onDeSelect.emit(e)):this.settings.limitSelection?o&&(this.addSelected(e),this.onSelect.emit(e)):(this.addSelected(e),this.onSelect.emit(e)),(this.isSelectAll||this.data.length>this.selectedItems.length)&&(this.isSelectAll=!1),this.data.length==this.selectedItems.length&&(this.isSelectAll=!0)},e.prototype.writeValue=function(e){if(void 0!==e&&null!==e)if(this.settings.singleSelection)try{if(e.length>1)throw this.selectedItems=[e[0]],new c.MyException(404,{msg:"Single Selection Mode, Selected Items cannot have more than one item."});this.selectedItems=e}catch(e){console.error(e.body.msg)}else this.settings.limitSelection?this.selectedItems=e.splice(0,this.settings.limitSelection):this.selectedItems=e,this.selectedItems.length===this.data.length&&this.data.length>0&&(this.isSelectAll=!0);else this.selectedItems=[]},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.trackByFn=function(e,t){return t.id},e.prototype.isSelected=function(e){var t=!1;return this.selectedItems&&this.selectedItems.forEach(function(n){e.id===n.id&&(t=!0)}),t},e.prototype.addSelected=function(e){this.settings.singleSelection?(this.selectedItems=[],this.selectedItems.push(e)):this.selectedItems.push(e),this.onChangeCallback(this.selectedItems)},e.prototype.removeSelected=function(e){var t=this;this.selectedItems&&this.selectedItems.forEach(function(n){e.id===n.id&&t.selectedItems.splice(t.selectedItems.indexOf(n),1)}),this.onChangeCallback(this.selectedItems)},e.prototype.toggleDropdown=function(e){if(this.settings.disabled)return!1;this.isActive=!this.isActive,e.preventDefault()},e.prototype.closeDropdown=function(){this.isActive=!1},e.prototype.toggleSelectAll=function(){this.isSelectAll?(this.selectedItems=[],this.isSelectAll=!1,this.onChangeCallback(this.selectedItems),this.onDeSelectAll.emit(this.selectedItems)):(this.selectedItems=[],this.selectedItems=this.data.slice(),this.isSelectAll=!0,this.onChangeCallback(this.selectedItems),this.onSelectAll.emit(this.selectedItems))},i([l.Input(),o("design:type",Array)],e.prototype,"data",void 0),i([l.Input(),o("design:type",Object)],e.prototype,"settings",void 0),i([l.Output("onSelect"),o("design:type",l.EventEmitter)],e.prototype,"onSelect",void 0),i([l.Output("onDeSelect"),o("design:type",l.EventEmitter)],e.prototype,"onDeSelect",void 0),i([l.Output("onSelectAll"),o("design:type",l.EventEmitter)],e.prototype,"onSelectAll",void 0),i([l.Output("onDeSelectAll"),o("design:type",l.EventEmitter)],e.prototype,"onDeSelectAll",void 0),e=i([l.Component({selector:"angular2-multiselect",template:n(8),host:{"[class]":"defaultSettings.classes"},styles:[n(9)],providers:[t.DROPDOWN_CONTROL_VALUE_ACCESSOR]}),o("design:paramtypes",[])],e)}();t.AngularMultiSelect=f;var h=function(){function e(){}return e=i([l.NgModule({imports:[s.CommonModule,r.FormsModule],declarations:[f,a.ClickOutsideDirective,p.ListFilterPipe,d.groupByPipe],exports:[f,a.ClickOutsideDirective,p.ListFilterPipe,d.groupByPipe]})],e)}();t.AngularMultiSelectModule=h},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,r=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(l<3?o(r):l>3?o(t,n,r):o(t,n))||r);return l>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var l=n(0),r=function(){function e(e){this._elementRef=e,this.clickOutside=new l.EventEmitter}return e.prototype.onClick=function(e,t){if(t){this._elementRef.nativeElement.contains(t)||this.clickOutside.emit(e)}},i([l.Output(),o("design:type",Object)],e.prototype,"clickOutside",void 0),i([l.HostListener("document:click",["$event","$event.target"]),o("design:type",Function),o("design:paramtypes",[MouseEvent,HTMLElement]),o("design:returntype",void 0)],e.prototype,"onClick",null),e=i([l.Directive({selector:"[clickOutside]"}),o("design:paramtypes",[l.ElementRef])],e)}();t.ClickOutsideDirective=r},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,r=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(l<3?o(r):l>3?o(t,n,r):o(t,n))||r);return l>3&&r&&Object.defineProperty(t,n,r),r};Object.defineProperty(t,"__esModule",{value:!0});var o=n(0),l=function(){function e(){}return e.prototype.transform=function(e,t){var n=e.reduce(function(e,n){return e[n[t]]?e[n[t]].push(n):e[n[t]]=[n],e},{});return Object.keys(n).map(function(e){return{key:e,value:n[e]}})},e=i([o.Pipe({name:"groupBy",pure:!1})],e)}();t.groupByPipe=l},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,l=arguments.length,r=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(l<3?o(r):l>3?o(t,n,r):o(t,n))||r);return l>3&&r&&Object.defineProperty(t,n,r),r};Object.defineProperty(t,"__esModule",{value:!0});var o=n(0),l=function(){function e(){}return e.prototype.transform=function(e,t){var n=this;return e&&t?e.filter(function(e){return n.applyFilter(e,t)}):e},e.prototype.applyFilter=function(e,t){return!(t.itemName&&e.itemName&&-1===e.itemName.toLowerCase().indexOf(t.itemName.toLowerCase()))},e=i([o.Pipe({name:"listFilter",pure:!1})],e)}();t.ListFilterPipe=l},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(){}return e}();t.ListItem=i;var o=function(){function e(e,t){this.status=e,this.body=t}return e}();t.MyException=o},function(e,t,n){t=e.exports=n(7)(void 0),t.push([e.i,'.cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px; }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 25%; }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ul::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ul::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ul::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type="checkbox"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type="checkbox"]:focus + label:before,\n.pure-checkbox input[type="checkbox"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type="checkbox"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type="checkbox"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300; }\n\n.pure-checkbox input[type="checkbox"] + label:before {\n  box-sizing: content-box;\n  content: \'\';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  box-sizing: content-box;\n  content: \'\';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="checkbox"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"]:disabled:focus + label:before\n.pure-checkbox input[type="checkbox"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type="checkbox"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  content: \'\';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="radio"]:checked + label:before {\n  animation: borderscale 300ms ease-in;\n  background-color: white; }\n\n.pure-checkbox input[type="radio"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type="radio"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:before {\n  animation: borderscale 200ms ease-in;\n  background: #0079FE; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n@keyframes borderscale {\n  50% {\n    box-shadow: 0 0 0 2px #0079FE; } }\n\n.list-message {\n  text-align: center; }\n\n.list-grp {\n  padding: 0 15px !important; }\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700; }\n\n.list-grp > li {\n  padding-left: 15px !important; }\n',""])},function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var l=i(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([l]).join("\n")}return[n].join("\n")}function i(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var i=n(t,e);return t[2]?"@media "+t[2]+"{"+i+"}":i}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},o=0;o<this.length;o++){var l=this[o][0];"number"==typeof l&&(i[l]=!0)}for(o=0;o<e.length;o++){var r=e[o];"number"==typeof r[0]&&i[r[0]]||(n&&!r[2]?r[2]=n:n&&(r[2]="("+r[2]+") and ("+n+")"),t.push(r))}},t}},function(e,t){e.exports='<div class="cuppa-dropdown" (clickOutside)="closeDropdown()">\r\n    <div class="selected-list">\r\n        <div class="c-btn" (click)="toggleDropdown($event)" [ngClass]="{\'disabled\': settings.disabled}">\r\n            <span *ngIf="selectedItems?.length == 0">{{settings.text}}</span>\r\n            <span *ngIf="settings.singleSelection">\r\n                <span *ngFor="let item of selectedItems;trackBy: trackByFn;">\r\n                    {{item.itemName}}\r\n                </span>\r\n            </span>\r\n            <div class="c-list" *ngIf="selectedItems?.length > 0 && !settings.singleSelection">\r\n                <div class="c-token" *ngFor="let item of selectedItems;trackBy: trackByFn;let k = index" [hidden]="k > settings.badgeShowLimit-1">\r\n                    <span class="c-label">{{item.itemName}}</span>\r\n                    <span class="fa fa-remove" (click)="onItemClick(item,k,$event)" disabled="true"></span>\r\n                </div>\r\n            </div> \r\n            <span *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class="fa" [ngClass]="{\'fa-angle-down\': !isActive,\'fa-angle-up\':isActive}"></span>\r\n        </div>      \r\n    </div>\r\n    <div class="dropdown-list" [hidden]="!isActive">\r\n    <div class="arrow-up"></div>\r\n    <div class="list-area">\r\n        <div class="pure-checkbox select-all" *ngIf="settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection" (click)="toggleSelectAll()">\r\n            <input type="checkbox" [checked]="isSelectAll" [disabled]="settings.limitSelection == selectedItems?.length"/>\r\n            <label>\r\n                <span [hidden]="isSelectAll">{{settings.selectAllText}}</span>\r\n                <span [hidden]="!isSelectAll">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n        </div>   \r\n        <div class="list-filter" *ngIf="settings.enableSearchFilter">\r\n            <span class="fa fa-search"></span>\r\n            <input type="text" [placeholder]="settings.searchPlaceholderText" [(ngModel)]="filter.itemName">\r\n        </div> \r\n    <ul *ngIf="!settings.groupBy" [style.maxHeight] = "settings.maxHeight+\'px\'">\r\n        <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item.itemName}}</label>\r\n        </li>\r\n    </ul>\r\n    <div *ngIf="settings.groupBy">\r\n    <ul *ngFor="let obj of data | groupBy:\'category\'; let i = index;" [style.maxHeight] = "settings.maxHeight+\'px\'" class="list-grp">\r\n        <h4>{{obj.key}}</h4>\r\n        <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item.itemName}}</label>\r\n        </li>\r\n    </ul>\r\n    </div>\r\n    <h5 class="list-message" *ngIf="data?.length == 0">No Data Available</h5>\r\n    </div>\r\n    </div>\r\n</div>'},function(e,t,n){var i=n(6);e.exports="string"==typeof i?i:i.toString()},function(e,n){e.exports=t},function(e,t){e.exports=n},,function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(1);t.AngularMultiSelect=i.AngularMultiSelect;var o=n(2);t.ClickOutsideDirective=o.ClickOutsideDirective;var l=n(4);t.ListFilterPipe=l.ListFilterPipe;var r=n(3);t.groupByPipe=r.groupByPipe;var s=n(1);t.AngularMultiSelectModule=s.AngularMultiSelectModule}])});
 //# sourceMappingURL=index.umd.min.js.map

package.json

 {
   "name": "angular2-multiselect-dropdown",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "license": "MIT",
@@ -42,4 +42,51 @@ "angular-cli": {},
   "devDependencies": {
-
+"@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/cli": "^1.3.2",
+    "@angular/core": "^4.0.0",
+     "@angular/forms": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@compodoc/compodoc": "^1.0.0-beta.9",
+    "@types/jasmine": "^2.5.47",
+    "@types/karma": "^0.13.35",
+    "@types/node": "^7.0.18",
+    "@types/webpack": "^2.2.15",
+    "@types/webpack-env": "^1.13.0",
+    "angular2-template-loader": "^0.6.2",
+    "awesome-typescript-loader": "^3.1.3",
+    "codecov": "^2.2.0",
+    "codelyzer": "^3.0.1",
+    "concurrently": "^3.4.0",
+    "css-loader": "^0.28.1",
+    "gh-pages": "^1.0.0",
+    "gulp": "^3.9.1",
+    "gulp-copy":"^1.0.1",
+    "gulp-inline-ng2-template": "^4.0.0",
+    "istanbul-instrumenter-loader": "^2.0.0",
+    "jasmine-core": "^2.6.1",
+    "json-loader": "^0.5.4",
+    "karma": "^1.7.0",
+    "karma-chrome-launcher": "^2.1.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "^1.1.0",
+    "karma-mocha-reporter": "^2.2.3",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^2.0.3",
+    "node-sass": "^4.5.2",
+    "raw-loader": "^0.5.1",
+    "rimraf": "2.6.1",
+    "rxjs": "^5.3.1",
+    "sass-loader": "^6.0.5",
+    "source-map-explorer": "^1.3.3",
+    "to-string-loader": "^1.1.5",
+    "ts-node": "^3.0.4",
+    "tslint": "^5.2.0",
+    "typescript": "^2.3.2",
+    "webpack": "^2.5.1",
+    "webpack-angular-externals": "^1.0.2",
+    "webpack-rxjs-externals": "^1.0.0",
+    "zone.js": "^0.8.10"
   }
 }

README.md

@@ -115,3 +115,5 @@ # Angular2 Multiselect Dropdown
 | searchPlaceholderText | String | Custom text for the search placeholder text. Default value would be 'Search' | 'Search' |
+| groupBy | String | Name of the field by which the list should be grouped. | none |
 
+
 ### Callback Methods
@@ -118,0 +120,0 @@ - `onSelect` - Return the selected item on selection.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

419205

increased by8.82%

Number of package files

43

increased by10.26%

Lines of code

1836

increased by8.06%

Number of lines in readme file

138

increased by1.47%

Worsened metrics

Dev dependency count

48

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes