@stackline/angular-multiselect-dropdown 11.0.0 → 13.0.0

package/src/app/angular2-multiselect-dropdown/multiselect.component.ts

@@ -1,405 +0,0 @@
-import { Component, OnInit, NgModule, SimpleChanges, OnChanges, ViewEncapsulation, ContentChild, ViewChild, forwardRef, Input, Output, EventEmitter, ElementRef, AfterViewInit, Pipe, PipeTransform } from '@angular/core';
-import { FormsModule, NG_VALUE_ACCESSOR, ControlValueAccessor, NG_VALIDATORS, Validator, FormControl } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { ListItem, MyException } from './multiselect.model';
-import { DropdownSettings } from './multiselect.interface';
-import { ClickOutsideDirective, ScrollDirective, styleDirective } from './clickOutside';
-import { ListFilterPipe } from './list-filter';
-import { Item, Badge, TemplateRenderer } from './menu-item';
-
-export const DROPDOWN_CONTROL_VALUE_ACCESSOR: any = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => AngularMultiSelect),
-    multi: true
-};
-export const DROPDOWN_CONTROL_VALIDATION: any = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => AngularMultiSelect),
-    multi: true,
-}
-const noop = () => {
-};
-
-@Component({
-    selector: 'angular-multiselect, angular2-multiselect',
-    template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (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[settings.labelKey]}}\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 *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                    </span>\n                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                </div>\n            </div> \n            <span class=\"countplaceholder\" *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 arrow-2\"></div>\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 *ngIf=\"settings.showCheckbox\" 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 && !settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n        </div> \n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n            <span class=\"fa fa-search\"></span>\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n        </div>\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n        <span *ngIf=\"itemTempl\">\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </div>\n        </span>\n    </ul>\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n        <span *ngIf=\"itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n        </li>\n        </span>\n        <span *ngIf=\"!itemTempl\" >\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n            <label>{{item[settings.labelKey]}}</label>\n        </li>\n        </span>\n    </ul>\n    </div>\n    <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n    </div>\n    </div>\n</div>\n",
-    host: { '[class]': 'defaultSettings.classes' },
-    styles: [".stackline-dropdown {\n  position: relative;\n}\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\n.c-btn.disabled {\n  background: #ccc;\n}\n\n.c-btn:focus {\n  outline: none;\n}\n\n.selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  flex-wrap: wrap;\n  min-width: 0;\n  float: none;\n  padding: 0px;\n  margin: 0px;\n  width: auto;\n}\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  margin-top: 2px;\n  float: left;\n}\n.selected-list .c-list .c-token .c-label {\n  display: block;\n  float: left;\n  /*width: 50px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;*/\n}\n.selected-list .c-list .c-token .fa-remove {\n  margin-left: 1px;\n  font-size: 12px;\n}\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0 0 0 6px;\n  line-height: 1;\n}\n.selected-list .c-btn {\n  box-sizing: border-box;\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px 36px 10px 10px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  position: relative;\n}\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999;\n}\n.dropdown-list ul {\n  padding: 0px;\n  list-style: none;\n  overflow: auto;\n  margin: 0px;\n}\n.dropdown-list ul li {\n  padding: 10px 10px;\n  cursor: pointer;\n  text-align: left;\n}\n.dropdown-list ul li:first-child {\n  padding-top: 10px;\n}\n.dropdown-list ul li:last-child {\n  padding-bottom: 10px;\n}\n.dropdown-list ul li:hover {\n  background: #f5f5f5;\n}\n.dropdown-list ::-webkit-scrollbar {\n  width: 8px;\n}\n.dropdown-list ::-webkit-scrollbar-thumb {\n  background: #cccccc;\n  border-radius: 5px;\n}\n.dropdown-list ::-webkit-scrollbar-track {\n  background: #f2f2f2;\n}\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\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px;\n}\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\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left;\n}\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative;\n}\n.list-filter input {\n  border: 0px;\n  width: 100%;\n  height: 35px;\n  padding: 0px 0px 0px 35px;\n}\n.list-filter input:focus {\n  outline: none;\n}\n.list-filter .fa {\n  position: absolute;\n  top: 10px;\n  left: 13px;\n  color: #888;\n}\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\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\n.pure-checkbox input[type=checkbox]:active + label:before {\n  transition-duration: 0s;\n}\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\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\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\n.pure-checkbox input[type=checkbox]:disabled + label:before {\n  border-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:focus + label:before .pure-checkbox input[type=checkbox]:disabled:hover + label:before {\n  background-color: inherit;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:checked + label:before {\n  background-color: #cccccc;\n}\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\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\n.pure-checkbox input[type=radio]:checked + label:before {\n  background-color: white;\n}\n\n.pure-checkbox input[type=radio]:checked + label:after {\n  transform: scale(1);\n}\n\n.pure-checkbox input[type=radio] + label:before {\n  border-radius: 50%;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:before {\n  background: #0079FE;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.list-message {\n  text-align: center;\n}\n\n.list-grp {\n  padding: 0 15px !important;\n}\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\n.list-grp > li {\n  padding-left: 15px !important;\n}\n\n.stackline-dropdown.theme-material,\n.stackline-dropdown.theme-dark,\n.stackline-dropdown.theme-custom {\n  --ms-primary: #3f51b5;\n  --ms-primary-soft: rgba(63, 81, 181, 0.12);\n  --ms-surface: #ffffff;\n  --ms-surface-soft: #f5f7fb;\n  --ms-surface-muted: #e8eaf6;\n  --ms-outline: #c5cae9;\n  --ms-outline-strong: #7986cb;\n  --ms-on-surface: #212121;\n  --ms-on-surface-muted: #5f6368;\n  --ms-chip-bg: #e8eaf6;\n  --ms-chip-text: #303f9f;\n  --ms-chip-remove: #303f9f;\n  --ms-divider: rgba(125, 119, 134, 0.16);\n  --ms-section-bg: rgba(247, 242, 250, 0.76);\n  --ms-selected-text: var(--ms-primary);\n  --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);\n  --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);\n  display: block;\n  width: 100%;\n  color: var(--ms-on-surface);\n  font: inherit;\n}\n\n.stackline-dropdown.theme-dark {\n  --ms-primary: #8ab4f8;\n  --ms-primary-soft: rgba(138, 180, 248, 0.18);\n  --ms-surface: #151a23;\n  --ms-surface-soft: #202736;\n  --ms-surface-muted: #111722;\n  --ms-outline: #384456;\n  --ms-outline-strong: #8ab4f8;\n  --ms-on-surface: #edf2f7;\n  --ms-on-surface-muted: #aab6c5;\n  --ms-chip-bg: #263247;\n  --ms-chip-text: #d7e6ff;\n  --ms-chip-remove: #d7e6ff;\n  --ms-divider: rgba(170, 182, 197, 0.18);\n  --ms-section-bg: #101620;\n  --ms-selected-text: #d7e6ff;\n  --ms-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);\n  --ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);\n}\n\n.stackline-dropdown.theme-custom {\n  --ms-primary: var(--stackline-ms-primary, #0f766e);\n  --ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));\n  --ms-surface: var(--stackline-ms-surface, #ffffff);\n  --ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);\n  --ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);\n  --ms-outline: var(--stackline-ms-outline, #99f6e4);\n  --ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);\n  --ms-on-surface: var(--stackline-ms-on-surface, #102a2a);\n  --ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);\n  --ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);\n  --ms-chip-text: var(--stackline-ms-chip-text, #115e59);\n  --ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);\n  --ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.16));\n  --ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);\n  --ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));\n  --ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));\n  --ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));\n}\n\n.stackline-dropdown.theme-material .selected-list,\n.stackline-dropdown.theme-dark .selected-list,\n.stackline-dropdown.theme-custom .selected-list {\n  width: 100%;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn,\n.stackline-dropdown.theme-dark .selected-list .c-btn,\n.stackline-dropdown.theme-custom .selected-list .c-btn {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: 8px;\n  width: 100%;\n  min-height: 56px;\n  padding: 11px 54px 11px 16px;\n  border-radius: 18px;\n  border: 1px solid var(--ms-outline);\n  background: var(--ms-surface);\n  box-shadow: var(--ms-shadow-soft);\n  color: var(--ms-on-surface);\n  cursor: pointer;\n  font-size: inherit;\n  line-height: 1.45;\n  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn:hover,\n.stackline-dropdown.theme-dark .selected-list .c-btn:hover,\n.stackline-dropdown.theme-custom .selected-list .c-btn:hover {\n  border-color: var(--ms-outline-strong);\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-custom .selected-list .c-btn.disabled {\n  background: var(--ms-surface);\n  cursor: not-allowed;\n  opacity: 0.72;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list,\n.stackline-dropdown.theme-dark .selected-list .c-list,\n.stackline-dropdown.theme-custom .selected-list .c-list {\n  display: flex;\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  gap: 8px;\n  width: auto;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  min-height: 32px;\n  max-width: 100%;\n  padding: 6px 30px 6px 12px;\n  background: var(--ms-chip-bg);\n  color: var(--ms-chip-text);\n  border-radius: 999px;\n  box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);\n  line-height: 1.35;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  margin: 0;\n  float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label {\n  display: inline-flex;\n  align-items: center;\n  float: none;\n  min-width: 0;\n  max-width: 100%;\n  line-height: 1.3;\n  font-weight: 500;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-left: 0;\n  transform: translateY(-50%);\n  color: var(--ms-chip-remove);\n  cursor: pointer;\n}\n\n.stackline-dropdown.theme-material .selected-list .countplaceholder,\n.stackline-dropdown.theme-dark .selected-list .countplaceholder,\n.stackline-dropdown.theme-custom .selected-list .countplaceholder {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  margin: 0;\n  line-height: 1;\n  color: var(--ms-on-surface-muted);\n  font-size: 0.8rem;\n  font-weight: 600;\n}\n\n.stackline-dropdown.theme-material .selected-list .fa-angle-down,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-down,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-down,\n.stackline-dropdown.theme-material .selected-list .fa-angle-up,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-up,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-up {\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n  font-size: 15pt;\n  pointer-events: none;\n}\n\n.stackline-dropdown.theme-material .dropdown-list,\n.stackline-dropdown.theme-dark .dropdown-list,\n.stackline-dropdown.theme-custom .dropdown-list {\n  position: absolute;\n  width: 100%;\n  padding-top: 8px;\n  z-index: 99999;\n}\n\n.stackline-dropdown.theme-material .arrow-up,\n.stackline-dropdown.theme-dark .arrow-up,\n.stackline-dropdown.theme-custom .arrow-up,\n.stackline-dropdown.theme-material .arrow-down,\n.stackline-dropdown.theme-dark .arrow-down,\n.stackline-dropdown.theme-custom .arrow-down,\n.stackline-dropdown.theme-material .arrow-2,\n.stackline-dropdown.theme-dark .arrow-2,\n.stackline-dropdown.theme-custom .arrow-2 {\n  display: none;\n}\n\n.stackline-dropdown.theme-material .list-area,\n.stackline-dropdown.theme-dark .list-area,\n.stackline-dropdown.theme-custom .list-area {\n  overflow: hidden;\n  border-radius: 22px;\n  background: var(--ms-surface);\n  border: 1px solid var(--ms-outline);\n  box-shadow: var(--ms-shadow);\n  margin: 0;\n}\n\n.stackline-dropdown.theme-material .select-all,\n.stackline-dropdown.theme-dark .select-all,\n.stackline-dropdown.theme-custom .select-all {\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-section-bg);\n  text-align: left;\n}\n\n.stackline-dropdown.theme-material .list-filter,\n.stackline-dropdown.theme-dark .list-filter,\n.stackline-dropdown.theme-custom .list-filter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 52px;\n  padding-left: 48px;\n  padding-right: 44px;\n  border-bottom: 1px solid var(--ms-divider);\n  background: var(--ms-surface);\n}\n\n.stackline-dropdown.theme-material .list-filter input,\n.stackline-dropdown.theme-dark .list-filter input,\n.stackline-dropdown.theme-custom .list-filter input {\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--ms-on-surface);\n  font: inherit;\n  padding: 0;\n}\n\n.stackline-dropdown.theme-material .list-filter input::placeholder,\n.stackline-dropdown.theme-dark .list-filter input::placeholder,\n.stackline-dropdown.theme-custom .list-filter input::placeholder {\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .list-filter input:focus,\n.stackline-dropdown.theme-dark .list-filter input:focus,\n.stackline-dropdown.theme-custom .list-filter input:focus {\n  outline: none;\n}\n\n.stackline-dropdown.theme-material .list-filter .fa,\n.stackline-dropdown.theme-dark .list-filter .fa,\n.stackline-dropdown.theme-custom .list-filter .fa {\n  position: absolute;\n  top: 50%;\n  left: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  transform: translateY(-50%);\n  color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul,\n.stackline-dropdown.theme-dark .dropdown-list ul,\n.stackline-dropdown.theme-custom .dropdown-list ul {\n  list-style: none;\n  margin: 0;\n  padding: 8px;\n  overflow: auto;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li,\n.stackline-dropdown.theme-dark .dropdown-list ul li,\n.stackline-dropdown.theme-custom .dropdown-list ul li {\n  align-items: center;\n  min-height: 0;\n  margin: 4px;\n  padding: 12px 14px;\n  border-radius: 14px;\n  cursor: pointer;\n  text-align: left;\n  line-height: 1.35;\n  transition: background-color 0.16s ease, color 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:first-child {\n  padding-top: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:last-child {\n  padding-bottom: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:hover,\n.stackline-dropdown.theme-dark .dropdown-list ul li:hover,\n.stackline-dropdown.theme-custom .dropdown-list ul li:hover {\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox,\n.stackline-dropdown.theme-dark .pure-checkbox,\n.stackline-dropdown.theme-custom .pure-checkbox {\n  position: relative;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label {\n  position: relative;\n  display: block;\n  width: 100%;\n  margin: 0;\n  padding-left: 32px;\n  color: inherit;\n  cursor: pointer;\n  font-weight: 500;\n  user-select: none;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:before {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 16px;\n  height: 16px;\n  margin-top: -10px;\n  border: 2px solid var(--ms-outline-strong);\n  border-radius: 5px;\n  background: var(--ms-surface);\n  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:after {\n  box-sizing: content-box;\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 5px;\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  background: transparent;\n  transform: rotate(-45deg) scale(0);\n  transform-origin: 50%;\n  transition: transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:before {\n  border-color: var(--ms-primary);\n  background: var(--ms-primary);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:after {\n  transform: rotate(-45deg) scale(1);\n}\n\n.stackline-dropdown.theme-material .list-message,\n.stackline-dropdown.theme-dark .list-message,\n.stackline-dropdown.theme-custom .list-message {\n  margin: 0;\n  padding: 20px 14px;\n  color: var(--ms-on-surface-muted);\n  text-align: center;\n}\n"],
-    providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION]
-})
-
-export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChanges, Validator {
-
-    @Input()
-    data: Array<ListItem>;
-
-    @Input()
-    settings: DropdownSettings;
-
-    @Output('onSelect')
-    onSelect: EventEmitter<ListItem> = new EventEmitter<ListItem>();
-
-    @Output('onDeSelect')
-    onDeSelect: EventEmitter<ListItem> = new EventEmitter<ListItem>();
-
-    @Output('onSelectAll')
-    onSelectAll: EventEmitter<Array<ListItem>> = new EventEmitter<Array<ListItem>>();
-
-    @Output('onDeSelectAll')
-    onDeSelectAll: EventEmitter<Array<ListItem>> = new EventEmitter<Array<ListItem>>();
-
-    @Output('onOpen')
-    onOpen: EventEmitter<any> = new EventEmitter<any>();
-
-    @Output('onClose')
-    onClose: EventEmitter<any> = new EventEmitter<any>();
-
-    @ContentChild(Item, { static: false }) itemTempl: Item;
-    @ContentChild(Badge, { static: false }) badgeTempl: Badge;
-
-
-    @ViewChild('searchInput', { static: false }) searchInput: ElementRef;
-
-    public selectedItems: Array<ListItem>;
-    public isActive: boolean = false;
-    public isSelectAll: boolean = false;
-    public groupedData: Array<ListItem>;
-    filter: any;
-    public chunkArray:any[];
-    public scrollTop:any;
-    public chunkIndex:any[] = [];
-    public cachedItems:any[] = [];
-    public totalRows:any;
-    public itemHeight:any = 41.6;
-    public screenItemsLen:any;
-    public cachedItemsLen:any;
-    public totalHeight: any;
-    public scroller:any;
-    public maxBuffer:any;
-    public lastScrolled:any;
-    public lastRepaintY: any;
-
-    defaultSettings: DropdownSettings = {
-        singleSelection: false,
-        text: 'Select',
-        enableCheckAll: true,
-        selectAllText: 'Select All',
-        unSelectAllText: 'UnSelect All',
-        enableSearchFilter: false,
-        maxHeight: 300,
-        badgeShowLimit: 999999999999,
-        classes: '',
-        disabled: false,
-        searchPlaceholderText: 'Search',
-        showCheckbox: true,
-        noDataLabel: 'No Data Available',
-        searchAutofocus: true,
-        lazyLoading: false,
-        labelKey: 'itemName',
-        theme: 'classic',
-        skin: 'classic'
-    }
-    public parseError: boolean;
-    constructor(public _elementRef : ElementRef) {
-
-    }
-    getThemeName(): string {
-        let rawTheme: any = 'classic';
-        if (this.settings) {
-            rawTheme = this.settings.skin || this.settings.theme || 'classic';
-        }
-        let theme = String(rawTheme).toLowerCase().replace(/[^a-z0-9_-]+/g, '-');
-        theme = theme.replace(/^-+|-+$/g, '');
-        return theme || 'classic';
-    }
-    getDropdownClasses(): string {
-        let theme = this.getThemeName();
-        let className = 'theme-' + theme;
-        if (theme !== 'classic' && theme !== 'material' && theme !== 'dark' && theme !== 'custom') {
-            className += ' theme-custom';
-        }
-        if (this.isActive) {
-            className += ' is-open';
-        }
-        if (this.settings && this.settings.disabled) {
-            className += ' is-disabled';
-        }
-        return className;
-    }
-    ngOnInit() {
-        this.settings = Object.assign(this.defaultSettings, this.settings);
-        if (this.settings.groupBy) {
-            this.groupedData = this.transformData(this.data, this.settings.groupBy);
-        }
-        this.totalRows = (this.data && this.data.length);
-        this.cachedItems = this.data;
-        this.screenItemsLen = Math.ceil(this.settings.maxHeight / this.itemHeight);
-        this.cachedItemsLen = this.screenItemsLen * 3;
-        this.totalHeight = this.itemHeight * this.totalRows;
-        this.maxBuffer = this.screenItemsLen * this.itemHeight;
-        this.lastScrolled = 0;
-        this.renderChunk(0, this.cachedItemsLen / 2);
-    }
-    ngOnChanges(changes: SimpleChanges) {
-        if (changes.data && !changes.data.isFirstChange()) {
-            if (this.settings.groupBy) {
-                this.groupedData = this.transformData(this.data, this.settings.groupBy);
-                if (this.data.length == 0) {
-                    this.selectedItems = [];
-                }
-            }
-        }
-        if (changes.settings && !changes.settings.isFirstChange()) {
-            this.settings = Object.assign(this.defaultSettings, this.settings);
-        }
-    }
-    ngDoCheck() {
-        if (this.selectedItems) {
-            if (this.selectedItems.length == 0 || this.data.length == 0 || this.selectedItems.length < this.data.length) {
-                this.isSelectAll = false;
-            }
-        }
-    }
-    ngAfterViewInit() {
-        if(this.settings.lazyLoading){
-            this._elementRef.nativeElement.getElementsByClassName("lazyContainer")[0].addEventListener('scroll', this.onScroll.bind(this));
-        }
-    }
-    onItemClick(item: ListItem, index: number, evt: Event) {
-        if (this.settings.disabled) {
-            return false;
-        }
-
-        let found = this.isSelected(item);
-        let limit = this.selectedItems.length < this.settings.limitSelection ? true : false;
-
-        if (!found) {
-            if (this.settings.limitSelection) {
-                if (limit) {
-                    this.addSelected(item);
-                    this.onSelect.emit(item);
-                }
-            }
-            else {
-                this.addSelected(item);
-                this.onSelect.emit(item);
-            }
-
-        }
-        else {
-            this.removeSelected(item);
-            this.onDeSelect.emit(item);
-        }
-        if (this.isSelectAll || this.data.length > this.selectedItems.length) {
-            this.isSelectAll = false;
-        }
-        if (this.data.length == this.selectedItems.length) {
-            this.isSelectAll = true;
-        }
-    }
-    public validate(c: FormControl): any {
-        return null;
-    }
-    private onTouchedCallback: (_: any) => void = noop;
-    private onChangeCallback: (_: any) => void = noop;
-
-    writeValue(value: any) {
-        if (value !== undefined && value !== null) {
-            if (this.settings.singleSelection) {
-                try {
-
-                    if (value.length > 1) {
-                        this.selectedItems = [value[0]];
-                        throw new MyException(404, { "msg": "Single Selection Mode, Selected Items cannot have more than one item." });
-                    }
-                    else {
-                        this.selectedItems = value;
-                    }
-                }
-                catch (e) {
-                    console.error(e.body.msg);
-                }
-
-            }
-            else {
-                if (this.settings.limitSelection) {
-                    this.selectedItems = value.splice(0, this.settings.limitSelection);
-                }
-                else {
-                    this.selectedItems = value;
-                }
-                if (this.selectedItems.length === this.data.length && this.data.length > 0) {
-                    this.isSelectAll = true;
-                }
-            }
-        } else {
-            this.selectedItems = [];
-        }
-    }
-
-    //From ControlValueAccessor interface
-    registerOnChange(fn: any) {
-        this.onChangeCallback = fn;
-    }
-
-    //From ControlValueAccessor interface
-    registerOnTouched(fn: any) {
-        this.onTouchedCallback = fn;
-    }
-    trackByFn(index: number, item: ListItem) {
-        return item.id;
-    }
-    isSelected(clickedItem: ListItem) {
-        let found = false;
-        this.selectedItems && this.selectedItems.forEach(item => {
-            if (clickedItem.id === item.id) {
-                found = true;
-            }
-        });
-        return found;
-    }
-    addSelected(item: ListItem) {
-        if (this.settings.singleSelection) {
-            this.selectedItems = [];
-            this.selectedItems.push(item);
-            this.closeDropdown();
-        }
-        else
-            this.selectedItems.push(item);
-        this.onChangeCallback(this.selectedItems);
-        this.onTouchedCallback(this.selectedItems);
-    }
-    removeSelected(clickedItem: ListItem) {
-        this.selectedItems && this.selectedItems.forEach(item => {
-            if (clickedItem.id === item.id) {
-                this.selectedItems.splice(this.selectedItems.indexOf(item), 1);
-            }
-        });
-        this.onChangeCallback(this.selectedItems);
-        this.onTouchedCallback(this.selectedItems);
-    }
-    toggleDropdown(evt: any) {
-        if (this.settings.disabled) {
-            return false;
-        }
-        this.isActive = !this.isActive;
-        if (this.isActive) {
-            if (this.settings.searchAutofocus && this.settings.enableSearchFilter) {
-                setTimeout(() => {
-                    this.searchInput.nativeElement.focus();
-                }, 0);
-            }
-            this.onOpen.emit(true);
-        }
-        else {
-            this.onClose.emit(false);
-        }
-        evt.preventDefault();
-    }
-    closeDropdown() {
-        if(this.searchInput){
-            this.searchInput.nativeElement.value = "";
-            this.data = [];
-            this.data = this.cachedItems;
-            this.totalHeight = this.itemHeight * this.data.length;
-            this.totalRows = this.data.length;
-            this.updateView(this.scrollTop);
-        }
-        this.filter = "";
-        this.isActive = false;
-        this.onClose.emit(false);
-    }
-    toggleSelectAll() {
-        if (!this.isSelectAll) {
-            this.selectedItems = [];
-            this.selectedItems = this.data.slice();
-            this.isSelectAll = true;
-            this.onChangeCallback(this.selectedItems);
-            this.onTouchedCallback(this.selectedItems);
-
-            this.onSelectAll.emit(this.selectedItems);
-        }
-        else {
-            this.selectedItems = [];
-            this.isSelectAll = false;
-            this.onChangeCallback(this.selectedItems);
-            this.onTouchedCallback(this.selectedItems);
-
-            this.onDeSelectAll.emit(this.selectedItems);
-        }
-    }
-    transformData(arr: Array<ListItem>, field: any): Array<ListItem> {
-        const groupedObj: any = arr.reduce((prev: any, cur: any) => {
-            if (!prev[cur[field]]) {
-                prev[cur[field]] = [cur];
-            } else {
-                prev[cur[field]].push(cur);
-            }
-            return prev;
-        }, {});
-        const tempArr: any = [];
-        Object.keys(groupedObj).map(function (x) {
-            tempArr.push({ key: x, value: groupedObj[x] });
-        });
-        return tempArr;
-    }
-    renderChunk(fromPos:any, howMany:any) {
-        this.chunkArray = [];
-        this.chunkIndex = [];
-        var finalItem = fromPos + howMany;
-        if (finalItem > this.totalRows)
-            finalItem = this.totalRows;
-
-        for (var i = fromPos; i < finalItem; i++) {
-                this.chunkIndex.push((i * this.itemHeight) + 'px');
-                this.chunkArray.push(this.data[i]);
-        }
-    }
-    public onScroll(e:any) {
-        this.scrollTop = e.target.scrollTop;
-        this.updateView(this.scrollTop);
-
-    }
-    public updateView(scrollTop:any){
-        var scrollPos = scrollTop ? scrollTop: 0;
-         var first = (scrollPos / this.itemHeight) - this.screenItemsLen;
-        var firstTemp = ""+first;
-        first = parseInt(firstTemp) < 0 ? 0 : parseInt(firstTemp);
-            this.renderChunk(first, this.cachedItemsLen);
-            this.lastRepaintY = scrollPos;
-    }
-    public filterInfiniteList(evt: any){
-        var filteredElems:Array<any> = [];
-        this.data = this.cachedItems.slice();
-        if(evt.target.value.toString() != ''){
-          this.data.filter(function(el:any){
-              for(var prop in el){
-                  if(el[prop].toString().toLowerCase().indexOf(evt.target.value.toString().toLowerCase()) >=0 ){
-                      filteredElems.push(el);
-                      break;
-                  }
-              }
-          });
-            //this.cachedItems = this.data;
-            this.totalHeight = this.itemHeight * filteredElems.length;
-            this.totalRows = filteredElems.length;
-            this.data = [];
-            this.data = filteredElems;
-            this.updateView(this.scrollTop);
-        }
-        else if(evt.target.value.toString() == '' && this.cachedItems.length > 0){
-            this.data = [];
-            this.data = this.cachedItems;
-            this.totalHeight = this.itemHeight * this.data.length;
-            this.totalRows = this.data.length;
-            this.updateView(this.scrollTop);
-        }
-    }
-}
-
-@NgModule({
-    imports: [CommonModule, FormsModule],
-    declarations: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge],
-    exports: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge]
-})
-export class AngularMultiSelectModule { }

package/src/app/angular2-multiselect-dropdown/multiselect.interface.ts

@@ -1,22 +0,0 @@
-export interface DropdownSettings{
-    singleSelection: Boolean;
-    text: String;
-    enableCheckAll : Boolean;
-    selectAllText: String;
-    unSelectAllText: String;
-    enableSearchFilter: Boolean;
-    maxHeight: number;
-    badgeShowLimit: Number;
-    classes: String;
-    limitSelection?: Number;
-    disabled?: Boolean;
-    searchPlaceholderText: String;
-    groupBy?: String;
-    showCheckbox?: Boolean;
-    noDataLabel: string;
-    searchAutofocus?: boolean;
-    lazyLoading?: boolean;
-    labelKey?: String;
-    theme?: String;
-    skin?: String;
-}

package/src/app/angular2-multiselect-dropdown/multiselect.model.ts

@@ -1,13 +0,0 @@
-export class ListItem{
-    id: Number;
-    itemName: String
-}
-export class MyException {
-	status : number;
-	body : any;
-	constructor(status : number, body : any) {
-		this.status = status;
-		this.body = body;
-	}
-	
-}

package/tsconfig-aot.json

@@ -1,32 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["es2015", "es2017", "dom"],
-    "module": "es2015",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "declaration": true,
-    "removeComments": false,
-    "noImplicitAny": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "allowUnreachableCode": false,
-    "allowUnusedLabels": false,
-    "pretty": true,
-    "stripInternal": true,
-    "skipLibCheck": true,
-    "outDir": "dist",
-    "rootDir": "./tmp/src-inlined"
-  },
-  "files": [
-    "./tmp/src-inlined/index.ts",
-    "./tmp/src-inlined/angular2-multiselect-dropdown.ts"
-  ],
-  "angularCompilerOptions": {
-    "genDir": "dist",
-    "debug": false,
-    "skipTemplateCodegen": true,
-    "skipMetadataEmit": false,
-    "strictMetadataEmit": true
-  }
-}

package/tsconfig.json

@@ -1,36 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "noEmit": true,
-    "sourceMap": true,
-    "declaration": false,
-    "noImplicitAny": false,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "lib": [
-      "es2015",
-      "dom"
-    ],
-    "typeRoots" : [
-      "./node_modules/@types"
-    ],
-    "types": [
-      "jasmine",
-      "karma",
-      "node",
-      "webpack",
-      "webpack-env"
-    ]
-  },
-  "include": [
-    "src/app/angular2-multiselect-dropdown/**/*.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts",
-    "node_modules",
-    "demo",
-    "dist"
-  ]
-}

package/webpack-test.config.ts

@@ -1,70 +0,0 @@
-import * as webpack from 'webpack';
-import * as path from 'path';
-
-export default {
-  resolve: {
-    extensions: [ '.ts', '.js', '.json' ]
-  },
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        use: [
-          {
-            loader: 'awesome-typescript-loader',
-            options: {
-              configFileName: 'tsconfig.json'
-            }
-          },
-          {
-            loader: 'angular2-template-loader'
-          }
-        ],
-        exclude: [
-          /\.e2e\.ts$/,
-          /node_modules/
-        ]
-      },
-
-      {
-        test: /.ts$/,
-        exclude: /(node_modules|\.spec\.ts|\.e2e\.ts$)/,
-        loader: 'istanbul-instrumenter-loader',
-        enforce: 'post'
-      },
-
-      {
-        test: /\.json$/,
-        use: 'json-loader'
-      },
-
-      {
-        test: /\.css$/,
-        use: ['to-string-loader', 'css-loader']
-      },
-
-      {
-        test: /\.scss$/,
-        use: ['to-string-loader', 'css-loader', 'sass-loader']
-      },
-
-      {
-        test: /\.html$/,
-        use: 'raw-loader'
-      }
-    ]
-  },
-  plugins: [
-    new webpack.SourceMapDevToolPlugin({
-      filename: null,
-      test: /\.(ts|js)($|\?)/i
-    }),
-
-    new webpack.ContextReplacementPlugin(
-      /angular(\\|\/)core(\\|\/)@angular/,
-      path.join(__dirname, 'src')
-    ),
-
-    new webpack.NoEmitOnErrorsPlugin()
-  ]
-} as webpack.Configuration;