text: (function (global, factory) {
  	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/platform-browser')) :
  	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/platform-browser'], factory) :
  	(factory((global['ngx-gallery'] = {}),global.core,global.common,global.platformBrowser));
  }(this, (function (exports,core,common,platformBrowser) { 'use strict';
  
  var NgxGalleryArrowsComponent = /** @class */ (function () {
      function NgxGalleryArrowsComponent() {
          this.onPrevClick = new core.EventEmitter();
          this.onNextClick = new core.EventEmitter();
      }
      /**
       * @return {?}
       */
      NgxGalleryArrowsComponent.prototype.handlePrevClick = function () {
          this.onPrevClick.emit();
      };
      /**
       * @return {?}
       */
      NgxGalleryArrowsComponent.prototype.handleNextClick = function () {
          this.onNextClick.emit();
      };
      NgxGalleryArrowsComponent.decorators = [
          { type: core.Component, args: [{
                      selector: 'ngx-gallery-arrows',
                      template: "\n        <div class=\"ngx-gallery-arrow-wrapper ngx-gallery-arrow-left\">\n            <i class=\"ngx-gallery-icon ngx-gallery-arrow {{arrowPrevIcon}}\" aria-hidden=\"true\" (click)=\"handlePrevClick()\" [class.ngx-gallery-disabled]=\"prevDisabled\"></i>\n        </div>\n        <div class=\"ngx-gallery-arrow-wrapper ngx-gallery-arrow-right\">\n            <i class=\"ngx-gallery-icon ngx-gallery-arrow {{arrowNextIcon}}\" aria-hidden=\"true\" (click)=\"handleNextClick()\" [class.ngx-gallery-disabled]=\"nextDisabled\"></i>\n        </div>\n    ",
                      styles: [".ngx-gallery-arrow-wrapper { position: absolute; height: 100%; width: 1px; display: table; z-index: 2000; table-layout: fixed; } .ngx-gallery-arrow-left { left: 0px; } .ngx-gallery-arrow-right { right: 0px; } .ngx-gallery-arrow { top: 50%; transform: translateY(-50%); cursor: pointer; } .ngx-gallery-arrow.ngx-gallery-disabled { opacity: 0.6; cursor: default; } .ngx-gallery-arrow-left .ngx-gallery-arrow { left: 10px; } .ngx-gallery-arrow-right .ngx-gallery-arrow { right: 10px; } "]
                  },] },
      ];
      /**
       * @nocollapse
       */
      NgxGalleryArrowsComponent.ctorParameters = function () { return []; };
      NgxGalleryArrowsComponent.propDecorators = {
          'prevDisabled': [{ type: core.Input },],
          'nextDisabled': [{ type: core.Input },],
          'arrowPrevIcon': [{ type: core.Input },],
          'arrowNextIcon': [{ type: core.Input },],
          'onPrevClick': [{ type: core.Output },],
          'onNextClick': [{ type: core.Output },],
      };
      return NgxGalleryArrowsComponent;
  }());
  
  var NgxGalleryHelperService = /** @class */ (function () {
      /**
       * @param {?} renderer
       */
      function NgxGalleryHelperService(renderer) {
          this.renderer = renderer;
          this.swipeHandlers = new Map();
      }
      /**
       * @param {?} status
       * @param {?} element
       * @param {?} id
       * @param {?} nextHandler
       * @param {?} prevHandler
       * @return {?}
       */
      NgxGalleryHelperService.prototype.manageSwipe = function (status, element, id, nextHandler, prevHandler) {
          var /** @type {?} */ handlers = this.getSwipeHandlers(id);
          // swipeleft and swiperight are available only if hammerjs is included
          try {
              if (status && !handlers) {
                  this.swipeHandlers.set(id, [
                      this.renderer.listen(element.nativeElement, 'swipeleft', function () { return nextHandler(); }),
                      this.renderer.listen(element.nativeElement, 'swiperight', function () { return prevHandler(); })
                  ]);
              }
              else if (!status && handlers) {
                  handlers.map(function (handler) { return handler(); });
                  this.removeSwipeHandlers(id);
              }
          }
          catch (e) { }
      };
      /**
       * @param {?} url
       * @return {?}
       */
      NgxGalleryHelperService.prototype.validateUrl = function (url) {
          return url.replace(new RegExp(' ', 'g'), '%20');
      };
      /**
       * @param {?} image
       * @return {?}
       */
      NgxGalleryHelperService.prototype.getBackgroundUrl = function (image) {
          return 'url(\'' + this.validateUrl(image) + '\')';
      };
      /**
       * @param {?} id
       * @return {?}
       */
      NgxGalleryHelperService.prototype.getSwipeHandlers = function (id) {
          return this.swipeHandlers.get(id);
      };
      /**
       * @param {?} id
       * @return {?}
       */
      NgxGalleryHelperService.prototype.removeSwipeHandlers = function (id) {
          this.swipeHandlers.delete(id);
      };
      NgxGalleryHelperService.decorators = [
          { type: core.Injectable },
      ];
      /**
       * @nocollapse
       */
      NgxGalleryHelperService.ctorParameters = function () { return [
          { type: core.Renderer, },
      ]; };
      return NgxGalleryHelperService;
  }());
  
  var NgxGalleryImageComponent = /** @class */ (function () {
      /**
       * @param {?} sanitization
       * @param {?} elementRef
       * @param {?} helperService
       */
      function NgxGalleryImageComponent(sanitization, elementRef, helperService) {
          this.sanitization = sanitization;
          this.elementRef = elementRef;
          this.helperService = helperService;
          this.onClick = new core.EventEmitter();
          this.onActiveChange = new core.EventEmitter();
      }
      /**
       * @return {?}
       */
      NgxGalleryImageComponent.prototype.ngOnInit = function () {
          if (this.arrows && this.arrowsAutoHide) {
              this.arrows = false;
          }
          if (this.autoPlay) {
              this.startAutoPlay();
          }
      };
      /**
       * @param {?} changes
       * @return {?}
       */
      NgxGalleryImageComponent.prototype.ngOnChanges = function (changes) {
          var _this = this;
          if (changes['images'] && changes['images'].currentValue
              && this.selectedIndex >= changes['images'].currentValue.length) {
              this.selectedIndex = 0;
          }
          if (changes['swipe']) {
              this.helperService.manageSwipe(this.swipe, this.elementRef, 'image', function () { return _this.showNext(); }, function () { return _this.showPrev(); });
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryImageComponent.prototype.onMouseEnter = function () {
          if (this.arrowsAutoHide && !this.arrows) {
              this.arrows = true;
          }
          if (this.autoPlay && this.autoPlayPauseOnHover) {
              this.stopAutoPlay();
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryImageComponent.prototype.onMouseLeave = function () {
          if (this.arrowsAutoHide && this.arrows) {
              this.arrows = false;
          }
          if (this.autoPlay && this.autoPlayPauseOnHover) {
              this.startAutoPlay();
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryImageComponent.prototype.startAutoPlay = function () {
          var _this = this;
          this.stopAutoPlay();
          this.timer = setInterval(function () {
              if (!_this.showNext()) {
                  _this.selectedIndex = -1;
                  _this.showNext();
              }
          }, this.autoPlayInterval);
      };
      /**
       * @return {?}
       */
      NgxGalleryImageComponent.prototype.stopAutoPlay = function () {
          if (this.timer) {
              clearInterval(this.timer);
          }
      };
      /**
       * @param {?} event
       * @param {?} index
       * @return {?}
       */
      NgxGalleryImageComponent.prototype.handleClick = function (event, index) {
          if (this.clickable) {
              this.onClick.emit(index);
              event.stopPropagation();
              event.preventDefault();
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryImageComponent.prototype.showNext = function () {
          if (this.canShowNext()) {
              this.selectedIndex++;
              if (this.selectedIndex === this.images.length) {
                  this.selectedIndex = 0;
              }
              this.onActiveChange.emit(this.selectedIndex);
              return true;
          }
          else {
              return false;
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryImageComponent.prototype.showPrev = function () {
          if (this.canShowPrev()) {
              this.selectedIndex--;
              if (this.selectedIndex < 0) {
                  this.selectedIndex = this.images.length - 1;
              }
              this.onActiveChange.emit(this.selectedIndex);
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryImageComponent.prototype.canShowNext = function () {
          if (this.images) {
              return this.infinityMove || this.selectedIndex < this.images.length - 1
                  ? true : false;
          }
          else {
              return false;
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryImageComponent.prototype.canShowPrev = function () {
          if (this.images) {
              return this.infinityMove || this.selectedIndex > 0 ? true : false;
          }
          else {
              return false;
          }
      };
      /**
       * @param {?} image
       * @return {?}
       */
      NgxGalleryImageComponent.prototype.getSafeUrl = function (image) {
          return this.sanitization.bypassSecurityTrustStyle(this.helperService.getBackgroundUrl(image));
      };
      NgxGalleryImageComponent.decorators = [
          { type: core.Component, args: [{
                      selector: 'ngx-gallery-image',
                      template: "\n        <div class=\"ngx-gallery-image-wrapper ngx-gallery-animation-{{animation}} ngx-gallery-image-size-{{size}}\">\n            <div class=\"ngx-gallery-image\" *ngFor=\"let image of images; let i = index\" [ngClass]=\"{ 'ngx-gallery-active': selectedIndex == i, 'ngx-gallery-inactive-left': selectedIndex > i, 'ngx-gallery-inactive-right': selectedIndex < i, 'ngx-gallery-clickable': clickable }\" [style.background-image]=\"getSafeUrl(image)\" (click)=\"handleClick($event, i)\"></div>\n        </div>\n        <ngx-gallery-arrows class=\"ngx-gallery-image-size-{{size}}\" *ngIf=\"arrows\" (onPrevClick)=\"showPrev()\" (onNextClick)=\"showNext()\" [prevDisabled]=\"!canShowPrev()\" [nextDisabled]=\"!canShowNext()\" [arrowPrevIcon]=\"arrowPrevIcon\" [arrowNextIcon]=\"arrowNextIcon\"></ngx-gallery-arrows>\n    ",
                      styles: [":host { width: 100%; display: inline-block; position: relative; } .ngx-gallery-image-wrapper { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; overflow: hidden; } .ngx-gallery-image { background-position: center; background-repeat: no-repeat; height: 100%; width: 100%; position: absolute; top: 0px; } .ngx-gallery-image.ngx-gallery-active { z-index: 1000; } .ngx-gallery-image-size-cover .ngx-gallery-image { background-size: cover; } .ngx-gallery-image-size-contain .ngx-gallery-image { background-size: contain; } .ngx-gallery-animation-fade .ngx-gallery-image { left: 0px; opacity: 0; transition: 0.5s ease-in-out; } .ngx-gallery-animation-fade .ngx-gallery-image.ngx-gallery-active { opacity: 1; } .ngx-gallery-animation-slide .ngx-gallery-image { transition: 0.5s ease-in-out; } .ngx-gallery-animation-slide .ngx-gallery-image.ngx-gallery-active { left: 0px; } .ngx-gallery-animation-slide .ngx-gallery-image.ngx-gallery-inactive-left { left: -100%; } .ngx-gallery-animation-slide .ngx-gallery-image.ngx-gallery-inactive-right { left: 100%; } .ngx-gallery-animation-rotate .ngx-gallery-image { transition: 1s ease; transform: scale(3.5, 3.5) rotate(90deg); left: 0px; opacity: 0; } .ngx-gallery-animation-rotate .ngx-gallery-image.ngx-gallery-active { transform: scale(1, 1) rotate(0deg); opacity: 1; } .ngx-gallery-animation-zoom .ngx-gallery-image { transition: 1s ease; transform: scale(2.5, 2.5); left: 0px; opacity: 0; } .ngx-gallery-animation-zoom .ngx-gallery-image.ngx-gallery-active { transform: scale(1, 1); opacity: 1; } "]
                  },] },
      ];
      /**
       * @nocollapse
       */
      NgxGalleryImageComponent.ctorParameters = function () { return [
          { type: platformBrowser.DomSanitizer, },
          { type: core.ElementRef, },
          { type: NgxGalleryHelperService, },
      ]; };
      NgxGalleryImageComponent.propDecorators = {
          'images': [{ type: core.Input },],
          'clickable': [{ type: core.Input },],
          'selectedIndex': [{ type: core.Input },],
          'arrows': [{ type: core.Input },],
          'arrowsAutoHide': [{ type: core.Input },],
          'swipe': [{ type: core.Input },],
          'animation': [{ type: core.Input },],
          'size': [{ type: core.Input },],
          'arrowPrevIcon': [{ type: core.Input },],
          'arrowNextIcon': [{ type: core.Input },],
          'autoPlay': [{ type: core.Input },],
          'autoPlayInterval': [{ type: core.Input },],
          'autoPlayPauseOnHover': [{ type: core.Input },],
          'infinityMove': [{ type: core.Input },],
          'onClick': [{ type: core.Output },],
          'onActiveChange': [{ type: core.Output },],
          'onMouseEnter': [{ type: core.HostListener, args: ['mouseenter',] },],
          'onMouseLeave': [{ type: core.HostListener, args: ['mouseleave',] },],
      };
      return NgxGalleryImageComponent;
  }());
  
  var NgxGalleryOrder = /** @class */ (function () {
      function NgxGalleryOrder() {
      }
      NgxGalleryOrder.Column = 1;
      NgxGalleryOrder.Row = 2;
      return NgxGalleryOrder;
  }());
  
  var NgxGalleryThumbnailsComponent = /** @class */ (function () {
      /**
       * @param {?} sanitization
       * @param {?} elementRef
       * @param {?} helperService
       */
      function NgxGalleryThumbnailsComponent(sanitization, elementRef, helperService) {
          this.sanitization = sanitization;
          this.elementRef = elementRef;
          this.helperService = helperService;
          this.onActiveChange = new core.EventEmitter();
          this.index = 0;
      }
      /**
       * @param {?} changes
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.ngOnChanges = function (changes) {
          var _this = this;
          if (changes['images'] && changes['images'].currentValue
              && this.selectedIndex >= changes['images'].currentValue.length) {
              this.selectedIndex = 0;
              this.index = 0;
          }
          if (changes['selectedIndex']) {
              this.validateIndex();
          }
          if (changes['swipe']) {
              this.helperService.manageSwipe(this.swipe, this.elementRef, 'thumbnails', function () { return _this.moveRight(); }, function () { return _this.moveLeft(); });
          }
          if (this.images) {
              this.remainingCountValue = this.images.length - this.columns;
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.onMouseEnter = function () {
          this.mouseenter = true;
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.onMouseLeave = function () {
          this.mouseenter = false;
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.onResize = function () {
          this.setDefaultPosition();
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.getImages = function () {
          return this.images && this.remainingCount ? this.images.slice(0, this.columns) : this.images;
      };
      /**
       * @param {?} event
       * @param {?} index
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.handleClick = function (event, index) {
          this.selectedIndex = index;
          this.onActiveChange.emit(index);
          event.stopPropagation();
          event.preventDefault();
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.moveRight = function () {
          if (this.canMoveRight()) {
              this.index += this.moveSize;
              var /** @type {?} */ maxIndex = this.getMaxIndex() - this.columns;
              if (this.index > maxIndex) {
                  this.index = maxIndex;
              }
              this.setThumbnailsPosition();
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.moveLeft = function () {
          if (this.canMoveLeft()) {
              this.index -= this.moveSize;
              if (this.index < 0) {
                  this.index = 0;
              }
              this.setThumbnailsPosition();
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.canMoveRight = function () {
          return this.index + this.columns < this.getMaxIndex() ? true : false;
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.canMoveLeft = function () {
          return this.index !== 0 ? true : false;
      };
      /**
       * @param {?} index
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.getThumbnailLeft = function (index) {
          var /** @type {?} */ calculatedIndex;
          if (this.order === NgxGalleryOrder.Column) {
              calculatedIndex = Math.floor(index / this.rows);
          }
          else {
              calculatedIndex = index % Math.ceil(this.images.length / this.rows);
          }
          return this.getThumbnailPosition(calculatedIndex, this.columns);
      };
      /**
       * @param {?} index
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.getThumbnailTop = function (index) {
          var /** @type {?} */ calculatedIndex;
          if (this.order === NgxGalleryOrder.Column) {
              calculatedIndex = index % this.rows;
          }
          else {
              calculatedIndex = Math.floor(index / Math.ceil(this.images.length / this.rows));
          }
          return this.getThumbnailPosition(calculatedIndex, this.rows);
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.getThumbnailWidth = function () {
          return this.getThumbnailDimension(this.columns);
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.getThumbnailHeight = function () {
          return this.getThumbnailDimension(this.rows);
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.setThumbnailsPosition = function () {
          this.thumbnailsLeft = 'calc(-' + ((100 / this.columns) * this.index)
              + '% - ' + ((this.margin - (((this.columns - 1)
              * this.margin) / this.columns)) * this.index) + 'px)';
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.setDefaultPosition = function () {
          this.thumbnailsLeft = '0px';
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.canShowArrows = function () {
          if (this.remainingCount) {
              return false;
          }
          else if (this.arrows && this.images && this.images.length > this.getVisibleCount()
              && (!this.arrowsAutoHide || this.mouseenter)) {
              return true;
          }
          else {
              return false;
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.validateIndex = function () {
          var /** @type {?} */ newIndex;
          if (this.order === NgxGalleryOrder.Column) {
              newIndex = Math.floor(this.selectedIndex / this.rows);
          }
          else {
              newIndex = this.selectedIndex % Math.ceil(this.images.length / this.rows);
          }
          if (this.remainingCount) {
              newIndex = 0;
          }
          if (newIndex < this.index || newIndex >= this.index + this.columns) {
              var /** @type {?} */ maxIndex = this.getMaxIndex() - this.columns;
              this.index = newIndex > maxIndex ? maxIndex : newIndex;
              this.setThumbnailsPosition();
          }
      };
      /**
       * @param {?} image
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.getSafeUrl = function (image) {
          return this.sanitization.bypassSecurityTrustStyle(this.helperService.getBackgroundUrl(image));
      };
      /**
       * @param {?} index
       * @param {?} count
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.getThumbnailPosition = function (index, count) {
          return this.getSafeStyle('calc(' + ((100 / count) * index) + '% + '
              + ((this.margin - (((count - 1) * this.margin) / count)) * index) + 'px)');
      };
      /**
       * @param {?} count
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.getThumbnailDimension = function (count) {
          if (this.margin !== 0) {
              return this.getSafeStyle('calc(' + (100 / count) + '% - '
                  + (((count - 1) * this.margin) / count) + 'px)');
          }
          else {
              return this.getSafeStyle('calc(' + (100 / count) + '% + 1px)');
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.getMaxIndex = function () {
          return Math.ceil(this.images.length / this.rows);
      };
      /**
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.getVisibleCount = function () {
          return this.columns * this.rows;
      };
      /**
       * @param {?} value
       * @return {?}
       */
      NgxGalleryThumbnailsComponent.prototype.getSafeStyle = function (value) {
          return this.sanitization.bypassSecurityTrustStyle(value);
      };
      NgxGalleryThumbnailsComponent.decorators = [
          { type: core.Component, args: [{
                      selector: 'ngx-gallery-thumbnails',
                      template: "\n    <div class=\"ngx-gallery-thumbnails-wrapper ngx-gallery-thumbnail-size-{{size}}\">\n        <div class=\"ngx-gallery-thumbnails\" [style.left]=\"thumbnailsLeft\">\n            <div class=\"ngx-gallery-thumbnail\" *ngFor=\"let image of getImages(); let i = index;\" [style.background-image]=\"getSafeUrl(image)\" (click)=\"handleClick($event, i)\" [style.width]=\"getThumbnailWidth()\" [style.height]=\"getThumbnailHeight()\" [style.left]=\"getThumbnailLeft(i)\" [style.top]=\"getThumbnailTop(i)\" [ngClass]=\"{ 'ngx-gallery-active': i == selectedIndex, 'ngx-gallery-clickable': clickable }\">\n            <div class=\"ngx-gallery-remaining-count-overlay\" *ngIf=\"remainingCount && remainingCountValue && (i == columns - 1)\">\n                <span class=\"ngx-gallery-remaining-count\">+{{remainingCountValue}}</span>\n            </div>\n            </div>\n        </div>\n    </div>\n    <ngx-gallery-arrows *ngIf=\"canShowArrows()\" (onPrevClick)=\"moveLeft()\" (onNextClick)=\"moveRight()\" [prevDisabled]=\"!canMoveLeft()\" [nextDisabled]=\"!canMoveRight()\" [arrowPrevIcon]=\"arrowPrevIcon\" [arrowNextIcon]=\"arrowNextIcon\"></ngx-gallery-arrows>\n    ",
                      styles: [":host { width: 100%; display: inline-block; position: relative; } .ngx-gallery-thumbnails-wrapper { width: 100%; height: 100%; position: absolute; overflow: hidden; } .ngx-gallery-thumbnails { height: 100%; width: 100%; position: absolute; left: 0px; transition: left 0.5s ease-in-out; } .ngx-gallery-thumbnails .ngx-gallery-thumbnail { position: absolute; height: 100%; background-position: center; background-repeat: no-repeat; } .ngx-gallery-thumbnail-size-cover .ngx-gallery-thumbnails .ngx-gallery-thumbnail { background-size: cover; } .ngx-gallery-thumbnail-size-contain .ngx-gallery-thumbnails .ngx-gallery-thumbnail { background-size: contain; } .ngx-gallery-remaining-count-overlay { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background-color: rgba(0, 0, 0, 0.4); } .ngx-gallery-remaining-count { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 30px; } "]
                  },] },
      ];
      /**
       * @nocollapse
       */
      NgxGalleryThumbnailsComponent.ctorParameters = function () { return [
          { type: platformBrowser.DomSanitizer, },
          { type: core.ElementRef, },
          { type: NgxGalleryHelperService, },
      ]; };
      NgxGalleryThumbnailsComponent.propDecorators = {
          'images': [{ type: core.Input },],
          'columns': [{ type: core.Input },],
          'rows': [{ type: core.Input },],
          'arrows': [{ type: core.Input },],
          'arrowsAutoHide': [{ type: core.Input },],
          'margin': [{ type: core.Input },],
          'selectedIndex': [{ type: core.Input },],
          'clickable': [{ type: core.Input },],
          'swipe': [{ type: core.Input },],
          'size': [{ type: core.Input },],
          'arrowPrevIcon': [{ type: core.Input },],
          'arrowNextIcon': [{ type: core.Input },],
          'moveSize': [{ type: core.Input },],
          'order': [{ type: core.Input },],
          'remainingCount': [{ type: core.Input },],
          'onActiveChange': [{ type: core.Output },],
          'onMouseEnter': [{ type: core.HostListener, args: ['mouseenter',] },],
          'onMouseLeave': [{ type: core.HostListener, args: ['mouseleave',] },],
          'onResize': [{ type: core.HostListener, args: ['window:resize',] },],
      };
      return NgxGalleryThumbnailsComponent;
  }());
  
  var NgxGalleryPreviewComponent = /** @class */ (function () {
      /**
       * @param {?} sanitization
       * @param {?} elementRef
       * @param {?} helperService
       */
      function NgxGalleryPreviewComponent(sanitization, elementRef, helperService) {
          this.sanitization = sanitization;
          this.elementRef = elementRef;
          this.helperService = helperService;
          this.showSpinner = false;
          this.positionLeft = 0;
          this.positionTop = 0;
          this.zoomValue = 1;
          this.loading = false;
          this.onOpen = new core.EventEmitter();
          this.onClose = new core.EventEmitter();
          this.index = 0;
          this.isOpen = false;
          this.initialX = 0;
          this.initialY = 0;
          this.initialLeft = 0;
          this.initialTop = 0;
          this.isMove = false;
      }
      /**
       * @param {?} changes
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.ngOnChanges = function (changes) {
          var _this = this;
          if (changes['swipe']) {
              this.helperService.manageSwipe(this.swipe, this.elementRef, 'preview', function () { return _this.showNext(); }, function () { return _this.showPrev(); });
          }
      };
      /**
       * @param {?} e
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.onKeyDown = function (e) {
          if (this.isOpen) {
              if (this.keyboardNavigation) {
                  if (this.isKeyboardPrev(e)) {
                      this.showPrev();
                  }
                  else if (this.isKeyboardNext(e)) {
                      this.showNext();
                  }
              }
              if (this.closeOnEsc && this.isKeyboardEsc(e)) {
                  this.close();
              }
          }
      };
      /**
       * @param {?} index
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.open = function (index) {
          this.onOpen.emit();
          this.index = index;
          this.isOpen = true;
          this.show(true);
          if (this.forceFullscreen) {
              this.manageFullscreen();
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.close = function () {
          this.isOpen = false;
          this.closeFullscreen();
          this.onClose.emit();
          this.stopAutoPlay();
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.imageMouseEnter = function () {
          if (this.autoPlay && this.autoPlayPauseOnHover) {
              this.stopAutoPlay();
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.imageMouseLeave = function () {
          if (this.autoPlay && this.autoPlayPauseOnHover) {
              this.startAutoPlay();
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.startAutoPlay = function () {
          var _this = this;
          if (this.autoPlay) {
              this.stopAutoPlay();
              this.timer = setTimeout(function () {
                  if (!_this.showNext()) {
                      _this.index = -1;
                      _this.showNext();
                  }
              }, this.autoPlayInterval);
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.stopAutoPlay = function () {
          if (this.timer) {
              clearTimeout(this.timer);
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.showNext = function () {
          if (this.canShowNext()) {
              this.index++;
              if (this.index === this.images.length) {
                  this.index = 0;
              }
              this.show();
              return true;
          }
          else {
              return false;
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.showPrev = function () {
          if (this.canShowPrev()) {
              this.index--;
              if (this.index < 0) {
                  this.index = this.images.length - 1;
              }
              this.show();
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.canShowNext = function () {
          if (this.loading) {
              return false;
          }
          else if (this.images) {
              return this.infinityMove || this.index < this.images.length - 1 ? true : false;
          }
          else {
              return false;
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.canShowPrev = function () {
          if (this.loading) {
              return false;
          }
          else if (this.images) {
              return this.infinityMove || this.index > 0 ? true : false;
          }
          else {
              return false;
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.manageFullscreen = function () {
          if (this.fullscreen || this.forceFullscreen) {
              var /** @type {?} */ doc = (document);
              if (!doc.fullscreenElement && !doc.mozFullScreenElement
                  && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
                  this.openFullscreen();
              }
              else {
                  this.closeFullscreen();
              }
          }
      };
      /**
       * @param {?} image
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.getSafeUrl = function (image) {
          return image.substr(0, 10) === 'data:image' ?
              image : this.sanitization.bypassSecurityTrustUrl(image);
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.zoomIn = function () {
          if (this.canZoomIn()) {
              this.zoomValue += this.zoomStep;
              if (this.zoomValue > this.zoomMax) {
                  this.zoomValue = this.zoomMax;
              }
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.zoomOut = function () {
          if (this.canZoomOut()) {
              this.zoomValue -= this.zoomStep;
              if (this.zoomValue < this.zoomMin) {
                  this.zoomValue = this.zoomMin;
              }
              if (this.zoomValue <= 1) {
                  this.resetPosition();
              }
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.canZoomIn = function () {
          return this.zoomValue < this.zoomMax ? true : false;
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.canZoomOut = function () {
          return this.zoomValue > this.zoomMin ? true : false;
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.canDragOnZoom = function () {
          return this.zoom && this.zoomValue > 1;
      };
      /**
       * @param {?} e
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.mouseDownHandler = function (e) {
          if (this.canDragOnZoom()) {
              this.initialX = this.getClientX(e);
              this.initialY = this.getClientY(e);
              this.initialLeft = this.positionLeft;
              this.initialTop = this.positionTop;
              this.isMove = true;
              e.preventDefault();
          }
      };
      /**
       * @param {?} e
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.mouseUpHandler = function (e) {
          this.isMove = false;
      };
      /**
       * @param {?} e
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.mouseMoveHandler = function (e) {
          if (this.isMove) {
              this.positionLeft = this.initialLeft + (this.getClientX(e) - this.initialX);
              this.positionTop = this.initialTop + (this.getClientY(e) - this.initialY);
          }
      };
      /**
       * @param {?} e
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.getClientX = function (e) {
          return e.touches && e.touches.length ? e.touches[0].clientX : e.clientX;
      };
      /**
       * @param {?} e
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.getClientY = function (e) {
          return e.touches && e.touches.length ? e.touches[0].clientY : e.clientY;
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.resetPosition = function () {
          if (this.zoom) {
              this.positionLeft = 0;
              this.positionTop = 0;
          }
      };
      /**
       * @param {?} e
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.isKeyboardNext = function (e) {
          return e.keyCode === 39 ? true : false;
      };
      /**
       * @param {?} e
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.isKeyboardPrev = function (e) {
          return e.keyCode === 37 ? true : false;
      };
      /**
       * @param {?} e
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.isKeyboardEsc = function (e) {
          return e.keyCode === 27 ? true : false;
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.openFullscreen = function () {
          var /** @type {?} */ element = (document.documentElement);
          if (element.requestFullscreen) {
              element.requestFullscreen();
          }
          else if (element.msRequestFullscreen) {
              element.msRequestFullscreen();
          }
          else if (element.mozRequestFullScreen) {
              element.mozRequestFullScreen();
          }
          else if (element.webkitRequestFullscreen) {
              element.webkitRequestFullscreen();
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.closeFullscreen = function () {
          var /** @type {?} */ doc = (document);
          if (doc.exitFullscreen) {
              doc.exitFullscreen();
          }
          else if (doc.msExitFullscreen) {
              doc.msExitFullscreen();
          }
          else if (doc.mozCancelFullScreen) {
              doc.mozCancelFullScreen();
          }
          else if (doc.webkitExitFullscreen) {
              doc.webkitExitFullscreen();
          }
      };
      /**
       * @param {?=} first
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.show = function (first) {
          var _this = this;
          if (first === void 0) { first = false; }
          this.loading = true;
          this.stopAutoPlay();
          if (first) {
              this._show();
          }
          else {
              setTimeout(function () { return _this._show(); }, 600);
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype._show = function () {
          var _this = this;
          this.zoomValue = 1;
          this.resetPosition();
          this.src = this.getSafeUrl(/** @type {?} */ (this.images[this.index]));
          this.srcIndex = this.index;
          this.description = this.descriptions[this.index];
          setTimeout(function () {
              if (_this.isLoaded(_this.previewImage.nativeElement)) {
                  _this.loading = false;
                  _this.startAutoPlay();
              }
              else {
                  setTimeout(function () {
                      if (_this.loading) {
                          _this.showSpinner = true;
                      }
                  });
                  _this.previewImage.nativeElement.onload = function () {
                      _this.loading = false;
                      _this.showSpinner = false;
                      _this.previewImage.nativeElement.onload = null;
                      _this.startAutoPlay();
                  };
              }
          });
      };
      /**
       * @param {?} img
       * @return {?}
       */
      NgxGalleryPreviewComponent.prototype.isLoaded = function (img) {
          if (!img.complete) {
              return false;
          }
          if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
              return false;
          }
          return true;
      };
      NgxGalleryPreviewComponent.decorators = [
          { type: core.Component, args: [{
                      selector: 'ngx-gallery-preview',
                      template: "\n        <ngx-gallery-arrows (onPrevClick)=\"showPrev()\" (onNextClick)=\"showNext()\" [prevDisabled]=\"!canShowPrev()\" [nextDisabled]=\"!canShowNext()\" [arrowPrevIcon]=\"arrowPrevIcon\" [arrowNextIcon]=\"arrowNextIcon\"></ngx-gallery-arrows>\n        <div class=\"ngx-gallery-preview-top\">\n            <div class=\"ngx-gallery-preview-icons\">\n                <i class=\"ngx-gallery-icon {{zoomOutIcon}}\" aria-hidden=\"true\" (click)=\"zoomOut()\" *ngIf=\"zoom\" [class.ngx-gallery-icon-disabled]=\"!canZoomOut()\"></i>\n                <i class=\"ngx-gallery-icon {{zoomInIcon}}\" aria-hidden=\"true\" (click)=\"zoomIn()\" *ngIf=\"zoom\" [class.ngx-gallery-icon-disabled]=\"!canZoomIn()\"></i>\n                <i class=\"ngx-gallery-icon ngx-gallery-fullscreen {{fullscreenIcon}}\" aria-hidden=\"true\" *ngIf=\"fullscreen\" (click)=\"manageFullscreen()\"></i>\n                <i class=\"ngx-gallery-icon ngx-gallery-close {{closeIcon}}\" aria-hidden=\"true\" (click)=\"close()\"></i>\n            </div>\n        </div>\n        <div class=\"ngx-spinner-wrapper ngx-gallery-center\" [class.ngx-gallery-active]=\"showSpinner\">\n            <i class=\"ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon}}\" aria-hidden=\"true\"></i>\n        </div>\n        <div class=\"ngx-gallery-preview-wrapper\" (click)=\"closeOnClick && close()\" (mouseup)=\"mouseUpHandler($event)\" (mousemove)=\"mouseMoveHandler($event)\" (touchend)=\"mouseUpHandler($event)\" (touchmove)=\"mouseMoveHandler($event)\">\n            <div class=\"ngx-gallery-preview-img-wrapper\">\n                <img #previewImage class=\"ngx-gallery-preview-img ngx-gallery-center\" [src]=\"src ? src : '#'\" (click)=\"$event.stopPropagation()\" (mouseenter)=\"imageMouseEnter()\" (mouseleave)=\"imageMouseLeave()\" (mousedown)=\"mouseDownHandler($event)\" (touchstart)=\"mouseDownHandler($event)\" [class.ngx-gallery-active]=\"!loading\" [class.ngx-gallery-grab]=\"canDragOnZoom()\" [style.transform]=\"'scale(' + zoomValue + ')'\" [style.left]=\"positionLeft + 'px'\" [style.top]=\"positionTop + 'px'\"/>\n            </div>\n            <div class=\"ngx-gallery-preview-text\" *ngIf=\"showDescription && description\">{{ description }}</div>\n        </div>\n    ",
                      styles: [":host(.ngx-gallery-active) { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; background: rgba(0, 0, 0, 0.7); z-index: 10000; display: inline-block; } :host(.ngx-gallery-active) /deep/ .ngx-gallery-icon.ngx-gallery-arrow { font-size: 50px; } :host { display: none; } .ngx-gallery-preview-img { opacity: 0; max-width: 90%; max-height: 90%; transition: opacity 0.5s linear; user-select: none; } .ngx-gallery-preview-img.ngx-gallery-active { opacity: 1; } .ngx-gallery-preview-img.ngx-gallery-grab { cursor: grab; cursor: -webkit-grab; } .ngx-gallery-icon.ngx-gallery-spinner { font-size: 50px; left: 0px; display: inline-block; } .ngx-gallery-preview-top { position: absolute; width: 100%; user-select: none; } .ngx-gallery-preview-icons { float: right; } .ngx-gallery-preview-icons .ngx-gallery-icon { position: relative; margin-right: 10px; margin-top: 10px; font-size: 25px; cursor: pointer; } .ngx-gallery-preview-icons .ngx-gallery-icon.ngx-gallery-icon-disabled { cursor: default; opacity: 0.4; } .ngx-spinner-wrapper { width: 50px; height: 50px; display: none; } .ngx-spinner-wrapper.ngx-gallery-active { display: inline-block; } .ngx-gallery-center { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; top: 0; } .ngx-gallery-preview-text { width: 100%; background: rgba(0, 0, 0, 0.7); padding: 10px; text-align: center; color: white; font-size: 16px; flex: 0 1 auto; z-index: 10; } .ngx-gallery-preview-wrapper { width: 100%; height: 100%; display: flex; flex-flow: column; } .ngx-gallery-preview-img-wrapper { flex: 1 1 auto; position: relative; } "]
                  },] },
      ];
      /**
       * @nocollapse
       */
      NgxGalleryPreviewComponent.ctorParameters = function () { return [
          { type: platformBrowser.DomSanitizer, },
          { type: core.ElementRef, },
          { type: NgxGalleryHelperService, },
      ]; };
      NgxGalleryPreviewComponent.propDecorators = {
          'images': [{ type: core.Input },],
          'descriptions': [{ type: core.Input },],
          'showDescription': [{ type: core.Input },],
          'swipe': [{ type: core.Input },],
          'fullscreen': [{ type: core.Input },],
          'forceFullscreen': [{ type: core.Input },],
          'closeOnClick': [{ type: core.Input },],
          'closeOnEsc': [{ type: core.Input },],
          'keyboardNavigation': [{ type: core.Input },],
          'arrowPrevIcon': [{ type: core.Input },],
          'arrowNextIcon': [{ type: core.Input },],
          'closeIcon': [{ type: core.Input },],
          'fullscreenIcon': [{ type: core.Input },],
          'spinnerIcon': [{ type: core.Input },],
          'autoPlay': [{ type: core.Input },],
          'autoPlayInterval': [{ type: core.Input },],
          'autoPlayPauseOnHover': [{ type: core.Input },],
          'infinityMove': [{ type: core.Input },],
          'zoom': [{ type: core.Input },],
          'zoomStep': [{ type: core.Input },],
          'zoomMax': [{ type: core.Input },],
          'zoomMin': [{ type: core.Input },],
          'zoomInIcon': [{ type: core.Input },],
          'zoomOutIcon': [{ type: core.Input },],
          'onOpen': [{ type: core.Output },],
          'onClose': [{ type: core.Output },],
          'previewImage': [{ type: core.ViewChild, args: ['previewImage',] },],
          'onKeyDown': [{ type: core.HostListener, args: ['window:keydown', ['$event'],] },],
      };
      return NgxGalleryPreviewComponent;
  }());
  
  var NgxGalleryAnimation = /** @class */ (function () {
      function NgxGalleryAnimation() {
      }
      NgxGalleryAnimation.Fade = 'fade';
      NgxGalleryAnimation.Slide = 'slide';
      NgxGalleryAnimation.Rotate = 'rotate';
      NgxGalleryAnimation.Zoom = 'zoom';
      return NgxGalleryAnimation;
  }());
  
  var NgxGalleryImageSize = /** @class */ (function () {
      function NgxGalleryImageSize() {
      }
      NgxGalleryImageSize.Cover = 'cover';
      NgxGalleryImageSize.Contain = 'contain';
      return NgxGalleryImageSize;
  }());
  
  var NgxGalleryLayout = /** @class */ (function () {
      function NgxGalleryLayout() {
      }
      NgxGalleryLayout.ThumbnailsTop = 'thumbnails-top';
      NgxGalleryLayout.ThumbnailsBottom = 'thumbnails-bottom';
      return NgxGalleryLayout;
  }());
  
  var NgxGalleryOptions = /** @class */ (function () {
      /**
       * @param {?} obj
       */
      function NgxGalleryOptions(obj) {
          var preventDefaults = obj.breakpoint === undefined ? false : true;
          function use(source, defaultValue) {
              return obj && (source !== undefined || preventDefaults) ? source : defaultValue;
          }
          this.breakpoint = use(obj.breakpoint, undefined);
          this.width = use(obj.width, '500px');
          this.height = use(obj.height, '400px');
          this.fullWidth = use(obj.fullWidth, false);
          this.layout = use(obj.layout, NgxGalleryLayout.ThumbnailsBottom);
          this.startIndex = use(obj.startIndex, 0);
          this.image = use(obj.image, true);
          this.imagePercent = use(obj.imagePercent, 75);
          this.imageArrows = use(obj.imageArrows, true);
          this.imageArrowsAutoHide = use(obj.imageArrowsAutoHide, false);
          this.imageSwipe = use(obj.imageSwipe, false);
          this.imageAnimation = use(obj.imageAnimation, NgxGalleryAnimation.Fade);
          this.imageSize = use(obj.imageSize, NgxGalleryImageSize.Cover);
          this.imageAutoPlay = use(obj.imageAutoPlay, false);
          this.imageAutoPlayInterval = use(obj.imageAutoPlayInterval, 2000);
          this.imageAutoPlayPauseOnHover = use(obj.imageAutoPlayPauseOnHover, false);
          this.imageInfinityMove = use(obj.imageInfinityMove, false);
          this.thumbnails = use(obj.thumbnails, true);
          this.thumbnailsColumns = use(obj.thumbnailsColumns, 4);
          this.thumbnailsRows = use(obj.thumbnailsRows, 1);
          this.thumbnailsPercent = use(obj.thumbnailsPercent, 25);
          this.thumbnailsMargin = use(obj.thumbnailsMargin, 10);
          this.thumbnailsArrows = use(obj.thumbnailsArrows, true);
          this.thumbnailsArrowsAutoHide = use(obj.thumbnailsArrowsAutoHide, false);
          this.thumbnailsSwipe = use(obj.thumbnailsSwipe, false);
          this.thumbnailsMoveSize = use(obj.thumbnailsMoveSize, 1);
          this.thumbnailsOrder = use(obj.thumbnailsOrder, NgxGalleryOrder.Column);
          this.thumbnailsRemainingCount = use(obj.thumbnailsRemainingCount, false);
          this.thumbnailMargin = use(obj.thumbnailMargin, 10);
          this.thumbnailSize = use(obj.thumbnailSize, NgxGalleryImageSize.Cover);
          this.preview = use(obj.preview, true);
          this.previewDescription = use(obj.previewDescription, true);
          this.previewSwipe = use(obj.previewSwipe, false);
          this.previewFullscreen = use(obj.previewFullscreen, false);
          this.previewForceFullscreen = use(obj.previewForceFullscreen, false);
          this.previewCloseOnClick = use(obj.previewCloseOnClick, false);
          this.previewCloseOnEsc = use(obj.previewCloseOnEsc, false);
          this.previewKeyboardNavigation = use(obj.previewKeyboardNavigation, false);
          this.previewAutoPlay = use(obj.previewAutoPlay, false);
          this.previewAutoPlayInterval = use(obj.previewAutoPlayInterval, 2000);
          this.previewAutoPlayPauseOnHover = use(obj.previewAutoPlayPauseOnHover, false);
          this.previewInfinityMove = use(obj.previewInfinityMove, false);
          this.previewZoom = use(obj.previewZoom, false);
          this.previewZoomStep = use(obj.previewZoomStep, 0.1);
          this.previewZoomMax = use(obj.previewZoomMax, 2);
          this.previewZoomMin = use(obj.previewZoomMin, 0.5);
          this.arrowPrevIcon = use(obj.arrowPrevIcon, 'fa fa-arrow-circle-left');
          this.arrowNextIcon = use(obj.arrowNextIcon, 'fa fa-arrow-circle-right');
          this.closeIcon = use(obj.closeIcon, 'fa fa-times-circle');
          this.fullscreenIcon = use(obj.fullscreenIcon, 'fa fa-arrows-alt');
          this.spinnerIcon = use(obj.spinnerIcon, 'fa fa-spinner fa-pulse fa-3x fa-fw');
          this.zoomInIcon = use(obj.zoomInIcon, 'fa fa-search-plus');
          this.zoomOutIcon = use(obj.zoomOutIcon, 'fa fa-search-minus');
      }
      return NgxGalleryOptions;
  }());
  
  var NgxGalleryComponent = /** @class */ (function () {
      /**
       * @param {?} myElement
       */
      function NgxGalleryComponent(myElement) {
          this.myElement = myElement;
          this.change = new core.EventEmitter();
          this.previewOpen = new core.EventEmitter();
          this.previewClose = new core.EventEmitter();
          this.oldImagesLength = 0;
          this.selectedIndex = 0;
          this.breakpoint = undefined;
          this.prevBreakpoint = undefined;
      }
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.ngOnInit = function () {
          this.options = this.options.map(function (opt) { return new NgxGalleryOptions(opt); });
          this.sortOptions();
          this.setBreakpoint();
          this.setOptions();
          this.checkFullWidth();
          if (this.currentOptions) {
              this.selectedIndex = /** @type {?} */ (this.currentOptions.startIndex);
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.ngDoCheck = function () {
          if (this.images !== undefined && (this.images.length !== this.oldImagesLength)
              || (this.images !== this.oldImages)) {
              this.oldImagesLength = this.images.length;
              this.oldImages = this.images;
              this.setImages();
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.ngAfterViewInit = function () {
          this.checkFullWidth();
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.onResize = function () {
          var _this = this;
          this.setBreakpoint();
          if (this.prevBreakpoint !== this.breakpoint) {
              this.setOptions();
          }
          if (this.currentOptions && this.currentOptions.fullWidth) {
              if (this.fullWidthTimeout) {
                  clearTimeout(this.fullWidthTimeout);
              }
              this.fullWidthTimeout = setTimeout(function () {
                  _this.checkFullWidth();
              }, 200);
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.getImageHeight = function () {
          return (this.currentOptions && this.currentOptions.thumbnails) ?
              this.currentOptions.imagePercent + '%' : '100%';
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.getThumbnailsHeight = function () {
          if (this.currentOptions && this.currentOptions.image) {
              return 'calc(' + this.currentOptions.thumbnailsPercent + '% - '
                  + this.currentOptions.thumbnailsMargin + 'px)';
          }
          else {
              return '100%';
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.getThumbnailsMarginTop = function () {
          if (this.currentOptions && this.currentOptions.layout === NgxGalleryLayout.ThumbnailsBottom) {
              return this.currentOptions.thumbnailsMargin + 'px';
          }
          else {
              return '0px';
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.getThumbnailsMarginBottom = function () {
          if (this.currentOptions && this.currentOptions.layout === NgxGalleryLayout.ThumbnailsTop) {
              return this.currentOptions.thumbnailsMargin + 'px';
          }
          else {
              return '0px';
          }
      };
      /**
       * @param {?} index
       * @return {?}
       */
      NgxGalleryComponent.prototype.openPreview = function (index) {
          this.previewEnabled = true;
          this.preview.open(index);
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.onPreviewOpen = function () {
          this.previewOpen.emit();
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.onPreviewClose = function () {
          this.previewEnabled = false;
          this.previewClose.emit();
      };
      /**
       * @param {?} index
       * @return {?}
       */
      NgxGalleryComponent.prototype.selectFromImage = function (index) {
          this.select(index);
      };
      /**
       * @param {?} index
       * @return {?}
       */
      NgxGalleryComponent.prototype.selectFromThumbnails = function (index) {
          this.select(index);
          if (this.currentOptions && this.currentOptions.thumbnails && this.currentOptions.preview
              && (!this.currentOptions.image || this.currentOptions.thumbnailsRemainingCount)) {
              this.openPreview(this.selectedIndex);
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.showNext = function () {
          this.image.showNext();
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.showPrev = function () {
          this.image.showPrev();
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.canShowNext = function () {
          if (this.images && this.currentOptions) {
              return (this.currentOptions.imageInfinityMove || this.selectedIndex < this.images.length - 1)
                  ? true : false;
          }
          else {
              return false;
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.canShowPrev = function () {
          if (this.images && this.currentOptions) {
              return (this.currentOptions.imageInfinityMove || this.selectedIndex > 0) ? true : false;
          }
          else {
              return false;
          }
      };
      /**
       * @param {?} index
       * @return {?}
       */
      NgxGalleryComponent.prototype.select = function (index) {
          this.selectedIndex = index;
          this.change.emit({
              index: index,
              image: this.images[index]
          });
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.checkFullWidth = function () {
          if (this.currentOptions && this.currentOptions.fullWidth) {
              this.width = document.body.clientWidth + 'px';
              this.left = (-(document.body.clientWidth -
                  this.myElement.nativeElement.parentNode.innerWidth) / 2) + 'px';
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.setImages = function () {
          this.smallImages = this.images.map(function (img) { /** @type {?} */ return (img.small); });
          this.mediumImages = this.images.map(function (img) { /** @type {?} */ return (img.medium); });
          this.bigImages = this.images.map(function (img) { /** @type {?} */ return (img.big); });
          this.descriptions = this.images.map(function (img) { /** @type {?} */ return (img.description); });
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.setBreakpoint = function () {
          this.prevBreakpoint = this.breakpoint;
          var /** @type {?} */ breakpoints;
          if (typeof window !== 'undefined') {
              breakpoints = this.options.filter(function (opt) { return opt.breakpoint >= window.innerWidth; })
                  .map(function (opt) { return opt.breakpoint; });
          }
          if (breakpoints && breakpoints.length) {
              this.breakpoint = breakpoints.pop();
          }
          else {
              this.breakpoint = undefined;
          }
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.sortOptions = function () {
          this.options = this.options.filter(function (a) { return a.breakpoint === undefined; }).concat(this.options
              .filter(function (a) { return a.breakpoint !== undefined; })
              .sort(function (a, b) { return b.breakpoint - a.breakpoint; }));
      };
      /**
       * @return {?}
       */
      NgxGalleryComponent.prototype.setOptions = function () {
          var _this = this;
          this.currentOptions = new NgxGalleryOptions({});
          this.options
              .filter(function (opt) { return opt.breakpoint === undefined || opt.breakpoint >= _this.breakpoint; })
              .map(function (opt) { return _this.combineOptions(_this.currentOptions, opt); });
          this.width = /** @type {?} */ (this.currentOptions.width);
          this.height = /** @type {?} */ (this.currentOptions.height);
      };
      /**
       * @param {?} first
       * @param {?} second
       * @return {?}
       */
      NgxGalleryComponent.prototype.combineOptions = function (first, second) {
          Object.keys(second).map(function (val) { return first[val] = second[val] !== undefined ? second[val] : first[val]; });
      };
      NgxGalleryComponent.decorators = [
          { type: core.Component, args: [{
                      selector: 'ngx-gallery',
                      template: "\n    <div class=\"ngx-gallery-layout {{currentOptions?.layout}}\">\n        <ngx-gallery-image *ngIf=\"currentOptions?.image\" [style.height]=\"getImageHeight()\" [images]=\"mediumImages\" [clickable]=\"currentOptions?.preview\" [selectedIndex]=\"selectedIndex\" [arrows]=\"currentOptions?.imageArrows\" [arrowsAutoHide]=\"currentOptions?.imageArrowsAutoHide\" [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\" [arrowNextIcon]=\"currentOptions?.arrowNextIcon\" [swipe]=\"currentOptions?.imageSwipe\" [animation]=\"currentOptions?.imageAnimation\" [size]=\"currentOptions?.imageSize\" [autoPlay]=\"currentOptions?.imageAutoPlay\" [autoPlayInterval]=\"currentOptions?.imageAutoPlayInterval\" [autoPlayPauseOnHover]=\"currentOptions?.imageAutoPlayPauseOnHover\" [infinityMove]=\"currentOptions?.imageInfinityMove\" (onClick)=\"openPreview($event)\" (onActiveChange)=\"selectFromImage($event)\"></ngx-gallery-image>\n\n        <ngx-gallery-thumbnails *ngIf=\"currentOptions?.thumbnails\" [style.marginTop]=\"getThumbnailsMarginTop()\" [style.marginBottom]=\"getThumbnailsMarginBottom()\" [style.height]=\"getThumbnailsHeight()\" [images]=\"smallImages\" [selectedIndex]=\"selectedIndex\" [columns]=\"currentOptions?.thumbnailsColumns\" [rows]=\"currentOptions?.thumbnailsRows\" [margin]=\"currentOptions?.thumbnailMargin\" [arrows]=\"currentOptions?.thumbnailsArrows\" [arrowsAutoHide]=\"currentOptions?.thumbnailsArrowsAutoHide\" [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\" [arrowNextIcon]=\"currentOptions?.arrowNextIcon\" [clickable]=\"currentOptions?.image || currentOptions?.preview\" [swipe]=\"currentOptions?.thumbnailsSwipe\" [size]=\"currentOptions?.thumbnailSize\" [moveSize]=\"currentOptions?.thumbnailsMoveSize\" [order]=\"currentOptions?.thumbnailsOrder\" [remainingCount]=\"currentOptions?.thumbnailsRemainingCount\" (onActiveChange)=\"selectFromThumbnails($event)\"></ngx-gallery-thumbnails>\n\n        <ngx-gallery-preview [images]=\"bigImages\" [descriptions]=\"descriptions\" [showDescription]=\"currentOptions?.previewDescription\" [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\" [arrowNextIcon]=\"currentOptions?.arrowNextIcon\" [closeIcon]=\"currentOptions?.closeIcon\" [fullscreenIcon]=\"currentOptions?.fullscreenIcon\" [spinnerIcon]=\"currentOptions?.spinnerIcon\" [swipe]=\"currentOptions?.previewSwipe\" [fullscreen]=\"currentOptions?.previewFullscreen\" [forceFullscreen]=\"currentOptions?.previewForceFullscreen\" [closeOnClick]=\"currentOptions?.previewCloseOnClick\" [closeOnEsc]=\"currentOptions?.previewCloseOnEsc\" [keyboardNavigation]=\"currentOptions?.previewKeyboardNavigation\" [autoPlay]=\"currentOptions?.previewAutoPlay\" [autoPlayInterval]=\"currentOptions?.previewAutoPlayInterval\" [autoPlayPauseOnHover]=\"currentOptions?.previewAutoPlayPauseOnHover\" [infinityMove]=\"currentOptions?.previewInfinityMove\" [zoom]=\"currentOptions?.previewZoom\" [zoomStep]=\"currentOptions?.previewZoomStep\" [zoomMax]=\"currentOptions?.previewZoomMax\" [zoomMin]=\"currentOptions?.previewZoomMin\" [zoomInIcon]=\"currentOptions?.zoomInIcon\" [zoomOutIcon]=\"currentOptions?.zoomOutIcon\" (onClose)=\"onPreviewClose()\" (onOpen)=\"onPreviewOpen()\" [class.ngx-gallery-active]=\"previewEnabled\"></ngx-gallery-preview>\n    </div>\n    ",
                      styles: [":host { display: inline-block; } :host > * { float: left; } :host /deep/ * { box-sizing: border-box; } :host /deep/ .ngx-gallery-icon { color: white; font-size: 25px; position: absolute; z-index: 2000; } :host /deep/ .ngx-gallery-clickable { cursor: pointer; } :host .ngx-gallery-layout { width: 100%; height: 100%; display: flex; flex-direction: column; } :host .ngx-gallery-layout.thumbnails-top ngx-gallery-image { order: 2; } :host .ngx-gallery-layout.thumbnails-top ngx-gallery-thumbnails { order: 1; } :host .ngx-gallery-layout.thumbnails-bottom ngx-gallery-image { order: 1; } :host .ngx-gallery-layout.thumbnails-bottom ngx-gallery-thumbnails { order: 2; } "],
                      providers: [NgxGalleryHelperService]
                  },] },
      ];
      /**
       * @nocollapse
       */
      NgxGalleryComponent.ctorParameters = function () { return [
          { type: core.ElementRef, },
      ]; };
      NgxGalleryComponent.propDecorators = {
          'options': [{ type: core.Input },],
          'images': [{ type: core.Input },],
          'change': [{ type: core.Output },],
          'previewOpen': [{ type: core.Output },],
          'previewClose': [{ type: core.Output },],
          'preview': [{ type: core.ViewChild, args: [NgxGalleryPreviewComponent,] },],
          'image': [{ type: core.ViewChild, args: [NgxGalleryImageComponent,] },],
          'width': [{ type: core.HostBinding, args: ['style.width',] },],
          'height': [{ type: core.HostBinding, args: ['style.height',] },],
          'left': [{ type: core.HostBinding, args: ['style.left',] },],
          'onResize': [{ type: core.HostListener, args: ['window:resize',] },],
      };
      return NgxGalleryComponent;
  }());
  
  var NgxGalleryImage = /** @class */ (function () {
      /**
       * @param {?} obj
       */
      function NgxGalleryImage(obj) {
          this.small = obj.small;
          this.medium = obj.medium;
          this.big = obj.big;
          this.description = obj.description;
      }
      return NgxGalleryImage;
  }());
  
  var __extends = (undefined && undefined.__extends) || (function () {
      var extendStatics = Object.setPrototypeOf ||
          ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
          function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
      return function (d, b) {
          extendStatics(d, b);
          function __() { this.constructor = d; }
          d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
      };
  })();
  var CustomHammerConfig = /** @class */ (function (_super) {
      __extends(CustomHammerConfig, _super);
      function CustomHammerConfig() {
          var _this = _super !== null && _super.apply(this, arguments) || this;
          _this.overrides = ({
              'pinch': { enable: false },
              'rotate': { enable: false }
          });
          return _this;
      }
      return CustomHammerConfig;
  }(platformBrowser.HammerGestureConfig));
  var NgxGalleryModule = /** @class */ (function () {
      function NgxGalleryModule() {
      }
      NgxGalleryModule.decorators = [
          { type: core.NgModule, args: [{
                      imports: [
                          common.CommonModule
                      ],
                      declarations: [
                          NgxGalleryArrowsComponent,
                          NgxGalleryImageComponent,
                          NgxGalleryThumbnailsComponent,
                          NgxGalleryPreviewComponent,
                          NgxGalleryComponent
                      ],
                      exports: [
                          NgxGalleryComponent
                      ],
                      providers: [
                          { provide: platformBrowser.HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig }
                      ]
                  },] },
      ];
      /**
       * @nocollapse
       */
      NgxGalleryModule.ctorParameters = function () { return []; };
      return NgxGalleryModule;
  }());
  
  exports.CustomHammerConfig = CustomHammerConfig;
  exports.NgxGalleryModule = NgxGalleryModule;
  exports.NgxGalleryComponent = NgxGalleryComponent;
  exports.NgxGalleryImageComponent = NgxGalleryImageComponent;
  exports.NgxGalleryThumbnailsComponent = NgxGalleryThumbnailsComponent;
  exports.NgxGalleryPreviewComponent = NgxGalleryPreviewComponent;
  exports.NgxGalleryArrowsComponent = NgxGalleryArrowsComponent;
  exports.NgxGalleryOptions = NgxGalleryOptions;
  exports.NgxGalleryImage = NgxGalleryImage;
  exports.NgxGalleryAnimation = NgxGalleryAnimation;
  exports.NgxGalleryHelperService = NgxGalleryHelperService;
  exports.NgxGalleryImageSize = NgxGalleryImageSize;
  exports.NgxGalleryLayout = NgxGalleryLayout;
  exports.NgxGalleryOrder = NgxGalleryOrder;
  
  Object.defineProperty(exports, '__esModule', { value: true });
  
  })));
  