text: (function (global, factory) {
      typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common'), require('rxjs'), require('@tweenjs/tween.js'), require('rxjs/operators')) :
      typeof define === 'function' && define.amd ? define('angular2-multiselect-dropdown', ['exports', '@angular/core', '@angular/forms', '@angular/common', 'rxjs', '@tweenjs/tween.js', 'rxjs/operators'], factory) :
      (global = global || self, factory(global['angular2-multiselect-dropdown'] = {}, global.ng.core, global.ng.forms, global.ng.common, global.rxjs, global.tween_js, global.rxjs.operators));
  }(this, function (exports, core, forms, common, rxjs, tween_js, operators) { 'use strict';
  
      /**
       * @fileoverview added by tsickle
       * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
       */
      var MyException = /** @class */ (function () {
          function MyException(status, body) {
              this.status = status;
              this.body = body;
          }
          return MyException;
      }());
  
      /**
       * @fileoverview added by tsickle
       * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
       */
      var ClickOutsideDirective = /** @class */ (function () {
          function ClickOutsideDirective(_elementRef) {
              this._elementRef = _elementRef;
              this.clickOutside = new core.EventEmitter();
          }
          /**
           * @param {?} event
           * @param {?} targetElement
           * @return {?}
           */
          ClickOutsideDirective.prototype.onClick = /**
           * @param {?} event
           * @param {?} targetElement
           * @return {?}
           */
          function (event, targetElement) {
              if (!targetElement) {
                  return;
              }
              /** @type {?} */
              var clickedInside = this._elementRef.nativeElement.contains(targetElement);
              if (!clickedInside) {
                  this.clickOutside.emit(event);
              }
          };
          ClickOutsideDirective.decorators = [
              { type: core.Directive, args: [{
                          selector: '[clickOutside]'
                      },] }
          ];
          /** @nocollapse */
          ClickOutsideDirective.ctorParameters = function () { return [
              { type: core.ElementRef }
          ]; };
          ClickOutsideDirective.propDecorators = {
              clickOutside: [{ type: core.Output }],
              onClick: [{ type: core.HostListener, args: ['document:click', ['$event', '$event.target'],] }, { type: core.HostListener, args: ['document:touchstart', ['$event', '$event.target'],] }]
          };
          return ClickOutsideDirective;
      }());
      var ScrollDirective = /** @class */ (function () {
          function ScrollDirective(_elementRef) {
              this._elementRef = _elementRef;
              this.scroll = new core.EventEmitter();
          }
          /**
           * @param {?} event
           * @param {?} targetElement
           * @return {?}
           */
          ScrollDirective.prototype.onClick = /**
           * @param {?} event
           * @param {?} targetElement
           * @return {?}
           */
          function (event, targetElement) {
              this.scroll.emit(event);
          };
          ScrollDirective.decorators = [
              { type: core.Directive, args: [{
                          selector: '[scroll]'
                      },] }
          ];
          /** @nocollapse */
          ScrollDirective.ctorParameters = function () { return [
              { type: core.ElementRef }
          ]; };
          ScrollDirective.propDecorators = {
              scroll: [{ type: core.Output }],
              onClick: [{ type: core.HostListener, args: ['scroll', ['$event'],] }]
          };
          return ScrollDirective;
      }());
      var styleDirective = /** @class */ (function () {
          function styleDirective(el) {
              this.el = el;
          }
          /**
           * @return {?}
           */
          styleDirective.prototype.ngOnInit = /**
           * @return {?}
           */
          function () {
              this.el.nativeElement.style.top = this.styleVal;
          };
          /**
           * @return {?}
           */
          styleDirective.prototype.ngOnChanges = /**
           * @return {?}
           */
          function () {
              this.el.nativeElement.style.top = this.styleVal;
          };
          styleDirective.decorators = [
              { type: core.Directive, args: [{
                          selector: '[styleProp]'
                      },] }
          ];
          /** @nocollapse */
          styleDirective.ctorParameters = function () { return [
              { type: core.ElementRef }
          ]; };
          styleDirective.propDecorators = {
              styleVal: [{ type: core.Input, args: ['styleProp',] }]
          };
          return styleDirective;
      }());
      var setPosition = /** @class */ (function () {
          function setPosition(el) {
              this.el = el;
          }
          /**
           * @return {?}
           */
          setPosition.prototype.ngOnInit = /**
           * @return {?}
           */
          function () {
              if (this.height) {
                  this.el.nativeElement.style.bottom = parseInt(this.height + 15 + "") + 'px';
              }
          };
          /**
           * @return {?}
           */
          setPosition.prototype.ngOnChanges = /**
           * @return {?}
           */
          function () {
              if (this.height) {
                  this.el.nativeElement.style.bottom = parseInt(this.height + 15 + "") + 'px';
              }
          };
          setPosition.decorators = [
              { type: core.Directive, args: [{
                          selector: '[setPosition]'
                      },] }
          ];
          /** @nocollapse */
          setPosition.ctorParameters = function () { return [
              { type: core.ElementRef }
          ]; };
          setPosition.propDecorators = {
              height: [{ type: core.Input, args: ['setPosition',] }]
          };
          return setPosition;
      }());
  
      /**
       * @fileoverview added by tsickle
       * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
       */
      var DataService = /** @class */ (function () {
          function DataService() {
              this.filteredData = [];
              this.subject = new rxjs.Subject();
          }
          /**
           * @param {?} data
           * @return {?}
           */
          DataService.prototype.setData = /**
           * @param {?} data
           * @return {?}
           */
          function (data) {
              this.filteredData = data;
              this.subject.next(data);
          };
          /**
           * @return {?}
           */
          DataService.prototype.getData = /**
           * @return {?}
           */
          function () {
              return this.subject.asObservable();
          };
          /**
           * @return {?}
           */
          DataService.prototype.getFilteredData = /**
           * @return {?}
           */
          function () {
              if (this.filteredData && this.filteredData.length > 0) {
                  return this.filteredData;
              }
              else {
                  return [];
              }
          };
          DataService.decorators = [
              { type: core.Injectable }
          ];
          return DataService;
      }());
  
      /**
       * @fileoverview added by tsickle
       * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
       */
      var ListFilterPipe = /** @class */ (function () {
          function ListFilterPipe(ds) {
              this.ds = ds;
              this.filteredList = [];
          }
          /**
           * @param {?} items
           * @param {?} filter
           * @param {?} searchBy
           * @return {?}
           */
          ListFilterPipe.prototype.transform = /**
           * @param {?} items
           * @param {?} filter
           * @param {?} searchBy
           * @return {?}
           */
          function (items, filter, searchBy) {
              var _this = this;
              if (!items || !filter) {
                  this.ds.setData(items);
                  return items;
              }
              this.filteredList = items.filter((/**
               * @param {?} item
               * @return {?}
               */
              function (item) { return _this.applyFilter(item, filter, searchBy); }));
              this.ds.setData(this.filteredList);
              return this.filteredList;
          };
          /**
           * @param {?} item
           * @param {?} filter
           * @param {?} searchBy
           * @return {?}
           */
          ListFilterPipe.prototype.applyFilter = /**
           * @param {?} item
           * @param {?} filter
           * @param {?} searchBy
           * @return {?}
           */
          function (item, filter, searchBy) {
              /** @type {?} */
              var found = false;
              if (searchBy.length > 0) {
                  if (item.grpTitle) {
                      found = true;
                  }
                  else {
                      for (var t = 0; t < searchBy.length; t++) {
                          if (filter && item[searchBy[t]] && item[searchBy[t]] != "") {
                              if (item[searchBy[t]].toString().toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
                                  found = true;
                              }
                          }
                      }
                  }
              }
              else {
                  if (item.grpTitle) {
                      found = true;
                  }
                  else {
                      for (var prop in item) {
                          if (filter && item[prop]) {
                              if (item[prop].toString().toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
                                  found = true;
                              }
                          }
                      }
                  }
              }
              return found;
          };
          ListFilterPipe.decorators = [
              { type: core.Pipe, args: [{
                          name: 'listFilter',
                          pure: true
                      },] }
          ];
          /** @nocollapse */
          ListFilterPipe.ctorParameters = function () { return [
              { type: DataService }
          ]; };
          return ListFilterPipe;
      }());
  
      /**
       * @fileoverview added by tsickle
       * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
       */
      var Item = /** @class */ (function () {
          function Item() {
          }
          Item.decorators = [
              { type: core.Component, args: [{
                          selector: 'c-item',
                          template: ""
                      }] }
          ];
          /** @nocollapse */
          Item.ctorParameters = function () { return []; };
          Item.propDecorators = {
              template: [{ type: core.ContentChild, args: [core.TemplateRef, { static: true },] }]
          };
          return Item;
      }());
      var Badge = /** @class */ (function () {
          function Badge() {
          }
          Badge.decorators = [
              { type: core.Component, args: [{
                          selector: 'c-badge',
                          template: ""
                      }] }
          ];
          /** @nocollapse */
          Badge.ctorParameters = function () { return []; };
          Badge.propDecorators = {
              template: [{ type: core.ContentChild, args: [core.TemplateRef, { static: true },] }]
          };
          return Badge;
      }());
      var Search = /** @class */ (function () {
          function Search() {
          }
          Search.decorators = [
              { type: core.Component, args: [{
                          selector: 'c-search',
                          template: ""
                      }] }
          ];
          /** @nocollapse */
          Search.ctorParameters = function () { return []; };
          Search.propDecorators = {
              template: [{ type: core.ContentChild, args: [core.TemplateRef, { static: true },] }]
          };
          return Search;
      }());
      var TemplateRenderer = /** @class */ (function () {
          function TemplateRenderer(viewContainer) {
              this.viewContainer = viewContainer;
          }
          /**
           * @return {?}
           */
          TemplateRenderer.prototype.ngOnInit = /**
           * @return {?}
           */
          function () {
              this.view = this.viewContainer.createEmbeddedView(this.data.template, {
                  '\$implicit': this.data,
                  'item': this.item
              });
          };
          /**
           * @return {?}
           */
          TemplateRenderer.prototype.ngOnDestroy = /**
           * @return {?}
           */
          function () {
              this.view.destroy();
          };
          TemplateRenderer.decorators = [
              { type: core.Component, args: [{
                          selector: 'c-templateRenderer',
                          template: ""
                      }] }
          ];
          /** @nocollapse */
          TemplateRenderer.ctorParameters = function () { return [
              { type: core.ViewContainerRef }
          ]; };
          TemplateRenderer.propDecorators = {
              data: [{ type: core.Input }],
              item: [{ type: core.Input }]
          };
          return TemplateRenderer;
      }());
      var CIcon = /** @class */ (function () {
          function CIcon() {
          }
          CIcon.decorators = [
              { type: core.Component, args: [{
                          selector: 'c-icon',
                          template: "<svg *ngIf=\"name == 'remove'\" width=\"100%\" height=\"100%\" version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n                        viewBox=\"0 0 47.971 47.971\" style=\"enable-background:new 0 0 47.971 47.971;\" xml:space=\"preserve\">\n                        <g>\n                            <path d=\"M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88\n                                c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242\n                                C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879\n                                s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z\"/>\n                        </g>\n                    </svg>\n            <svg *ngIf=\"name == 'angle-down'\" version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t width=\"100%\" height=\"100%\" viewBox=\"0 0 612 612\" style=\"enable-background:new 0 0 612 612;\" xml:space=\"preserve\">\n<g>\n\t<g id=\"_x31_0_34_\">\n\t\t<g>\n\t\t\t<path d=\"M604.501,134.782c-9.999-10.05-26.222-10.05-36.221,0L306.014,422.558L43.721,134.782\n\t\t\t\tc-9.999-10.05-26.223-10.05-36.222,0s-9.999,26.35,0,36.399l279.103,306.241c5.331,5.357,12.422,7.652,19.386,7.296\n\t\t\t\tc6.988,0.356,14.055-1.939,19.386-7.296l279.128-306.268C614.5,161.106,614.5,144.832,604.501,134.782z\"/>\n\t\t</g>\n\t</g>\n</g>\n</svg>\n<svg *ngIf=\"name == 'angle-up'\" version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t width=\"100%\" height=\"100%\" viewBox=\"0 0 612 612\" style=\"enable-background:new 0 0 612 612;\" xml:space=\"preserve\">\n<g>\n\t<g id=\"_x39__30_\">\n\t\t<g>\n\t\t\t<path d=\"M604.501,440.509L325.398,134.956c-5.331-5.357-12.423-7.627-19.386-7.27c-6.989-0.357-14.056,1.913-19.387,7.27\n\t\t\t\tL7.499,440.509c-9.999,10.024-9.999,26.298,0,36.323s26.223,10.024,36.222,0l262.293-287.164L568.28,476.832\n\t\t\t\tc9.999,10.024,26.222,10.024,36.221,0C614.5,466.809,614.5,450.534,604.501,440.509z\"/>\n\t\t</g>\n\t</g>\n</g>\n\n</svg>\n<svg *ngIf=\"name == 'search'\" version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t width=\"100%\" height=\"100%\" viewBox=\"0 0 615.52 615.52\" style=\"enable-background:new 0 0 615.52 615.52;\"\n\t xml:space=\"preserve\">\n<g>\n\t<g>\n\t\t<g id=\"Search__x28_and_thou_shall_find_x29_\">\n\t\t\t<g>\n\t\t\t\t<path d=\"M602.531,549.736l-184.31-185.368c26.679-37.72,42.528-83.729,42.528-133.548C460.75,103.35,357.997,0,231.258,0\n\t\t\t\t\tC104.518,0,1.765,103.35,1.765,230.82c0,127.47,102.753,230.82,229.493,230.82c49.53,0,95.271-15.944,132.78-42.777\n\t\t\t\t\tl184.31,185.366c7.482,7.521,17.292,11.291,27.102,11.291c9.812,0,19.62-3.77,27.083-11.291\n\t\t\t\t\tC617.496,589.188,617.496,564.777,602.531,549.736z M355.9,319.763l-15.042,21.273L319.7,356.174\n\t\t\t\t\tc-26.083,18.658-56.667,28.526-88.442,28.526c-84.365,0-152.995-69.035-152.995-153.88c0-84.846,68.63-153.88,152.995-153.88\n\t\t\t\t\ts152.996,69.034,152.996,153.88C384.271,262.769,374.462,293.526,355.9,319.763z\"/>\n\t\t\t</g>\n\t\t</g>\n\t</g>\n</g>\n\n</svg>\n<svg *ngIf=\"name == 'clear'\" version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 51.976 51.976\" style=\"enable-background:new 0 0 51.976 51.976;\" xml:space=\"preserve\">\n<g>\n\t<path d=\"M44.373,7.603c-10.137-10.137-26.632-10.138-36.77,0c-10.138,10.138-10.137,26.632,0,36.77s26.632,10.138,36.77,0\n\t\tC54.51,34.235,54.51,17.74,44.373,7.603z M36.241,36.241c-0.781,0.781-2.047,0.781-2.828,0l-7.425-7.425l-7.778,7.778\n\t\tc-0.781,0.781-2.047,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l7.778-7.778l-7.425-7.425c-0.781-0.781-0.781-2.048,0-2.828\n\t\tc0.781-0.781,2.047-0.781,2.828,0l7.425,7.425l7.071-7.071c0.781-0.781,2.047-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828\n\t\tl-7.071,7.071l7.425,7.425C37.022,34.194,37.022,35.46,36.241,36.241z\"/>\n</g>\n</svg>",
                          encapsulation: core.ViewEncapsulation.None
                      }] }
          ];
          CIcon.propDecorators = {
              name: [{ type: core.Input }]
          };
          return CIcon;
      }());
  
      /**
       * @fileoverview added by tsickle
       * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
       */
      /**
       * @return {?}
       */
      function VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY() {
          return {
              scrollThrottlingTime: 0,
              scrollDebounceTime: 0,
              scrollAnimationTime: 750,
              checkResizeInterval: 1000,
              resizeBypassRefreshThreshold: 5,
              modifyOverflowStyleOfParentScroll: true,
              stripedTable: false
          };
      }
      var VirtualScrollerComponent = /** @class */ (function () {
          function VirtualScrollerComponent(element, renderer, zone, changeDetectorRef, platformId, options) {
              this.element = element;
              this.renderer = renderer;
              this.zone = zone;
              this.changeDetectorRef = changeDetectorRef;
              this.window = window;
              this.executeRefreshOutsideAngularZone = false;
              this._enableUnequalChildrenSizes = false;
              this.useMarginInsteadOfTranslate = false;
              this.ssrViewportWidth = 1920;
              this.ssrViewportHeight = 1080;
              this._bufferAmount = 0;
              this._items = [];
              this.compareItems = (/**
               * @param {?} item1
               * @param {?} item2
               * @return {?}
               */
              function (item1, item2) { return item1 === item2; });
              this.vsUpdate = new core.EventEmitter();
              this.vsChange = new core.EventEmitter();
              this.vsStart = new core.EventEmitter();
              this.vsEnd = new core.EventEmitter();
              this.calculatedScrollbarWidth = 0;
              this.calculatedScrollbarHeight = 0;
              this.padding = 0;
              this.previousViewPort = (/** @type {?} */ ({}));
              this.cachedPageSize = 0;
              this.previousScrollNumberElements = 0;
              this.isAngularUniversalSSR = common.isPlatformServer(platformId);
              this.scrollThrottlingTime = options.scrollThrottlingTime;
              this.scrollDebounceTime = options.scrollDebounceTime;
              this.scrollAnimationTime = options.scrollAnimationTime;
              this.scrollbarWidth = options.scrollbarWidth;
              this.scrollbarHeight = options.scrollbarHeight;
              this.checkResizeInterval = options.checkResizeInterval;
              this.resizeBypassRefreshThreshold = options.resizeBypassRefreshThreshold;
              this.modifyOverflowStyleOfParentScroll = options.modifyOverflowStyleOfParentScroll;
              this.stripedTable = options.stripedTable;
              this.horizontal = false;
              this.resetWrapGroupDimensions();
          }
          Object.defineProperty(VirtualScrollerComponent.prototype, "viewPortInfo", {
              get: /**
               * @return {?}
               */
              function () {
                  /** @type {?} */
                  var pageInfo = this.previousViewPort || (/** @type {?} */ ({}));
                  return {
                      startIndex: pageInfo.startIndex || 0,
                      endIndex: pageInfo.endIndex || 0,
                      scrollStartPosition: pageInfo.scrollStartPosition || 0,
                      scrollEndPosition: pageInfo.scrollEndPosition || 0,
                      maxScrollPosition: pageInfo.maxScrollPosition || 0,
                      startIndexWithBuffer: pageInfo.startIndexWithBuffer || 0,
                      endIndexWithBuffer: pageInfo.endIndexWithBuffer || 0
                  };
              },
              enumerable: true,
              configurable: true
          });
          Object.defineProperty(VirtualScrollerComponent.prototype, "enableUnequalChildrenSizes", {
              get: /**
               * @return {?}
               */
              function () {
                  return this._enableUnequalChildrenSizes;
              },
              set: /**
               * @param {?} value
               * @return {?}
               */
              function (value) {
                  if (this._enableUnequalChildrenSizes === value) {
                      return;
                  }
                  this._enableUnequalChildrenSizes = value;
                  this.minMeasuredChildWidth = undefined;
                  this.minMeasuredChildHeight = undefined;
              },
              enumerable: true,
              configurable: true
          });
          Object.defineProperty(VirtualScrollerComponent.prototype, "bufferAmount", {
              get: /**
               * @return {?}
               */
              function () {
                  if (typeof (this._bufferAmount) === 'number' && this._bufferAmount >= 0) {
                      return this._bufferAmount;
                  }
                  else {
                      return this.enableUnequalChildrenSizes ? 5 : 0;
                  }
              },
              set: /**
               * @param {?} value
               * @return {?}
               */
              function (value) {
                  this._bufferAmount = value;
              },
              enumerable: true,
              configurable: true
          });
          Object.defineProperty(VirtualScrollerComponent.prototype, "scrollThrottlingTime", {
              get: /**
               * @return {?}
               */
              function () {
                  return this._scrollThrottlingTime;
              },
              set: /**
               * @param {?} value
               * @return {?}
               */
              function (value) {
                  this._scrollThrottlingTime = value;
                  this.updateOnScrollFunction();
              },
              enumerable: true,
              configurable: true
          });
          Object.defineProperty(VirtualScrollerComponent.prototype, "scrollDebounceTime", {
              get: /**
               * @return {?}
               */
              function () {
                  return this._scrollDebounceTime;
              },
              set: /**
               * @param {?} value
               * @return {?}
               */
              function (value) {
                  this._scrollDebounceTime = value;
                  this.updateOnScrollFunction();
              },
              enumerable: true,
              configurable: true
          });
          /**
           * @protected
           * @return {?}
           */
          VirtualScrollerComponent.prototype.updateOnScrollFunction = /**
           * @protected
           * @return {?}
           */
          function () {
              var _this_1 = this;
              if (this.scrollDebounceTime) {
                  this.onScroll = (/** @type {?} */ (this.debounce((/**
                   * @return {?}
                   */
                  function () {
                      _this_1.refresh_internal(false);
                  }), this.scrollDebounceTime)));
              }
              else if (this.scrollThrottlingTime) {
                  this.onScroll = (/** @type {?} */ (this.throttleTrailing((/**
                   * @return {?}
                   */
                  function () {
                      _this_1.refresh_internal(false);
                  }), this.scrollThrottlingTime)));
              }
              else {
                  this.onScroll = (/**
                   * @return {?}
                   */
                  function () {
                      _this_1.refresh_internal(false);
                  });
              }
          };
          Object.defineProperty(VirtualScrollerComponent.prototype, "checkResizeInterval", {
              get: /**
               * @return {?}
               */
              function () {
                  return this._checkResizeInterval;
              },
              set: /**
               * @param {?} value
               * @return {?}
               */
              function (value) {
                  if (this._checkResizeInterval === value) {
                      return;
                  }
                  this._checkResizeInterval = value;
                  this.addScrollEventHandlers();
              },
              enumerable: true,
              configurable: true
          });
          Object.defineProperty(VirtualScrollerComponent.prototype, "items", {
              get: /**
               * @return {?}
               */
              function () {
                  return this._items;
              },
              set: /**
               * @param {?} value
               * @return {?}
               */
              function (value) {
                  if (value === this._items) {
                      return;
                  }
                  this._items = value || [];
                  this.refresh_internal(true);
              },
              enumerable: true,
              configurable: true
          });
          Object.defineProperty(VirtualScrollerComponent.prototype, "horizontal", {
              get: /**
               * @return {?}
               */
              function () {
                  return this._horizontal;
              },
              set: /**
               * @param {?} value
               * @return {?}
               */
              function (value) {
                  this._horizontal = value;
                  this.updateDirection();
              },
              enumerable: true,
              configurable: true
          });
          /**
           * @protected
           * @return {?}
           */
          VirtualScrollerComponent.prototype.revertParentOverscroll = /**
           * @protected
           * @return {?}
           */
          function () {
              /** @type {?} */
              var scrollElement = this.getScrollElement();
              if (scrollElement && this.oldParentScrollOverflow) {
                  scrollElement.style['overflow-y'] = this.oldParentScrollOverflow.y;
                  scrollElement.style['overflow-x'] = this.oldParentScrollOverflow.x;
              }
              this.oldParentScrollOverflow = undefined;
          };
          Object.defineProperty(VirtualScrollerComponent.prototype, "parentScroll", {
              get: /**
               * @return {?}
               */
              function () {
                  return this._parentScroll;
              },
              set: /**
               * @param {?} value
               * @return {?}
               */
              function (value) {
                  if (this._parentScroll === value) {
                      return;
                  }
                  this.revertParentOverscroll();
                  this._parentScroll = value;
                  this.addScrollEventHandlers();
                  /** @type {?} */
                  var scrollElement = this.getScrollElement();
                  if (this.modifyOverflowStyleOfParentScroll && scrollElement !== this.element.nativeElement) {
                      this.oldParentScrollOverflow = { x: scrollElement.style['overflow-x'], y: scrollElement.style['overflow-y'] };
                      scrollElement.style['overflow-y'] = this.horizontal ? 'visible' : 'auto';
                      scrollElement.style['overflow-x'] = this.horizontal ? 'auto' : 'visible';
                  }
              },
              enumerable: true,
              configurable: true
          });
          /**
           * @return {?}
           */
          VirtualScrollerComponent.prototype.ngOnInit = /**
           * @return {?}
           */
          function () {
              this.addScrollEventHandlers();
          };
          /**
           * @return {?}
           */
          VirtualScrollerComponent.prototype.ngOnDestroy = /**
           * @return {?}
           */
          function () {
              this.removeScrollEventHandlers();
              this.revertParentOverscroll();
          };
          /**
           * @param {?} changes
           * @return {?}
           */
          VirtualScrollerComponent.prototype.ngOnChanges = /**
           * @param {?} changes
           * @return {?}
           */
          function (changes) {
              /** @type {?} */
              var indexLengthChanged = this.cachedItemsLength !== this.items.length;
              this.cachedItemsLength = this.items.length;
              /** @type {?} */
              var firstRun = !changes.items || !changes.items.previousValue || changes.items.previousValue.length === 0;
              this.refresh_internal(indexLengthChanged || firstRun);
          };
          /**
           * @return {?}
           */
          VirtualScrollerComponent.prototype.ngDoCheck = /**
           * @return {?}
           */
          function () {
              if (this.cachedItemsLength !== this.items.length) {
                  this.cachedItemsLength = this.items.length;
                  this.refresh_internal(true);
                  return;
              }
              if (this.previousViewPort && this.viewPortItems && this.viewPortItems.length > 0) {
                  /** @type {?} */
                  var itemsArrayChanged = false;
                  for (var i = 0; i < this.viewPortItems.length; ++i) {
                      if (!this.compareItems(this.items[this.previousViewPort.startIndexWithBuffer + i], this.viewPortItems[i])) {
                          itemsArrayChanged = true;
                          break;
                      }
                  }
                  if (itemsArrayChanged) {
                      this.refresh_internal(true);
                  }
              }
          };
          /**
           * @return {?}
           */
          VirtualScrollerComponent.prototype.refresh = /**
           * @return {?}
           */
          function () {
              this.refresh_internal(true);
          };
          /**
           * @return {?}
           */
          VirtualScrollerComponent.prototype.invalidateAllCachedMeasurements = /**
           * @return {?}
           */
          function () {
              this.wrapGroupDimensions = {
                  maxChildSizePerWrapGroup: [],
                  numberOfKnownWrapGroupChildSizes: 0,
                  sumOfKnownWrapGroupChildWidths: 0,
                  sumOfKnownWrapGroupChildHeights: 0
              };
              this.minMeasuredChildWidth = undefined;
              this.minMeasuredChildHeight = undefined;
              this.refresh_internal(false);
          };
          /**
           * @param {?} item
           * @return {?}
           */
          VirtualScrollerComponent.prototype.invalidateCachedMeasurementForItem = /**
           * @param {?} item
           * @return {?}
           */
          function (item) {
              if (this.enableUnequalChildrenSizes) {
                  /** @type {?} */
                  var index = this.items && this.items.indexOf(item);
                  if (index >= 0) {
                      this.invalidateCachedMeasurementAtIndex(index);
                  }
              }
              else {
                  this.minMeasuredChildWidth = undefined;
                  this.minMeasuredChildHeight = undefined;
              }
              this.refresh_internal(false);
          };
          /**
           * @param {?} index
           * @return {?}
           */
          VirtualScrollerComponent.prototype.invalidateCachedMeasurementAtIndex = /**
           * @param {?} index
           * @return {?}
           */
          function (index) {
              if (this.enableUnequalChildrenSizes) {
                  /** @type {?} */
                  var cachedMeasurement = this.wrapGroupDimensions.maxChildSizePerWrapGroup[index];
                  if (cachedMeasurement) {
                      this.wrapGroupDimensions.maxChildSizePerWrapGroup[index] = undefined;
                      --this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;
                      this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths -= cachedMeasurement.childWidth || 0;
                      this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights -= cachedMeasurement.childHeight || 0;
                  }
              }
              else {
                  this.minMeasuredChildWidth = undefined;
                  this.minMeasuredChildHeight = undefined;
              }
              this.refresh_internal(false);
          };
          /**
           * @param {?} item
           * @param {?=} alignToBeginning
           * @param {?=} additionalOffset
           * @param {?=} animationMilliseconds
           * @param {?=} animationCompletedCallback
           * @return {?}
           */
          VirtualScrollerComponent.prototype.scrollInto = /**
           * @param {?} item
           * @param {?=} alignToBeginning
           * @param {?=} additionalOffset
           * @param {?=} animationMilliseconds
           * @param {?=} animationCompletedCallback
           * @return {?}
           */
          function (item, alignToBeginning, additionalOffset, animationMilliseconds, animationCompletedCallback) {
              if (alignToBeginning === void 0) { alignToBeginning = true; }
              if (additionalOffset === void 0) { additionalOffset = 0; }
              if (animationMilliseconds === void 0) { animationMilliseconds = undefined; }
              if (animationCompletedCallback === void 0) { animationCompletedCallback = undefined; }
              /** @type {?} */
              var index = this.items.indexOf(item);
              if (index === -1) {
                  return;
              }
              this.scrollToIndex(index, alignToBeginning, additionalOffset, animationMilliseconds, animationCompletedCallback);
          };
          /**
           * @param {?} index
           * @param {?=} alignToBeginning
           * @param {?=} additionalOffset
           * @param {?=} animationMilliseconds
           * @param {?=} animationCompletedCallback
           * @return {?}
           */
          VirtualScrollerComponent.prototype.scrollToIndex = /**
           * @param {?} index
           * @param {?=} alignToBeginning
           * @param {?=} additionalOffset
           * @param {?=} animationMilliseconds
           * @param {?=} animationCompletedCallback
           * @return {?}
           */
          function (index, alignToBeginning, additionalOffset, animationMilliseconds, animationCompletedCallback) {
              var _this_1 = this;
              if (alignToBeginning === void 0) { alignToBeginning = true; }
              if (additionalOffset === void 0) { additionalOffset = 0; }
              if (animationMilliseconds === void 0) { animationMilliseconds = undefined; }
              if (animationCompletedCallback === void 0) { animationCompletedCallback = undefined; }
              /** @type {?} */
              var maxRetries = 5;
              /** @type {?} */
              var retryIfNeeded = (/**
               * @return {?}
               */
              function () {
                  --maxRetries;
                  if (maxRetries <= 0) {
                      if (animationCompletedCallback) {
                          animationCompletedCallback();
                      }
                      return;
                  }
                  /** @type {?} */
                  var dimensions = _this_1.calculateDimensions();
                  /** @type {?} */
                  var desiredStartIndex = Math.min(Math.max(index, 0), dimensions.itemCount - 1);
                  if (_this_1.previousViewPort.startIndex === desiredStartIndex) {
                      if (animationCompletedCallback) {
                          animationCompletedCallback();
                      }
                      return;
                  }
                  _this_1.scrollToIndex_internal(index, alignToBeginning, additionalOffset, 0, retryIfNeeded);
              });
              this.scrollToIndex_internal(index, alignToBeginning, additionalOffset, animationMilliseconds, retryIfNeeded);
          };
          /**
           * @protected
           * @param {?} index
           * @param {?=} alignToBeginning
           * @param {?=} additionalOffset
           * @param {?=} animationMilliseconds
           * @param {?=} animationCompletedCallback
           * @return {?}
           */
          VirtualScrollerComponent.prototype.scrollToIndex_internal = /**
           * @protected
           * @param {?} index
           * @param {?=} alignToBeginning
           * @param {?=} additionalOffset
           * @param {?=} animationMilliseconds
           * @param {?=} animationCompletedCallback
           * @return {?}
           */
          function (index, alignToBeginning, additionalOffset, animationMilliseconds, animationCompletedCallback) {
              if (alignToBeginning === void 0) { alignToBeginning = true; }
              if (additionalOffset === void 0) { additionalOffset = 0; }
              if (animationMilliseconds === void 0) { animationMilliseconds = undefined; }
              if (animationCompletedCallback === void 0) { animationCompletedCallback = undefined; }
              animationMilliseconds = animationMilliseconds === undefined ? this.scrollAnimationTime : animationMilliseconds;
              /** @type {?} */
              var dimensions = this.calculateDimensions();
              /** @type {?} */
              var scroll = this.calculatePadding(index, dimensions) + additionalOffset;
              if (!alignToBeginning) {
                  scroll -= dimensions.wrapGroupsPerPage * dimensions[this._childScrollDim];
              }
              this.scrollToPosition(scroll, animationMilliseconds, animationCompletedCallback);
          };
          /**
           * @param {?} scrollPosition
           * @param {?=} animationMilliseconds
           * @param {?=} animationCompletedCallback
           * @return {?}
           */
          VirtualScrollerComponent.prototype.scrollToPosition = /**
           * @param {?} scrollPosition
           * @param {?=} animationMilliseconds
           * @param {?=} animationCompletedCallback
           * @return {?}
           */
          function (scrollPosition, animationMilliseconds, animationCompletedCallback) {
              var _this_1 = this;
              if (animationMilliseconds === void 0) { animationMilliseconds = undefined; }
              if (animationCompletedCallback === void 0) { animationCompletedCallback = undefined; }
              scrollPosition += this.getElementsOffset();
              animationMilliseconds = animationMilliseconds === undefined ? this.scrollAnimationTime : animationMilliseconds;
              /** @type {?} */
              var scrollElement = this.getScrollElement();
              /** @type {?} */
              var animationRequest;
              if (this.currentTween) {
                  this.currentTween.stop();
                  this.currentTween = undefined;
              }
              if (!animationMilliseconds) {
                  this.renderer.setProperty(scrollElement, this._scrollType, scrollPosition);
                  this.refresh_internal(false, animationCompletedCallback);
                  return;
              }
              /** @type {?} */
              var tweenConfigObj = { scrollPosition: scrollElement[this._scrollType] };
              /** @type {?} */
              var newTween = new tween_js.Tween(tweenConfigObj)
                  .to({ scrollPosition: scrollPosition }, animationMilliseconds)
                  .easing(tween_js.Easing.Quadratic.Out)
                  .onUpdate((/**
               * @param {?} data
               * @return {?}
               */
              function (data) {
                  if (isNaN(data.scrollPosition)) {
                      return;
                  }
                  _this_1.renderer.setProperty(scrollElement, _this_1._scrollType, data.scrollPosition);
                  _this_1.refresh_internal(false);
              }))
                  .onStop((/**
               * @return {?}
               */
              function () {
                  cancelAnimationFrame(animationRequest);
              }))
                  .start();
              /** @type {?} */
              var animate = (/**
               * @param {?=} time
               * @return {?}
               */
              function (time) {
                  if (!newTween["isPlaying"]()) {
                      return;
                  }
                  newTween.update(time);
                  if (tweenConfigObj.scrollPosition === scrollPosition) {
                      _this_1.refresh_internal(false, animationCompletedCallback);
                      return;
                  }
                  _this_1.zone.runOutsideAngular((/**
                   * @return {?}
                   */
                  function () {
                      animationRequest = requestAnimationFrame(animate);
                  }));
              });
              animate();
              this.currentTween = newTween;
          };
          /**
           * @protected
           * @param {?} element
           * @return {?}
           */
          VirtualScrollerComponent.prototype.getElementSize = /**
           * @protected
           * @param {?} element
           * @return {?}
           */
          function (element) {
              /** @type {?} */
              var result = element.getBoundingClientRect();
              /** @type {?} */
              var styles = getComputedStyle(element);
              /** @type {?} */
              var marginTop = parseInt(styles['margin-top'], 10) || 0;
              /** @type {?} */
              var marginBottom = parseInt(styles['margin-bottom'], 10) || 0;
              /** @type {?} */
              var marginLeft = parseInt(styles['margin-left'], 10) || 0;
              /** @type {?} */
              var marginRight = parseInt(styles['margin-right'], 10) || 0;
              return {
                  top: result.top + marginTop,
                  bottom: result.bottom + marginBottom,
                  left: result.left + marginLeft,
                  right: result.right + marginRight,
                  width: result.width + marginLeft + marginRight,
                  height: result.height + marginTop + marginBottom
              };
          };
          /**
           * @protected
           * @return {?}
           */
          VirtualScrollerComponent.prototype.checkScrollElementResized = /**
           * @protected
           * @return {?}
           */
          function () {
              /** @type {?} */
              var boundingRect = this.getElementSize(this.getScrollElement());
              /** @type {?} */
              var sizeChanged;
              if (!this.previousScrollBoundingRect) {
                  sizeChanged = true;
              }
              else {
                  /** @type {?} */
                  var widthChange = Math.abs(boundingRect.width - this.previousScrollBoundingRect.width);
                  /** @type {?} */
                  var heightChange = Math.abs(boundingRect.height - this.previousScrollBoundingRect.height);
                  sizeChanged = widthChange > this.resizeBypassRefreshThreshold || heightChange > this.resizeBypassRefreshThreshold;
              }
              if (sizeChanged) {
                  this.previousScrollBoundingRect = boundingRect;
                  if (boundingRect.width > 0 && boundingRect.height > 0) {
                      this.refresh_internal(false);
                  }
              }
          };
          /**
           * @protected
           * @return {?}
           */
          VirtualScrollerComponent.prototype.updateDirection = /**
           * @protected
           * @return {?}
           */
          function () {
              if (this.horizontal) {
                  this._invisiblePaddingProperty = 'width';
                  this._offsetType = 'offsetLeft';
                  this._pageOffsetType = 'pageXOffset';
                  this._childScrollDim = 'childWidth';
                  this._marginDir = 'margin-left';
                  this._translateDir = 'translateX';
                  this._scrollType = 'scrollLeft';
              }
              else {
                  this._invisiblePaddingProperty = 'height';
                  this._offsetType = 'offsetTop';
                  this._pageOffsetType = 'pageYOffset';
                  this._childScrollDim = 'childHeight';
                  this._marginDir = 'margin-top';
                  this._translateDir = 'translateY';
                  this._scrollType = 'scrollTop';
              }
          };
          /**
           * @protected
           * @param {?} func
           * @param {?} wait
           * @return {?}
           */
          VirtualScrollerComponent.prototype.debounce = /**
           * @protected
           * @param {?} func
           * @param {?} wait
           * @return {?}
           */
          function (func, wait) {
              /** @type {?} */
              var throttled = this.throttleTrailing(func, wait);
              /** @type {?} */
              var result = (/**
               * @return {?}
               */
              function () {
                  throttled['cancel']();
                  throttled.apply(this, arguments);
              });
              result['cancel'] = (/**
               * @return {?}
               */
              function () {
                  throttled['cancel']();
              });
              return result;
          };
          /**
           * @protected
           * @param {?} func
           * @param {?} wait
           * @return {?}
           */
          VirtualScrollerComponent.prototype.throttleTrailing = /**
           * @protected
           * @param {?} func
           * @param {?} wait
           * @return {?}
           */
          function (func, wait) {
              /** @type {?} */
              var timeout = undefined;
              /** @type {?} */
              var _arguments = arguments;
              /** @type {?} */
              var result = (/**
               * @return {?}
               */
              function () {
                  /** @type {?} */
                  var _this = this;
                  _arguments = arguments;
                  if (timeout) {
                      return;
                  }
                  if (wait <= 0) {
                      func.apply(_this, _arguments);
                  }
                  else {
                      timeout = setTimeout((/**
                       * @return {?}
                       */
                      function () {
                          timeout = undefined;
                          func.apply(_this, _arguments);
                      }), wait);
                  }
              });
              result['cancel'] = (/**
               * @return {?}
               */
              function () {
                  if (timeout) {
                      clearTimeout(timeout);
                      timeout = undefined;
                  }
              });
              return result;
          };
          /**
           * @protected
           * @param {?} itemsArrayModified
           * @param {?=} refreshCompletedCallback
           * @param {?=} maxRunTimes
           * @return {?}
           */
          VirtualScrollerComponent.prototype.refresh_internal = /**
           * @protected
           * @param {?} itemsArrayModified
           * @param {?=} refreshCompletedCallback
           * @param {?=} maxRunTimes
           * @return {?}
           */
          function (itemsArrayModified, refreshCompletedCallback, maxRunTimes) {
              //note: maxRunTimes is to force it to keep recalculating if the previous iteration caused a re-render (different sliced items in viewport or scrollPosition changed).
              //The default of 2x max will probably be accurate enough without causing too large a performance bottleneck
              //The code would typically quit out on the 2nd iteration anyways. The main time it'd think more than 2 runs would be necessary would be for vastly different sized child items or if this is the 1st time the items array was initialized.
              //Without maxRunTimes, If the user is actively scrolling this code would become an infinite loop until they stopped scrolling. This would be okay, except each scroll event would start an additional infinte loop. We want to short-circuit it to prevent this.
              var _this_1 = this;
              if (refreshCompletedCallback === void 0) { refreshCompletedCallback = undefined; }
              if (maxRunTimes === void 0) { maxRunTimes = 2; }
              if (itemsArrayModified && this.previousViewPort && this.previousViewPort.scrollStartPosition > 0) {
                  //if items were prepended, scroll forward to keep same items visible
                  /** @type {?} */
                  var oldViewPort_1 = this.previousViewPort;
                  /** @type {?} */
                  var oldViewPortItems_1 = this.viewPortItems;
                  /** @type {?} */
                  var oldRefreshCompletedCallback_1 = refreshCompletedCallback;
                  refreshCompletedCallback = (/**
                   * @return {?}
                   */
                  function () {
                      /** @type {?} */
                      var scrollLengthDelta = _this_1.previousViewPort.scrollLength - oldViewPort_1.scrollLength;
                      if (scrollLengthDelta > 0 && _this_1.viewPortItems) {
                          /** @type {?} */
                          var oldStartItem_1 = oldViewPortItems_1[0];
                          /** @type {?} */
                          var oldStartItemIndex = _this_1.items.findIndex((/**
                           * @param {?} x
                           * @return {?}
                           */
                          function (x) { return _this_1.compareItems(oldStartItem_1, x); }));
                          if (oldStartItemIndex > _this_1.previousViewPort.startIndexWithBuffer) {
                              /** @type {?} */
                              var itemOrderChanged = false;
                              for (var i = 1; i < _this_1.viewPortItems.length; ++i) {
                                  if (!_this_1.compareItems(_this_1.items[oldStartItemIndex + i], oldViewPortItems_1[i])) {
                                      itemOrderChanged = true;
                                      break;
                                  }
                              }
                              if (!itemOrderChanged) {
                                  _this_1.scrollToPosition(_this_1.previousViewPort.scrollStartPosition + scrollLengthDelta, 0, oldRefreshCompletedCallback_1);
                                  return;
                              }
                          }
                      }
                      if (oldRefreshCompletedCallback_1) {
                          oldRefreshCompletedCallback_1();
                      }
                  });
              }
              this.zone.runOutsideAngular((/**
               * @return {?}
               */
              function () {
                  requestAnimationFrame((/**
                   * @return {?}
                   */
                  function () {
                      if (itemsArrayModified) {
                          _this_1.resetWrapGroupDimensions();
                      }
                      /** @type {?} */
                      var viewport = _this_1.calculateViewport();
                      /** @type {?} */
                      var startChanged = itemsArrayModified || viewport.startIndex !== _this_1.previousViewPort.startIndex;
                      /** @type {?} */
                      var endChanged = itemsArrayModified || viewport.endIndex !== _this_1.previousViewPort.endIndex;
                      /** @type {?} */
                      var scrollLengthChanged = viewport.scrollLength !== _this_1.previousViewPort.scrollLength;
                      /** @type {?} */
                      var paddingChanged = viewport.padding !== _this_1.previousViewPort.padding;
                      /** @type {?} */
                      var scrollPositionChanged = viewport.scrollStartPosition !== _this_1.previousViewPort.scrollStartPosition || viewport.scrollEndPosition !== _this_1.previousViewPort.scrollEndPosition || viewport.maxScrollPosition !== _this_1.previousViewPort.maxScrollPosition;
                      _this_1.previousViewPort = viewport;
                      if (scrollLengthChanged) {
                          _this_1.renderer.setStyle(_this_1.invisiblePaddingElementRef.nativeElement, _this_1._invisiblePaddingProperty, viewport.scrollLength + "px");
                      }
                      if (paddingChanged) {
                          if (_this_1.useMarginInsteadOfTranslate) {
                              _this_1.renderer.setStyle(_this_1.contentElementRef.nativeElement, _this_1._marginDir, viewport.padding + "px");
                          }
                          else {
                              _this_1.renderer.setStyle(_this_1.contentElementRef.nativeElement, 'transform', _this_1._translateDir + "(" + viewport.padding + "px)");
                              _this_1.renderer.setStyle(_this_1.contentElementRef.nativeElement, 'webkitTransform', _this_1._translateDir + "(" + viewport.padding + "px)");
                          }
                      }
                      if (_this_1.headerElementRef) {
                          /** @type {?} */
                          var scrollPosition = _this_1.getScrollElement()[_this_1._scrollType];
                          /** @type {?} */
                          var containerOffset = _this_1.getElementsOffset();
                          /** @type {?} */
                          var offset = Math.max(scrollPosition - viewport.padding - containerOffset + _this_1.headerElementRef.nativeElement.clientHeight, 0);
                          _this_1.renderer.setStyle(_this_1.headerElementRef.nativeElement, 'transform', _this_1._translateDir + "(" + offset + "px)");
                          _this_1.renderer.setStyle(_this_1.headerElementRef.nativeElement, 'webkitTransform', _this_1._translateDir + "(" + offset + "px)");
                      }
                      /** @type {?} */
                      var changeEventArg = (startChanged || endChanged) ? {
                          startIndex: viewport.startIndex,
                          endIndex: viewport.endIndex,
                          scrollStartPosition: viewport.scrollStartPosition,
                          scrollEndPosition: viewport.scrollEndPosition,
                          startIndexWithBuffer: viewport.startIndexWithBuffer,
                          endIndexWithBuffer: viewport.endIndexWithBuffer,
                          maxScrollPosition: viewport.maxScrollPosition
                      } : undefined;
                      if (startChanged || endChanged || scrollPositionChanged) {
                          /** @type {?} */
                          var handleChanged = (/**
                           * @return {?}
                           */
                          function () {
                              // update the scroll list to trigger re-render of components in viewport
                              _this_1.viewPortItems = viewport.startIndexWithBuffer >= 0 && viewport.endIndexWithBuffer >= 0 ? _this_1.items.slice(viewport.startIndexWithBuffer, viewport.endIndexWithBuffer + 1) : [];
                              _this_1.vsUpdate.emit(_this_1.viewPortItems);
                              if (startChanged) {
                                  _this_1.vsStart.emit(changeEventArg);
                              }
                              if (endChanged) {
                                  _this_1.vsEnd.emit(changeEventArg);
                              }
                              if (startChanged || endChanged) {
                                  _this_1.changeDetectorRef.markForCheck();
                                  _this_1.vsChange.emit(changeEventArg);
                              }
                              if (maxRunTimes > 0) {
                                  _this_1.refresh_internal(false, refreshCompletedCallback, maxRunTimes - 1);
                                  return;
                              }
                              if (refreshCompletedCallback) {
                                  refreshCompletedCallback();
                              }
                          });
                          if (_this_1.executeRefreshOutsideAngularZone) {
                              handleChanged();
                          }
                          else {
                              _this_1.zone.run(handleChanged);
                          }
                      }
                      else {
                          if (maxRunTimes > 0 && (scrollLengthChanged || paddingChanged)) {
                              _this_1.refresh_internal(false, refreshCompletedCallback, maxRunTimes - 1);
                              return;
                          }
                          if (refreshCompletedCallback) {
                              refreshCompletedCallback();
                          }
                      }
                  }));
              }));
          };
          /**
           * @protected
           * @return {?}
           */
          VirtualScrollerComponent.prototype.getScrollElement = /**
           * @protected
           * @return {?}
           */
          function () {
              return this.parentScroll instanceof Window ? document.scrollingElement || document.documentElement || document.body : this.parentScroll || this.element.nativeElement;
          };
          /**
           * @protected
           * @return {?}
           */
          VirtualScrollerComponent.prototype.addScrollEventHandlers = /**
           * @protected
           * @return {?}
           */
          function () {
              var _this_1 = this;
              if (this.isAngularUniversalSSR) {
                  return;
              }
              /** @type {?} */
              var scrollElement = this.getScrollElement();
              this.removeScrollEventHandlers();
              this.zone.runOutsideAngular((/**
               * @return {?}
               */
              function () {
                  if (_this_1.parentScroll instanceof Window) {
                      _this_1.disposeScrollHandler = _this_1.renderer.listen('window', 'scroll', _this_1.onScroll);
                      _this_1.disposeResizeHandler = _this_1.renderer.listen('window', 'resize', _this_1.onScroll);
                  }
                  else {
                      _this_1.disposeScrollHandler = _this_1.renderer.listen(scrollElement, 'scroll', _this_1.onScroll);
                      if (_this_1._checkResizeInterval > 0) {
                          _this_1.checkScrollElementResizedTimer = (/** @type {?} */ (setInterval((/**
                           * @return {?}
                           */
                          function () { _this_1.checkScrollElementResized(); }), _this_1._checkResizeInterval)));
                      }
                  }
              }));
          };
          /**
           * @protected
           * @return {?}
           */
          VirtualScrollerComponent.prototype.removeScrollEventHandlers = /**
           * @protected
           * @return {?}
           */
          function () {
              if (this.checkScrollElementResizedTimer) {
                  clearInterval(this.checkScrollElementResizedTimer);
              }
              if (this.disposeScrollHandler) {
                  this.disposeScrollHandler();
                  this.disposeScrollHandler = undefined;
              }
              if (this.disposeResizeHandler) {
                  this.disposeResizeHandler();
                  this.disposeResizeHandler = undefined;
              }
          };
          /**
           * @protected
           * @return {?}
           */
          VirtualScrollerComponent.prototype.getElementsOffset = /**
           * @protected
           * @return {?}
           */
          function () {
              if (this.isAngularUniversalSSR) {
                  return 0;
              }
              /** @type {?} */
              var offset = 0;
              if (this.containerElementRef && this.containerElementRef.nativeElement) {
                  offset += this.containerElementRef.nativeElement[this._offsetType];
              }
              if (this.parentScroll) {
                  /** @type {?} */
                  var scrollElement = this.getScrollElement();
                  /** @type {?} */
                  var elementClientRect = this.getElementSize(this.element.nativeElement);
                  /** @type {?} */
                  var scrollClientRect = this.getElementSize(scrollElement);
                  if (this.horizontal) {
                      offset += elementClientRect.left - scrollClientRect.left;
                  }
                  else {
                      offset += elementClientRect.top - scrollClientRect.top;
                  }
                  if (!(this.parentScroll instanceof Window)) {
                      offset += scrollElement[this._scrollType];
                  }
              }
              return offset;
          };
          /**
           * @protected
           * @return {?}
           */
          VirtualScrollerComponent.prototype.countItemsPerWrapGroup = /**
           * @protected
           * @return {?}
           */
          function () {
              if (this.isAngularUniversalSSR) {
                  return Math.round(this.horizontal ? this.ssrViewportHeight / this.ssrChildHeight : this.ssrViewportWidth / this.ssrChildWidth);
              }
              /** @type {?} */
              var propertyName = this.horizontal ? 'offsetLeft' : 'offsetTop';
              /** @type {?} */
              var children = ((this.containerElementRef && this.containerElementRef.nativeElement) || this.contentElementRef.nativeElement).children;
              /** @type {?} */
              var childrenLength = children ? children.length : 0;
              if (childrenLength === 0) {
                  return 1;
              }
              /** @type {?} */
              var firstOffset = children[0][propertyName];
              /** @type {?} */
              var result = 1;
              while (result < childrenLength && firstOffset === children[result][propertyName]) {
                  ++result;
              }
              return result;
          };
          /**
           * @protected
           * @return {?}
           */
          VirtualScrollerComponent.prototype.getScrollStartPosition = /**
           * @protected
           * @return {?}
           */
          function () {
              /** @type {?} */
              var windowScrollValue = undefined;
              if (this.parentScroll instanceof Window) {
                  windowScrollValue = window[this._pageOffsetType];
              }
              return windowScrollValue || this.getScrollElement()[this._scrollType] || 0;
          };
          /**
           * @protected
           * @return {?}
           */
          VirtualScrollerComponent.prototype.resetWrapGroupDimensions = /**
           * @protected
           * @return {?}
           */
          function () {
              /** @type {?} */
              var oldWrapGroupDimensions = this.wrapGroupDimensions;
              this.invalidateAllCachedMeasurements();
              if (!this.enableUnequalChildrenSizes || !oldWrapGroupDimensions || oldWrapGroupDimensions.numberOfKnownWrapGroupChildSizes === 0) {
                  return;
              }
              /** @type {?} */
              var itemsPerWrapGroup = this.countItemsPerWrapGroup();
              for (var wrapGroupIndex = 0; wrapGroupIndex < oldWrapGroupDimensions.maxChildSizePerWrapGroup.length; ++wrapGroupIndex) {
                  /** @type {?} */
                  var oldWrapGroupDimension = oldWrapGroupDimensions.maxChildSizePerWrapGroup[wrapGroupIndex];
                  if (!oldWrapGroupDimension || !oldWrapGroupDimension.items || !oldWrapGroupDimension.items.length) {
                      continue;
                  }
                  if (oldWrapGroupDimension.items.length !== itemsPerWrapGroup) {
                      return;
                  }
                  /** @type {?} */
                  var itemsChanged = false;
                  /** @type {?} */
                  var arrayStartIndex = itemsPerWrapGroup * wrapGroupIndex;
                  for (var i = 0; i < itemsPerWrapGroup; ++i) {
                      if (!this.compareItems(oldWrapGroupDimension.items[i], this.items[arrayStartIndex + i])) {
                          itemsChanged = true;
                          break;
                      }
                  }
                  if (!itemsChanged) {
                      ++this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;
                      this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths += oldWrapGroupDimension.childWidth || 0;
                      this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights += oldWrapGroupDimension.childHeight || 0;
                      this.wrapGroupDimensions.maxChildSizePerWrapGroup[wrapGroupIndex] = oldWrapGroupDimension;
                  }
              }
          };
          /**
           * @protected
           * @return {?}
           */
          VirtualScrollerComponent.prototype.calculateDimensions = /**
           * @protected
           * @return {?}
           */
          function () {
              /** @type {?} */
              var scrollElement = this.getScrollElement();
              /** @type {?} */
              var maxCalculatedScrollBarSize = 25;
              this.calculatedScrollbarHeight = Math.max(Math.min(scrollElement.offsetHeight - scrollElement.clientHeight, maxCalculatedScrollBarSize), this.calculatedScrollbarHeight);
              this.calculatedScrollbarWidth = Math.max(Math.min(scrollElement.offsetWidth - scrollElement.clientWidth, maxCalculatedScrollBarSize), this.calculatedScrollbarWidth);
              /** @type {?} */
              var viewportWidth = scrollElement.offsetWidth - (this.scrollbarWidth || this.calculatedScrollbarWidth || (this.horizontal ? 0 : maxCalculatedScrollBarSize));
              /** @type {?} */
              var viewportHeight = scrollElement.offsetHeight - (this.scrollbarHeight || this.calculatedScrollbarHeight || (this.horizontal ? maxCalculatedScrollBarSize : 0));
              /** @type {?} */
              var content = (this.containerElementRef && this.containerElementRef.nativeElement) || this.contentElementRef.nativeElement;
              /** @type {?} */
              var itemsPerWrapGroup = this.countItemsPerWrapGroup();
              /** @type {?} */
              var wrapGroupsPerPage;
              /** @type {?} */
              var defaultChildWidth;
              /** @type {?} */
              var defaultChildHeight;
              if (this.isAngularUniversalSSR) {
                  viewportWidth = this.ssrViewportWidth;
                  viewportHeight = this.ssrViewportHeight;
                  defaultChildWidth = this.ssrChildWidth;
                  defaultChildHeight = this.ssrChildHeight;
                  /** @type {?} */
                  var itemsPerRow = Math.max(Math.ceil(viewportWidth / defaultChildWidth), 1);
                  /** @type {?} */
                  var itemsPerCol = Math.max(Math.ceil(viewportHeight / defaultChildHeight), 1);
                  wrapGroupsPerPage = this.horizontal ? itemsPerRow : itemsPerCol;
              }
              else if (!this.enableUnequalChildrenSizes) {
                  if (content.children.length > 0) {
                      if (!this.childWidth || !this.childHeight) {
                          if (!this.minMeasuredChildWidth && viewportWidth > 0) {
                              this.minMeasuredChildWidth = viewportWidth;
                          }
                          if (!this.minMeasuredChildHeight && viewportHeight > 0) {
                              this.minMeasuredChildHeight = viewportHeight;
                          }
                      }
                      /** @type {?} */
                      var child = content.children[0];
                      /** @type {?} */
                      var clientRect = this.getElementSize(child);
                      this.minMeasuredChildWidth = Math.min(this.minMeasuredChildWidth, clientRect.width);
                      this.minMeasuredChildHeight = Math.min(this.minMeasuredChildHeight, clientRect.height);
                  }
                  defaultChildWidth = this.childWidth || this.minMeasuredChildWidth || viewportWidth;
                  defaultChildHeight = this.childHeight || this.minMeasuredChildHeight || viewportHeight;
                  /** @type {?} */
                  var itemsPerRow = Math.max(Math.ceil(viewportWidth / defaultChildWidth), 1);
                  /** @type {?} */
                  var itemsPerCol = Math.max(Math.ceil(viewportHeight / defaultChildHeight), 1);
                  wrapGroupsPerPage = this.horizontal ? itemsPerRow : itemsPerCol;
              }
              else {
                  /** @type {?} */
                  var scrollOffset = scrollElement[this._scrollType] - (this.previousViewPort ? this.previousViewPort.padding : 0);
                  /** @type {?} */
                  var arrayStartIndex = this.previousViewPort.startIndexWithBuffer || 0;
                  /** @type {?} */
                  var wrapGroupIndex = Math.ceil(arrayStartIndex / itemsPerWrapGroup);
                  /** @type {?} */
                  var maxWidthForWrapGroup = 0;
                  /** @type {?} */
                  var maxHeightForWrapGroup = 0;
                  /** @type {?} */
                  var sumOfVisibleMaxWidths = 0;
                  /** @type {?} */
                  var sumOfVisibleMaxHeights = 0;
                  wrapGroupsPerPage = 0;
                  for (var i = 0; i < content.children.length; ++i) {
                      ++arrayStartIndex;
                      /** @type {?} */
                      var child = content.children[i];
                      /** @type {?} */
                      var clientRect = this.getElementSize(child);
                      maxWidthForWrapGroup = Math.max(maxWidthForWrapGroup, clientRect.width);
                      maxHeightForWrapGroup = Math.max(maxHeightForWrapGroup, clientRect.height);
                      if (arrayStartIndex % itemsPerWrapGroup === 0) {
                          /** @type {?} */
                          var oldValue = this.wrapGroupDimensions.maxChildSizePerWrapGroup[wrapGroupIndex];
                          if (oldValue) {
                              --this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;
                              this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths -= oldValue.childWidth || 0;
                              this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights -= oldValue.childHeight || 0;
                          }
                          ++this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;
                          /** @type {?} */
                          var items = this.items.slice(arrayStartIndex - itemsPerWrapGroup, arrayStartIndex);
                          this.wrapGroupDimensions.maxChildSizePerWrapGroup[wrapGroupIndex] = {
                              childWidth: maxWidthForWrapGroup,
                              childHeight: maxHeightForWrapGroup,
                              items: items
                          };
                          this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths += maxWidthForWrapGroup;
                          this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights += maxHeightForWrapGroup;
                          if (this.horizontal) {
                              /** @type {?} */
                              var maxVisibleWidthForWrapGroup = Math.min(maxWidthForWrapGroup, Math.max(viewportWidth - sumOfVisibleMaxWidths, 0));
                              if (scrollOffset > 0) {
                                  /** @type {?} */
                                  var scrollOffsetToRemove = Math.min(scrollOffset, maxVisibleWidthForWrapGroup);
                                  maxVisibleWidthForWrapGroup -= scrollOffsetToRemove;
                                  scrollOffset -= scrollOffsetToRemove;
                              }
                              sumOfVisibleMaxWidths += maxVisibleWidthForWrapGroup;
                              if (maxVisibleWidthForWrapGroup > 0 && viewportWidth >= sumOfVisibleMaxWidths) {
                                  ++wrapGroupsPerPage;
                              }
                          }
                          else {
                              /** @type {?} */
                              var maxVisibleHeightForWrapGroup = Math.min(maxHeightForWrapGroup, Math.max(viewportHeight - sumOfVisibleMaxHeights, 0));
                              if (scrollOffset > 0) {
                                  /** @type {?} */
                                  var scrollOffsetToRemove = Math.min(scrollOffset, maxVisibleHeightForWrapGroup);
                                  maxVisibleHeightForWrapGroup -= scrollOffsetToRemove;
                                  scrollOffset -= scrollOffsetToRemove;
                              }
                              sumOfVisibleMaxHeights += maxVisibleHeightForWrapGroup;
                              if (maxVisibleHeightForWrapGroup > 0 && viewportHeight >= sumOfVisibleMaxHeights) {
                                  ++wrapGroupsPerPage;
                              }
                          }
                          ++wrapGroupIndex;
                          maxWidthForWrapGroup = 0;
                          maxHeightForWrapGroup = 0;
                      }
                  }
                  /** @type {?} */
                  var averageChildWidth = this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths / this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;
                  /** @type {?} */
                  var averageChildHeight = this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights / this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;
                  defaultChildWidth = this.childWidth || averageChildWidth || viewportWidth;
                  defaultChildHeight = this.childHeight || averageChildHeight || viewportHeight;
                  if (this.horizontal) {
                      if (viewportWidth > sumOfVisibleMaxWidths) {
                          wrapGroupsPerPage += Math.ceil((viewportWidth - sumOfVisibleMaxWidths) / defaultChildWidth);
                      }
                  }
                  else {
                      if (viewportHeight > sumOfVisibleMaxHeights) {
                          wrapGroupsPerPage += Math.ceil((viewportHeight - sumOfVisibleMaxHeights) / defaultChildHeight);
                      }
                  }
              }
              /** @type {?} */
              var itemCount = this.items.length;
              /** @type {?} */
              var itemsPerPage = itemsPerWrapGroup * wrapGroupsPerPage;
              /** @type {?} */
              var pageCount_fractional = itemCount / itemsPerPage;
              /** @type {?} */
              var numberOfWrapGroups = Math.ceil(itemCount / itemsPerWrapGroup);
              /** @type {?} */
              var scrollLength = 0;
              /** @type {?} */
              var defaultScrollLengthPerWrapGroup = this.horizontal ? defaultChildWidth : defaultChildHeight;
              if (this.enableUnequalChildrenSizes) {
                  /** @type {?} */
                  var numUnknownChildSizes = 0;
                  for (var i = 0; i < numberOfWrapGroups; ++i) {
                      /** @type {?} */
                      var childSize = this.wrapGroupDimensions.maxChildSizePerWrapGroup[i] && this.wrapGroupDimensions.maxChildSizePerWrapGroup[i][this._childScrollDim];
                      if (childSize) {
                          scrollLength += childSize;
                      }
                      else {
                          ++numUnknownChildSizes;
                      }
                  }
                  scrollLength += Math.round(numUnknownChildSizes * defaultScrollLengthPerWrapGroup);
              }
              else {
                  scrollLength = numberOfWrapGroups * defaultScrollLengthPerWrapGroup;
              }
              if (this.headerElementRef) {
                  scrollLength += this.headerElementRef.nativeElement.clientHeight;
              }
              /** @type {?} */
              var viewportLength = this.horizontal ? viewportWidth : viewportHeight;
              /** @type {?} */
              var maxScrollPosition = Math.max(scrollLength - viewportLength, 0);
              return {
                  itemCount: itemCount,
                  itemsPerWrapGroup: itemsPerWrapGroup,
                  wrapGroupsPerPage: wrapGroupsPerPage,
                  itemsPerPage: itemsPerPage,
                  pageCount_fractional: pageCount_fractional,
                  childWidth: defaultChildWidth,
                  childHeight: defaultChildHeight,
                  scrollLength: scrollLength,
                  viewportLength: viewportLength,
                  maxScrollPosition: maxScrollPosition
              };
          };
          /**
           * @protected
           * @param {?} arrayStartIndexWithBuffer
           * @param {?} dimensions
           * @return {?}
           */
          VirtualScrollerComponent.prototype.calculatePadding = /**
           * @protected
           * @param {?} arrayStartIndexWithBuffer
           * @param {?} dimensions
           * @return {?}
           */
          function (arrayStartIndexWithBuffer, dimensions) {
              if (dimensions.itemCount === 0) {
                  return 0;
              }
              /** @type {?} */
              var defaultScrollLengthPerWrapGroup = dimensions[this._childScrollDim];
              /** @type {?} */
              var startingWrapGroupIndex = Math.floor(arrayStartIndexWithBuffer / dimensions.itemsPerWrapGroup) || 0;
              if (!this.enableUnequalChildrenSizes) {
                  return defaultScrollLengthPerWrapGroup * startingWrapGroupIndex;
              }
              /** @type {?} */
              var numUnknownChildSizes = 0;
              /** @type {?} */
              var result = 0;
              for (var i = 0; i < startingWrapGroupIndex; ++i) {
                  /** @type {?} */
                  var childSize = this.wrapGroupDimensions.maxChildSizePerWrapGroup[i] && this.wrapGroupDimensions.maxChildSizePerWrapGroup[i][this._childScrollDim];
                  if (childSize) {
                      result += childSize;
                  }
                  else {
                      ++numUnknownChildSizes;
                  }
              }
              result += Math.round(numUnknownChildSizes * defaultScrollLengthPerWrapGroup);
              return result;
          };
          /**
           * @protected
           * @param {?} scrollPosition
           * @param {?} dimensions
           * @return {?}
           */
          VirtualScrollerComponent.prototype.calculatePageInfo = /**
           * @protected
           * @param {?} scrollPosition
           * @param {?} dimensions
           * @return {?}
           */
          function (scrollPosition, dimensions) {
              /** @type {?} */
              var scrollPercentage = 0;
              if (this.enableUnequalChildrenSizes) {
                  /** @type {?} */
                  var numberOfWrapGroups = Math.ceil(dimensions.itemCount / dimensions.itemsPerWrapGroup);
                  /** @type {?} */
                  var totalScrolledLength = 0;
                  /** @type {?} */
                  var defaultScrollLengthPerWrapGroup = dimensions[this._childScrollDim];
                  for (var i = 0; i < numberOfWrapGroups; ++i) {
                      /** @type {?} */
                      var childSize = this.wrapGroupDimensions.maxChildSizePerWrapGroup[i] && this.wrapGroupDimensions.maxChildSizePerWrapGroup[i][this._childScrollDim];
                      if (childSize) {
                          totalScrolledLength += childSize;
                      }
                      else {
                          totalScrolledLength += defaultScrollLengthPerWrapGroup;
                      }
                      if (scrollPosition < totalScrolledLength) {
                          scrollPercentage = i / numberOfWrapGroups;
                          break;
                      }
                  }
              }
              else {
                  scrollPercentage = scrollPosition / dimensions.scrollLength;
              }
              /** @type {?} */
              var startingArrayIndex_fractional = Math.min(Math.max(scrollPercentage * dimensions.pageCount_fractional, 0), dimensions.pageCount_fractional) * dimensions.itemsPerPage;
              /** @type {?} */
              var maxStart = dimensions.itemCount - dimensions.itemsPerPage - 1;
              /** @type {?} */
              var arrayStartIndex = Math.min(Math.floor(startingArrayIndex_fractional), maxStart);
              arrayStartIndex -= arrayStartIndex % dimensions.itemsPerWrapGroup; // round down to start of wrapGroup
              if (this.stripedTable) {
                  /** @type {?} */
                  var bufferBoundary = 2 * dimensions.itemsPerWrapGroup;
                  if (arrayStartIndex % bufferBoundary !== 0) {
                      arrayStartIndex = Math.max(arrayStartIndex - arrayStartIndex % bufferBoundary, 0);
                  }
              }
              /** @type {?} */
              var arrayEndIndex = Math.ceil(startingArrayIndex_fractional) + dimensions.itemsPerPage - 1;
              /** @type {?} */
              var endIndexWithinWrapGroup = (arrayEndIndex + 1) % dimensions.itemsPerWrapGroup;
              if (endIndexWithinWrapGroup > 0) {
                  arrayEndIndex += dimensions.itemsPerWrapGroup - endIndexWithinWrapGroup; // round up to end of wrapGroup
              }
              if (isNaN(arrayStartIndex)) {
                  arrayStartIndex = 0;
              }
              if (isNaN(arrayEndIndex)) {
                  arrayEndIndex = 0;
              }
              arrayStartIndex = Math.min(Math.max(arrayStartIndex, 0), dimensions.itemCount - 1);
              arrayEndIndex = Math.min(Math.max(arrayEndIndex, 0), dimensions.itemCount - 1);
              /** @type {?} */
              var bufferSize = this.bufferAmount * dimensions.itemsPerWrapGroup;
              /** @type {?} */
              var startIndexWithBuffer = Math.min(Math.max(arrayStartIndex - bufferSize, 0), dimensions.itemCount - 1);
              /** @type {?} */
              var endIndexWithBuffer = Math.min(Math.max(arrayEndIndex + bufferSize, 0), dimensions.itemCount - 1);
              return {
                  startIndex: arrayStartIndex,
                  endIndex: arrayEndIndex,
                  startIndexWithBuffer: startIndexWithBuffer,
                  endIndexWithBuffer: endIndexWithBuffer,
                  scrollStartPosition: scrollPosition,
                  scrollEndPosition: scrollPosition + dimensions.viewportLength,
                  maxScrollPosition: dimensions.maxScrollPosition
              };
          };
          /**
           * @protected
           * @return {?}
           */
          VirtualScrollerComponent.prototype.calculateViewport = /**
           * @protected
           * @return {?}
           */
          function () {
              /** @type {?} */
              var dimensions = this.calculateDimensions();
              /** @type {?} */
              var offset = this.getElementsOffset();
              /** @type {?} */
              var scrollStartPosition = this.getScrollStartPosition();
              if (scrollStartPosition > (dimensions.scrollLength + offset) && !(this.parentScroll instanceof Window)) {
                  scrollStartPosition = dimensions.scrollLength;
              }
              else {
                  scrollStartPosition -= offset;
              }
              scrollStartPosition = Math.max(0, scrollStartPosition);
              /** @type {?} */
              var pageInfo = this.calculatePageInfo(scrollStartPosition, dimensions);
              /** @type {?} */
              var newPadding = this.calculatePadding(pageInfo.startIndexWithBuffer, dimensions);
              /** @type {?} */
              var newScrollLength = dimensions.scrollLength;
              return {
                  startIndex: pageInfo.startIndex,
                  endIndex: pageInfo.endIndex,
                  startIndexWithBuffer: pageInfo.startIndexWithBuffer,
                  endIndexWithBuffer: pageInfo.endIndexWithBuffer,
                  padding: Math.round(newPadding),
                  scrollLength: Math.round(newScrollLength),
                  scrollStartPosition: pageInfo.scrollStartPosition,
                  scrollEndPosition: pageInfo.scrollEndPosition,
                  maxScrollPosition: pageInfo.maxScrollPosition
              };
          };
          VirtualScrollerComponent.decorators = [
              { type: core.Component, args: [{
                          selector: 'virtual-scroller,[virtualScroller]',
                          exportAs: 'virtualScroller',
                          template: "\n    <div class=\"total-padding\" #invisiblePadding></div>\n    <div class=\"scrollable-content\" #content>\n      <ng-content></ng-content>\n    </div>\n  ",
                          host: {
                              '[class.horizontal]': "horizontal",
                              '[class.vertical]': "!horizontal",
                              '[class.selfScroll]': "!parentScroll"
                          },
                          styles: ["\n    :host {\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n\t\n\t:host.horizontal.selfScroll {\n      overflow-y: visible;\n      overflow-x: auto;\n\t}\n\t:host.vertical.selfScroll {\n      overflow-y: auto;\n      overflow-x: visible;\n\t}\n\t\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      max-width: 100vw;\n      max-height: 100vh;\n      position: absolute;\n    }\n\n\t.scrollable-content ::ng-deep > * {\n\t\tbox-sizing: border-box;\n\t}\n\t\n\t:host.horizontal {\n\t\twhite-space: nowrap;\n\t}\n\t\n\t:host.horizontal .scrollable-content {\n\t\tdisplay: flex;\n\t}\n\t\n\t:host.horizontal .scrollable-content ::ng-deep > * {\n\t\tflex-shrink: 0;\n\t\tflex-grow: 0;\n\t\twhite-space: initial;\n\t}\n\t\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n    \n    :host.horizontal .total-padding {\n      height: 100%;\n    }\n  "]
                      }] }
          ];
          /** @nocollapse */
          VirtualScrollerComponent.ctorParameters = function () { return [
              { type: core.ElementRef },
              { type: core.Renderer2 },
              { type: core.NgZone },
              { type: core.ChangeDetectorRef },
              { type: Object, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] },
              { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: ['virtual-scroller-default-options',] }] }
          ]; };
          VirtualScrollerComponent.propDecorators = {
              executeRefreshOutsideAngularZone: [{ type: core.Input }],
              enableUnequalChildrenSizes: [{ type: core.Input }],
              useMarginInsteadOfTranslate: [{ type: core.Input }],
              modifyOverflowStyleOfParentScroll: [{ type: core.Input }],
              stripedTable: [{ type: core.Input }],
              scrollbarWidth: [{ type: core.Input }],
              scrollbarHeight: [{ type: core.Input }],
              childWidth: [{ type: core.Input }],
              childHeight: [{ type: core.Input }],
              ssrChildWidth: [{ type: core.Input }],
              ssrChildHeight: [{ type: core.Input }],
              ssrViewportWidth: [{ type: core.Input }],
              ssrViewportHeight: [{ type: core.Input }],
              bufferAmount: [{ type: core.Input }],
              scrollAnimationTime: [{ type: core.Input }],
              resizeBypassRefreshThreshold: [{ type: core.Input }],
              scrollThrottlingTime: [{ type: core.Input }],
              scrollDebounceTime: [{ type: core.Input }],
              checkResizeInterval: [{ type: core.Input }],
              items: [{ type: core.Input }],
              compareItems: [{ type: core.Input }],
              horizontal: [{ type: core.Input }],
              parentScroll: [{ type: core.Input }],
              vsUpdate: [{ type: core.Output }],
              vsChange: [{ type: core.Output }],
              vsStart: [{ type: core.Output }],
              vsEnd: [{ type: core.Output }],
              contentElementRef: [{ type: core.ViewChild, args: ['content', { read: core.ElementRef, static: false },] }],
              invisiblePaddingElementRef: [{ type: core.ViewChild, args: ['invisiblePadding', { read: core.ElementRef, static: false },] }],
              headerElementRef: [{ type: core.ContentChild, args: ['header', { read: core.ElementRef, static: false },] }],
              containerElementRef: [{ type: core.ContentChild, args: ['container', { read: core.ElementRef, static: false },] }]
          };
          return VirtualScrollerComponent;
      }());
      var VirtualScrollerModule = /** @class */ (function () {
          function VirtualScrollerModule() {
          }
          VirtualScrollerModule.decorators = [
              { type: core.NgModule, args: [{
                          exports: [VirtualScrollerComponent],
                          declarations: [VirtualScrollerComponent],
                          imports: [common.CommonModule],
                          providers: [
                              {
                                  provide: 'virtual-scroller-default-options',
                                  useFactory: VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY
                              }
                          ]
                      },] }
          ];
          return VirtualScrollerModule;
      }());
  
      /**
       * @fileoverview added by tsickle
       * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
       */
      /** @type {?} */
      var DROPDOWN_CONTROL_VALUE_ACCESSOR = {
          provide: forms.NG_VALUE_ACCESSOR,
          useExisting: core.forwardRef((/**
           * @return {?}
           */
          function () { return AngularMultiSelect; })),
          multi: true
      };
      /** @type {?} */
      var DROPDOWN_CONTROL_VALIDATION = {
          provide: forms.NG_VALIDATORS,
          useExisting: core.forwardRef((/**
           * @return {?}
           */
          function () { return AngularMultiSelect; })),
          multi: true,
      };
      /** @type {?} */
      var noop = (/**
       * @return {?}
       */
      function () {
      });
      var AngularMultiSelect = /** @class */ (function () {
          function AngularMultiSelect(_elementRef, cdr, ds) {
              var _this = this;
              this._elementRef = _elementRef;
              this.cdr = cdr;
              this.ds = ds;
              this.onSelect = new core.EventEmitter();
              this.onDeSelect = new core.EventEmitter();
              this.onSelectAll = new core.EventEmitter();
              this.onDeSelectAll = new core.EventEmitter();
              this.onOpen = new core.EventEmitter();
              this.onClose = new core.EventEmitter();
              this.onScrollToEnd = new core.EventEmitter();
              this.onFilterSelectAll = new core.EventEmitter();
              this.onFilterDeSelectAll = new core.EventEmitter();
              this.onAddFilterNewItem = new core.EventEmitter();
              this.onGroupSelect = new core.EventEmitter();
              this.onGroupDeSelect = new core.EventEmitter();
              this.virtualdata = [];
              this.searchTerm$ = new rxjs.Subject();
              this.isActive = false;
              this.isSelectAll = false;
              this.isFilterSelectAll = false;
              this.isInfiniteFilterSelectAll = false;
              this.chunkIndex = [];
              this.cachedItems = [];
              this.groupCachedItems = [];
              this.itemHeight = 41.6;
              this.filterLength = 0;
              this.infiniteFilterLength = 0;
              this.dropdownListYOffset = 0;
              this.defaultSettings = {
                  singleSelection: false,
                  text: 'Select',
                  enableCheckAll: true,
                  selectAllText: 'Select All',
                  unSelectAllText: 'UnSelect All',
                  filterSelectAllText: 'Select all filtered results',
                  filterUnSelectAllText: 'UnSelect all filtered results',
                  enableSearchFilter: false,
                  searchBy: [],
                  maxHeight: 300,
                  badgeShowLimit: 999999999999,
                  classes: '',
                  disabled: false,
                  searchPlaceholderText: 'Search',
                  showCheckbox: true,
                  noDataLabel: 'No Data Available',
                  searchAutofocus: true,
                  lazyLoading: false,
                  labelKey: 'itemName',
                  primaryKey: 'id',
                  position: 'bottom',
                  autoPosition: true,
                  enableFilterSelectAll: true,
                  selectGroup: false,
                  addNewItemOnFilter: false,
                  addNewButtonText: "Add",
                  escapeToClose: true,
                  clearAll: true
              };
              this.randomSize = true;
              this.filteredList = [];
              this.virtualScroollInit = false;
              this.onTouchedCallback = noop;
              this.onChangeCallback = noop;
              this.searchTerm$.asObservable().pipe(operators.debounceTime(1000), operators.distinctUntilChanged(), operators.tap((/**
               * @param {?} term
               * @return {?}
               */
              function (term) { return term; }))).subscribe((/**
               * @param {?} val
               * @return {?}
               */
              function (val) {
                  _this.filterInfiniteList(val);
              }));
          }
          /**
           * @param {?} event
           * @return {?}
           */
          AngularMultiSelect.prototype.onEscapeDown = /**
           * @param {?} event
           * @return {?}
           */
          function (event) {
              if (this.settings.escapeToClose) {
                  this.closeDropdown();
              }
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.ngOnInit = /**
           * @return {?}
           */
          function () {
              var _this = this;
              this.settings = Object.assign(this.defaultSettings, this.settings);
              this.cachedItems = this.cloneArray(this.data);
              if (this.settings.position == 'top') {
                  setTimeout((/**
                   * @return {?}
                   */
                  function () {
                      _this.selectedListHeight = { val: 0 };
                      _this.selectedListHeight.val = _this.selectedListElem.nativeElement.clientHeight;
                  }));
              }
              this.subscription = this.ds.getData().subscribe((/**
               * @param {?} data
               * @return {?}
               */
              function (data) {
                  if (data) {
                      /** @type {?} */
                      var len_1 = 0;
                      data.forEach((/**
                       * @param {?} obj
                       * @param {?} i
                       * @return {?}
                       */
                      function (obj, i) {
                          if (!obj.hasOwnProperty('grpTitle')) {
                              len_1++;
                          }
                      }));
                      _this.filterLength = len_1;
                      _this.onFilterChange(data);
                  }
              }));
              setTimeout((/**
               * @return {?}
               */
              function () {
                  _this.calculateDropdownDirection();
              }));
              this.virtualScroollInit = false;
          };
          /**
           * @param {?} changes
           * @return {?}
           */
          AngularMultiSelect.prototype.ngOnChanges = /**
           * @param {?} changes
           * @return {?}
           */
          function (changes) {
              if (changes.data && !changes.data.firstChange) {
                  if (this.settings.groupBy) {
                      this.groupedData = this.transformData(this.data, this.settings.groupBy);
                      if (this.data.length == 0) {
                          this.selectedItems = [];
                      }
                      this.groupCachedItems = this.cloneArray(this.groupedData);
                  }
                  this.cachedItems = this.cloneArray(this.data);
              }
              if (changes.settings && !changes.settings.firstChange) {
                  this.settings = Object.assign(this.defaultSettings, this.settings);
              }
              if (changes.loading) ;
              if (this.settings.lazyLoading && this.virtualScroollInit && changes.data) {
                  this.virtualdata = changes.data.currentValue;
              }
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.ngDoCheck = /**
           * @return {?}
           */
          function () {
              if (this.selectedItems) {
                  if (this.selectedItems.length == 0 || this.data.length == 0 || this.selectedItems.length < this.data.length) {
                      this.isSelectAll = false;
                  }
              }
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.ngAfterViewInit = /**
           * @return {?}
           */
          function () {
              if (this.settings.lazyLoading) ;
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.ngAfterViewChecked = /**
           * @return {?}
           */
          function () {
              if (this.selectedListElem.nativeElement.clientHeight && this.settings.position == 'top' && this.selectedListHeight) {
                  this.selectedListHeight.val = this.selectedListElem.nativeElement.clientHeight;
                  this.cdr.detectChanges();
              }
          };
          /**
           * @param {?} item
           * @param {?} index
           * @param {?} evt
           * @return {?}
           */
          AngularMultiSelect.prototype.onItemClick = /**
           * @param {?} item
           * @param {?} index
           * @param {?} evt
           * @return {?}
           */
          function (item, index, evt) {
              if (this.settings.disabled) {
                  return false;
              }
              /** @type {?} */
              var found = this.isSelected(item);
              /** @type {?} */
              var 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;
              }
              if (this.settings.groupBy) {
                  this.updateGroupInfo(item);
              }
          };
          /**
           * @param {?} c
           * @return {?}
           */
          AngularMultiSelect.prototype.validate = /**
           * @param {?} c
           * @return {?}
           */
          function (c) {
              return null;
          };
          /**
           * @param {?} value
           * @return {?}
           */
          AngularMultiSelect.prototype.writeValue = /**
           * @param {?} value
           * @return {?}
           */
          function (value) {
              if (value !== undefined && value !== null && value !== '') {
                  if (this.settings.singleSelection) {
                      if (this.settings.groupBy) {
                          this.groupedData = this.transformData(this.data, this.settings.groupBy);
                          this.groupCachedItems = this.cloneArray(this.groupedData);
                          this.selectedItems = [value[0]];
                      }
                      else {
                          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.slice(0, this.settings.limitSelection);
                      }
                      else {
                          this.selectedItems = value;
                      }
                      if (this.selectedItems.length === this.data.length && this.data.length > 0) {
                          this.isSelectAll = true;
                      }
                      if (this.settings.groupBy) {
                          this.groupedData = this.transformData(this.data, this.settings.groupBy);
                          this.groupCachedItems = this.cloneArray(this.groupedData);
                      }
                  }
              }
              else {
                  this.selectedItems = [];
              }
          };
          //From ControlValueAccessor interface
          //From ControlValueAccessor interface
          /**
           * @param {?} fn
           * @return {?}
           */
          AngularMultiSelect.prototype.registerOnChange = 
          //From ControlValueAccessor interface
          /**
           * @param {?} fn
           * @return {?}
           */
          function (fn) {
              this.onChangeCallback = fn;
          };
          //From ControlValueAccessor interface
          //From ControlValueAccessor interface
          /**
           * @param {?} fn
           * @return {?}
           */
          AngularMultiSelect.prototype.registerOnTouched = 
          //From ControlValueAccessor interface
          /**
           * @param {?} fn
           * @return {?}
           */
          function (fn) {
              this.onTouchedCallback = fn;
          };
          /**
           * @param {?} index
           * @param {?} item
           * @return {?}
           */
          AngularMultiSelect.prototype.trackByFn = /**
           * @param {?} index
           * @param {?} item
           * @return {?}
           */
          function (index, item) {
              return item[this.settings.primaryKey];
          };
          /**
           * @param {?} clickedItem
           * @return {?}
           */
          AngularMultiSelect.prototype.isSelected = /**
           * @param {?} clickedItem
           * @return {?}
           */
          function (clickedItem) {
              var _this = this;
              /** @type {?} */
              var found = false;
              this.selectedItems && this.selectedItems.forEach((/**
               * @param {?} item
               * @return {?}
               */
              function (item) {
                  if (clickedItem[_this.settings.primaryKey] === item[_this.settings.primaryKey]) {
                      found = true;
                  }
              }));
              return found;
          };
          /**
           * @param {?} item
           * @return {?}
           */
          AngularMultiSelect.prototype.addSelected = /**
           * @param {?} item
           * @return {?}
           */
          function (item) {
              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);
          };
          /**
           * @param {?} clickedItem
           * @return {?}
           */
          AngularMultiSelect.prototype.removeSelected = /**
           * @param {?} clickedItem
           * @return {?}
           */
          function (clickedItem) {
              var _this = this;
              this.selectedItems && this.selectedItems.forEach((/**
               * @param {?} item
               * @return {?}
               */
              function (item) {
                  if (clickedItem[_this.settings.primaryKey] === item[_this.settings.primaryKey]) {
                      _this.selectedItems.splice(_this.selectedItems.indexOf(item), 1);
                  }
              }));
              this.onChangeCallback(this.selectedItems);
              this.onTouchedCallback(this.selectedItems);
          };
          /**
           * @param {?} evt
           * @return {?}
           */
          AngularMultiSelect.prototype.toggleDropdown = /**
           * @param {?} evt
           * @return {?}
           */
          function (evt) {
              var _this = this;
              if (this.settings.disabled) {
                  return false;
              }
              this.isActive = !this.isActive;
              if (this.isActive) {
                  if (this.settings.searchAutofocus && this.searchInput && this.settings.enableSearchFilter && !this.searchTempl) {
                      setTimeout((/**
                       * @return {?}
                       */
                      function () {
                          _this.searchInput.nativeElement.focus();
                      }), 0);
                  }
                  this.onOpen.emit(true);
              }
              else {
                  this.onClose.emit(false);
              }
              setTimeout((/**
               * @return {?}
               */
              function () {
                  _this.calculateDropdownDirection();
              }), 0);
              if (this.settings.lazyLoading) {
                  this.virtualdata = this.data;
                  this.virtualScroollInit = true;
              }
              evt.preventDefault();
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.openDropdown = /**
           * @return {?}
           */
          function () {
              var _this = this;
              if (this.settings.disabled) {
                  return false;
              }
              this.isActive = true;
              if (this.settings.searchAutofocus && this.searchInput && this.settings.enableSearchFilter && !this.searchTempl) {
                  setTimeout((/**
                   * @return {?}
                   */
                  function () {
                      _this.searchInput.nativeElement.focus();
                  }), 0);
              }
              this.onOpen.emit(true);
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.closeDropdown = /**
           * @return {?}
           */
          function () {
              if (this.searchInput && this.settings.lazyLoading) {
                  this.searchInput.nativeElement.value = "";
              }
              if (this.searchInput) {
                  this.searchInput.nativeElement.value = "";
              }
              this.filter = "";
              this.isActive = false;
              this.onClose.emit(false);
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.closeDropdownOnClickOut = /**
           * @return {?}
           */
          function () {
              if (this.isActive) {
                  if (this.searchInput && this.settings.lazyLoading) {
                      this.searchInput.nativeElement.value = "";
                  }
                  if (this.searchInput) {
                      this.searchInput.nativeElement.value = "";
                  }
                  this.filter = "";
                  this.isActive = false;
                  this.clearSearch();
                  this.onClose.emit(false);
              }
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.toggleSelectAll = /**
           * @return {?}
           */
          function () {
              if (!this.isSelectAll) {
                  this.selectedItems = [];
                  if (this.settings.groupBy) {
                      this.groupedData.forEach((/**
                       * @param {?} obj
                       * @return {?}
                       */
                      function (obj) {
                          obj.selected = true;
                      }));
                      this.groupCachedItems.forEach((/**
                       * @param {?} obj
                       * @return {?}
                       */
                      function (obj) {
                          obj.selected = true;
                      }));
                  }
                  this.selectedItems = this.data.slice();
                  this.isSelectAll = true;
                  this.onChangeCallback(this.selectedItems);
                  this.onTouchedCallback(this.selectedItems);
                  this.onSelectAll.emit(this.selectedItems);
              }
              else {
                  if (this.settings.groupBy) {
                      this.groupedData.forEach((/**
                       * @param {?} obj
                       * @return {?}
                       */
                      function (obj) {
                          obj.selected = false;
                      }));
                      this.groupCachedItems.forEach((/**
                       * @param {?} obj
                       * @return {?}
                       */
                      function (obj) {
                          obj.selected = false;
                      }));
                  }
                  this.selectedItems = [];
                  this.isSelectAll = false;
                  this.onChangeCallback(this.selectedItems);
                  this.onTouchedCallback(this.selectedItems);
                  this.onDeSelectAll.emit(this.selectedItems);
              }
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.filterGroupedList = /**
           * @return {?}
           */
          function () {
              var _this = this;
              if (this.filter == "" || this.filter == null) {
                  this.clearSearch();
                  return;
              }
              this.groupedData = this.cloneArray(this.groupCachedItems);
              this.groupedData = this.groupedData.filter((/**
               * @param {?} obj
               * @return {?}
               */
              function (obj) {
                  /** @type {?} */
                  var arr = [];
                  if (obj[_this.settings.labelKey].toLowerCase().indexOf(_this.filter.toLowerCase()) > -1) {
                      arr = obj.list;
                  }
                  else {
                      arr = obj.list.filter((/**
                       * @param {?} t
                       * @return {?}
                       */
                      function (t) {
                          return t[_this.settings.labelKey].toLowerCase().indexOf(_this.filter.toLowerCase()) > -1;
                      }));
                  }
                  obj.list = arr;
                  if (obj[_this.settings.labelKey].toLowerCase().indexOf(_this.filter.toLowerCase()) > -1) {
                      return arr;
                  }
                  else {
                      return arr.some((/**
                       * @param {?} cat
                       * @return {?}
                       */
                      function (cat) {
                          return cat[_this.settings.labelKey].toLowerCase().indexOf(_this.filter.toLowerCase()) > -1;
                      }));
                  }
              }));
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.toggleFilterSelectAll = /**
           * @return {?}
           */
          function () {
              var _this = this;
              if (!this.isFilterSelectAll) {
                  /** @type {?} */
                  var added_1 = [];
                  if (this.settings.groupBy) {
                      /*                 this.groupedData.forEach((item: any) => {
                                          if (item.list) {
                                              item.list.forEach((el: any) => {
                                                  if (!this.isSelected(el)) {
                                                      this.addSelected(el);
                                                      added.push(el);
                                                  }
                                              });
                                          }
                                          this.updateGroupInfo(item);
                      
                                      }); */
                      this.ds.getFilteredData().forEach((/**
                       * @param {?} el
                       * @return {?}
                       */
                      function (el) {
                          if (!_this.isSelected(el) && !el.hasOwnProperty('grpTitle')) {
                              _this.addSelected(el);
                              added_1.push(el);
                          }
                      }));
                  }
                  else {
                      this.ds.getFilteredData().forEach((/**
                       * @param {?} item
                       * @return {?}
                       */
                      function (item) {
                          if (!_this.isSelected(item)) {
                              _this.addSelected(item);
                              added_1.push(item);
                          }
                      }));
                  }
                  this.isFilterSelectAll = true;
                  this.onFilterSelectAll.emit(added_1);
              }
              else {
                  /** @type {?} */
                  var removed_1 = [];
                  if (this.settings.groupBy) {
                      /*                 this.groupedData.forEach((item: any) => {
                                          if (item.list) {
                                              item.list.forEach((el: any) => {
                                                  if (this.isSelected(el)) {
                                                      this.removeSelected(el);
                                                      removed.push(el);
                                                  }
                                              });
                                          }
                                      }); */
                      this.ds.getFilteredData().forEach((/**
                       * @param {?} el
                       * @return {?}
                       */
                      function (el) {
                          if (_this.isSelected(el)) {
                              _this.removeSelected(el);
                              removed_1.push(el);
                          }
                      }));
                  }
                  else {
                      this.ds.getFilteredData().forEach((/**
                       * @param {?} item
                       * @return {?}
                       */
                      function (item) {
                          if (_this.isSelected(item)) {
                              _this.removeSelected(item);
                              removed_1.push(item);
                          }
                      }));
                  }
                  this.isFilterSelectAll = false;
                  this.onFilterDeSelectAll.emit(removed_1);
              }
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.toggleInfiniteFilterSelectAll = /**
           * @return {?}
           */
          function () {
              var _this = this;
              if (!this.isInfiniteFilterSelectAll) {
                  this.virtualdata.forEach((/**
                   * @param {?} item
                   * @return {?}
                   */
                  function (item) {
                      if (!_this.isSelected(item)) {
                          _this.addSelected(item);
                      }
                  }));
                  this.isInfiniteFilterSelectAll = true;
              }
              else {
                  this.virtualdata.forEach((/**
                   * @param {?} item
                   * @return {?}
                   */
                  function (item) {
                      if (_this.isSelected(item)) {
                          _this.removeSelected(item);
                      }
                  }));
                  this.isInfiniteFilterSelectAll = false;
              }
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.clearSearch = /**
           * @return {?}
           */
          function () {
              if (this.settings.groupBy) {
                  this.groupedData = [];
                  this.groupedData = this.cloneArray(this.groupCachedItems);
              }
              this.filter = "";
              this.isFilterSelectAll = false;
          };
          /**
           * @param {?} data
           * @return {?}
           */
          AngularMultiSelect.prototype.onFilterChange = /**
           * @param {?} data
           * @return {?}
           */
          function (data) {
              var _this = this;
              if (this.filter && this.filter == "" || data.length == 0) {
                  this.isFilterSelectAll = false;
              }
              /** @type {?} */
              var cnt = 0;
              data.forEach((/**
               * @param {?} item
               * @return {?}
               */
              function (item) {
                  if (!item.hasOwnProperty('grpTitle') && _this.isSelected(item)) {
                      cnt++;
                  }
              }));
              if (cnt > 0 && this.filterLength == cnt) {
                  this.isFilterSelectAll = true;
              }
              else if (cnt > 0 && this.filterLength != cnt) {
                  this.isFilterSelectAll = false;
              }
              this.cdr.detectChanges();
          };
          /**
           * @param {?} arr
           * @return {?}
           */
          AngularMultiSelect.prototype.cloneArray = /**
           * @param {?} arr
           * @return {?}
           */
          function (arr) {
              if (Array.isArray(arr)) {
                  return JSON.parse(JSON.stringify(arr));
              }
              else if (typeof arr === 'object') {
                  throw 'Cannot clone array containing an object!';
              }
              else {
                  return arr;
              }
          };
          /**
           * @param {?} item
           * @return {?}
           */
          AngularMultiSelect.prototype.updateGroupInfo = /**
           * @param {?} item
           * @return {?}
           */
          function (item) {
              var _this = this;
              /** @type {?} */
              var key = this.settings.groupBy;
              this.groupedData.forEach((/**
               * @param {?} obj
               * @return {?}
               */
              function (obj) {
                  /** @type {?} */
                  var cnt = 0;
                  if (obj.grpTitle && (item[key] == obj[key])) {
                      if (obj.list) {
                          obj.list.forEach((/**
                           * @param {?} el
                           * @return {?}
                           */
                          function (el) {
                              if (_this.isSelected(el)) {
                                  cnt++;
                              }
                          }));
                      }
                  }
                  if (obj.list && (cnt === obj.list.length) && (item[key] == obj[key])) {
                      obj.selected = true;
                  }
                  else if (obj.list && (cnt != obj.list.length) && (item[key] == obj[key])) {
                      obj.selected = false;
                  }
              }));
              this.groupCachedItems.forEach((/**
               * @param {?} obj
               * @return {?}
               */
              function (obj) {
                  /** @type {?} */
                  var cnt = 0;
                  if (obj.grpTitle && (item[key] == obj[key])) {
                      if (obj.list) {
                          obj.list.forEach((/**
                           * @param {?} el
                           * @return {?}
                           */
                          function (el) {
                              if (_this.isSelected(el)) {
                                  cnt++;
                              }
                          }));
                      }
                  }
                  if (obj.list && (cnt === obj.list.length) && (item[key] == obj[key])) {
                      obj.selected = true;
                  }
                  else if (obj.list && (cnt != obj.list.length) && (item[key] == obj[key])) {
                      obj.selected = false;
                  }
              }));
          };
          /**
           * @param {?} arr
           * @param {?} field
           * @return {?}
           */
          AngularMultiSelect.prototype.transformData = /**
           * @param {?} arr
           * @param {?} field
           * @return {?}
           */
          function (arr, field) {
              var _this = this;
              /** @type {?} */
              var groupedObj = arr.reduce((/**
               * @param {?} prev
               * @param {?} cur
               * @return {?}
               */
              function (prev, cur) {
                  if (!prev[cur[field]]) {
                      prev[cur[field]] = [cur];
                  }
                  else {
                      prev[cur[field]].push(cur);
                  }
                  return prev;
              }), {});
              /** @type {?} */
              var tempArr = [];
              Object.keys(groupedObj).map((/**
               * @param {?} x
               * @return {?}
               */
              function (x) {
                  /** @type {?} */
                  var obj = {};
                  obj["grpTitle"] = true;
                  obj[_this.settings.labelKey] = x;
                  obj[_this.settings.groupBy] = x;
                  obj['selected'] = false;
                  obj['list'] = [];
                  /** @type {?} */
                  var cnt = 0;
                  groupedObj[x].forEach((/**
                   * @param {?} item
                   * @return {?}
                   */
                  function (item) {
                      item['list'] = [];
                      obj.list.push(item);
                      if (_this.isSelected(item)) {
                          cnt++;
                      }
                  }));
                  if (cnt == obj.list.length) {
                      obj.selected = true;
                  }
                  else {
                      obj.selected = false;
                  }
                  tempArr.push(obj);
                  // obj.list.forEach((item: any) => {
                  //     tempArr.push(item);
                  // });
              }));
              return tempArr;
          };
          /**
           * @param {?} evt
           * @return {?}
           */
          AngularMultiSelect.prototype.filterInfiniteList = /**
           * @param {?} evt
           * @return {?}
           */
          function (evt) {
              var _this = this;
              /** @type {?} */
              var filteredElems = [];
              if (this.settings.groupBy) {
                  this.groupedData = this.groupCachedItems.slice();
              }
              else {
                  this.data = this.cachedItems.slice();
                  this.virtualdata = this.cachedItems.slice();
              }
              if ((evt != null || evt != '') && !this.settings.groupBy) {
                  if (this.settings.searchBy.length > 0) {
                      var _loop_1 = function (t) {
                          this_1.virtualdata.filter((/**
                           * @param {?} el
                           * @return {?}
                           */
                          function (el) {
                              if (el[_this.settings.searchBy[t].toString()].toString().toLowerCase().indexOf(evt.toString().toLowerCase()) >= 0) {
                                  filteredElems.push(el);
                              }
                          }));
                      };
                      var this_1 = this;
                      for (var t = 0; t < this.settings.searchBy.length; t++) {
                          _loop_1(t);
                      }
                  }
                  else {
                      this.virtualdata.filter((/**
                       * @param {?} el
                       * @return {?}
                       */
                      function (el) {
                          for (var prop in el) {
                              if (el[prop].toString().toLowerCase().indexOf(evt.toString().toLowerCase()) >= 0) {
                                  filteredElems.push(el);
                                  break;
                              }
                          }
                      }));
                  }
                  this.virtualdata = [];
                  this.virtualdata = filteredElems;
                  this.infiniteFilterLength = this.virtualdata.length;
              }
              if (evt.toString() != '' && this.settings.groupBy) {
                  this.groupedData.filter((/**
                   * @param {?} el
                   * @return {?}
                   */
                  function (el) {
                      if (el.hasOwnProperty('grpTitle')) {
                          filteredElems.push(el);
                      }
                      else {
                          for (var prop in el) {
                              if (el[prop].toString().toLowerCase().indexOf(evt.toString().toLowerCase()) >= 0) {
                                  filteredElems.push(el);
                                  break;
                              }
                          }
                      }
                  }));
                  this.groupedData = [];
                  this.groupedData = filteredElems;
                  this.infiniteFilterLength = this.groupedData.length;
              }
              else if (evt.toString() == '' && this.cachedItems.length > 0) {
                  this.virtualdata = [];
                  this.virtualdata = this.cachedItems;
                  this.infiniteFilterLength = 0;
              }
              this.virtualScroller.refresh();
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.resetInfiniteSearch = /**
           * @return {?}
           */
          function () {
              this.filter = "";
              this.isInfiniteFilterSelectAll = false;
              this.virtualdata = [];
              this.virtualdata = this.cachedItems;
              this.groupedData = this.groupCachedItems;
              this.infiniteFilterLength = 0;
          };
          /**
           * @param {?} e
           * @return {?}
           */
          AngularMultiSelect.prototype.onScrollEnd = /**
           * @param {?} e
           * @return {?}
           */
          function (e) {
              if (e.endIndex === this.data.length - 1 || e.startIndex === 0) ;
              this.onScrollToEnd.emit(e);
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.ngOnDestroy = /**
           * @return {?}
           */
          function () {
              if (this.subscription) {
                  this.subscription.unsubscribe();
              }
          };
          /**
           * @param {?} item
           * @return {?}
           */
          AngularMultiSelect.prototype.selectGroup = /**
           * @param {?} item
           * @return {?}
           */
          function (item) {
              var _this = this;
              if (item.selected) {
                  item.selected = false;
                  item.list.forEach((/**
                   * @param {?} obj
                   * @return {?}
                   */
                  function (obj) {
                      _this.removeSelected(obj);
                  }));
                  this.updateGroupInfo(item);
                  this.onGroupSelect.emit(item);
              }
              else {
                  item.selected = true;
                  item.list.forEach((/**
                   * @param {?} obj
                   * @return {?}
                   */
                  function (obj) {
                      if (!_this.isSelected(obj)) {
                          _this.addSelected(obj);
                      }
                  }));
                  this.updateGroupInfo(item);
                  this.onGroupDeSelect.emit(item);
              }
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.addFilterNewItem = /**
           * @return {?}
           */
          function () {
              this.onAddFilterNewItem.emit(this.filter);
              this.filterPipe = new ListFilterPipe(this.ds);
              this.filterPipe.transform(this.data, this.filter, this.settings.searchBy);
          };
          /**
           * @return {?}
           */
          AngularMultiSelect.prototype.calculateDropdownDirection = /**
           * @return {?}
           */
          function () {
              /** @type {?} */
              var shouldOpenTowardsTop = this.settings.position == 'top';
              if (this.settings.autoPosition) {
                  /** @type {?} */
                  var dropdownHeight = this.dropdownListElem.nativeElement.clientHeight;
                  /** @type {?} */
                  var viewportHeight = document.documentElement.clientHeight;
                  /** @type {?} */
                  var selectedListBounds = this.selectedListElem.nativeElement.getBoundingClientRect();
                  /** @type {?} */
                  var spaceOnTop = selectedListBounds.top;
                  /** @type {?} */
                  var spaceOnBottom = viewportHeight - selectedListBounds.top;
                  if (spaceOnBottom < spaceOnTop && dropdownHeight < spaceOnTop) {
                      this.openTowardsTop(true);
                  }
                  else {
                      this.openTowardsTop(false);
                  }
                  // Keep preference if there is not enough space on either the top or bottom
                  /* 			if (spaceOnTop || spaceOnBottom) {
                                  if (shouldOpenTowardsTop) {
                                      shouldOpenTowardsTop = spaceOnTop;
                                  } else {
                                      shouldOpenTowardsTop = !spaceOnBottom;
                                  }
                              } */
              }
          };
          /**
           * @param {?} value
           * @return {?}
           */
          AngularMultiSelect.prototype.openTowardsTop = /**
           * @param {?} value
           * @return {?}
           */
          function (value) {
              if (value && this.selectedListElem.nativeElement.clientHeight) {
                  this.dropdownListYOffset = 15 + this.selectedListElem.nativeElement.clientHeight;
              }
              else {
                  this.dropdownListYOffset = 0;
              }
          };
          /**
           * @param {?} e
           * @return {?}
           */
          AngularMultiSelect.prototype.clearSelection = /**
           * @param {?} e
           * @return {?}
           */
          function (e) {
              if (this.settings.groupBy) {
                  this.groupCachedItems.forEach((/**
                   * @param {?} obj
                   * @return {?}
                   */
                  function (obj) {
                      obj.selected = false;
                  }));
              }
              this.clearSearch();
              this.selectedItems = [];
              this.onDeSelectAll.emit(this.selectedItems);
          };
          AngularMultiSelect.decorators = [
              { type: core.Component, args: [{
                          selector: 'angular2-multiselect',
                          template: "<div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdownOnClickOut()\">\n    <div class=\"selected-list\" #selectedList>\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\" [attr.tabindex]=\"0\">\n\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n            <span *ngIf=\"settings.singleSelection && !badgeTempl\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);\">\n                    {{item[settings.labelKey]}}\n                </span>\n            </span>\n            <span class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && settings.singleSelection && badgeTempl \">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n\n            <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                            <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                        </span>\n            <span class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\">\n                <c-icon [name]=\"'remove'\"></c-icon>\n            </span>\n        </div>\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.bind(this);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=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\">\n                    <c-icon [name]=\"'remove'\"></c-icon>\n                </span>\n            </div>\n        </div>\n        <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n        <span class=\"c-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\">\n            <c-icon [name]=\"'remove'\"></c-icon>\n        </span>\n        <span *ngIf=\"!isActive\" class=\"c-angle-down\">\n    <c-icon [name]=\"'angle-down'\"></c-icon>\n            </span>\n        <span *ngIf=\"isActive\" class=\"c-angle-up\">\n            <c-icon [name]=\"'angle-up'\"></c-icon>\n\n            </span>\n    </div>\n</div>\n<div #dropdownList class=\"dropdown-list animated fadeIn\"\n[ngClass]=\"{'dropdown-list-top': dropdownListYOffset}\"\n[style.bottom.px]=\"dropdownListYOffset ? dropdownListYOffset : null\"\n[hidden]=\"!isActive\">\n    <div [ngClass]=\"{'arrow-up': !dropdownListYOffset, 'arrow-down': dropdownListYOffset}\" class=\"arrow-2\"></div>\n    <div [ngClass]=\"{'arrow-up': !dropdownListYOffset, 'arrow-down': dropdownListYOffset}\"></div>\n<div class=\"list-area\" [ngClass]=\"{'single-select-mode': settings.singleSelection }\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0\"\n            (click)=\"toggleSelectAll()\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n            />\n            <label>\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n            </label>\n        </div>\n        <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\"/>\n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n            <span class=\"c-search\">\n                <c-icon [name]=\"'search'\"></c-icon>\n                </span>\n            <span *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"clearSearch()\">\n                <c-icon [name]=\"'clear'\"></c-icon>\n                </span>\n            <span *ngIf=\"settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (click)=\"resetInfiniteSearch()\">\n                <c-icon [name]=\"'clear'\"></c-icon>\n                </span>\n\n            <input class=\"c-input\" *ngIf=\"settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                [(ngModel)]=\"filter\" (keyup)=\"filterGroupedList()\">\n                <input class=\"c-input\" *ngIf=\"!settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                [(ngModel)]=\"filter\" >\n            <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                [(ngModel)]=\"filter\" (keyup)=\"searchTerm$.next($event.target.value)\">\n            <!--            <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl && settings.groupBy\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n                [(ngModel)]=\"filter\" (keyup)=\"filterGroupList($event)\">-->\n            <c-templateRenderer *ngIf=\"searchTempl\" [data]=\"searchTempl\" [item]=\"item\"></c-templateRenderer>\n        </div>\n        <div class=\"filter-select-all\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll\">\n            <div class=\"pure-checkbox select-all\" *ngIf=\"!settings.groupBy && filter?.length > 0 && filterLength > 0\" (click)=\"toggleFilterSelectAll()\">\n                <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\" />\n                <label>\n                <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n            </label>\n            </div>\n            <div class=\"pure-checkbox select-all\" *ngIf=\"settings.groupBy && filter?.length > 0 && groupedData?.length > 0\" (click)=\"toggleFilterSelectAll()\">\n                    <input type=\"checkbox\" [checked]=\"isFilterSelectAll && filter?.length > 0\" [disabled]=\"settings.limitSelection == selectedItems?.length\" />\n                    <label>\n                    <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                    <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n                </label>\n                </div>\n            <label class=\"nodata-label\" *ngIf=\"!settings.groupBy && filterLength == 0\" [hidden]=\"filter == undefined || filter?.length == 0\">{{settings.noDataLabel}}</label>\n            <label class=\"nodata-label\" *ngIf=\"settings.groupBy && groupedData?.length == 0\" [hidden]=\"filter == undefined || filter?.length == 0\">{{settings.noDataLabel}}</label>\n\n            <div class=\"btn-container\" *ngIf=\"settings.addNewItemOnFilter && filterLength == 0\" [hidden]=\"filter == undefined || filter?.length == 0\">\n            <button class=\"c-btn btn-iceblue\" (click)=\"addFilterNewItem()\">{{settings.addNewButtonText}}</button>\n            </div>\n        </div>\n        <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll\">\n            <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\">\n                <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                />\n                <label>\n                <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n                <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n            </label>\n            </div>\n        </div>\n\n        <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n            <ul class=\"lazyContainer\">\n                <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                    class=\"pure-checkbox\" [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n                    <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n            </ul>\n        </div>\n        <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n                <ul virtualScroller #scroll [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n                    <li *ngFor=\"let item of scroll.viewPortItems; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox\" [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                        />\n                        <label>{{item[settings.labelKey]}}</label>\n                    </li>\n                </ul>\n        </div>\n        <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n            <ul class=\"lazyContainer\">\n                <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                    class=\"pure-checkbox\" [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n                    <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label></label>\n                    <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                </li>\n            </ul>\n        </div>\n        <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n                <ul virtualScroller #scroll2 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                (vsEnd)=\"onScrollEnd($event)\" class=\"lazyContainer\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n                    <li *ngFor=\"let item of scroll2.viewPortItems; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n                        class=\"pure-checkbox\" [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                        />\n                        <label></label>\n                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                    </li>\n                </ul>\n        </div>\n        <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n            <ul virtualScroller #scroll3 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n            (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n                <span *ngFor=\"let item of scroll3.viewPortItems; let i = index;\">\n                <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label></label>\n                    <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                </li>\n                <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label></label>\n                    <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                </li>\n                </span>\n            </ul>\n        </div>\n        <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl != undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n            <ul class=\"lazyContainer\">\n                <span *ngFor=\"let item of groupedData; let i = index;\">\n                    <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                    <ul class=\"lazyContainer\">\n                        <span *ngFor=\"let val of item.list ; let j = index;\">\n                        <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection}\" class=\"pure-checkbox\">\n                                <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(val)\"\n                                />\n                                <label></label>\n                                <c-templateRenderer [data]=\"itemTempl\" [item]=\"val\"></c-templateRenderer>\n                            </li>\n                            </span>\n                </ul>\n                    \n                </li>\n                </span>\n            </ul>\n        </div>\n        <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n            <virtual-scroller [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n                <ul virtualScroller #scroll4 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\" (vsStart)=\"onScrollEnd($event)\"\n                (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n                    <span *ngFor=\"let item of scroll4.viewPortItems; let i = index;\">\n                <li  *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && !item.grpTitle && !settings.singleSelection\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                </span>\n                </ul>\n            </virtual-scroller>\n        </div>\n        <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl == undefined\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n            <ul class=\"lazyContainer\">\n                    <span *ngFor=\"let item of groupedData ; let i = index;\">\n                            <li (click)=\"selectGroup(item)\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\" class=\"pure-checkbox\">\n                                    <input  *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                                    />\n                                    <label>{{item[settings.labelKey]}}</label>\n                                    <ul class=\"lazyContainer\">\n                                            <span *ngFor=\"let val of item.list ; let j = index;\">\n                                            <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\" [ngClass]=\"{'selected-item': isSelected(val) == true,'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection}\" class=\"pure-checkbox\">\n                                                    <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(val)\"\n                                                    />\n                                                    <label>{{val[settings.labelKey]}}</label>\n                                                </li>\n                                                </span>\n                                    </ul>\n                                </li>\n                    </span>\n                <!-- <span *ngFor=\"let item of groupedData ; let i = index;\">\n                    <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                <li *ngIf=\"item.grpTitle && !settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\n                    <label>{{item[settings.labelKey]}}</label>\n                </li>\n                 <li  (click)=\"selectGroup(item)\" *ngIf=\"item.grpTitle && settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n                    <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n                    />\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>",
                          host: { '[class]': 'defaultSettings.classes' },
                          providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION],
                          encapsulation: core.ViewEncapsulation.None,
                          styles: ["virtual-scroll{display:block;width:100%}.cuppa-dropdown{position:relative}.c-btn{display:inline-block;border-width:1px;line-height:1.25;border-radius:3px;font-size:.85rem;padding:5px 10px;cursor:pointer;align-items:center;min-height:38px}.c-btn.disabled{background:#ccc}.selected-list .c-list{float:left;padding:0;margin:0;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:4px 22px 4px 8px;border-radius:2px;margin-right:4px;margin-top:2px;float:left;position:relative}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .c-remove{position:absolute;right:8px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:8px}.selected-list .c-list .c-token .c-remove svg{fill:#fff}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.selected-list .c-angle-down,.selected-list .c-angle-up{width:12px;height:12px;position:absolute;right:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}.selected-list .c-angle-down svg,.selected-list .c-angle-up svg{fill:#333}.selected-list .countplaceholder{position:absolute;right:45px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.selected-list .c-btn{width:100%;padding:5px 10px;cursor:pointer;display:flex;position:relative}.selected-list .c-btn .c-icon{position:absolute;right:5px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:99999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding: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 ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-down,.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}.arrow-down{bottom:-14px;top:unset;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.arrow-down.arrow-2{top:unset;bottom:-16px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative;padding-left:35px;height:35px}.list-filter input{border:0;width:100%;height:100%;padding:0}.list-filter input:focus{outline:0}.list-filter .c-search{position:absolute;top:9px;left:10px;width:15px;height:15px}.list-filter .c-search svg{fill:#888}.list-filter .c-clear{position:absolute;top:10px;right:10px;width:15px;height:15px}.list-filter .c-clear svg{fill:#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{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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin:0;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:'';position:absolute;top:50%;left:0;width:15px;height:15px;margin-top:-9px;text-align:center;transition:.4s;border-radius:3px}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:'';position:absolute;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50%;transform-origin:50%;transition:transform .2s ease-out,-webkit-transform .2s ease-out;background-color:transparent;top:50%;left:3px;width:9px;height:4px;margin-top:-5px;border-style:solid;border-width:0 0 2px 2px;-o-border-image:none;border-image:none;-webkit-transform:rotate(-45deg) scale(0);transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.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:#ccc}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{-webkit-transform:scale(1);transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:after{content:'';transition:transform .2s ease-out,-webkit-transform .2s ease-out;-webkit-transform:rotate(-45deg) scale(1);transform:rotate(-45deg) scale(1)}.list-message{text-align:center;margin:0;padding:15px 0;font-size:initial}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.grp-item{padding-left:30px!important}.grp-title{padding-bottom:0!important}.grp-title label{margin-bottom:0!important;font-weight:800;text-transform:capitalize}.grp-title:hover{background:0 0!important}.loading-icon{width:20px;position:absolute;right:10px;top:23px;z-index:1}.nodata-label{width:100%;text-align:center;padding:10px 0 0}.btn-container{text-align:center;padding:0 5px 10px}.clear-all{width:8px;position:absolute;top:50%;right:30px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}"]
                      }] }
          ];
          /** @nocollapse */
          AngularMultiSelect.ctorParameters = function () { return [
              { type: core.ElementRef },
              { type: core.ChangeDetectorRef },
              { type: DataService }
          ]; };
          AngularMultiSelect.propDecorators = {
              data: [{ type: core.Input }],
              settings: [{ type: core.Input }],
              loading: [{ type: core.Input }],
              onSelect: [{ type: core.Output, args: ['onSelect',] }],
              onDeSelect: [{ type: core.Output, args: ['onDeSelect',] }],
              onSelectAll: [{ type: core.Output, args: ['onSelectAll',] }],
              onDeSelectAll: [{ type: core.Output, args: ['onDeSelectAll',] }],
              onOpen: [{ type: core.Output, args: ['onOpen',] }],
              onClose: [{ type: core.Output, args: ['onClose',] }],
              onScrollToEnd: [{ type: core.Output, args: ['onScrollToEnd',] }],
              onFilterSelectAll: [{ type: core.Output, args: ['onFilterSelectAll',] }],
              onFilterDeSelectAll: [{ type: core.Output, args: ['onFilterDeSelectAll',] }],
              onAddFilterNewItem: [{ type: core.Output, args: ['onAddFilterNewItem',] }],
              onGroupSelect: [{ type: core.Output, args: ['onGroupSelect',] }],
              onGroupDeSelect: [{ type: core.Output, args: ['onGroupDeSelect',] }],
              itemTempl: [{ type: core.ContentChild, args: [Item, { static: false },] }],
              badgeTempl: [{ type: core.ContentChild, args: [Badge, { static: false },] }],
              searchTempl: [{ type: core.ContentChild, args: [Search, { static: false },] }],
              searchInput: [{ type: core.ViewChild, args: ['searchInput', { static: false },] }],
              selectedListElem: [{ type: core.ViewChild, args: ['selectedList', { static: false },] }],
              dropdownListElem: [{ type: core.ViewChild, args: ['dropdownList', { static: false },] }],
              onEscapeDown: [{ type: core.HostListener, args: ['document:keyup.escape', ['$event'],] }],
              virtualScroller: [{ type: core.ViewChild, args: [VirtualScrollerComponent, { static: false },] }]
          };
          return AngularMultiSelect;
      }());
      var AngularMultiSelectModule = /** @class */ (function () {
          function AngularMultiSelectModule() {
          }
          AngularMultiSelectModule.decorators = [
              { type: core.NgModule, args: [{
                          imports: [common.CommonModule, forms.FormsModule, VirtualScrollerModule],
                          declarations: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge, Search, setPosition, CIcon],
                          exports: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge, Search, setPosition, CIcon],
                          providers: [DataService]
                      },] }
          ];
          return AngularMultiSelectModule;
      }());
  
      exports.AngularMultiSelect = AngularMultiSelect;
      exports.AngularMultiSelectModule = AngularMultiSelectModule;
      exports.ClickOutsideDirective = ClickOutsideDirective;
      exports.Item = Item;
      exports.ListFilterPipe = ListFilterPipe;
      exports.TemplateRenderer = TemplateRenderer;
      exports.ɵa = DROPDOWN_CONTROL_VALUE_ACCESSOR;
      exports.ɵb = DROPDOWN_CONTROL_VALIDATION;
      exports.ɵc = ScrollDirective;
      exports.ɵd = styleDirective;
      exports.ɵe = setPosition;
      exports.ɵf = Badge;
      exports.ɵg = Search;
      exports.ɵh = CIcon;
      exports.ɵi = VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY;
      exports.ɵj = VirtualScrollerComponent;
      exports.ɵk = VirtualScrollerModule;
      exports.ɵm = DataService;
  
      Object.defineProperty(exports, '__esModule', { value: true });
  
  }));
  //# sourceMappingURL=angular2-multiselect-dropdown.umd.js.map
  