@ngx-gallery/core
Version:
Angular gallery directive that hooks the lightbox with the images automatically.
1,250 lines (1,237 loc) • 108 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/animations'), require('@angular/common/http'), require('@angular/platform-browser'), require('@angular/common'), require('@angular/core'), require('rxjs'), require('rxjs/operators')) :
typeof define === 'function' && define.amd ? define('@ngx-gallery/core', ['exports', '@angular/animations', '@angular/common/http', '@angular/platform-browser', '@angular/common', '@angular/core', 'rxjs', 'rxjs/operators'], factory) :
(factory((global['ngx-gallery'] = global['ngx-gallery'] || {}, global['ngx-gallery'].core = {}),global.ng.animations,global.ng.common.http,global.ng.platformBrowser,global.ng.common,global.ng.core,global.rxjs,global.rxjs.operators));
}(this, (function (exports,animations,http,platformBrowser,common,i0,rxjs,operators) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
var GalleryAction = {
INITIALIZED: 'initialized',
ITEMS_CHANGED: 'itemsChanged',
INDEX_CHANGED: 'indexChanged',
PLAY: 'play',
STOP: 'stop',
};
/** @enum {string} */
var ImageSize = {
Cover: 'cover',
Contain: 'contain',
};
/** @enum {string} */
var LoadingStrategy = {
Preload: 'preload',
Lazy: 'lazy',
Default: 'default',
};
/** @enum {string} */
var ThumbnailsPosition = {
Top: 'top',
Left: 'left',
Right: 'right',
Bottom: 'bottom',
};
/** @enum {string} */
var ImageLoaderMode = {
Determinate: 'determinate',
Indeterminate: 'indeterminate',
};
/** @enum {string} */
var DotsPosition = {
Top: 'top',
Bottom: 'bottom',
};
/** @enum {string} */
var CounterPosition = {
Top: 'top',
Bottom: 'bottom',
};
/** @enum {string} */
var ThumbnailsMode = {
Free: 'free',
Strict: 'strict',
};
/** @enum {string} */
var SlidingDirection = {
Horizontal: 'horizontal',
Vertical: 'vertical',
};
/** @enum {string} */
var GalleryItemType = {
Image: 'image',
Video: 'video',
Youtube: 'youtube',
Iframe: 'iframe',
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Initial state
* @type {?}
*/
var defaultState = {
action: GalleryAction.INITIALIZED,
isPlaying: false,
hasNext: false,
hasPrev: false,
currIndex: 0,
items: []
};
/** @type {?} */
var defaultConfig = {
nav: true,
loop: true,
zoomOut: 0,
dots: false,
thumb: true,
dotsSize: 30,
counter: true,
gestures: true,
autoPlay: false,
thumbWidth: 120,
thumbHeight: 90,
panSensitivity: 25,
disableThumb: false,
playerInterval: 3000,
imageSize: ImageSize.Contain,
thumbMode: ThumbnailsMode.Strict,
dotsPosition: DotsPosition.Bottom,
counterPosition: CounterPosition.Top,
thumbPosition: ThumbnailsPosition.Bottom,
loadingStrategy: LoadingStrategy.Default,
slidingDirection: SlidingDirection.Horizontal,
navIcon: "<?xml version=\"1.0\" encoding=\"UTF-8\"?><svg width=\"512px\" height=\"512px\" enable-background=\"new 0 0 240.823 240.823\" version=\"1.1\" viewBox=\"0 0 240.823 240.823\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m183.19 111.82l-108.3-108.26c-4.752-4.74-12.451-4.74-17.215 0-4.752 4.74-4.752 12.439 0 17.179l99.707 99.671-99.695 99.671c-4.752 4.74-4.752 12.439 0 17.191 4.752 4.74 12.463 4.74 17.215 0l108.3-108.26c4.68-4.691 4.68-12.511-0.012-17.19z\" fill=\"#fff\"/></svg>",
loadingIcon: "<?xml version=\"1.0\" encoding=\"UTF-8\"?><svg stroke=\"#fff\" viewBox=\"0 0 44 44\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\" stroke-width=\"2\"><circle cx=\"22\" cy=\"22\" r=\"1\"><animate attributeName=\"r\" begin=\"0s\" calcMode=\"spline\" dur=\"1.8s\" keySplines=\"0.165, 0.84, 0.44, 1\" keyTimes=\"0; 1\" repeatCount=\"indefinite\" values=\"1; 20\"/><animate attributeName=\"stroke-opacity\" begin=\"0s\" calcMode=\"spline\" dur=\"1.8s\" keySplines=\"0.3, 0.61, 0.355, 1\" keyTimes=\"0; 1\" repeatCount=\"indefinite\" values=\"1; 0\"/></circle><circle cx=\"22\" cy=\"22\" r=\"1\"><animate attributeName=\"r\" begin=\"-0.9s\" calcMode=\"spline\" dur=\"1.8s\" keySplines=\"0.165, 0.84, 0.44, 1\" keyTimes=\"0; 1\" repeatCount=\"indefinite\" values=\"1; 20\"/><animate attributeName=\"stroke-opacity\" begin=\"-0.9s\" calcMode=\"spline\" dur=\"1.8s\" keySplines=\"0.3, 0.61, 0.355, 1\" keyTimes=\"0; 1\" repeatCount=\"indefinite\" values=\"1; 0\"/></circle></g></svg>"
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ImageItem = /** @class */ (function () {
function ImageItem(data) {
this.data = data;
this.type = GalleryItemType.Image;
}
return ImageItem;
}());
var VideoItem = /** @class */ (function () {
function VideoItem(data) {
this.data = data;
this.type = GalleryItemType.Video;
}
return VideoItem;
}());
var IframeItem = /** @class */ (function () {
function IframeItem(data) {
this.data = data;
this.type = GalleryItemType.Iframe;
}
return IframeItem;
}());
var YoutubeItem = /** @class */ (function () {
function YoutubeItem(data) {
this.data = {
src: "//youtube.com/embed/" + data.src + "?wmode=transparent",
thumb: data.thumb ? data.thumb : "//img.youtube.com/vi/" + data.src + "/default.jpg"
};
this.type = GalleryItemType.Youtube;
}
return YoutubeItem;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var filterActions = function (actions) {
return operators.filter(function (state) { return actions.indexOf(state.action) > -1; });
};
var GalleryRef = /** @class */ (function () {
function GalleryRef(config, deleteInstance) {
this.deleteInstance = deleteInstance;
/**
* Stream that emits on item click
*/
this.itemClick = new rxjs.Subject();
/**
* Stream that emits on thumbnail click
*/
this.thumbClick = new rxjs.Subject();
/**
* Stream that emits on an error occurs
*/
this.error = new rxjs.Subject();
this._state = new rxjs.BehaviorSubject(defaultState);
this._config = new rxjs.BehaviorSubject(config);
this.state = this._state.asObservable();
this.config = this._config.asObservable();
}
Object.defineProperty(GalleryRef.prototype, "initialized", {
/** Stream that emits when gallery is initialized/reset */
get: /**
* Stream that emits when gallery is initialized/reset
* @return {?}
*/ function () {
return this.state.pipe(filterActions([GalleryAction.INITIALIZED]));
},
enumerable: true,
configurable: true
});
Object.defineProperty(GalleryRef.prototype, "itemsChanged", {
/** Stream that emits when items is changed (items loaded, item added, item removed) */
get: /**
* Stream that emits when items is changed (items loaded, item added, item removed)
* @return {?}
*/ function () {
return this.state.pipe(filterActions([GalleryAction.ITEMS_CHANGED]));
},
enumerable: true,
configurable: true
});
Object.defineProperty(GalleryRef.prototype, "indexChanged", {
/** Stream that emits when current item is changed */
get: /**
* Stream that emits when current item is changed
* @return {?}
*/ function () {
return this.state.pipe(filterActions([GalleryAction.INDEX_CHANGED]));
},
enumerable: true,
configurable: true
});
Object.defineProperty(GalleryRef.prototype, "playingChanged", {
/** Stream that emits when the player should start or stop */
get: /**
* Stream that emits when the player should start or stop
* @return {?}
*/ function () {
return this.state.pipe(filterActions([GalleryAction.PLAY, GalleryAction.STOP]));
},
enumerable: true,
configurable: true
});
Object.defineProperty(GalleryRef.prototype, "playerActions", {
/** Stream that emits when the player should start or stop */
get: /**
* Stream that emits when the player should start or stop
* @private
* @return {?}
*/ function () {
return this.state.pipe(filterActions([GalleryAction.PLAY, GalleryAction.STOP, GalleryAction.INDEX_CHANGED]));
},
enumerable: true,
configurable: true
});
/**
* Activate player actions listener
*/
/**
* Activate player actions listener
* @return {?}
*/
GalleryRef.prototype.activatePlayer = /**
* Activate player actions listener
* @return {?}
*/
function () {
var _this = this;
return this.playerActions.pipe(operators.switchMap(function (e) {
return e.isPlaying ? rxjs.of({}).pipe(operators.delay(_this._config.value.playerInterval), operators.tap(function () { return _this.next(); })) : rxjs.EMPTY;
}));
};
/**
* Set gallery state
* @param state
*/
/**
* Set gallery state
* @private
* @param {?} state
* @return {?}
*/
GalleryRef.prototype.setState = /**
* Set gallery state
* @private
* @param {?} state
* @return {?}
*/
function (state) {
this._state.next(__assign({}, this._state.value, state));
};
/**
* Set gallery config
* @param config
*/
/**
* Set gallery config
* @param {?} config
* @return {?}
*/
GalleryRef.prototype.setConfig = /**
* Set gallery config
* @param {?} config
* @return {?}
*/
function (config) {
this._config.next(__assign({}, this._config.value, config));
};
/** Add gallery item
* @param item - Gallery item object
* @param active - Set the new item as current slide
*/
/**
* Add gallery item
* @param {?} item - Gallery item object
* @param {?=} active - Set the new item as current slide
* @return {?}
*/
GalleryRef.prototype.add = /**
* Add gallery item
* @param {?} item - Gallery item object
* @param {?=} active - Set the new item as current slide
* @return {?}
*/
function (item, active) {
/** @type {?} */
var items = __spread(this._state.value.items, [item]);
this.setState({
action: GalleryAction.ITEMS_CHANGED,
items: items,
hasNext: items.length > 1,
currIndex: active ? items.length - 1 : this._state.value.currIndex
});
};
/**
* Add image item
* @param data
* @param active
*/
/**
* Add image item
* @param {?} data
* @param {?=} active
* @return {?}
*/
GalleryRef.prototype.addImage = /**
* Add image item
* @param {?} data
* @param {?=} active
* @return {?}
*/
function (data, active) {
this.add(new ImageItem(data), active);
};
/**
* Add video item
* @param data
* @param active
*/
/**
* Add video item
* @param {?} data
* @param {?=} active
* @return {?}
*/
GalleryRef.prototype.addVideo = /**
* Add video item
* @param {?} data
* @param {?=} active
* @return {?}
*/
function (data, active) {
this.add(new VideoItem(data), active);
};
/**
* Add iframe item
* @param data
* @param active
*/
/**
* Add iframe item
* @param {?} data
* @param {?=} active
* @return {?}
*/
GalleryRef.prototype.addIframe = /**
* Add iframe item
* @param {?} data
* @param {?=} active
* @return {?}
*/
function (data, active) {
this.add(new IframeItem(data), active);
};
/**
* Add youtube item
* @param data
* @param active
*/
/**
* Add youtube item
* @param {?} data
* @param {?=} active
* @return {?}
*/
GalleryRef.prototype.addYoutube = /**
* Add youtube item
* @param {?} data
* @param {?=} active
* @return {?}
*/
function (data, active) {
this.add(new YoutubeItem(data), active);
};
/** Remove gallery item
* @param i - Item index
*/
/**
* Remove gallery item
* @param {?} i - Item index
* @return {?}
*/
GalleryRef.prototype.remove = /**
* Remove gallery item
* @param {?} i - Item index
* @return {?}
*/
function (i) {
/** @type {?} */
var items = __spread(this._state.value.items.slice(0, i), this._state.value.items.slice(i + 1, this._state.value.items.length));
this.setState({
action: GalleryAction.ITEMS_CHANGED,
items: items,
hasNext: items.length > 1,
hasPrev: i > 0
});
};
/**
* Load items and reset the state
* @param items - Gallery images data
*/
/**
* Load items and reset the state
* @param {?} items - Gallery images data
* @return {?}
*/
GalleryRef.prototype.load = /**
* Load items and reset the state
* @param {?} items - Gallery images data
* @return {?}
*/
function (items) {
if (items) {
this.setState({
action: GalleryAction.ITEMS_CHANGED,
items: items,
hasNext: items.length > 1,
hasPrev: false
});
}
};
/**
* Set active item
* @param i - Active Index
*/
/**
* Set active item
* @param {?} i - Active Index
* @return {?}
*/
GalleryRef.prototype.set = /**
* Set active item
* @param {?} i - Active Index
* @return {?}
*/
function (i) {
if (i !== this._state.value.currIndex) {
this.setState({
action: GalleryAction.INDEX_CHANGED,
currIndex: i,
hasNext: i < this._state.value.items.length - 1,
hasPrev: i > 0
});
}
};
/**
* Next item
*/
/**
* Next item
* @return {?}
*/
GalleryRef.prototype.next = /**
* Next item
* @return {?}
*/
function () {
if (this._state.value.hasNext) {
this.set(this._state.value.currIndex + 1);
}
else if (this._config.value.loop) {
this.set(0);
}
};
/**
* Prev item
*/
/**
* Prev item
* @return {?}
*/
GalleryRef.prototype.prev = /**
* Prev item
* @return {?}
*/
function () {
if (this._state.value.hasPrev) {
this.set(this._state.value.currIndex - 1);
}
else if (this._config.value.loop) {
this.set(this._state.value.items.length - 1);
}
};
/**
* Start gallery player
* @param interval
*/
/**
* Start gallery player
* @param {?=} interval
* @return {?}
*/
GalleryRef.prototype.play = /**
* Start gallery player
* @param {?=} interval
* @return {?}
*/
function (interval) {
if (interval) {
this.setConfig({ playerInterval: interval });
}
this.setState({ action: GalleryAction.PLAY, isPlaying: true });
};
/**
* Stop gallery player
*/
/**
* Stop gallery player
* @return {?}
*/
GalleryRef.prototype.stop = /**
* Stop gallery player
* @return {?}
*/
function () {
this.setState({ action: GalleryAction.STOP, isPlaying: false });
};
/**
* Reset gallery to initial state
*/
/**
* Reset gallery to initial state
* @return {?}
*/
GalleryRef.prototype.reset = /**
* Reset gallery to initial state
* @return {?}
*/
function () {
this.setState(defaultState);
};
/**
* Destroy gallery
*/
/**
* Destroy gallery
* @return {?}
*/
GalleryRef.prototype.destroy = /**
* Destroy gallery
* @return {?}
*/
function () {
this._state.complete();
this._config.complete();
this.itemClick.complete();
this.thumbClick.complete();
this.deleteInstance();
};
return GalleryRef;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var GALLERY_CONFIG = new i0.InjectionToken('galleryConfig');
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Gallery = /** @class */ (function () {
function Gallery(config) {
/**
* Store gallery instances
*/
this._instances = new Map();
this.config = config ? __assign({}, defaultConfig, config) : defaultConfig;
}
/**
* Get or create gallery by ID
* @param id
* @param config
*/
/**
* Get or create gallery by ID
* @param {?=} id
* @param {?=} config
* @return {?}
*/
Gallery.prototype.ref = /**
* Get or create gallery by ID
* @param {?=} id
* @param {?=} config
* @return {?}
*/
function (id, config) {
if (id === void 0) {
id = 'root';
}
if (this._instances.has(id)) {
/** @type {?} */
var galleryRef = this._instances.get(id);
if (config) {
galleryRef.setConfig(__assign({}, this.config, config));
}
return galleryRef;
}
else {
return this._instances.set(id, new GalleryRef(__assign({}, this.config, config), this.deleteInstance(id))).get(id);
}
};
/**
* Destroy all gallery instances
*/
/**
* Destroy all gallery instances
* @return {?}
*/
Gallery.prototype.destroyAll = /**
* Destroy all gallery instances
* @return {?}
*/
function () {
this._instances.forEach(function (ref) { return ref.destroy(); });
};
/**
* Reset all gallery instances
*/
/**
* Reset all gallery instances
* @return {?}
*/
Gallery.prototype.resetAll = /**
* Reset all gallery instances
* @return {?}
*/
function () {
this._instances.forEach(function (ref) { return ref.reset(); });
};
/**
* A destroyer function for each gallery instance
*/
/**
* A destroyer function for each gallery instance
* @private
* @param {?} id
* @return {?}
*/
Gallery.prototype.deleteInstance = /**
* A destroyer function for each gallery instance
* @private
* @param {?} id
* @return {?}
*/
function (id) {
var _this = this;
return function () {
if (_this._instances.has(id)) {
_this._instances.delete(id);
}
};
};
Gallery.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
Gallery.ctorParameters = function () {
return [
{ type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [GALLERY_CONFIG,] }] }
];
};
/** @nocollapse */ Gallery.ngInjectableDef = i0.defineInjectable({ factory: function Gallery_Factory() { return new Gallery(i0.inject(GALLERY_CONFIG, 8)); }, token: Gallery, providedIn: "root" });
return Gallery;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var GalleryComponent = /** @class */ (function () {
function GalleryComponent(_gallery) {
this._gallery = _gallery;
this.nav = this._gallery.config.nav;
this.dots = this._gallery.config.dots;
this.loop = this._gallery.config.loop;
this.thumb = this._gallery.config.thumb;
this.zoomOut = this._gallery.config.zoomOut;
this.counter = this._gallery.config.counter;
this.dotsSize = this._gallery.config.dotsSize;
this.autoPlay = this._gallery.config.autoPlay;
this.gestures = this._gallery.config.gestures;
this.thumbWidth = this._gallery.config.thumbWidth;
this.thumbHeight = this._gallery.config.thumbHeight;
this.disableThumb = this._gallery.config.disableThumb;
this.panSensitivity = this._gallery.config.panSensitivity;
this.playerInterval = this._gallery.config.playerInterval;
this.itemTemplate = this._gallery.config.itemTemplate;
this.thumbTemplate = this._gallery.config.thumbTemplate;
this.thumbMode = this._gallery.config.thumbMode;
this.imageSize = this._gallery.config.imageSize;
this.dotsPosition = this._gallery.config.dotsPosition;
this.counterPosition = this._gallery.config.counterPosition;
this.slidingDirection = this._gallery.config.slidingDirection;
this.loadingStrategy = this._gallery.config.loadingStrategy;
this.thumbPosition = this._gallery.config.thumbPosition;
// Inputs used by the lightbox
/**
* Destroy gallery ref on component destroy event
*/
this.destroyRef = true;
/**
* Skip initializing the config with components inputs (Lightbox mode)
*/
this.skipInitConfig = false;
this.itemClick = new i0.EventEmitter();
this.thumbClick = new i0.EventEmitter();
this.playingChange = new i0.EventEmitter();
this.indexChange = new i0.EventEmitter();
this.itemsChange = new i0.EventEmitter();
this.error = new i0.EventEmitter();
this._itemClick$ = rxjs.Subscription.EMPTY;
this._thumbClick$ = rxjs.Subscription.EMPTY;
this._itemChange$ = rxjs.Subscription.EMPTY;
this._indexChange$ = rxjs.Subscription.EMPTY;
this._playingChange$ = rxjs.Subscription.EMPTY;
this._playerListener$ = rxjs.Subscription.EMPTY;
}
/**
* @private
* @return {?}
*/
GalleryComponent.prototype.getConfig = /**
* @private
* @return {?}
*/
function () {
return {
nav: this.nav,
dots: this.dots,
loop: this.loop,
thumb: this.thumb,
zoomOut: this.zoomOut,
counter: this.counter,
autoPlay: this.autoPlay,
gestures: this.gestures,
dotsSize: this.dotsSize,
imageSize: this.imageSize,
thumbMode: this.thumbMode,
thumbWidth: this.thumbWidth,
thumbHeight: this.thumbHeight,
disableThumb: this.disableThumb,
dotsPosition: this.dotsPosition,
itemTemplate: this.itemTemplate,
thumbTemplate: this.thumbTemplate,
thumbPosition: this.thumbPosition,
panSensitivity: this.panSensitivity,
playerInterval: this.playerInterval,
counterPosition: this.counterPosition,
loadingStrategy: this.loadingStrategy,
slidingDirection: this.slidingDirection
};
};
/**
* @param {?} i
* @return {?}
*/
GalleryComponent.prototype.onAction = /**
* @param {?} i
* @return {?}
*/
function (i) {
switch (i) {
case 'next':
this.galleryRef.next();
break;
case 'prev':
this.galleryRef.prev();
break;
default:
this.galleryRef.set(( /** @type {?} */(i)));
}
};
/**
* @param {?} changes
* @return {?}
*/
GalleryComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (this.galleryRef) {
this.galleryRef.setConfig(this.getConfig());
if (changes.items && changes.items.currentValue !== changes.items.previousValue) {
this.load(this.items);
}
}
};
/**
* @return {?}
*/
GalleryComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
// Get gallery instance by id
if (this.skipInitConfig) {
this.galleryRef = this._gallery.ref(this.id);
}
else {
this.galleryRef = this._gallery.ref(this.id, this.getConfig());
}
// Load gallery items
this.load(this.items);
// Activate player listener
this._playerListener$ = this.galleryRef.activatePlayer().subscribe();
// Subscribes to events on demand
if (this.indexChange.observers.length) {
this._indexChange$ = this.galleryRef.indexChanged.subscribe(function (state) { return _this.indexChange.emit(state); });
}
if (this.itemsChange.observers.length) {
this._itemChange$ = this.galleryRef.itemsChanged.subscribe(function (state) { return _this.itemsChange.emit(state); });
}
if (this.playingChange.observers.length) {
this._playingChange$ = this.galleryRef.playingChanged.subscribe(function (state) { return _this.playingChange.emit(state); });
}
// Start playing if auto-play is set to true
if (this.autoPlay) {
this.play();
}
};
/**
* @return {?}
*/
GalleryComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._itemClick$.unsubscribe();
this._thumbClick$.unsubscribe();
this._itemChange$.unsubscribe();
this._indexChange$.unsubscribe();
this._playingChange$.unsubscribe();
this._playerListener$.unsubscribe();
if (this.destroyRef) {
this.galleryRef.destroy();
}
};
/**
* @param {?} i
* @return {?}
*/
GalleryComponent.prototype.onItemClick = /**
* @param {?} i
* @return {?}
*/
function (i) {
this.itemClick.emit(i);
this.galleryRef.itemClick.next(i);
};
/**
* @param {?} i
* @return {?}
*/
GalleryComponent.prototype.onThumbClick = /**
* @param {?} i
* @return {?}
*/
function (i) {
this.galleryRef.set(i);
this.thumbClick.emit(i);
this.galleryRef.thumbClick.next(i);
};
/**
* @param {?} err
* @return {?}
*/
GalleryComponent.prototype.onError = /**
* @param {?} err
* @return {?}
*/
function (err) {
this.error.emit(err);
this.galleryRef.error.next(err);
};
/**
* @param {?} items
* @return {?}
*/
GalleryComponent.prototype.load = /**
* @param {?} items
* @return {?}
*/
function (items) {
this.galleryRef.load(items);
};
/**
* @param {?} item
* @param {?=} active
* @return {?}
*/
GalleryComponent.prototype.add = /**
* @param {?} item
* @param {?=} active
* @return {?}
*/
function (item, active) {
this.galleryRef.add(item, active);
};
/**
* @param {?} data
* @param {?=} active
* @return {?}
*/
GalleryComponent.prototype.addImage = /**
* @param {?} data
* @param {?=} active
* @return {?}
*/
function (data, active) {
this.add(new ImageItem(data), active);
};
/**
* @param {?} data
* @param {?=} active
* @return {?}
*/
GalleryComponent.prototype.addVideo = /**
* @param {?} data
* @param {?=} active
* @return {?}
*/
function (data, active) {
this.add(new VideoItem(data), active);
};
/**
* @param {?} data
* @param {?=} active
* @return {?}
*/
GalleryComponent.prototype.addIframe = /**
* @param {?} data
* @param {?=} active
* @return {?}
*/
function (data, active) {
this.add(new IframeItem(data), active);
};
/**
* @param {?} data
* @param {?=} active
* @return {?}
*/
GalleryComponent.prototype.addYoutube = /**
* @param {?} data
* @param {?=} active
* @return {?}
*/
function (data, active) {
this.add(new YoutubeItem(data), active);
};
/**
* @param {?} i
* @return {?}
*/
GalleryComponent.prototype.remove = /**
* @param {?} i
* @return {?}
*/
function (i) {
this.galleryRef.remove(i);
};
/**
* @return {?}
*/
GalleryComponent.prototype.next = /**
* @return {?}
*/
function () {
this.galleryRef.next();
};
/**
* @return {?}
*/
GalleryComponent.prototype.prev = /**
* @return {?}
*/
function () {
this.galleryRef.prev();
};
/**
* @param {?} i
* @return {?}
*/
GalleryComponent.prototype.set = /**
* @param {?} i
* @return {?}
*/
function (i) {
this.galleryRef.set(i);
};
/**
* @return {?}
*/
GalleryComponent.prototype.reset = /**
* @return {?}
*/
function () {
this.galleryRef.reset();
};
/**
* @param {?=} interval
* @return {?}
*/
GalleryComponent.prototype.play = /**
* @param {?=} interval
* @return {?}
*/
function (interval) {
this.galleryRef.play(interval);
};
/**
* @return {?}
*/
GalleryComponent.prototype.stop = /**
* @return {?}
*/
function () {
this.galleryRef.stop();
};
GalleryComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'gallery',
changeDetection: i0.ChangeDetectionStrategy.OnPush,
template: "\n <gallery-core [state]=\"galleryRef.state | async\"\n [config]=\"galleryRef.config | async\"\n (action)=\"onAction($event)\"\n (itemClick)=\"onItemClick($event)\"\n (thumbClick)=\"onThumbClick($event)\"\n (error)=\"onError($event)\"></gallery-core>\n <ng-content></ng-content>\n ",
styles: ["::ng-deep gallery-core[dotsPosition=top] gallery-dots{top:0}::ng-deep gallery-core[dotsPosition=bottom] gallery-dots{bottom:0}::ng-deep gallery-dots{margin:7px;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}::ng-deep .g-dot{cursor:pointer;z-index:20}::ng-deep .g-dot:hover .g-dot-inner{opacity:1}::ng-deep .g-dot-active .g-dot-inner{opacity:1;-webkit-transform:scale(1.5)!important;transform:scale(1.5)!important}::ng-deep .g-dot-inner{background-color:#fff;opacity:.6;width:30%;height:30%;border-radius:50%;box-shadow:0 0 1px #000;transition:.2s}::ng-deep .g-dot,::ng-deep .g-dot-inner,::ng-deep gallery-dots{display:flex;justify-content:center;align-items:center}::ng-deep .g-nav-next,::ng-deep .g-nav-prev{position:absolute;top:50%;width:30px;height:40px;cursor:pointer;z-index:999}::ng-deep .g-nav-next{right:.5em;-webkit-transform:translateY(-50%) perspective(1px);transform:translateY(-50%) perspective(1px)}::ng-deep .g-nav-prev{left:.5em;-webkit-transform:translateY(-50%) perspective(1px) scale(-1,-1);transform:translateY(-50%) perspective(1px) scale(-1,-1)}@media only screen and (max-width:480px){::ng-deep .g-nav-next{right:.2em}::ng-deep .g-nav-prev{left:.2em}}::ng-deep .g-items-container{height:100%}::ng-deep .g-slider{position:absolute;transition:transform .4s cubic-bezier(.5,0,.5,1);transition:transform .4s cubic-bezier(.5,0,.5,1),-webkit-transform .4s cubic-bezier(.5,0,.5,1)}::ng-deep gallery-core[slidingDirection=horizontal] .g-slider{flex-direction:row}::ng-deep gallery-core[slidingDirection=vertical] .g-slider{flex-direction:column}::ng-deep gallery-thumbs{display:block;z-index:1;overflow:unset}::ng-deep .g-thumbs-container{position:relative;z-index:206;width:100%;height:100%;left:0;top:0;display:flex;overflow:unset}::ng-deep gallery-core[disableThumb=true] gallery-thumb{cursor:default}::ng-deep gallery-core[thumbPosition=bottom] gallery-thumbs .g-slider,::ng-deep gallery-core[thumbPosition=top] gallery-thumbs .g-slider{flex-direction:row;top:0;left:50%}::ng-deep gallery-core[thumbPosition=bottom] gallery-thumb,::ng-deep gallery-core[thumbPosition=top] gallery-thumb{padding:1px 0 1px 1px}::ng-deep gallery-core[thumbPosition=left] gallery-thumbs .g-slider,::ng-deep gallery-core[thumbPosition=right] gallery-thumbs .g-slider{flex-direction:column;top:50%;left:0}::ng-deep gallery-core[thumbPosition=left] gallery-thumb,::ng-deep gallery-core[thumbPosition=right] gallery-thumb{padding:0 1px 1px}::ng-deep gallery-core[thumbPosition=top]{flex-direction:column}::ng-deep gallery-core[thumbPosition=left]{flex-direction:row}::ng-deep gallery-core[thumbPosition=right]{flex-direction:row-reverse}::ng-deep gallery-core[thumbPosition=bottom]{flex-direction:column-reverse}::ng-deep gallery-thumb.g-active-thumb .g-thumb-loading{background-color:#464646}::ng-deep .g-thumb-loading{position:relative;overflow:hidden;height:100%;background-color:#262626}::ng-deep .g-thumb-loading::before{content:\"\";position:absolute;top:0;right:0;bottom:0;left:50%;z-index:1;width:500%;margin-left:-250%;-webkit-animation:.8s linear infinite phAnimation;animation:.8s linear infinite phAnimation;background:linear-gradient(to right,rgba(255,255,255,0) 46%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 54%) 50% 50%}@-webkit-keyframes phAnimation{0%{-webkit-transform:translate3d(-30%,0,0);transform:translate3d(-30%,0,0)}100%{-webkit-transform:translate3d(30%,0,0);transform:translate3d(30%,0,0)}}@keyframes phAnimation{0%{-webkit-transform:translate3d(-30%,0,0);transform:translate3d(-30%,0,0)}100%{-webkit-transform:translate3d(30%,0,0);transform:translate3d(30%,0,0)}}::ng-deep gallery-core[counterPosition=top] .g-counter{top:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px}::ng-deep gallery-core[counterPosition=bottom] .g-counter{bottom:0;border-top-left-radius:4px;border-top-right-radius:4px}::ng-deep .g-counter{z-index:50;position:absolute;left:50%;-webkit-transform:translateX(-50%) perspective(1px);transform:translateX(-50%) perspective(1px);font-size:12px;padding:4px 10px;color:#fff;background-color:rgba(0,0,0,.5)}::ng-deep gallery[gallerize] gallery-item{cursor:pointer}::ng-deep gallery-item,::ng-deep gallery-thumb{position:relative;height:100%;width:100%;display:block;overflow:hidden}::ng-deep gallery-item h2,::ng-deep gallery-item h4,::ng-deep gallery-thumb h2,::ng-deep gallery-thumb h4{color:coral;margin:0}::ng-deep gallery-item h2,::ng-deep gallery-thumb h2{font-size:3.5em;margin-bottom:.3em}::ng-deep gallery-item h4,::ng-deep gallery-thumb h4{font-size:1.6em}::ng-deep gallery-item{z-index:10}::ng-deep gallery-item iframe,::ng-deep gallery-item video{position:absolute;width:100%;height:100%}::ng-deep gallery-thumb{opacity:.5;cursor:pointer;transition:opacity .3s cubic-bezier(.5,0,.5,1)}::ng-deep gallery-thumb.g-active-thumb{opacity:1}::ng-deep .g-image-item{background-position:center center;background-repeat:no-repeat;background-size:cover;width:100%;height:100%}::ng-deep .g-image-error-message,::ng-deep .g-template{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column}::ng-deep .g-loading{position:absolute;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);left:50%;top:50%;width:80px;height:80px}::ng-deep gallery-core[imageSize=contain] gallery-slider .g-image-item{background-size:contain}::ng-deep gallery-image{display:flex;justify-content:center;align-items:center;height:100%}::ng-deep gallery{position:relative;z-index:1;overflow:hidden;display:block;height:500px;background-color:#000}::ng-deep gallery *{box-sizing:border-box}::ng-deep gallery,::ng-deep gallery-core{position:relative;overflow:hidden}::ng-deep .g-box,::ng-deep .g-slider,::ng-deep gallery-core{display:flex;height:100%;width:100%}::ng-deep gallery[fluid]{-webkit-transform:translateX(-50vw);transform:translateX(-50vw);width:100vw;left:50%}::ng-deep gallery[fluid][fluid=false]{-webkit-transform:none;transform:none;width:initial;left:initial}::ng-deep .g-no-transition{transition:unset!important}::ng-deep .g-box,::ng-deep gallery-slider{overflow:hidden;position:relative;display:flex;flex-direction:column;flex:1;order:1;height:100%}::ng-deep .g-btn-close svg,::ng-deep gallery-nav svg{width:100%;height:100%;-webkit-filter:drop-shadow(0 0 1px #000);filter:drop-shadow(0 0 1px #000);transition:opacity .2s linear;opacity:.6}::ng-deep .g-btn-close svg:hover,::ng-deep gallery-nav svg:hover{opacity:1}"]
}] }
];
/** @nocollapse */
GalleryComponent.ctorParameters = function () {
return [
{ type: Gallery }
];
};
GalleryComponent.propDecorators = {
id: [{ type: i0.Input }],
items: [{ type: i0.Input }],
nav: [{ type: i0.Input }],
dots: [{ type: i0.Input }],
loop: [{ type: i0.Input }],
thumb: [{ type: i0.Input }],
zoomOut: [{ type: i0.Input }],
counter: [{ type: i0.Input }],
dotsSize: [{ type: i0.Input }],
autoPlay: [{ type: i0.Input }],
gestures: [{ type: i0.Input }],
thumbWidth: [{ type: i0.Input }],
thumbHeight: [{ type: i0.Input }],
disableThumb: [{ type: i0.Input }],
panSensitivity: [{ type: i0.Input }],
playerInterval: [{ type: i0.Input }],
itemTemplate: [{ type: i0.Input }],
thumbTemplate: [{ type: i0.Input }],
thumbMode: [{ type: i0.Input }],
imageSize: [{ type: i0.Input }],
dotsPosition: [{ type: i0.Input }],
counterPosition: [{ type: i0.Input }],
slidingDirection: [{ type: i0.Input }],
loadingStrategy: [{ type: i0.Input }],
thumbPosition: [{ type: i0.Input }],
destroyRef: [{ type: i0.Input }],
skipInitConfig: [{ type: i0.Input }],
itemClick: [{ type: i0.Output }],
thumbClick: [{ type: i0.Output }],
playingChange: [{ type: i0.Output }],
indexChange: [{ type: i0.Output }],
itemsChange: [{ type: i0.Output }],
error: [{ type: i0.Output }]
};
return GalleryComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var GalleryIframeComponent = /** @class */ (function () {
function GalleryIframeComponent(_sanitizer) {
this._sanitizer = _sanitizer;
}
Object.defineProperty(GalleryIframeComponent.prototype, "pauseVideo", {
set: /**
* @param {?} shouldPause
* @return {?}
*/ function (shouldPause) {
/** @type {?} */
var iframe = this.iframe.nativeElement;
if (shouldPause) {
/** @type {?} */
var src = iframe.src;
iframe.src = src;
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
GalleryIframeComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.iframeSrc = this._sanitizer.bypassSecurityTrustResourceUrl(this.src);
};
GalleryIframeComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'gallery-iframe',
changeDetection: i0.ChangeDetectionStrategy.OnPush,
template: "\n <iframe #iframe\n frameborder=\"0\"\n allowfullscreen\n [src]=\"iframeSrc\">\n </iframe>\n "
}] }
];
/** @nocollapse */
GalleryIframeComponent.ctorParameters = function () {
return [
{ type: platformBrowser.DomSanitizer }
];
};
GalleryIframeComponent.propDecorators = {
src: [{ type: i0.Input }],
pauseVideo: [{ type: i0.Input, args: ['pause',] }],
iframe: [{ type: i0.ViewChild, args: ['iframe',] }]
};
return GalleryIframeComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var GalleryImageComponent = /** @class */ (function () {
function GalleryImageComponent(_sanitizer) {
this._sanitizer = _sanitizer;
/**
* Stream that emits the state
*/
this._state = new rxjs.BehaviorSubject('loading');
this.state = this._state.asObservable();
/**
* Progress value
*/
this.progress = 0;
/**
* Stream that emits when an error occurs
*/
this.error = new i0.EventEmitter();
}
Object.defineProperty(GalleryImageComponent.prototype, "imageLoadSuccess", {
get: /**
* @return {?}
*/ function () {
return !!this.imageUrl;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GalleryImageComponent.prototype, "imageLoadFailed", {
get: /**
* @return {?}
*/ function () {
return !!this.loadError;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
GalleryImageComponent.prototype.ngOnInit = /**
* @return {?}