Socket
Socket
Sign inDemoInstall

ngx-hm-carousel

Package Overview
Dependencies
7
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.0.0-rc.1 to 2.0.0

LICENSE.txt

623

bundles/ngx-hm-carousel.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('resize-observer-polyfill')) :
typeof define === 'function' && define.amd ? define('ngx-hm-carousel', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'rxjs', 'rxjs/operators', 'resize-observer-polyfill'], factory) :
(global = global || self, factory(global['ngx-hm-carousel'] = {}, global.ng.core, global.ng.common, global.ng.forms, global.rxjs, global.rxjs.operators, global['resize-observer-polyfill']));
}(this, (function (exports, core, common, forms, rxjs, operators, ResizeObserver) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('rxjs'), require('rxjs/operators')) :
typeof define === 'function' && define.amd ? define('ngx-hm-carousel', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'rxjs', 'rxjs/operators'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ngx-hm-carousel'] = {}, global.ng.core, global.ng.common, global.ng.forms, global.rxjs, global.rxjs.operators));
}(this, (function (exports, core, common, forms, rxjs, operators) { 'use strict';
ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
/*! *****************************************************************************
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.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
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 extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
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 __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __exportStar(m, exports) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
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;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
function __importStar(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result.default = mod;
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
var NgxHmCarouselItemDirective = /** @class */ (function () {
function NgxHmCarouselItemDirective() {
}
NgxHmCarouselItemDirective = __decorate([
core.Directive({
selector: '[ngx-hm-carousel-item]',
}),
__metadata("design:paramtypes", [])
], NgxHmCarouselItemDirective);
return NgxHmCarouselItemDirective;
}());
NgxHmCarouselItemDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[ngx-hm-carousel-item]',
},] }
];
NgxHmCarouselItemDirective.ctorParameters = function () { return []; };

@@ -260,36 +44,23 @@ // TODO: ssr problem should not hide on ssr

},
enumerable: true,
enumerable: false,
configurable: true
});
NgxHmCarouselDynamicDirective.prototype.ngOnInit = function () { };
NgxHmCarouselDynamicDirective.ctorParameters = function () { return [
{ type: core.ViewContainerRef },
{ type: core.TemplateRef }
]; };
__decorate([
core.Input('ngxHmCarouselDynamic'),
__metadata("design:type", Number)
], NgxHmCarouselDynamicDirective.prototype, "index", void 0);
__decorate([
core.Input('ngxHmCarouselDynamicLength'),
__metadata("design:type", Number)
], NgxHmCarouselDynamicDirective.prototype, "length", void 0);
__decorate([
core.Input('ngxHmCarouselDynamicShow'),
__metadata("design:type", Object)
], NgxHmCarouselDynamicDirective.prototype, "show", void 0);
__decorate([
core.Input('ngxHmCarouselDynamicIndex'),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], NgxHmCarouselDynamicDirective.prototype, "currentI", null);
NgxHmCarouselDynamicDirective = __decorate([
core.Directive({
selector: '[ngxHmCarouselDynamic]',
}),
__metadata("design:paramtypes", [core.ViewContainerRef,
core.TemplateRef])
], NgxHmCarouselDynamicDirective);
return NgxHmCarouselDynamicDirective;
}());
NgxHmCarouselDynamicDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[ngxHmCarouselDynamic]',
},] }
];
NgxHmCarouselDynamicDirective.ctorParameters = function () { return [
{ type: core.ViewContainerRef },
{ type: core.TemplateRef }
]; };
NgxHmCarouselDynamicDirective.propDecorators = {
index: [{ type: core.Input, args: ['ngxHmCarouselDynamic',] }],
length: [{ type: core.Input, args: ['ngxHmCarouselDynamicLength',] }],
show: [{ type: core.Input, args: ['ngxHmCarouselDynamicShow',] }],
currentI: [{ type: core.Input, args: ['ngxHmCarouselDynamicIndex',] }]
};

@@ -341,3 +112,3 @@ /**

this.panBoundary = 0.15;
/** when show-num is bigger than 1, the first item align, defaulte is `center` */
/** when `show-num` is bigger than 1, the first item align, default is `center` */
this.align = 'center';

@@ -350,5 +121,5 @@ /**

/**
* the event binding state for stop auto play when mourse moveover
* the event binding state for stop auto play when mouse moveover
*/
this.mourseEnable = false;
this.mouseEnable = false;
/** each auto play between time */

@@ -384,3 +155,3 @@ this.delay = 8000;

this.destroy$ = new rxjs.Subject();
this._porgressWidth = 0;
this._progressWidth = 0;
this._currentIndex = 0;

@@ -400,3 +171,2 @@ this._showNum = 1;

}
NgxHmCarouselComponent_1 = NgxHmCarouselComponent;
Object.defineProperty(NgxHmCarouselComponent.prototype, "disableDrag", {

@@ -411,3 +181,3 @@ /** disable drag event with touch and mouse pan moving, default is `false` */

if (value) {
this.destoryHammer();
this.destroyHammer();
}

@@ -421,3 +191,3 @@ else {

},
enumerable: true,
enumerable: false,
configurable: true

@@ -439,3 +209,3 @@ });

},
enumerable: true,
enumerable: false,
configurable: true

@@ -454,3 +224,3 @@ });

},
enumerable: true,
enumerable: false,
configurable: true

@@ -478,7 +248,7 @@ });

},
enumerable: true,
enumerable: false,
configurable: true
});
Object.defineProperty(NgxHmCarouselComponent.prototype, "autoplay", {
/** carousel auto play confing */
/** is that carousel auto play */
get: function () {

@@ -514,3 +284,3 @@ return this._autoplay;

},
enumerable: true,
enumerable: false,
configurable: true

@@ -524,3 +294,3 @@ });

var _this = this;
// if now index if not equale to save index, do someting
// if now index is not equal to save index, do something
if (this.currentIndex !== value) {

@@ -554,3 +324,3 @@ // if the value is not contain with the boundary not handler

},
enumerable: true,
enumerable: false,
configurable: true

@@ -560,11 +330,11 @@ });

get: function () {
return this._porgressWidth;
return this._progressWidth;
},
set: function (value) {
if (this.progressElm !== undefined && this.autoplay) {
this._porgressWidth = value;
this._progressWidth = value;
this._renderer.setStyle(this.progressContainerElm.nativeElement.children[0], 'width', this.progressWidth + "%");
}
},
enumerable: true,
enumerable: false,
configurable: true

@@ -594,3 +364,3 @@ });

},
enumerable: true,
enumerable: false,
configurable: true

@@ -607,3 +377,3 @@ });

},
enumerable: true,
enumerable: false,
configurable: true

@@ -627,3 +397,3 @@ });

},
enumerable: true,
enumerable: false,
configurable: true

@@ -635,3 +405,3 @@ });

},
enumerable: true,
enumerable: false,
configurable: true

@@ -643,3 +413,3 @@ });

},
enumerable: true,
enumerable: false,
configurable: true

@@ -653,3 +423,3 @@ });

},
enumerable: true,
enumerable: false,
configurable: true

@@ -661,3 +431,3 @@ });

},
enumerable: true,
enumerable: false,
configurable: true

@@ -677,3 +447,3 @@ });

if (_this.currentIndex > _this.itemElms.length - 1) {
// i can't pass the changedetection check, only the way to using timeout. :(
// i can't pass the change detection check, only the way to using timeout. :(
setTimeout(function () {

@@ -723,3 +493,3 @@ _this.currentIndex = _this.itemElms.length - 1;

NgxHmCarouselComponent.prototype.destroy = function () {
this.destoryHammer();
this.destroyHammer();
if (this.autoplay) {

@@ -729,3 +499,3 @@ this.doNextSub$.unsubscribe();

};
NgxHmCarouselComponent.prototype.destoryHammer = function () {
NgxHmCarouselComponent.prototype.destroyHammer = function () {
if (this.hammer) {

@@ -780,4 +550,4 @@ this.hammer.destroy();

this.reSetAlignDistance();
// 因為不能滑了,所以要回到第一個,以確保全部都有顯示
if (this.align !== 'center' && this.showNum >= this.elms.length) {
var touchEnd = this.showNum >= this.elms.length;
if (this.align !== 'center' && touchEnd) {
this.currentIndex = 0;

@@ -793,3 +563,3 @@ }

var stopEvent = _this.stopEvent.asObservable();
if (_this.mourseEnable) {
if (_this.mouseEnable) {
startEvent = rxjs.merge(startEvent, rxjs.fromEvent(_this.containerElm, 'mouseleave').pipe(

@@ -802,16 +572,14 @@ // when leave, we should reverse grabbing state to set the mouseOn state,

_this.doNext = startEvent.pipe(
// not using debounceTime, it will stop mourseover event detect, will cause mourse-enable error
// not using debounceTime, it will stop mouseover event detect, will cause mouse-enable error
// debounceTime(this.delay),
operators.switchMap(function () { return _this.speedChange; }), operators.switchMap(function () {
return rxjs.timer(_this.delay).pipe(operators.switchMap(function () { return _this.runProgress(20); }), operators.tap(function () {
_this.isFromAuto = true;
// console.log('next');
if (_this.direction === 'left') {
_this.currentIndex -= _this.scrollNum;
}
else {
_this.currentIndex += _this.scrollNum;
}
}), operators.takeUntil(stopEvent.pipe(operators.tap(function () { return (_this.progressWidth = 0); }))));
}));
operators.switchMap(function () { return _this.speedChange; }), operators.switchMap(function () { return rxjs.timer(_this.delay).pipe(operators.switchMap(function () { return _this.runProgress(20); }), operators.tap(function () {
_this.isFromAuto = true;
// console.log('next');
if (_this.direction === 'left') {
_this.currentIndex -= _this.scrollNum;
}
else {
_this.currentIndex += _this.scrollNum;
}
}), operators.takeUntil(stopEvent.pipe(operators.tap(function () { return (_this.progressWidth = 0); })))); }));
if (_this.autoplay) {

@@ -843,6 +611,6 @@ _this.doNextSub$ = _this.doNext.subscribe();

// remain one elm height
this._renderer.addClass(this.containerElm, 'ngx-hm-carousel-display-npwrap');
this._renderer.addClass(this.containerElm, 'ngx-hm-carousel-display-nowrap');
}
this.elmWidth = this.rootElmWidth / this._showNum;
this._renderer.removeClass(this.containerElm, 'ngx-hm-carousel-display-npwrap');
this._renderer.removeClass(this.containerElm, 'ngx-hm-carousel-display-nowrap');
this.containerElmWidth = this.elmWidth * this.elms.length;

@@ -904,3 +672,3 @@ this._renderer.setStyle(this.containerElm, 'position', 'relative');

}
// // if not dragmany, when bigger than half
// if not drag many, when bigger than half
if (!_this.isDragMany) {

@@ -1081,3 +849,3 @@ if (Math.abs(e.deltaX) > _this.elmWidth * 0.5) {

if (this.breakpoint.length > 0) {
// get the last bigget point
// get the last biggest point
var now = this.breakpoint.find(function (b) {

@@ -1117,160 +885,61 @@ return b.width >= currWidth;

};
var NgxHmCarouselComponent_1;
NgxHmCarouselComponent.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] },
{ type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] },
{ type: core.Renderer2 },
{ type: core.NgZone },
{ type: core.ChangeDetectorRef }
]; };
__decorate([
core.ViewChild('containerElm'),
__metadata("design:type", core.ElementRef)
], NgxHmCarouselComponent.prototype, "container", void 0);
__decorate([
core.ViewChild('prev'),
__metadata("design:type", core.ElementRef)
], NgxHmCarouselComponent.prototype, "btnPrev", void 0);
__decorate([
core.ViewChild('next'),
__metadata("design:type", core.ElementRef)
], NgxHmCarouselComponent.prototype, "btnNext", void 0);
__decorate([
core.ViewChild('progress'),
__metadata("design:type", core.ElementRef)
], NgxHmCarouselComponent.prototype, "progressContainerElm", void 0);
__decorate([
core.ContentChildren(NgxHmCarouselItemDirective, {
read: core.ElementRef,
descendants: true,
}),
__metadata("design:type", core.QueryList)
], NgxHmCarouselComponent.prototype, "itemElms", void 0);
__decorate([
core.ContentChild('carouselPrev'),
__metadata("design:type", core.TemplateRef)
], NgxHmCarouselComponent.prototype, "contentPrev", void 0);
__decorate([
core.ContentChild('carouselNext'),
__metadata("design:type", core.TemplateRef)
], NgxHmCarouselComponent.prototype, "contentNext", void 0);
__decorate([
core.ContentChild('carouselDot'),
__metadata("design:type", core.TemplateRef)
], NgxHmCarouselComponent.prototype, "dotElm", void 0);
__decorate([
core.ContentChild('carouselProgress'),
__metadata("design:type", core.TemplateRef)
], NgxHmCarouselComponent.prototype, "progressElm", void 0);
__decorate([
core.ContentChild('infiniteContainer', { read: core.ViewContainerRef }),
__metadata("design:type", core.ViewContainerRef)
], NgxHmCarouselComponent.prototype, "infiniteContainer", void 0);
__decorate([
core.ContentChild('carouselContent'),
__metadata("design:type", core.TemplateRef)
], NgxHmCarouselComponent.prototype, "contentContent", void 0);
__decorate([
core.Input(),
__metadata("design:type", Array)
], NgxHmCarouselComponent.prototype, "data", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "aniTime", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "aniClass", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "aniClassAuto", void 0);
__decorate([
core.Input('pan-boundary'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "panBoundary", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], NgxHmCarouselComponent.prototype, "align", void 0);
__decorate([
core.Input('not-follow-pan'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "notDrag", void 0);
__decorate([
core.Input('mourse-enable'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "mourseEnable", void 0);
__decorate([
core.Input('between-delay'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "delay", void 0);
__decorate([
core.Input('autoplay-direction'),
__metadata("design:type", String)
], NgxHmCarouselComponent.prototype, "direction", void 0);
__decorate([
core.Input('scroll-num'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "scrollNum", void 0);
__decorate([
core.Input('drag-many'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "isDragMany", void 0);
__decorate([
core.Input('swipe-velocity'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "swipeVelocity", void 0);
__decorate([
core.Input(),
__metadata("design:type", Array)
], NgxHmCarouselComponent.prototype, "breakpoint", void 0);
__decorate([
core.Input('disable-drag'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NgxHmCarouselComponent.prototype, "disableDrag", null);
__decorate([
core.Input('infinite'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NgxHmCarouselComponent.prototype, "infinite", null);
__decorate([
core.Input('autoplay-speed'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NgxHmCarouselComponent.prototype, "speed", null);
__decorate([
core.Input('show-num'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NgxHmCarouselComponent.prototype, "showNum", null);
__decorate([
core.Input('autoplay'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NgxHmCarouselComponent.prototype, "autoplay", null);
NgxHmCarouselComponent = NgxHmCarouselComponent_1 = __decorate([
core.Component({
selector: 'ngx-hm-carousel',
template: "<div #containerElm class=\"carousel\">\n <!-- main content -->\n <ng-content select=\"[ngx-hm-carousel-container]\"></ng-content>\n <!-- left -->\n <div #prev *ngIf=\"contentPrev\" class=\"direction left\">\n <ng-container *ngTemplateOutlet=\"contentPrev\"></ng-container>\n </div>\n <!-- right -->\n <div #next *ngIf=\"contentNext\" class=\"direction right\">\n <ng-container *ngTemplateOutlet=\"contentNext\"></ng-container>\n </div>\n <!-- indicators -->\n <ul class=\"indicators\" *ngIf=\"dotElm\">\n <li *ngFor=\"let dot of itemElms; let i = index\" (click)=\"currentIndex = i\">\n <ng-container\n *ngTemplateOutlet=\"\n dotElm;\n context: {\n $implicit: {\n index: i,\n currentIndex: currentIndex\n }\n }\n \"\n >\n </ng-container>\n </li>\n </ul>\n <!-- progress -->\n <div *ngIf=\"progressElm && autoplay\" #progress>\n <ng-container *ngTemplateOutlet=\"progressElm\"> </ng-container>\n </div>\n\n <div class=\"mask\" *ngIf=\"grabbing\">\n <ng-container *ngIf=\"leaveObs$ | async\"></ng-container>\n </div>\n</div>\n",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return NgxHmCarouselComponent_1; }),
multi: true,
},
],
changeDetection: core.ChangeDetectionStrategy.OnPush,
styles: [":host{display:block;height:100%}.ngx-hm-carousel-display-npwrap{display:-webkit-box!important;display:flex!important;flex-wrap:nowrap!important;-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;flex-direction:row!important;overflow:hidden!important}.carousel{overflow:hidden;position:relative;width:100%;height:100%}.carousel ul.indicators{list-style:none;bottom:1rem;left:0;margin:0;padding:0;position:absolute;text-align:center;width:100%}.carousel ul.indicators li{cursor:pointer;display:inline-block;position:relative;padding:.5rem}.carousel .direction{position:absolute;height:100%;cursor:pointer;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;top:0}.carousel .direction.left{left:0}.carousel .direction.right{position:absolute;right:0}.grab{cursor:-webkit-grab;cursor:grab}.grabbing{cursor:-webkit-grabbing;cursor:grabbing}.mask{position:absolute;left:0;top:0;right:0;bottom:0}"]
}),
__param(0, core.Inject(core.PLATFORM_ID)),
__param(1, core.Inject(common.DOCUMENT)),
__metadata("design:paramtypes", [Object, Object, core.Renderer2,
core.NgZone,
core.ChangeDetectorRef])
], NgxHmCarouselComponent);
return NgxHmCarouselComponent;
}());
NgxHmCarouselComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-hm-carousel',
template: "<div #containerElm class=\"carousel\">\n <!-- main content -->\n <ng-content select=\"[ngx-hm-carousel-container]\"></ng-content>\n <!-- left -->\n <div #prev *ngIf=\"contentPrev\" class=\"direction left\">\n <ng-container *ngTemplateOutlet=\"contentPrev\"></ng-container>\n </div>\n <!-- right -->\n <div #next *ngIf=\"contentNext\" class=\"direction right\">\n <ng-container *ngTemplateOutlet=\"contentNext\"></ng-container>\n </div>\n <!-- indicators -->\n <ul class=\"indicators\" *ngIf=\"dotElm\">\n <li *ngFor=\"let dot of itemElms; let i = index\" (click)=\"currentIndex = i\">\n <ng-container\n *ngTemplateOutlet=\"\n dotElm;\n context: {\n $implicit: {\n index: i,\n currentIndex: currentIndex\n }\n }\n \"\n >\n </ng-container>\n </li>\n </ul>\n <!-- progress -->\n <div *ngIf=\"progressElm && autoplay\" #progress>\n <ng-container *ngTemplateOutlet=\"progressElm\"> </ng-container>\n </div>\n\n <div class=\"mask\" *ngIf=\"grabbing\">\n <ng-container *ngIf=\"leaveObs$ | async\"></ng-container>\n </div>\n</div>\n",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return NgxHmCarouselComponent; }),
multi: true,
},
],
changeDetection: core.ChangeDetectionStrategy.OnPush,
styles: [":host{display:block;height:100%}.ngx-hm-carousel-display-nowrap{display:flex!important;flex-wrap:nowrap!important;flex-direction:row!important;overflow:hidden!important}.carousel{overflow:hidden;position:relative;width:100%;height:100%}.carousel ul.indicators{list-style:none;bottom:1rem;left:0;margin:0;padding:0;position:absolute;text-align:center;width:100%}.carousel ul.indicators li{cursor:pointer;display:inline-block;position:relative;padding:.5rem}.carousel .direction{position:absolute;height:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;top:0}.carousel .direction.left{left:0}.carousel .direction.right{position:absolute;right:0}.grab{cursor:grab}.grabbing{cursor:grabbing}.mask{position:absolute;left:0;top:0;right:0;bottom:0}"]
},] }
];
NgxHmCarouselComponent.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] },
{ type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] },
{ type: core.Renderer2 },
{ type: core.NgZone },
{ type: core.ChangeDetectorRef }
]; };
NgxHmCarouselComponent.propDecorators = {
container: [{ type: core.ViewChild, args: ['containerElm',] }],
btnPrev: [{ type: core.ViewChild, args: ['prev',] }],
btnNext: [{ type: core.ViewChild, args: ['next',] }],
progressContainerElm: [{ type: core.ViewChild, args: ['progress',] }],
itemElms: [{ type: core.ContentChildren, args: [NgxHmCarouselItemDirective, {
read: core.ElementRef,
descendants: true,
},] }],
contentPrev: [{ type: core.ContentChild, args: ['carouselPrev',] }],
contentNext: [{ type: core.ContentChild, args: ['carouselNext',] }],
dotElm: [{ type: core.ContentChild, args: ['carouselDot',] }],
progressElm: [{ type: core.ContentChild, args: ['carouselProgress',] }],
infiniteContainer: [{ type: core.ContentChild, args: ['infiniteContainer', { read: core.ViewContainerRef },] }],
contentContent: [{ type: core.ContentChild, args: ['carouselContent',] }],
data: [{ type: core.Input }],
aniTime: [{ type: core.Input }],
aniClass: [{ type: core.Input }],
aniClassAuto: [{ type: core.Input }],
panBoundary: [{ type: core.Input, args: ['pan-boundary',] }],
align: [{ type: core.Input }],
notDrag: [{ type: core.Input, args: ['not-follow-pan',] }],
mouseEnable: [{ type: core.Input, args: ['mouse-enable',] }],
delay: [{ type: core.Input, args: ['between-delay',] }],
direction: [{ type: core.Input, args: ['autoplay-direction',] }],
scrollNum: [{ type: core.Input, args: ['scroll-num',] }],
isDragMany: [{ type: core.Input, args: ['drag-many',] }],
swipeVelocity: [{ type: core.Input, args: ['swipe-velocity',] }],
breakpoint: [{ type: core.Input }],
disableDrag: [{ type: core.Input, args: ['disable-drag',] }],
infinite: [{ type: core.Input, args: ['infinite',] }],
speed: [{ type: core.Input, args: ['autoplay-speed',] }],
showNum: [{ type: core.Input, args: ['show-num',] }],
autoplay: [{ type: core.Input, args: ['autoplay',] }]
};

@@ -1280,20 +949,28 @@ var NgxHmCarouselModule = /** @class */ (function () {

}
NgxHmCarouselModule = __decorate([
core.NgModule({
imports: [common.CommonModule, forms.FormsModule],
declarations: [
NgxHmCarouselComponent,
NgxHmCarouselDynamicDirective,
NgxHmCarouselItemDirective,
],
exports: [
NgxHmCarouselComponent,
NgxHmCarouselDynamicDirective,
NgxHmCarouselItemDirective,
],
})
], NgxHmCarouselModule);
return NgxHmCarouselModule;
}());
NgxHmCarouselModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule, forms.FormsModule],
declarations: [
NgxHmCarouselComponent,
NgxHmCarouselDynamicDirective,
NgxHmCarouselItemDirective,
],
exports: [
NgxHmCarouselComponent,
NgxHmCarouselDynamicDirective,
NgxHmCarouselItemDirective,
],
},] }
];
/*
* Public API Surface of ngx-hm-carousel
*/
/**
* Generated bundle index. Do not edit.
*/
exports.NgxHmCarouselComponent = NgxHmCarouselComponent;

@@ -1300,0 +977,0 @@ exports.NgxHmCarouselDynamicDirective = NgxHmCarouselDynamicDirective;

@@ -0,77 +1,108 @@

## 2.0.0
### Feature
- **angular**: update angular to angular 12
### ⚠ BREAKING CHANGES
- **class**: change class name when init component `ngx-hm-carousel-display-npwrap` => `ngx-hm-carousel-display-nowrap`
- **resize-observer-polyfill**: remove dependencies `resize-observer-polyfill`, if you need that polyfill, import that in `polyfills.ts` by your self
- **mouse-enable**: fix error wording `mourse-enable` => `mouse-enable`
## 2.0.0-rc.1
### Update
* **angular**: update angular to angular 9.0
- **angular**: update angular to angular 9.0
## 1.7.1
### Feature
* **pan-boundary**:add Input `[pan-boundary]` to user move picture with the container width rate, when more than that rate distance, it will go to next or prev.
- **pan-boundary**:add Input `[pan-boundary]` to user move picture with the container width rate, when more than that rate distance, it will go to next or prev.
## 1.7.0
### But Fix
* **Upgrade to angular 8.0+**:upgrade the angualr version with ng 8.
- **Upgrade to angular 8.0+**:upgrade the angualr version with ng 8.
### Feature
* **swipe-velocity**:add Input `[swipe-velocity]` to custom swipe-speed
- **swipe-velocity**:add Input `[swipe-velocity]` to custom swipe-speed
## 1.6.5-bata.1
### But Fix
* **fix when infinite element not exist problem**:fix when infinite element not init, clear cause carousel break problem.
- **fix when infinite element not exist problem**:fix when infinite element not init, clear cause carousel break problem.
## 1.6.4
### But Fix
* **fix infinite loop problem with rxjs**:fix infinite loop problem with rxjs.
- **fix infinite loop problem with rxjs**:fix infinite loop problem with rxjs.
## 1.6.3
### But Fix
* **show-number auto with breakpoint problem**: fix problem with breakpoint.
- **show-number auto with breakpoint problem**: fix problem with breakpoint.
## 1.6.2
### But Fix
* **fix infinite loop problem with rxjs**:fix infinite loop problem with rxjs.
- **fix infinite loop problem with rxjs**:fix infinite loop problem with rxjs.
## 1.6.1
### Optimize Performance
* **Change animation way with `transform`**: using `transform: translateX()` to change left position.
- **Change animation way with `transform`**: using `transform: translateX()` to change left position.
### But Fix
* **Fix rounding error when calculating element width**: using `getBoundingClientRect()` to get init view width to avoid carousel display improperly, thanks for [anteq](https://github.com/anteq) in requests [17](https://github.com/ZouYouShun/ngx-hm-carousel/pull/17)
* **Prevent Drag click event trigger**: when hammer stop the click event will occur, fix that with document `touchend` and `mouseup`
- **Fix rounding error when calculating element width**: using `getBoundingClientRect()` to get init view width to avoid carousel display improperly, thanks for [anteq](https://github.com/anteq) in requests [17](https://github.com/ZouYouShun/ngx-hm-carousel/pull/17)
* **Drag Boundary Problem**: caculate with left by touch boundary, caculate the swipe index.
- **Prevent Drag click event trigger**: when hammer stop the click event will occur, fix that with document `touchend` and `mouseup`
- **Drag Boundary Problem**: caculate with left by touch boundary, caculate the swipe index.
# Break Change
* **Infinite mode or autoplay mode**: We need add `<ng-template #infiniteContainer></ng-template>` and `#carouselContent` in the template, and add `[data]="avatars"` in the `ngx-hm-carousel`, to make the template in the angular life cycle, the example is below.
- **Infinite mode or autoplay mode**: We need add `<ng-template #infiniteContainer></ng-template>` and `#carouselContent` in the template, and add `[data]="avatars"` in the `ngx-hm-carousel`, to make the template in the angular life cycle, the example is below.
```html
<section ngx-hm-carousel-container class="content">
<article class="item cursor-pointer"
ngx-hm-carousel-item
*ngFor="let avatar of avatars; let i = index"
[ngClass]="{'visible': currentIndex===i}">
<div class="img" (click)="click(i)"
[style.backgroundImage]="'url('+avatar.url+')'">
{{i}}
</div>
</article>
<ng-template #infiniteContainer></ng-template>
</section>
<section ngx-hm-carousel-container class="content">
<article
class="item cursor-pointer"
ngx-hm-carousel-item
*ngFor="let avatar of avatars; let i = index"
[ngClass]="{'visible': currentIndex===i}"
>
<div
class="img"
(click)="click(i)"
[style.backgroundImage]="'url('+avatar.url+')'"
>
{{i}}
</div>
</article>
<ng-template #infiniteContainer></ng-template>
</section>
<ng-template #carouselContent let-avatar let-i="index">
<article class="item cursor-pointer"
[ngClass]="{'visible': currentIndex===i}">
<div class="img" (click)="click(i)"
[style.backgroundImage]="'url('+avatar.url+')'">
{{i}}
</div>
</article>
</ng-template>
<ng-template #carouselContent let-avatar let-i="index">
<article
class="item cursor-pointer"
[ngClass]="{'visible': currentIndex===i}"
>
<div
class="img"
(click)="click(i)"
[style.backgroundImage]="'url('+avatar.url+')'"
>
{{i}}
</div>
</article>
</ng-template>
```

@@ -82,15 +113,19 @@

### Feature
* **Seprate moving animation with user occur and autoplay**: We seprate the animation class with `[aniClass]` and `[aniClassAuto]`, now we can use different class for that.
[Example](https://stackblitz.com/edit/ngx-hm-carousel-seprate-transition-class)
- **Seprate moving animation with user occur and autoplay**: We seprate the animation class with `[aniClass]` and `[aniClassAuto]`, now we can use different class for that.
[Example](https://stackblitz.com/edit/ngx-hm-carousel-seprate-transition-class)
## 1.5.2
### But Fix
* **Mouse over restart problem**: Fix error with `[mourse-enable]=true` problem with restart.
- **Mouse over restart problem**: Fix error with `[mourse-enable]=true` problem with restart.
## 1.5.0
### Feature
* **Break point with width**: We can set own break point with input `[breakpoint]` to switch show number with own logic. [Example](https://stackblitz.com/edit/ngx-hm-carousel-custom-breakpoint)
**Important: the breakpoint is follow the `container width`, not follow with window width.**
- **Break point with width**: We can set own break point with input `[breakpoint]` to switch show number with own logic. [Example](https://stackblitz.com/edit/ngx-hm-carousel-custom-breakpoint)
**Important: the breakpoint is follow the `container width`, not follow with window width.**
```ts

@@ -102,56 +137,61 @@ // the breakpoint interface

}
```
* **infinite with multi show number**: We can use the input `[show-num]` and set `[infinite]="true"`, it will clone the element to view, and can change the input dynamicly to switch show number. [Example](https://stackblitz.com/edit/ngx-hm-carousel-change-show-number-dynamicly)
- **infinite with multi show number**: We can use the input `[show-num]` and set `[infinite]="true"`, it will clone the element to view, and can change the input dynamicly to switch show number. [Example](https://stackblitz.com/edit/ngx-hm-carousel-change-show-number-dynamicly)
### But Fix
* **Mouse over restart problem**: Fix when enable `mourse-enable`, when mourse on the carousel and drap the view, change index, the restart will run problem.
* **Drag many animation disappear problem**: Fil problem with drag many, the animation doesn't append problem.
- **Mouse over restart problem**: Fix when enable `mourse-enable`, when mourse on the carousel and drap the view, change index, the restart will run problem.
- **Drag many animation disappear problem**: Fil problem with drag many, the animation doesn't append problem.
## 1.4.1
### But Fix
* **Fix Animation error**: fix doesn't remove aniClass when remove animation.
* **Fix init with index error**: fix when init with index, the animation will occur problem.
- **Fix Animation error**: fix doesn't remove aniClass when remove animation.
- **Fix init with index error**: fix when init with index, the animation will occur problem.
## 1.4.0
### Feature
* **Add support with Angular Universal**: when universal run, it will init with carousel view.
- **Add support with Angular Universal**: when universal run, it will init with carousel view.
## 1.3.2
### Feature
* **Add Disable Drag**: add input to switch drag event listener with [disable-drag].
* **When elements length zero can't drag**: Now when children elements length is equal zero, stop drag event.
- **Add Disable Drag**: add input to switch drag event listener with [disable-drag].
- **When elements length zero can't drag**: Now when children elements length is equal zero, stop drag event.
### Break Change
* **Not drag with pan move**: change name with [notDrag] to [not-follow-pan].
- **Not drag with pan move**: change name with [notDrag] to [not-follow-pan].
## 1.3.1
### Optimize Performance
* **Optimize Performance**: fix problem with change Detection by onPush and ngZone
- **Optimize Performance**: fix problem with change Detection by onPush and ngZone
### Break Change
* **remove emit with progress width**: remove emit with progress width, it will cause performance problem, now it only using width change with progress bar, change like below.
- **remove emit with progress width**: remove emit with progress width, it will cause performance problem, now it only using width change with progress bar, change like below.
```html
<ng-template #carouselProgress let-progress>
<div class="progress"></div>
</ng-template>
<ng-template #carouselProgress let-progress>
<div class="progress"></div>
</ng-template>
```
```scss
.progress {
position: absolute;
bottom: 0;
left: 0;
width: 0; // set default width to zero, it will increase with duraction (%)
height: 5px;
background: #ff5252;
}
.progress {
position: absolute;
bottom: 0;
left: 0;
width: 0; // set default width to zero, it will increase with duraction (%)
height: 5px;
background: #ff5252;
}
```

@@ -162,34 +202,40 @@

### Feature
* **Animation class**: add [input] with animation add class by [aniClass]
* **Not drag with pan move**: add [input] with Not drag with pan move by [notDrag]
- **Animation class**: add [input] with animation add class by [aniClass]
- **Not drag with pan move**: add [input] with Not drag with pan move by [notDrag]
## 1.2.9
### Bug fix
* **Mobile touch error**: Fix when scroll event occur, the carousel will move error point, and can't touch problem.
- **Mobile touch error**: Fix when scroll event occur, the carousel will move error point, and can't touch problem.
## 1.2.8
### Bug fix
* **carousel item change**: When add item to the children, will recaculate the carousel variable.
- **carousel item change**: When add item to the children, will recaculate the carousel variable.
### Break Change
* **Add ngx-hm-carousel-item directive back**: with recaculate the carousel varibae so add `ngx-hm-carousel` back.
- **Add ngx-hm-carousel-item directive back**: with recaculate the carousel varibae so add `ngx-hm-carousel` back.
## 1.2.7
### Bug fix
* **Fix infinite problem with next and prev click**: fix error with infinite .
* **Fix mask not clear problem**: when drag occur, we use an mask to avoid click event emit, but it will not clear when drag end, add pancancel to fix that.
- **Fix infinite problem with next and prev click**: fix error with infinite .
- **Fix mask not clear problem**: when drag occur, we use an mask to avoid click event emit, but it will not clear when drag end, add pancancel to fix that.
## 1.2.6
### Bug fix
* **When item is smaller than length the mask non remove**: fix bug when show number is more than item langth, mask click don't remove.
* **Mask bug fix**: Fix mask bug with grab.
- **When item is smaller than length the mask non remove**: fix bug when show number is more than item length, mask click don't remove.
- **Mask bug fix**: Fix mask bug with grab.
### Break Change
* **Remove ngx-hm-carousel-item**: remove item directive in the container, just the first child of container is the item, and we can use nomal click event in the content.
- **Remove ngx-hm-carousel-item**: remove item directive in the container, just the first child of container is the item, and we can use normal click event in the content.

@@ -199,26 +245,30 @@ ## 1.2.3

### Feature
* **Speed Change Dynamically**: Now you can change input[autoplay-speed] to change speed dynamically.
- **Speed Change Dynamically**: Now you can change input[autoplay-speed] to change speed dynamically.
## 1.2.2
### Bug Fix
* **align center**: when align set to 'center', always can drag move.
* **auto play**: infinite always changed with autoplay.
- **align center**: when align set to 'center', always can drag move.
- **auto play**: infinite always changed with autoplay.
## 1.2.1
### Bug Fix
* **ng build --prod**: fix problem with ng build --prod.
- **ng build --prod**: fix problem with ng build --prod.
## 1.2.0
### Feature
* **Dynamic Directive**: `ngxHmCarouselDynamic` can load item Dynmain.
* **infinite option**: Now, you can set infinite to true, make this carousel loop change.
* **ControlValueAccessor**: You can use ngModel with `ngx-hm-carousel`, more easy to use with index.
- **Dynamic Directive**: `ngxHmCarouselDynamic` can load item Dynmain.
- **infinite option**: Now, you can set infinite to true, make this carousel loop change.
- **ControlValueAccessor**: You can use ngModel with `ngx-hm-carousel`, more easy to use with index.
## BREAKING CHANGES
* **current-index**: `current-index` is removed, replace with `ngModel`.
* **index-change**: `index-change` is removed, replace with `ngModel`.
- **current-index**: `current-index` is removed, replace with `ngModel`.
- **index-change**: `index-change` is removed, replace with `ngModel`.

@@ -228,4 +278,5 @@ ## 1.1.1

### Scroll to right
* **Scroll right change**: Scroll right upto length-showNum.
- **Scroll right change**: Scroll right upto length-showNum.
## 1.1.0

@@ -235,5 +286,6 @@

* **Add Dynmain load element**: Add Dynmain load element with ngxHmCarouselDynamic directive.
- **Add Dynmain load element**: Add Dynmain load element with ngxHmCarouselDynamic directive.
### Example
```html

@@ -245,17 +297,21 @@ <ngx-hm-carousel

class="carousel c-accent"
(index-change)="currentI = $event">
(index-change)="currentI = $event"
>
<!-- style="height: calc(100vh - 50px);" -->
<section ngx-hm-carousel-container class="content">
<article class="item cursor-pointer"
<article
class="item cursor-pointer"
*ngFor="let item of data; let i = index"
ngx-hm-carousel-item>
<div *ngxHmCarouselDynamic="i; length: data.length; index: currentI"
class="img" [style.backgroundImage]="item.url">
</div>
ngx-hm-carousel-item
>
<div
*ngxHmCarouselDynamic="i; length: data.length; index: currentI"
class="img"
[style.backgroundImage]="item.url"
></div>
</article>
</section>
</ngx-hm-carousel>
```
## 1.0.9

@@ -265,3 +321,3 @@

* **fix bug with showNum**: forget the get method of showNum, repair it.
- **fix bug with showNum**: forget the get method of showNum, repair it.

@@ -272,3 +328,3 @@ ## 1.0.8

* **use resize-observer-polyfill to handle element resize**: use resize-observer-polyfill handle container resize
- **use resize-observer-polyfill to handle element resize**: use resize-observer-polyfill handle container resize

@@ -279,3 +335,3 @@ ## 1.0.7

* **set index response**: when set same current Index not response
- **set index response**: when set same current Index not response

@@ -286,3 +342,3 @@ ## 1.0.6

* **when show number is zero error**: when show number is zero, alignDistance always be zero
- **when show number is zero error**: when show number is zero, alignDistance always be zero

@@ -293,7 +349,8 @@ ## 1.0.5

* **click event position error** : fix when container has some padding or margin, the click event will give error index.
- **click event position error** : fix when container has some padding or margin, the click event will give error index.
### Featrue
* **align mode** : add align mode with `[align]` `'left' | 'center' | 'right'`, default is center.
- **align mode** : add align mode with `[align]` `'left' | 'center' | 'right'`, default is center.
## 1.0.4

@@ -303,3 +360,3 @@

* **when index change restart autoplay time**
- **when index change restart autoplay time**

@@ -310,5 +367,4 @@ ## 1.0.3

* **fix autoplay cancel bug**
- **fix autoplay cancel bug**
## 1.0.2

@@ -318,3 +374,2 @@

* **An carousel for Angular support mobiel with Hammerjs**
- **An carousel for Angular support mobiel with Hammerjs**

@@ -1,6 +0,5 @@

import { __decorate, __metadata } from "tslib";
import { Directive, Input, OnInit, TemplateRef, ViewContainerRef, } from '@angular/core';
import { Directive, Input, TemplateRef, ViewContainerRef, } from '@angular/core';
// TODO: ssr problem should not hide on ssr
// TODO: show number change should recaculate is show and init show number
let NgxHmCarouselDynamicDirective = class NgxHmCarouselDynamicDirective {
export class NgxHmCarouselDynamicDirective {
constructor(_view, _template) {

@@ -28,3 +27,8 @@ this._view = _view;

ngOnInit() { }
};
}
NgxHmCarouselDynamicDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngxHmCarouselDynamic]',
},] }
];
NgxHmCarouselDynamicDirective.ctorParameters = () => [

@@ -34,27 +38,8 @@ { type: ViewContainerRef },

];
__decorate([
Input('ngxHmCarouselDynamic'),
__metadata("design:type", Number)
], NgxHmCarouselDynamicDirective.prototype, "index", void 0);
__decorate([
Input('ngxHmCarouselDynamicLength'),
__metadata("design:type", Number)
], NgxHmCarouselDynamicDirective.prototype, "length", void 0);
__decorate([
Input('ngxHmCarouselDynamicShow'),
__metadata("design:type", Object)
], NgxHmCarouselDynamicDirective.prototype, "show", void 0);
__decorate([
Input('ngxHmCarouselDynamicIndex'),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], NgxHmCarouselDynamicDirective.prototype, "currentI", null);
NgxHmCarouselDynamicDirective = __decorate([
Directive({
selector: '[ngxHmCarouselDynamic]',
}),
__metadata("design:paramtypes", [ViewContainerRef,
TemplateRef])
], NgxHmCarouselDynamicDirective);
export { NgxHmCarouselDynamicDirective };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWhtLWNhcm91c2VsLWR5bmFtaWMuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWhtLWNhcm91c2VsLyIsInNvdXJjZXMiOlsibGliL25neC1obS1jYXJvdXNlbC1keW5hbWljLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsTUFBTSxFQUNOLFdBQVcsRUFDWCxnQkFBZ0IsR0FDakIsTUFBTSxlQUFlLENBQUM7QUFFdkIsMkNBQTJDO0FBQzNDLDBFQUEwRTtBQUkxRSxJQUFhLDZCQUE2QixHQUExQyxNQUFhLDZCQUE2QjtJQXdCeEMsWUFDVSxLQUF1QixFQUN2QixTQUEyQjtRQUQzQixVQUFLLEdBQUwsS0FBSyxDQUFrQjtRQUN2QixjQUFTLEdBQVQsU0FBUyxDQUFrQjtRQXZCRixTQUFJLEdBQUcsQ0FBQyxDQUFDO1FBbUJwQyxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBTXhCLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQXhCRCxJQUFJLFFBQVEsQ0FBQyxLQUFhO1FBQ3hCLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ25CLE1BQU0sS0FBSyxHQUFHLEtBQUssR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1lBQ2hDLE1BQU0sS0FBSyxHQUFHLEtBQUssR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1lBQ2hDLElBQ0UsSUFBSSxDQUFDLEtBQUssS0FBSyxDQUFDO2dCQUNoQixJQUFJLENBQUMsS0FBSyxLQUFLLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQztnQkFDOUIsSUFBSSxDQUFDLEtBQUssS0FBSyxLQUFLO2dCQUNwQixJQUFJLENBQUMsS0FBSyxLQUFLLEtBQUs7Z0JBQ3BCLElBQUksQ0FBQyxLQUFLLEtBQUssS0FBSyxFQUNwQjtnQkFDQSxJQUFJLENBQUMsS0FBSyxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztnQkFDOUMsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7YUFDdkI7U0FDRjtJQUNILENBQUM7SUFXRCxRQUFRLEtBQVUsQ0FBQztDQUNwQixDQUFBOztZQVBrQixnQkFBZ0I7WUFDWixXQUFXOztBQXpCRDtJQUE5QixLQUFLLENBQUMsc0JBQXNCLENBQUM7OzREQUFlO0FBQ1I7SUFBcEMsS0FBSyxDQUFDLDRCQUE0QixDQUFDOzs2REFBZ0I7QUFDakI7SUFBbEMsS0FBSyxDQUFDLDBCQUEwQixDQUFDOzsyREFBVTtBQUU1QztJQURDLEtBQUssQ0FBQywyQkFBMkIsQ0FBQzs7OzZEQWdCbEM7QUFwQlUsNkJBQTZCO0lBSHpDLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSx3QkFBd0I7S0FDbkMsQ0FBQztxQ0EwQmlCLGdCQUFnQjtRQUNaLFdBQVc7R0ExQnJCLDZCQUE2QixDQWdDekM7U0FoQ1ksNkJBQTZCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRGlyZWN0aXZlLFxuICBJbnB1dCxcbiAgT25Jbml0LFxuICBUZW1wbGF0ZVJlZixcbiAgVmlld0NvbnRhaW5lclJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8vIFRPRE86IHNzciBwcm9ibGVtIHNob3VsZCBub3QgaGlkZSBvbiBzc3Jcbi8vIFRPRE86IHNob3cgbnVtYmVyIGNoYW5nZSBzaG91bGQgcmVjYWN1bGF0ZSBpcyBzaG93IGFuZCBpbml0IHNob3cgbnVtYmVyXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbbmd4SG1DYXJvdXNlbER5bmFtaWNdJyxcbn0pXG5leHBvcnQgY2xhc3MgTmd4SG1DYXJvdXNlbER5bmFtaWNEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoJ25neEhtQ2Fyb3VzZWxEeW5hbWljJykgaW5kZXg6IG51bWJlcjtcbiAgQElucHV0KCduZ3hIbUNhcm91c2VsRHluYW1pY0xlbmd0aCcpIGxlbmd0aDogbnVtYmVyO1xuICBASW5wdXQoJ25neEhtQ2Fyb3VzZWxEeW5hbWljU2hvdycpIHNob3cgPSAxO1xuICBASW5wdXQoJ25neEhtQ2Fyb3VzZWxEeW5hbWljSW5kZXgnKVxuICBzZXQgY3VycmVudEkodmFsdWU6IG51bWJlcikge1xuICAgIGlmICghdGhpcy5jb21wZWxldGUpIHtcbiAgICAgIGNvbnN0IG5leHRJID0gdmFsdWUgKyB0aGlzLnNob3c7XG4gICAgICBjb25zdCBwcmV2SSA9IHZhbHVlIC0gdGhpcy5zaG93O1xuICAgICAgaWYgKFxuICAgICAgICB0aGlzLmluZGV4ID09PSAwIHx8XG4gICAgICAgIHRoaXMuaW5kZXggPT09IHRoaXMubGVuZ3RoIC0gMSB8fFxuICAgICAgICB0aGlzLmluZGV4ID09PSBuZXh0SSB8fFxuICAgICAgICB0aGlzLmluZGV4ID09PSBwcmV2SSB8fFxuICAgICAgICB0aGlzLmluZGV4ID09PSB2YWx1ZVxuICAgICAgKSB7XG4gICAgICAgIHRoaXMuX3ZpZXcuY3JlYXRlRW1iZWRkZWRWaWV3KHRoaXMuX3RlbXBsYXRlKTtcbiAgICAgICAgdGhpcy5jb21wZWxldGUgPSB0cnVlO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgY29tcGVsZXRlID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBfdmlldzogVmlld0NvbnRhaW5lclJlZixcbiAgICBwcml2YXRlIF90ZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PixcbiAgKSB7XG4gICAgdGhpcy5fdmlldy5jbGVhcigpO1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7fVxufVxuIl19
NgxHmCarouselDynamicDirective.propDecorators = {
index: [{ type: Input, args: ['ngxHmCarouselDynamic',] }],
length: [{ type: Input, args: ['ngxHmCarouselDynamicLength',] }],
show: [{ type: Input, args: ['ngxHmCarouselDynamicShow',] }],
currentI: [{ type: Input, args: ['ngxHmCarouselDynamicIndex',] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWhtLWNhcm91c2VsLWR5bmFtaWMuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWhtLWNhcm91c2VsL3NyYy9saWIvbmd4LWhtLWNhcm91c2VsLWR5bmFtaWMuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUVMLFdBQVcsRUFDWCxnQkFBZ0IsR0FDakIsTUFBTSxlQUFlLENBQUM7QUFFdkIsMkNBQTJDO0FBQzNDLDBFQUEwRTtBQUkxRSxNQUFNLE9BQU8sNkJBQTZCO0lBd0J4QyxZQUNVLEtBQXVCLEVBQ3ZCLFNBQTJCO1FBRDNCLFVBQUssR0FBTCxLQUFLLENBQWtCO1FBQ3ZCLGNBQVMsR0FBVCxTQUFTLENBQWtCO1FBdkJGLFNBQUksR0FBRyxDQUFDLENBQUM7UUFtQnBDLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFNeEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBekJELElBQ0ksUUFBUSxDQUFDLEtBQWE7UUFDeEIsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDbkIsTUFBTSxLQUFLLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7WUFDaEMsTUFBTSxLQUFLLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7WUFDaEMsSUFDRSxJQUFJLENBQUMsS0FBSyxLQUFLLENBQUM7Z0JBQ2hCLElBQUksQ0FBQyxLQUFLLEtBQUssSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDO2dCQUM5QixJQUFJLENBQUMsS0FBSyxLQUFLLEtBQUs7Z0JBQ3BCLElBQUksQ0FBQyxLQUFLLEtBQUssS0FBSztnQkFDcEIsSUFBSSxDQUFDLEtBQUssS0FBSyxLQUFLLEVBQ3BCO2dCQUNBLElBQUksQ0FBQyxLQUFLLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO2dCQUM5QyxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQzthQUN2QjtTQUNGO0lBQ0gsQ0FBQztJQVdELFFBQVEsS0FBVSxDQUFDOzs7WUFsQ3BCLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsd0JBQXdCO2FBQ25DOzs7WUFQQyxnQkFBZ0I7WUFEaEIsV0FBVzs7O29CQVVWLEtBQUssU0FBQyxzQkFBc0I7cUJBQzVCLEtBQUssU0FBQyw0QkFBNEI7bUJBQ2xDLEtBQUssU0FBQywwQkFBMEI7dUJBQ2hDLEtBQUssU0FBQywyQkFBMkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBEaXJlY3RpdmUsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIFRlbXBsYXRlUmVmLFxuICBWaWV3Q29udGFpbmVyUmVmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLy8gVE9ETzogc3NyIHByb2JsZW0gc2hvdWxkIG5vdCBoaWRlIG9uIHNzclxuLy8gVE9ETzogc2hvdyBudW1iZXIgY2hhbmdlIHNob3VsZCByZWNhY3VsYXRlIGlzIHNob3cgYW5kIGluaXQgc2hvdyBudW1iZXJcbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tuZ3hIbUNhcm91c2VsRHluYW1pY10nLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hIbUNhcm91c2VsRHluYW1pY0RpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgnbmd4SG1DYXJvdXNlbER5bmFtaWMnKSBpbmRleDogbnVtYmVyO1xuICBASW5wdXQoJ25neEhtQ2Fyb3VzZWxEeW5hbWljTGVuZ3RoJykgbGVuZ3RoOiBudW1iZXI7XG4gIEBJbnB1dCgnbmd4SG1DYXJvdXNlbER5bmFtaWNTaG93Jykgc2hvdyA9IDE7XG4gIEBJbnB1dCgnbmd4SG1DYXJvdXNlbER5bmFtaWNJbmRleCcpXG4gIHNldCBjdXJyZW50SSh2YWx1ZTogbnVtYmVyKSB7XG4gICAgaWYgKCF0aGlzLmNvbXBlbGV0ZSkge1xuICAgICAgY29uc3QgbmV4dEkgPSB2YWx1ZSArIHRoaXMuc2hvdztcbiAgICAgIGNvbnN0IHByZXZJID0gdmFsdWUgLSB0aGlzLnNob3c7XG4gICAgICBpZiAoXG4gICAgICAgIHRoaXMuaW5kZXggPT09IDAgfHxcbiAgICAgICAgdGhpcy5pbmRleCA9PT0gdGhpcy5sZW5ndGggLSAxIHx8XG4gICAgICAgIHRoaXMuaW5kZXggPT09IG5leHRJIHx8XG4gICAgICAgIHRoaXMuaW5kZXggPT09IHByZXZJIHx8XG4gICAgICAgIHRoaXMuaW5kZXggPT09IHZhbHVlXG4gICAgICApIHtcbiAgICAgICAgdGhpcy5fdmlldy5jcmVhdGVFbWJlZGRlZFZpZXcodGhpcy5fdGVtcGxhdGUpO1xuICAgICAgICB0aGlzLmNvbXBlbGV0ZSA9IHRydWU7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBjb21wZWxldGUgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIF92aWV3OiBWaWV3Q29udGFpbmVyUmVmLFxuICAgIHByaXZhdGUgX3RlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+LFxuICApIHtcbiAgICB0aGlzLl92aWV3LmNsZWFyKCk7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHt9XG59XG4iXX0=

@@ -1,13 +0,11 @@

import { __decorate, __metadata } from "tslib";
import { Directive } from '@angular/core';
let NgxHmCarouselItemDirective = class NgxHmCarouselItemDirective {
export class NgxHmCarouselItemDirective {
constructor() { }
};
NgxHmCarouselItemDirective = __decorate([
Directive({
selector: '[ngx-hm-carousel-item]',
}),
__metadata("design:paramtypes", [])
], NgxHmCarouselItemDirective);
export { NgxHmCarouselItemDirective };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWhtLWNhcm91c2VsLWl0ZW0uZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWhtLWNhcm91c2VsLyIsInNvdXJjZXMiOlsibGliL25neC1obS1jYXJvdXNlbC1pdGVtLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUsxQyxJQUFhLDBCQUEwQixHQUF2QyxNQUFhLDBCQUEwQjtJQUNyQyxnQkFBZSxDQUFDO0NBQ2pCLENBQUE7QUFGWSwwQkFBMEI7SUFIdEMsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLHdCQUF3QjtLQUNuQyxDQUFDOztHQUNXLDBCQUEwQixDQUV0QztTQUZZLDBCQUEwQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbbmd4LWhtLWNhcm91c2VsLWl0ZW1dJyxcbn0pXG5leHBvcnQgY2xhc3MgTmd4SG1DYXJvdXNlbEl0ZW1EaXJlY3RpdmUge1xuICBjb25zdHJ1Y3RvcigpIHt9XG59XG4iXX0=
}
NgxHmCarouselItemDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngx-hm-carousel-item]',
},] }
];
NgxHmCarouselItemDirective.ctorParameters = () => [];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWhtLWNhcm91c2VsLWl0ZW0uZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWhtLWNhcm91c2VsL3NyYy9saWIvbmd4LWhtLWNhcm91c2VsLWl0ZW0uZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFLMUMsTUFBTSxPQUFPLDBCQUEwQjtJQUNyQyxnQkFBZSxDQUFDOzs7WUFKakIsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSx3QkFBd0I7YUFDbkMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW25neC1obS1jYXJvdXNlbC1pdGVtXScsXG59KVxuZXhwb3J0IGNsYXNzIE5neEhtQ2Fyb3VzZWxJdGVtRGlyZWN0aXZlIHtcbiAgY29uc3RydWN0b3IoKSB7fVxufVxuIl19

@@ -1,1 +0,2 @@

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWhtLWNhcm91c2VsLm1vZGVsLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWhtLWNhcm91c2VsLyIsInNvdXJjZXMiOlsibGliL25neC1obS1jYXJvdXNlbC5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBOZ3hIbUNhcm91c2VsQnJlYWtQb2ludFVwIHtcbiAgd2lkdGg6IG51bWJlcjtcbiAgbnVtYmVyOiBudW1iZXI7XG4gIC8vIHNjcm9sbD86IG51bWJlcjtcbn1cbiJdfQ==
export {};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWhtLWNhcm91c2VsLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWhtLWNhcm91c2VsL3NyYy9saWIvbmd4LWhtLWNhcm91c2VsLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIE5neEhtQ2Fyb3VzZWxCcmVha1BvaW50VXAge1xuICB3aWR0aDogbnVtYmVyO1xuICBudW1iZXI6IG51bWJlcjtcbn1cbiJdfQ==

@@ -1,2 +0,1 @@

import { __decorate } from "tslib";
import { CommonModule } from '@angular/common';

@@ -6,22 +5,21 @@ import { NgModule } from '@angular/core';

import { NgxHmCarouselDynamicDirective } from './ngx-hm-carousel-dynamic.directive';
import { NgxHmCarouselItemDirective } from './ngx-hm-carousel-item.directive';
import { NgxHmCarouselComponent } from './ngx-hm-carousel.component';
import { NgxHmCarouselItemDirective } from './ngx-hm-carousel-item.directive';
let NgxHmCarouselModule = class NgxHmCarouselModule {
};
NgxHmCarouselModule = __decorate([
NgModule({
imports: [CommonModule, FormsModule],
declarations: [
NgxHmCarouselComponent,
NgxHmCarouselDynamicDirective,
NgxHmCarouselItemDirective,
],
exports: [
NgxHmCarouselComponent,
NgxHmCarouselDynamicDirective,
NgxHmCarouselItemDirective,
],
})
], NgxHmCarouselModule);
export { NgxHmCarouselModule };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWhtLWNhcm91c2VsLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1obS1jYXJvdXNlbC8iLCJzb3VyY2VzIjpbImxpYi9uZ3gtaG0tY2Fyb3VzZWwubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFN0MsT0FBTyxFQUFFLDZCQUE2QixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDcEYsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDckUsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFlOUUsSUFBYSxtQkFBbUIsR0FBaEMsTUFBYSxtQkFBbUI7Q0FBRyxDQUFBO0FBQXRCLG1CQUFtQjtJQWIvQixRQUFRLENBQUM7UUFDUixPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsV0FBVyxDQUFDO1FBQ3BDLFlBQVksRUFBRTtZQUNaLHNCQUFzQjtZQUN0Qiw2QkFBNkI7WUFDN0IsMEJBQTBCO1NBQzNCO1FBQ0QsT0FBTyxFQUFFO1lBQ1Asc0JBQXNCO1lBQ3RCLDZCQUE2QjtZQUM3QiwwQkFBMEI7U0FDM0I7S0FDRixDQUFDO0dBQ1csbUJBQW1CLENBQUc7U0FBdEIsbUJBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuaW1wb3J0IHsgTmd4SG1DYXJvdXNlbER5bmFtaWNEaXJlY3RpdmUgfSBmcm9tICcuL25neC1obS1jYXJvdXNlbC1keW5hbWljLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBOZ3hIbUNhcm91c2VsQ29tcG9uZW50IH0gZnJvbSAnLi9uZ3gtaG0tY2Fyb3VzZWwuY29tcG9uZW50JztcbmltcG9ydCB7IE5neEhtQ2Fyb3VzZWxJdGVtRGlyZWN0aXZlIH0gZnJvbSAnLi9uZ3gtaG0tY2Fyb3VzZWwtaXRlbS5kaXJlY3RpdmUnO1xuXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBGb3Jtc01vZHVsZV0sXG4gIGRlY2xhcmF0aW9uczogW1xuICAgIE5neEhtQ2Fyb3VzZWxDb21wb25lbnQsXG4gICAgTmd4SG1DYXJvdXNlbER5bmFtaWNEaXJlY3RpdmUsXG4gICAgTmd4SG1DYXJvdXNlbEl0ZW1EaXJlY3RpdmUsXG4gIF0sXG4gIGV4cG9ydHM6IFtcbiAgICBOZ3hIbUNhcm91c2VsQ29tcG9uZW50LFxuICAgIE5neEhtQ2Fyb3VzZWxEeW5hbWljRGlyZWN0aXZlLFxuICAgIE5neEhtQ2Fyb3VzZWxJdGVtRGlyZWN0aXZlLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hIbUNhcm91c2VsTW9kdWxlIHt9XG4iXX0=
export class NgxHmCarouselModule {
}
NgxHmCarouselModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule],
declarations: [
NgxHmCarouselComponent,
NgxHmCarouselDynamicDirective,
NgxHmCarouselItemDirective,
],
exports: [
NgxHmCarouselComponent,
NgxHmCarouselDynamicDirective,
NgxHmCarouselItemDirective,
],
},] }
];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWhtLWNhcm91c2VsLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1obS1jYXJvdXNlbC9zcmMvbGliL25neC1obS1jYXJvdXNlbC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTdDLE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3BGLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQzlFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBZXJFLE1BQU0sT0FBTyxtQkFBbUI7OztZQWIvQixRQUFRLFNBQUM7Z0JBQ1IsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLFdBQVcsQ0FBQztnQkFDcEMsWUFBWSxFQUFFO29CQUNaLHNCQUFzQjtvQkFDdEIsNkJBQTZCO29CQUM3QiwwQkFBMEI7aUJBQzNCO2dCQUNELE9BQU8sRUFBRTtvQkFDUCxzQkFBc0I7b0JBQ3RCLDZCQUE2QjtvQkFDN0IsMEJBQTBCO2lCQUMzQjthQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuaW1wb3J0IHsgTmd4SG1DYXJvdXNlbER5bmFtaWNEaXJlY3RpdmUgfSBmcm9tICcuL25neC1obS1jYXJvdXNlbC1keW5hbWljLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBOZ3hIbUNhcm91c2VsSXRlbURpcmVjdGl2ZSB9IGZyb20gJy4vbmd4LWhtLWNhcm91c2VsLWl0ZW0uZGlyZWN0aXZlJztcbmltcG9ydCB7IE5neEhtQ2Fyb3VzZWxDb21wb25lbnQgfSBmcm9tICcuL25neC1obS1jYXJvdXNlbC5jb21wb25lbnQnO1xuXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBGb3Jtc01vZHVsZV0sXG4gIGRlY2xhcmF0aW9uczogW1xuICAgIE5neEhtQ2Fyb3VzZWxDb21wb25lbnQsXG4gICAgTmd4SG1DYXJvdXNlbER5bmFtaWNEaXJlY3RpdmUsXG4gICAgTmd4SG1DYXJvdXNlbEl0ZW1EaXJlY3RpdmUsXG4gIF0sXG4gIGV4cG9ydHM6IFtcbiAgICBOZ3hIbUNhcm91c2VsQ29tcG9uZW50LFxuICAgIE5neEhtQ2Fyb3VzZWxEeW5hbWljRGlyZWN0aXZlLFxuICAgIE5neEhtQ2Fyb3VzZWxJdGVtRGlyZWN0aXZlLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hIbUNhcm91c2VsTW9kdWxlIHt9XG4iXX0=

@@ -1,2 +0,1 @@

import ResizeObserver from 'resize-observer-polyfill';
import { Observable } from 'rxjs';

@@ -24,2 +23,2 @@ import { debounceTime, tap, finalize } from 'rxjs/operators';

}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnhqcy5vYnNlcnZhYmxlLnJlc2l6ZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1obS1jYXJvdXNlbC8iLCJzb3VyY2VzIjpbImxpYi9yeGpzLm9ic2VydmFibGUucmVzaXplLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sY0FBYyxNQUFNLDBCQUEwQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxVQUFVLEVBQWMsTUFBTSxNQUFNLENBQUM7QUFDOUMsT0FBTyxFQUFFLFlBQVksRUFBRSxHQUFHLEVBQUUsUUFBUSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFN0Q7Ozs7O0dBS0c7QUFDSCxNQUFNLFVBQVUsZ0JBQWdCLENBQzlCLEdBQWdCLEVBQ2hCLEVBQWMsRUFDZCxJQUFJLEdBQUcsR0FBRztJQUVWLElBQUksV0FBMkIsQ0FBQztJQUNoQyxPQUFPLElBQUksVUFBVSxDQUFDLENBQUMsUUFBeUIsRUFBRSxFQUFFO1FBQ2xELFdBQVcsR0FBRyxJQUFJLGNBQWMsQ0FBQyxDQUFDLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRTtZQUNoRCxRQUFRLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQzdCLENBQUMsQ0FBQyxDQUFDO1FBQ0gsV0FBVyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUMzQixDQUFDLENBQUMsQ0FBQyxJQUFJLENBQ0wsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUNsQixHQUFHLENBQUMsR0FBRyxFQUFFO1FBQ1AsRUFBRSxFQUFFLENBQUM7SUFDUCxDQUFDLENBQUMsRUFDRixRQUFRLENBQUMsR0FBRyxFQUFFO1FBQ1osV0FBVyxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUMzQixXQUFXLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDM0IsQ0FBQyxDQUFDLENBQ0gsQ0FBQztBQUNKLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVzaXplT2JzZXJ2ZXIgZnJvbSAncmVzaXplLW9ic2VydmVyLXBvbHlmaWxsJztcbmltcG9ydCB7IE9ic2VydmFibGUsIFN1YnNjcmliZXIgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IGRlYm91bmNlVGltZSwgdGFwLCBmaW5hbGl6ZSB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuLyoqXG4gKiBBbiBvYnNlcnZhYmxlIGNyZWF0b3IgZm9yIGVsZW1lbnQgcmVzaXplLlxuICogQHBhcmFtIGVsbSB0aGUgd2F0Y2ggZWxlbWVudC5cbiAqIEBwYXJhbSBjYiB3aGVuIHJlc2l6ZSBjb21wbGV0ZSwgY2FsbCBiYWNrIGZ1bmN0aW9uLlxuICogQHBhcmFtIHRpbWUgcmVzaXplIGVtaXQgdGltZSwgZGVmYXVsdCBpcyAyMDBcbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIHJlc2l6ZU9ic2VydmFibGUoXG4gIGVsbTogSFRNTEVsZW1lbnQsXG4gIGNiOiAoKSA9PiB2b2lkLFxuICB0aW1lID0gMjAwLFxuKTogT2JzZXJ2YWJsZTxhbnk+IHtcbiAgbGV0IGVsbU9ic2VydmUkOiBSZXNpemVPYnNlcnZlcjtcbiAgcmV0dXJuIG5ldyBPYnNlcnZhYmxlKChvYnNlcnZlcjogU3Vic2NyaWJlcjxhbnk+KSA9PiB7XG4gICAgZWxtT2JzZXJ2ZSQgPSBuZXcgUmVzaXplT2JzZXJ2ZXIoKGVudHJpZXMsIG9icykgPT4ge1xuICAgICAgb2JzZXJ2ZXIubmV4dChlbG1PYnNlcnZlJCk7XG4gICAgfSk7XG4gICAgZWxtT2JzZXJ2ZSQub2JzZXJ2ZShlbG0pO1xuICB9KS5waXBlKFxuICAgIGRlYm91bmNlVGltZSh0aW1lKSxcbiAgICB0YXAoKCkgPT4ge1xuICAgICAgY2IoKTtcbiAgICB9KSxcbiAgICBmaW5hbGl6ZSgoKSA9PiB7XG4gICAgICBlbG1PYnNlcnZlJC51bm9ic2VydmUoZWxtKTtcbiAgICAgIGVsbU9ic2VydmUkLmRpc2Nvbm5lY3QoKTtcbiAgICB9KSxcbiAgKTtcbn1cbiJdfQ==
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnhqcy5vYnNlcnZhYmxlLnJlc2l6ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1obS1jYXJvdXNlbC9zcmMvbGliL3J4anMub2JzZXJ2YWJsZS5yZXNpemUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBYyxNQUFNLE1BQU0sQ0FBQztBQUM5QyxPQUFPLEVBQUUsWUFBWSxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUU3RDs7Ozs7R0FLRztBQUNILE1BQU0sVUFBVSxnQkFBZ0IsQ0FDOUIsR0FBZ0IsRUFDaEIsRUFBYyxFQUNkLElBQUksR0FBRyxHQUFHO0lBRVYsSUFBSSxXQUEyQixDQUFDO0lBQ2hDLE9BQU8sSUFBSSxVQUFVLENBQUMsQ0FBQyxRQUF5QixFQUFFLEVBQUU7UUFDbEQsV0FBVyxHQUFHLElBQUksY0FBYyxDQUFDLENBQUMsT0FBTyxFQUFFLEdBQUcsRUFBRSxFQUFFO1lBQ2hELFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7UUFDN0IsQ0FBQyxDQUFDLENBQUM7UUFDSCxXQUFXLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQzNCLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FDTCxZQUFZLENBQUMsSUFBSSxDQUFDLEVBQ2xCLEdBQUcsQ0FBQyxHQUFHLEVBQUU7UUFDUCxFQUFFLEVBQUUsQ0FBQztJQUNQLENBQUMsQ0FBQyxFQUNGLFFBQVEsQ0FBQyxHQUFHLEVBQUU7UUFDWixXQUFXLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQzNCLFdBQVcsQ0FBQyxVQUFVLEVBQUUsQ0FBQztJQUMzQixDQUFDLENBQUMsQ0FDSCxDQUFDO0FBQ0osQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE9ic2VydmFibGUsIFN1YnNjcmliZXIgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IGRlYm91bmNlVGltZSwgdGFwLCBmaW5hbGl6ZSB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuLyoqXG4gKiBBbiBvYnNlcnZhYmxlIGNyZWF0b3IgZm9yIGVsZW1lbnQgcmVzaXplLlxuICogQHBhcmFtIGVsbSB0aGUgd2F0Y2ggZWxlbWVudC5cbiAqIEBwYXJhbSBjYiB3aGVuIHJlc2l6ZSBjb21wbGV0ZSwgY2FsbCBiYWNrIGZ1bmN0aW9uLlxuICogQHBhcmFtIHRpbWUgcmVzaXplIGVtaXQgdGltZSwgZGVmYXVsdCBpcyAyMDBcbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIHJlc2l6ZU9ic2VydmFibGUoXG4gIGVsbTogSFRNTEVsZW1lbnQsXG4gIGNiOiAoKSA9PiB2b2lkLFxuICB0aW1lID0gMjAwXG4pOiBPYnNlcnZhYmxlPGFueT4ge1xuICBsZXQgZWxtT2JzZXJ2ZSQ6IFJlc2l6ZU9ic2VydmVyO1xuICByZXR1cm4gbmV3IE9ic2VydmFibGUoKG9ic2VydmVyOiBTdWJzY3JpYmVyPGFueT4pID0+IHtcbiAgICBlbG1PYnNlcnZlJCA9IG5ldyBSZXNpemVPYnNlcnZlcigoZW50cmllcywgb2JzKSA9PiB7XG4gICAgICBvYnNlcnZlci5uZXh0KGVsbU9ic2VydmUkKTtcbiAgICB9KTtcbiAgICBlbG1PYnNlcnZlJC5vYnNlcnZlKGVsbSk7XG4gIH0pLnBpcGUoXG4gICAgZGVib3VuY2VUaW1lKHRpbWUpLFxuICAgIHRhcCgoKSA9PiB7XG4gICAgICBjYigpO1xuICAgIH0pLFxuICAgIGZpbmFsaXplKCgpID0+IHtcbiAgICAgIGVsbU9ic2VydmUkLnVub2JzZXJ2ZShlbG0pO1xuICAgICAgZWxtT2JzZXJ2ZSQuZGlzY29ubmVjdCgpO1xuICAgIH0pXG4gICk7XG59XG4iXX0=

@@ -5,2 +5,2 @@ /**

export * from './public-api';
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWhtLWNhcm91c2VsLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWhtLWNhcm91c2VsLyIsInNvdXJjZXMiOlsibmd4LWhtLWNhcm91c2VsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljLWFwaSc7XG4iXX0=
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWhtLWNhcm91c2VsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvbmd4LWhtLWNhcm91c2VsL3NyYy9uZ3gtaG0tY2Fyb3VzZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==

@@ -9,2 +9,3 @@ /*

export * from './lib/rxjs.observable.resize';
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1obS1jYXJvdXNlbC8iLCJzb3VyY2VzIjpbInB1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxjQUFjLHNDQUFzQyxDQUFDO0FBQ3JELGNBQWMseUNBQXlDLENBQUM7QUFDeEQsY0FBYyxpQ0FBaUMsQ0FBQztBQUNoRCxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMsOEJBQThCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIG5neC1obS1jYXJvdXNlbFxuICovXG5leHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtaG0tY2Fyb3VzZWwtaXRlbS5kaXJlY3RpdmUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbmd4LWhtLWNhcm91c2VsLWR5bmFtaWMuZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1obS1jYXJvdXNlbC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbmd4LWhtLWNhcm91c2VsLm1vZHVsZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9yeGpzLm9ic2VydmFibGUucmVzaXplJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1obS1jYXJvdXNlbC5tb2RlbCc7XG4iXX0=
export * from './lib/ngx-hm-carousel.model';
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1obS1jYXJvdXNlbC9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILGNBQWMsc0NBQXNDLENBQUM7QUFDckQsY0FBYyx5Q0FBeUMsQ0FBQztBQUN4RCxjQUFjLGlDQUFpQyxDQUFDO0FBQ2hELGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLDZCQUE2QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBuZ3gtaG0tY2Fyb3VzZWxcbiAqL1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbmd4LWhtLWNhcm91c2VsLWl0ZW0uZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1obS1jYXJvdXNlbC1keW5hbWljLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtaG0tY2Fyb3VzZWwuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1obS1jYXJvdXNlbC5tb2R1bGUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvcnhqcy5vYnNlcnZhYmxlLnJlc2l6ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtaG0tY2Fyb3VzZWwubW9kZWwnO1xuIl19

@@ -1,3 +0,2 @@

import { __decorate, __metadata, __param } from 'tslib';
import { Directive, ViewContainerRef, TemplateRef, Input, Inject, PLATFORM_ID, Renderer2, NgZone, ChangeDetectorRef, ViewChild, ElementRef, ContentChildren, QueryList, ContentChild, Component, forwardRef, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { Directive, ViewContainerRef, TemplateRef, Input, Component, forwardRef, ChangeDetectionStrategy, Inject, PLATFORM_ID, Renderer2, NgZone, ChangeDetectorRef, ViewChild, ContentChildren, ElementRef, ContentChild, NgModule } from '@angular/core';
import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';

@@ -7,17 +6,16 @@ import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';

import { debounceTime, tap, finalize, takeUntil, filter, switchMap, bufferCount } from 'rxjs/operators';
import ResizeObserver from 'resize-observer-polyfill';
let NgxHmCarouselItemDirective = class NgxHmCarouselItemDirective {
class NgxHmCarouselItemDirective {
constructor() { }
};
NgxHmCarouselItemDirective = __decorate([
Directive({
selector: '[ngx-hm-carousel-item]',
}),
__metadata("design:paramtypes", [])
], NgxHmCarouselItemDirective);
}
NgxHmCarouselItemDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngx-hm-carousel-item]',
},] }
];
NgxHmCarouselItemDirective.ctorParameters = () => [];
// TODO: ssr problem should not hide on ssr
// TODO: show number change should recaculate is show and init show number
let NgxHmCarouselDynamicDirective = class NgxHmCarouselDynamicDirective {
class NgxHmCarouselDynamicDirective {
constructor(_view, _template) {

@@ -45,3 +43,8 @@ this._view = _view;

ngOnInit() { }
};
}
NgxHmCarouselDynamicDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngxHmCarouselDynamic]',
},] }
];
NgxHmCarouselDynamicDirective.ctorParameters = () => [

@@ -51,26 +54,8 @@ { type: ViewContainerRef },

];
__decorate([
Input('ngxHmCarouselDynamic'),
__metadata("design:type", Number)
], NgxHmCarouselDynamicDirective.prototype, "index", void 0);
__decorate([
Input('ngxHmCarouselDynamicLength'),
__metadata("design:type", Number)
], NgxHmCarouselDynamicDirective.prototype, "length", void 0);
__decorate([
Input('ngxHmCarouselDynamicShow'),
__metadata("design:type", Object)
], NgxHmCarouselDynamicDirective.prototype, "show", void 0);
__decorate([
Input('ngxHmCarouselDynamicIndex'),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], NgxHmCarouselDynamicDirective.prototype, "currentI", null);
NgxHmCarouselDynamicDirective = __decorate([
Directive({
selector: '[ngxHmCarouselDynamic]',
}),
__metadata("design:paramtypes", [ViewContainerRef,
TemplateRef])
], NgxHmCarouselDynamicDirective);
NgxHmCarouselDynamicDirective.propDecorators = {
index: [{ type: Input, args: ['ngxHmCarouselDynamic',] }],
length: [{ type: Input, args: ['ngxHmCarouselDynamicLength',] }],
show: [{ type: Input, args: ['ngxHmCarouselDynamicShow',] }],
currentI: [{ type: Input, args: ['ngxHmCarouselDynamicIndex',] }]
};

@@ -98,4 +83,3 @@ /**

var NgxHmCarouselComponent_1;
let NgxHmCarouselComponent = NgxHmCarouselComponent_1 = class NgxHmCarouselComponent {
class NgxHmCarouselComponent {
constructor(platformId, _document, _renderer, _zone, _cd) {

@@ -122,3 +106,3 @@ this.platformId = platformId;

this.panBoundary = 0.15;
/** when show-num is bigger than 1, the first item align, defaulte is `center` */
/** when `show-num` is bigger than 1, the first item align, default is `center` */
this.align = 'center';

@@ -131,5 +115,5 @@ /**

/**
* the event binding state for stop auto play when mourse moveover
* the event binding state for stop auto play when mouse moveover
*/
this.mourseEnable = false;
this.mouseEnable = false;
/** each auto play between time */

@@ -165,3 +149,3 @@ this.delay = 8000;

this.destroy$ = new Subject();
this._porgressWidth = 0;
this._progressWidth = 0;
this._currentIndex = 0;

@@ -189,3 +173,3 @@ this._showNum = 1;

if (value) {
this.destoryHammer();
this.destroyHammer();
}

@@ -239,3 +223,3 @@ else {

}
/** carousel auto play confing */
/** is that carousel auto play */
get autoplay() {

@@ -274,3 +258,3 @@ return this._autoplay;

set currentIndex(value) {
// if now index if not equale to save index, do someting
// if now index is not equal to save index, do something
if (this.currentIndex !== value) {

@@ -305,7 +289,7 @@ // if the value is not contain with the boundary not handler

get progressWidth() {
return this._porgressWidth;
return this._progressWidth;
}
set progressWidth(value) {
if (this.progressElm !== undefined && this.autoplay) {
this._porgressWidth = value;
this._progressWidth = value;
this._renderer.setStyle(this.progressContainerElm.nativeElement.children[0], 'width', `${this.progressWidth}%`);

@@ -382,3 +366,3 @@ }

if (this.currentIndex > this.itemElms.length - 1) {
// i can't pass the changedetection check, only the way to using timeout. :(
// i can't pass the change detection check, only the way to using timeout. :(
setTimeout(() => {

@@ -428,3 +412,3 @@ this.currentIndex = this.itemElms.length - 1;

destroy() {
this.destoryHammer();
this.destroyHammer();
if (this.autoplay) {

@@ -434,3 +418,3 @@ this.doNextSub$.unsubscribe();

}
destoryHammer() {
destroyHammer() {
if (this.hammer) {

@@ -485,4 +469,4 @@ this.hammer.destroy();

this.reSetAlignDistance();
// 因為不能滑了,所以要回到第一個,以確保全部都有顯示
if (this.align !== 'center' && this.showNum >= this.elms.length) {
const touchEnd = this.showNum >= this.elms.length;
if (this.align !== 'center' && touchEnd) {
this.currentIndex = 0;

@@ -497,3 +481,3 @@ }

let stopEvent = this.stopEvent.asObservable();
if (this.mourseEnable) {
if (this.mouseEnable) {
startEvent = merge(startEvent, fromEvent(this.containerElm, 'mouseleave').pipe(

@@ -506,3 +490,3 @@ // when leave, we should reverse grabbing state to set the mouseOn state,

this.doNext = startEvent.pipe(
// not using debounceTime, it will stop mourseover event detect, will cause mourse-enable error
// not using debounceTime, it will stop mouseover event detect, will cause mouse-enable error
// debounceTime(this.delay),

@@ -544,6 +528,6 @@ switchMap(() => this.speedChange), switchMap(() => timer(this.delay).pipe(switchMap(() => this.runProgress(20)), tap(() => {

// remain one elm height
this._renderer.addClass(this.containerElm, 'ngx-hm-carousel-display-npwrap');
this._renderer.addClass(this.containerElm, 'ngx-hm-carousel-display-nowrap');
}
this.elmWidth = this.rootElmWidth / this._showNum;
this._renderer.removeClass(this.containerElm, 'ngx-hm-carousel-display-npwrap');
this._renderer.removeClass(this.containerElm, 'ngx-hm-carousel-display-nowrap');
this.containerElmWidth = this.elmWidth * this.elms.length;

@@ -604,3 +588,3 @@ this._renderer.setStyle(this.containerElm, 'position', 'relative');

}
// // if not dragmany, when bigger than half
// if not drag many, when bigger than half
if (!this.isDragMany) {

@@ -775,3 +759,3 @@ if (Math.abs(e.deltaX) > this.elmWidth * 0.5) {

if (this.breakpoint.length > 0) {
// get the last bigget point
// get the last biggest point
const now = this.breakpoint.find((b) => {

@@ -810,3 +794,18 @@ return b.width >= currWidth;

}
};
}
NgxHmCarouselComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-hm-carousel',
template: "<div #containerElm class=\"carousel\">\n <!-- main content -->\n <ng-content select=\"[ngx-hm-carousel-container]\"></ng-content>\n <!-- left -->\n <div #prev *ngIf=\"contentPrev\" class=\"direction left\">\n <ng-container *ngTemplateOutlet=\"contentPrev\"></ng-container>\n </div>\n <!-- right -->\n <div #next *ngIf=\"contentNext\" class=\"direction right\">\n <ng-container *ngTemplateOutlet=\"contentNext\"></ng-container>\n </div>\n <!-- indicators -->\n <ul class=\"indicators\" *ngIf=\"dotElm\">\n <li *ngFor=\"let dot of itemElms; let i = index\" (click)=\"currentIndex = i\">\n <ng-container\n *ngTemplateOutlet=\"\n dotElm;\n context: {\n $implicit: {\n index: i,\n currentIndex: currentIndex\n }\n }\n \"\n >\n </ng-container>\n </li>\n </ul>\n <!-- progress -->\n <div *ngIf=\"progressElm && autoplay\" #progress>\n <ng-container *ngTemplateOutlet=\"progressElm\"> </ng-container>\n </div>\n\n <div class=\"mask\" *ngIf=\"grabbing\">\n <ng-container *ngIf=\"leaveObs$ | async\"></ng-container>\n </div>\n</div>\n",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxHmCarouselComponent),
multi: true,
},
],
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{display:block;height:100%}.ngx-hm-carousel-display-nowrap{display:flex!important;flex-wrap:nowrap!important;flex-direction:row!important;overflow:hidden!important}.carousel{overflow:hidden;position:relative;width:100%;height:100%}.carousel ul.indicators{list-style:none;bottom:1rem;left:0;margin:0;padding:0;position:absolute;text-align:center;width:100%}.carousel ul.indicators li{cursor:pointer;display:inline-block;position:relative;padding:.5rem}.carousel .direction{position:absolute;height:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;top:0}.carousel .direction.left{left:0}.carousel .direction.right{position:absolute;right:0}.grab{cursor:grab}.grabbing{cursor:grabbing}.mask{position:absolute;left:0;top:0;right:0;bottom:0}"]
},] }
];
NgxHmCarouselComponent.ctorParameters = () => [

@@ -819,169 +818,56 @@ { type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },

];
__decorate([
ViewChild('containerElm'),
__metadata("design:type", ElementRef)
], NgxHmCarouselComponent.prototype, "container", void 0);
__decorate([
ViewChild('prev'),
__metadata("design:type", ElementRef)
], NgxHmCarouselComponent.prototype, "btnPrev", void 0);
__decorate([
ViewChild('next'),
__metadata("design:type", ElementRef)
], NgxHmCarouselComponent.prototype, "btnNext", void 0);
__decorate([
ViewChild('progress'),
__metadata("design:type", ElementRef)
], NgxHmCarouselComponent.prototype, "progressContainerElm", void 0);
__decorate([
ContentChildren(NgxHmCarouselItemDirective, {
read: ElementRef,
descendants: true,
}),
__metadata("design:type", QueryList)
], NgxHmCarouselComponent.prototype, "itemElms", void 0);
__decorate([
ContentChild('carouselPrev'),
__metadata("design:type", TemplateRef)
], NgxHmCarouselComponent.prototype, "contentPrev", void 0);
__decorate([
ContentChild('carouselNext'),
__metadata("design:type", TemplateRef)
], NgxHmCarouselComponent.prototype, "contentNext", void 0);
__decorate([
ContentChild('carouselDot'),
__metadata("design:type", TemplateRef)
], NgxHmCarouselComponent.prototype, "dotElm", void 0);
__decorate([
ContentChild('carouselProgress'),
__metadata("design:type", TemplateRef)
], NgxHmCarouselComponent.prototype, "progressElm", void 0);
__decorate([
ContentChild('infiniteContainer', { read: ViewContainerRef }),
__metadata("design:type", ViewContainerRef)
], NgxHmCarouselComponent.prototype, "infiniteContainer", void 0);
__decorate([
ContentChild('carouselContent'),
__metadata("design:type", TemplateRef)
], NgxHmCarouselComponent.prototype, "contentContent", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], NgxHmCarouselComponent.prototype, "data", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "aniTime", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "aniClass", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "aniClassAuto", void 0);
__decorate([
Input('pan-boundary'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "panBoundary", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxHmCarouselComponent.prototype, "align", void 0);
__decorate([
Input('not-follow-pan'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "notDrag", void 0);
__decorate([
Input('mourse-enable'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "mourseEnable", void 0);
__decorate([
Input('between-delay'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "delay", void 0);
__decorate([
Input('autoplay-direction'),
__metadata("design:type", String)
], NgxHmCarouselComponent.prototype, "direction", void 0);
__decorate([
Input('scroll-num'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "scrollNum", void 0);
__decorate([
Input('drag-many'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "isDragMany", void 0);
__decorate([
Input('swipe-velocity'),
__metadata("design:type", Object)
], NgxHmCarouselComponent.prototype, "swipeVelocity", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], NgxHmCarouselComponent.prototype, "breakpoint", void 0);
__decorate([
Input('disable-drag'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NgxHmCarouselComponent.prototype, "disableDrag", null);
__decorate([
Input('infinite'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NgxHmCarouselComponent.prototype, "infinite", null);
__decorate([
Input('autoplay-speed'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NgxHmCarouselComponent.prototype, "speed", null);
__decorate([
Input('show-num'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NgxHmCarouselComponent.prototype, "showNum", null);
__decorate([
Input('autoplay'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NgxHmCarouselComponent.prototype, "autoplay", null);
NgxHmCarouselComponent = NgxHmCarouselComponent_1 = __decorate([
Component({
selector: 'ngx-hm-carousel',
template: "<div #containerElm class=\"carousel\">\n <!-- main content -->\n <ng-content select=\"[ngx-hm-carousel-container]\"></ng-content>\n <!-- left -->\n <div #prev *ngIf=\"contentPrev\" class=\"direction left\">\n <ng-container *ngTemplateOutlet=\"contentPrev\"></ng-container>\n </div>\n <!-- right -->\n <div #next *ngIf=\"contentNext\" class=\"direction right\">\n <ng-container *ngTemplateOutlet=\"contentNext\"></ng-container>\n </div>\n <!-- indicators -->\n <ul class=\"indicators\" *ngIf=\"dotElm\">\n <li *ngFor=\"let dot of itemElms; let i = index\" (click)=\"currentIndex = i\">\n <ng-container\n *ngTemplateOutlet=\"\n dotElm;\n context: {\n $implicit: {\n index: i,\n currentIndex: currentIndex\n }\n }\n \"\n >\n </ng-container>\n </li>\n </ul>\n <!-- progress -->\n <div *ngIf=\"progressElm && autoplay\" #progress>\n <ng-container *ngTemplateOutlet=\"progressElm\"> </ng-container>\n </div>\n\n <div class=\"mask\" *ngIf=\"grabbing\">\n <ng-container *ngIf=\"leaveObs$ | async\"></ng-container>\n </div>\n</div>\n",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxHmCarouselComponent_1),
multi: true,
},
],
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{display:block;height:100%}.ngx-hm-carousel-display-npwrap{display:-webkit-box!important;display:flex!important;flex-wrap:nowrap!important;-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;flex-direction:row!important;overflow:hidden!important}.carousel{overflow:hidden;position:relative;width:100%;height:100%}.carousel ul.indicators{list-style:none;bottom:1rem;left:0;margin:0;padding:0;position:absolute;text-align:center;width:100%}.carousel ul.indicators li{cursor:pointer;display:inline-block;position:relative;padding:.5rem}.carousel .direction{position:absolute;height:100%;cursor:pointer;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;top:0}.carousel .direction.left{left:0}.carousel .direction.right{position:absolute;right:0}.grab{cursor:-webkit-grab;cursor:grab}.grabbing{cursor:-webkit-grabbing;cursor:grabbing}.mask{position:absolute;left:0;top:0;right:0;bottom:0}"]
}),
__param(0, Inject(PLATFORM_ID)),
__param(1, Inject(DOCUMENT)),
__metadata("design:paramtypes", [Object, Object, Renderer2,
NgZone,
ChangeDetectorRef])
], NgxHmCarouselComponent);
let NgxHmCarouselModule = class NgxHmCarouselModule {
NgxHmCarouselComponent.propDecorators = {
container: [{ type: ViewChild, args: ['containerElm',] }],
btnPrev: [{ type: ViewChild, args: ['prev',] }],
btnNext: [{ type: ViewChild, args: ['next',] }],
progressContainerElm: [{ type: ViewChild, args: ['progress',] }],
itemElms: [{ type: ContentChildren, args: [NgxHmCarouselItemDirective, {
read: ElementRef,
descendants: true,
},] }],
contentPrev: [{ type: ContentChild, args: ['carouselPrev',] }],
contentNext: [{ type: ContentChild, args: ['carouselNext',] }],
dotElm: [{ type: ContentChild, args: ['carouselDot',] }],
progressElm: [{ type: ContentChild, args: ['carouselProgress',] }],
infiniteContainer: [{ type: ContentChild, args: ['infiniteContainer', { read: ViewContainerRef },] }],
contentContent: [{ type: ContentChild, args: ['carouselContent',] }],
data: [{ type: Input }],
aniTime: [{ type: Input }],
aniClass: [{ type: Input }],
aniClassAuto: [{ type: Input }],
panBoundary: [{ type: Input, args: ['pan-boundary',] }],
align: [{ type: Input }],
notDrag: [{ type: Input, args: ['not-follow-pan',] }],
mouseEnable: [{ type: Input, args: ['mouse-enable',] }],
delay: [{ type: Input, args: ['between-delay',] }],
direction: [{ type: Input, args: ['autoplay-direction',] }],
scrollNum: [{ type: Input, args: ['scroll-num',] }],
isDragMany: [{ type: Input, args: ['drag-many',] }],
swipeVelocity: [{ type: Input, args: ['swipe-velocity',] }],
breakpoint: [{ type: Input }],
disableDrag: [{ type: Input, args: ['disable-drag',] }],
infinite: [{ type: Input, args: ['infinite',] }],
speed: [{ type: Input, args: ['autoplay-speed',] }],
showNum: [{ type: Input, args: ['show-num',] }],
autoplay: [{ type: Input, args: ['autoplay',] }]
};
NgxHmCarouselModule = __decorate([
NgModule({
imports: [CommonModule, FormsModule],
declarations: [
NgxHmCarouselComponent,
NgxHmCarouselDynamicDirective,
NgxHmCarouselItemDirective,
],
exports: [
NgxHmCarouselComponent,
NgxHmCarouselDynamicDirective,
NgxHmCarouselItemDirective,
],
})
], NgxHmCarouselModule);
class NgxHmCarouselModule {
}
NgxHmCarouselModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule],
declarations: [
NgxHmCarouselComponent,
NgxHmCarouselDynamicDirective,
NgxHmCarouselItemDirective,
],
exports: [
NgxHmCarouselComponent,
NgxHmCarouselDynamicDirective,
NgxHmCarouselItemDirective,
],
},] }
];
/*

@@ -988,0 +874,0 @@ * Public API Surface of ngx-hm-carousel

@@ -39,3 +39,3 @@ import { AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, QueryList, Renderer2, TemplateRef, ViewContainerRef } from '@angular/core';

panBoundary: number | false;
/** when show-num is bigger than 1, the first item align, defaulte is `center` */
/** when `show-num` is bigger than 1, the first item align, default is `center` */
align: 'left' | 'center' | 'right';

@@ -48,5 +48,5 @@ /**

/**
* the event binding state for stop auto play when mourse moveover
* the event binding state for stop auto play when mouse moveover
*/
mourseEnable: boolean;
mouseEnable: boolean;
/** each auto play between time */

@@ -81,3 +81,3 @@ delay: number;

set showNum(value: number | 'auto');
/** carousel auto play confing */
/** is that carousel auto play */
get autoplay(): boolean;

@@ -115,3 +115,3 @@ set autoplay(value: boolean);

private destroy$;
private _porgressWidth;
private _progressWidth;
private _currentIndex;

@@ -136,3 +136,3 @@ private _showNum;

private destroy;
private destoryHammer;
private destroyHammer;
private addInfiniteElm;

@@ -139,0 +139,0 @@ private removeInfiniteElm;

@@ -1,1 +0,1 @@

{"__symbolic":"module","version":4,"metadata":{"NgxHmCarouselItemDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[ngx-hm-carousel-item]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}},"NgxHmCarouselDynamicDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":10,"character":1},"arguments":[{"selector":"[ngxHmCarouselDynamic]"}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3},"arguments":["ngxHmCarouselDynamic"]}]}],"length":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3},"arguments":["ngxHmCarouselDynamicLength"]}]}],"show":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3},"arguments":["ngxHmCarouselDynamicShow"]}]}],"currentI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3},"arguments":["ngxHmCarouselDynamicIndex"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":38,"character":19},{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}],"ngOnInit":[{"__symbolic":"method"}]}},"NgxHmCarouselComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":41,"character":1},"arguments":[{"selector":"ngx-hm-carousel","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":47,"character":15},"useExisting":{"__symbolic":"reference","name":"NgxHmCarouselComponent"},"multi":true}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":52,"character":19},"member":"OnPush"},"template":"<div #containerElm class=\"carousel\">\n <!-- main content -->\n <ng-content select=\"[ngx-hm-carousel-container]\"></ng-content>\n <!-- left -->\n <div #prev *ngIf=\"contentPrev\" class=\"direction left\">\n <ng-container *ngTemplateOutlet=\"contentPrev\"></ng-container>\n </div>\n <!-- right -->\n <div #next *ngIf=\"contentNext\" class=\"direction right\">\n <ng-container *ngTemplateOutlet=\"contentNext\"></ng-container>\n </div>\n <!-- indicators -->\n <ul class=\"indicators\" *ngIf=\"dotElm\">\n <li *ngFor=\"let dot of itemElms; let i = index\" (click)=\"currentIndex = i\">\n <ng-container\n *ngTemplateOutlet=\"\n dotElm;\n context: {\n $implicit: {\n index: i,\n currentIndex: currentIndex\n }\n }\n \"\n >\n </ng-container>\n </li>\n </ul>\n <!-- progress -->\n <div *ngIf=\"progressElm && autoplay\" #progress>\n <ng-container *ngTemplateOutlet=\"progressElm\"> </ng-container>\n </div>\n\n <div class=\"mask\" *ngIf=\"grabbing\">\n <ng-container *ngIf=\"leaveObs$ | async\"></ng-container>\n </div>\n</div>\n","styles":[":host{display:block;height:100%}.ngx-hm-carousel-display-npwrap{display:-webkit-box!important;display:flex!important;flex-wrap:nowrap!important;-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;flex-direction:row!important;overflow:hidden!important}.carousel{overflow:hidden;position:relative;width:100%;height:100%}.carousel ul.indicators{list-style:none;bottom:1rem;left:0;margin:0;padding:0;position:absolute;text-align:center;width:100%}.carousel ul.indicators li{cursor:pointer;display:inline-block;position:relative;padding:.5rem}.carousel .direction{position:absolute;height:100%;cursor:pointer;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;top:0}.carousel .direction.left{left:0}.carousel .direction.right{position:absolute;right:0}.grab{cursor:-webkit-grab;cursor:grab}.grabbing{cursor:-webkit-grabbing;cursor:grabbing}.mask{position:absolute;left:0;top:0;right:0;bottom:0}"]}]}],"members":{"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":56,"character":3},"arguments":["containerElm"]}]}],"btnPrev":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":57,"character":3},"arguments":["prev"]}]}],"btnNext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":58,"character":3},"arguments":["next"]}]}],"progressContainerElm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":59,"character":3},"arguments":["progress"]}]}],"itemElms":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":62,"character":3},"arguments":[{"__symbolic":"reference","name":"NgxHmCarouselItemDirective"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":63,"character":10},"descendants":true}]}]}],"contentPrev":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":68,"character":3},"arguments":["carouselPrev"]}]}],"contentNext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":69,"character":3},"arguments":["carouselNext"]}]}],"dotElm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":70,"character":3},"arguments":["carouselDot"]}]}],"progressElm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":71,"character":3},"arguments":["carouselProgress"]}]}],"infiniteContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":73,"character":3},"arguments":["infiniteContainer",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":73,"character":45}}]}]}],"contentContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":76,"character":3},"arguments":["carouselContent"]}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":3}}]}],"aniTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":3}}]}],"aniClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"aniClassAuto":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":3}}]}],"panBoundary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3},"arguments":["pan-boundary"]}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3}}]}],"notDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":3},"arguments":["not-follow-pan"]}]}],"mourseEnable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":3},"arguments":["mourse-enable"]}]}],"delay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":3},"arguments":["between-delay"]}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":3},"arguments":["autoplay-direction"]}]}],"scrollNum":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":3},"arguments":["scroll-num"]}]}],"isDragMany":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":3},"arguments":["drag-many"]}]}],"swipeVelocity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":3},"arguments":["swipe-velocity"]}]}],"breakpoint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":3}}]}],"disableDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3},"arguments":["disable-drag"]}]}],"infinite":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":3},"arguments":["infinite"]}]}],"speed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":161,"character":3},"arguments":["autoplay-speed"]}]}],"showNum":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":175,"character":3},"arguments":["show-num"]}]}],"autoplay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":192,"character":3},"arguments":["autoplay"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":391,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":391,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":392,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":392,"character":12}]}],null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},null,{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":393,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":394,"character":19},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":395,"character":17}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"destoryHammer":[{"__symbolic":"method"}],"addInfiniteElm":[{"__symbolic":"method"}],"removeInfiniteElm":[{"__symbolic":"method"}],"containerResize":[{"__symbolic":"method"}],"initVariable":[{"__symbolic":"method"}],"reSetAlignDistance":[{"__symbolic":"method"}],"setViewWidth":[{"__symbolic":"method"}],"bindHammer":[{"__symbolic":"method"}],"goPrev":[{"__symbolic":"method"}],"goNext":[{"__symbolic":"method"}],"bindClick":[{"__symbolic":"method"}],"callRestart":[{"__symbolic":"method"}],"drawView":[{"__symbolic":"method"}],"removeContainerTransition":[{"__symbolic":"method"}],"infiniteHandler":[{"__symbolic":"method"}],"outOfBound":[{"__symbolic":"method"}],"runProgress":[{"__symbolic":"method"}],"getAutoNum":[{"__symbolic":"method"}],"addStyle":[{"__symbolic":"method"}],"setStyle":[{"__symbolic":"method"}]}},"NgxHmCarouselModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":26}],"declarations":[{"__symbolic":"reference","name":"NgxHmCarouselComponent"},{"__symbolic":"reference","name":"NgxHmCarouselDynamicDirective"},{"__symbolic":"reference","name":"NgxHmCarouselItemDirective"}],"exports":[{"__symbolic":"reference","name":"NgxHmCarouselComponent"},{"__symbolic":"reference","name":"NgxHmCarouselDynamicDirective"},{"__symbolic":"reference","name":"NgxHmCarouselItemDirective"}]}]}],"members":{}},"resizeObservable":{"__symbolic":"function"},"NgxHmCarouselBreakPointUp":{"__symbolic":"interface"}},"origins":{"NgxHmCarouselItemDirective":"./lib/ngx-hm-carousel-item.directive","NgxHmCarouselDynamicDirective":"./lib/ngx-hm-carousel-dynamic.directive","NgxHmCarouselComponent":"./lib/ngx-hm-carousel.component","NgxHmCarouselModule":"./lib/ngx-hm-carousel.module","resizeObservable":"./lib/rxjs.observable.resize","NgxHmCarouselBreakPointUp":"./lib/ngx-hm-carousel.model"},"importAs":"ngx-hm-carousel"}
{"__symbolic":"module","version":4,"metadata":{"NgxHmCarouselItemDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[ngx-hm-carousel-item]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}},"NgxHmCarouselDynamicDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":10,"character":1},"arguments":[{"selector":"[ngxHmCarouselDynamic]"}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3},"arguments":["ngxHmCarouselDynamic"]}]}],"length":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3},"arguments":["ngxHmCarouselDynamicLength"]}]}],"show":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3},"arguments":["ngxHmCarouselDynamicShow"]}]}],"currentI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3},"arguments":["ngxHmCarouselDynamicIndex"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":38,"character":19},{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}],"ngOnInit":[{"__symbolic":"method"}]}},"NgxHmCarouselComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":41,"character":1},"arguments":[{"selector":"ngx-hm-carousel","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":47,"character":15},"useExisting":{"__symbolic":"reference","name":"NgxHmCarouselComponent"},"multi":true}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":52,"character":19},"member":"OnPush"},"template":"<div #containerElm class=\"carousel\">\n <!-- main content -->\n <ng-content select=\"[ngx-hm-carousel-container]\"></ng-content>\n <!-- left -->\n <div #prev *ngIf=\"contentPrev\" class=\"direction left\">\n <ng-container *ngTemplateOutlet=\"contentPrev\"></ng-container>\n </div>\n <!-- right -->\n <div #next *ngIf=\"contentNext\" class=\"direction right\">\n <ng-container *ngTemplateOutlet=\"contentNext\"></ng-container>\n </div>\n <!-- indicators -->\n <ul class=\"indicators\" *ngIf=\"dotElm\">\n <li *ngFor=\"let dot of itemElms; let i = index\" (click)=\"currentIndex = i\">\n <ng-container\n *ngTemplateOutlet=\"\n dotElm;\n context: {\n $implicit: {\n index: i,\n currentIndex: currentIndex\n }\n }\n \"\n >\n </ng-container>\n </li>\n </ul>\n <!-- progress -->\n <div *ngIf=\"progressElm && autoplay\" #progress>\n <ng-container *ngTemplateOutlet=\"progressElm\"> </ng-container>\n </div>\n\n <div class=\"mask\" *ngIf=\"grabbing\">\n <ng-container *ngIf=\"leaveObs$ | async\"></ng-container>\n </div>\n</div>\n","styles":[":host{display:block;height:100%}.ngx-hm-carousel-display-nowrap{display:flex!important;flex-wrap:nowrap!important;flex-direction:row!important;overflow:hidden!important}.carousel{overflow:hidden;position:relative;width:100%;height:100%}.carousel ul.indicators{list-style:none;bottom:1rem;left:0;margin:0;padding:0;position:absolute;text-align:center;width:100%}.carousel ul.indicators li{cursor:pointer;display:inline-block;position:relative;padding:.5rem}.carousel .direction{position:absolute;height:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;top:0}.carousel .direction.left{left:0}.carousel .direction.right{position:absolute;right:0}.grab{cursor:grab}.grabbing{cursor:grabbing}.mask{position:absolute;left:0;top:0;right:0;bottom:0}"]}]}],"members":{"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":57,"character":3},"arguments":["containerElm"]}]}],"btnPrev":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":58,"character":3},"arguments":["prev"]}]}],"btnNext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":59,"character":3},"arguments":["next"]}]}],"progressContainerElm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":3},"arguments":["progress"]}]}],"itemElms":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":63,"character":3},"arguments":[{"__symbolic":"reference","name":"NgxHmCarouselItemDirective"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":64,"character":10},"descendants":true}]}]}],"contentPrev":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":69,"character":3},"arguments":["carouselPrev"]}]}],"contentNext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":70,"character":3},"arguments":["carouselNext"]}]}],"dotElm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":71,"character":3},"arguments":["carouselDot"]}]}],"progressElm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":72,"character":3},"arguments":["carouselProgress"]}]}],"infiniteContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":74,"character":3},"arguments":["infiniteContainer",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":74,"character":45}}]}]}],"contentContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":77,"character":3},"arguments":["carouselContent"]}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3}}]}],"aniTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"aniClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"aniClassAuto":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":3}}]}],"panBoundary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3},"arguments":["pan-boundary"]}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":3}}]}],"notDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":3},"arguments":["not-follow-pan"]}]}],"mouseEnable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":3},"arguments":["mouse-enable"]}]}],"delay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":3},"arguments":["between-delay"]}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3},"arguments":["autoplay-direction"]}]}],"scrollNum":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":3},"arguments":["scroll-num"]}]}],"isDragMany":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":3},"arguments":["drag-many"]}]}],"swipeVelocity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3},"arguments":["swipe-velocity"]}]}],"breakpoint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":3}}]}],"disableDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":3},"arguments":["disable-drag"]}]}],"infinite":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":3},"arguments":["infinite"]}]}],"speed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":169,"character":3},"arguments":["autoplay-speed"]}]}],"showNum":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":183,"character":3},"arguments":["show-num"]}]}],"autoplay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":200,"character":3},"arguments":["autoplay"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":399,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":399,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":400,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":400,"character":12}]}],null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":401,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":402,"character":19},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":403,"character":17}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"destroyHammer":[{"__symbolic":"method"}],"addInfiniteElm":[{"__symbolic":"method"}],"removeInfiniteElm":[{"__symbolic":"method"}],"containerResize":[{"__symbolic":"method"}],"initVariable":[{"__symbolic":"method"}],"reSetAlignDistance":[{"__symbolic":"method"}],"setViewWidth":[{"__symbolic":"method"}],"bindHammer":[{"__symbolic":"method"}],"goPrev":[{"__symbolic":"method"}],"goNext":[{"__symbolic":"method"}],"bindClick":[{"__symbolic":"method"}],"callRestart":[{"__symbolic":"method"}],"drawView":[{"__symbolic":"method"}],"removeContainerTransition":[{"__symbolic":"method"}],"infiniteHandler":[{"__symbolic":"method"}],"outOfBound":[{"__symbolic":"method"}],"runProgress":[{"__symbolic":"method"}],"getAutoNum":[{"__symbolic":"method"}],"addStyle":[{"__symbolic":"method"}],"setStyle":[{"__symbolic":"method"}]}},"NgxHmCarouselModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":26}],"declarations":[{"__symbolic":"reference","name":"NgxHmCarouselComponent"},{"__symbolic":"reference","name":"NgxHmCarouselDynamicDirective"},{"__symbolic":"reference","name":"NgxHmCarouselItemDirective"}],"exports":[{"__symbolic":"reference","name":"NgxHmCarouselComponent"},{"__symbolic":"reference","name":"NgxHmCarouselDynamicDirective"},{"__symbolic":"reference","name":"NgxHmCarouselItemDirective"}]}]}],"members":{}},"resizeObservable":{"__symbolic":"function"},"NgxHmCarouselBreakPointUp":{"__symbolic":"interface"}},"origins":{"NgxHmCarouselItemDirective":"./lib/ngx-hm-carousel-item.directive","NgxHmCarouselDynamicDirective":"./lib/ngx-hm-carousel-dynamic.directive","NgxHmCarouselComponent":"./lib/ngx-hm-carousel.component","NgxHmCarouselModule":"./lib/ngx-hm-carousel.module","resizeObservable":"./lib/rxjs.observable.resize","NgxHmCarouselBreakPointUp":"./lib/ngx-hm-carousel.model"},"importAs":"ngx-hm-carousel"}
{
"name": "ngx-hm-carousel",
"version": "2.0.0-rc.1",
"version": "2.0.0",
"dependencies": {
"resize-observer-polyfill": "^1.5.1",
"hammerjs": "^2.0.8"
"tslib": "^2.0.0",
"hammerjs": "^2.0.8",
"@types/hammerjs": "^2.0.39"
},

@@ -20,5 +21,4 @@ "description": "A light carousel for Angular, support mobile touch by hammerJs with SSR",

"peerDependencies": {
"@angular/common": ">=9.0.0",
"@angular/core": ">=9.0.0",
"tslib": "^1.10.0"
"@angular/common": ">=12.0.0",
"@angular/core": ">=12.0.0"
},

@@ -32,7 +32,5 @@ "repository": {

"main": "bundles/ngx-hm-carousel.umd.js",
"module": "fesm5/ngx-hm-carousel.js",
"module": "fesm2015/ngx-hm-carousel.js",
"es2015": "fesm2015/ngx-hm-carousel.js",
"esm5": "esm5/ngx-hm-carousel.js",
"esm2015": "esm2015/ngx-hm-carousel.js",
"fesm5": "fesm5/ngx-hm-carousel.js",
"fesm2015": "fesm2015/ngx-hm-carousel.js",

@@ -42,2 +40,2 @@ "typings": "ngx-hm-carousel.d.ts",

"sideEffects": false
}
}

@@ -0,300 +1,24 @@

# NgxHmCarousel
[![NPM version](https://badge.fury.io/js/ngx-hm-carousel.svg)](http://badge.fury.io/js/ngx-hm-carousel)
# ngx-hm-carousel
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.0.
A lightweight carousel UI for Angular, support mobile touch with Hammerjs.
## Code scaffolding
Work with custom animation, and server-side-rendering.
Run `ng generate component component-name --project ngx-hm-carousel` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-hm-carousel`.
> Note: Don't forget to add `--project ngx-hm-carousel` or else it will be added to the default project in your `angular.json` file.
## Description
## Build
An Carousel that eazy to use with your custom template.
Run `ng build ngx-hm-carousel` to build the project. The build artifacts will be stored in the `dist/` directory.
This package is design by angular and hammerjs, if you use @angular/material, I strongly recommend you use this package.
## Publishing
Depend on [Hammerjs](https://hammerjs.github.io/) and [resize-observer-polyfill](https://github.com/que-etc/resize-observer-polyfill)
After building your library with `ng build ngx-hm-carousel`, go to the dist folder `cd dist/ngx-hm-carousel` and run `npm publish`.
Support Angular 6+ and Rxjs6+
## Running unit tests
## Example
https://alanzouhome.firebaseapp.com/package/NgxHmCarousel
Run `ng test ngx-hm-carousel` to execute the unit tests via [Karma](https://karma-runner.github.io).
![](https://res.cloudinary.com/dw7ecdxlp/image/upload/v1533206320/1533206262496_soounq.gif)
## Further help
![](https://i.imgur.com/SyyBSR9.gif)
## Stackblitz Example
[with custom animation](https://stackblitz.com/edit/ngx-hm-carousel-fade-example)
[custom-breakpoint](https://stackblitz.com/edit/ngx-hm-carousel-custom-breakpoint)
[change-show-number-dynamicly](https://stackblitz.com/edit/ngx-hm-carousel-change-show-number-dynamicly)
[disable-drag event](https://stackblitz.com/edit/ngx-hm-carousel-disable-drag)
[loop carousel](https://stackblitz.com/edit/ngx-hm-carousel-seprate-transition-class)
## Install
```ts
npm install --save ngx-hm-carousel
```
1. HammerJs
+ Import `hammerjs` in your main.ts or app.module.ts;
```ts
import 'hammerjs';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
...
...
```
+ Import `NgxHmCarouselModule` into your main AppModule or the module where you want use.
1. Module
```ts
import { NgxHmCarouselModule } from 'ngx-hm-carousel';
@NgModule({
imports: [
NgxHmCarouselModule
]
})
export class YourModule {}
```
2. HTML
```html
<ngx-hm-carousel
[(ngModel)]="currentIndex"
[show-num]="4"
[autoplay-speed]="speed"
[infinite]="infinite"
[drag-many]="true"
[aniTime]="200"
[data]="avatars"
class="carousel c-accent">
<section ngx-hm-carousel-container class="content">
<article class="item cursor-pointer"
ngx-hm-carousel-item
*ngFor="let avatar of avatars; let i = index"
[ngClass]="{'visible': currentIndex===i}">
<div class="img" (click)="click(i)"
[style.backgroundImage]="'url('+avatar.url+')'">
{{i}}
</div>
</article>
<ng-template #infiniteContainer></ng-template>
</section>
<!-- only using in infinite mode or autoplay mode, that will render with-->
<ng-template #carouselContent let-avatar let-i="index">
<article class="item cursor-pointer"
[ngClass]="{'visible': currentIndex===i}">
<div class="img" (click)="click(i)"
[style.backgroundImage]="'url('+avatar.url+')'">
{{i}}
</div>
</article>
</ng-template>
<ng-template #carouselPrev>
<div class="click-area">
<i class="material-icons">keyboard_arrow_left</i>
</div>
</ng-template>
<ng-template #carouselNext>
<div class="click-area">
<i class="material-icons">keyboard_arrow_right</i>
</div>
</ng-template>
<ng-template #carouselDot let-model>
<div class="ball bg-accent"
[class.visible]="model.index === model.currentIndex"></div>
</ng-template>
<ng-template #carouselProgress let-progress>
<div class="progress"></div>
</ng-template>
</ngx-hm-carousel>
```
2. TS
```ts
import { Component } from '@angular/core';
@Component({
selector: 'app-drag-one',
templateUrl: './drag-one.component.html',
styleUrls: ['./drag-one.component.scss']
})
export class DragOneComponent {
currentIndex = 0;
speed = 5000;
infinite = true;
direction = 'right';
directionToggle = true;
autoplay = true;
avatars = '1234567891234'.split('').map((x, i) => {
const num = i;
// const num = Math.floor(Math.random() * 1000);
return {
url: `https://picsum.photos/600/400/?${num}`,
title: `${num}`
};
});
constructor() { }
click(i) {
alert(`${i}`);
}
}
```
3. SCSS
* this project not contain any specile style, you can custom by yourself
```scss
$transition_time:.2s;
.carousel {
color:white;
.content {
display: flex;
.item {
width: 100%;
padding: .5em;
display: block;
opacity: 0.5;
transition: opacity 0.295s linear $transition_time;
&.visible {
opacity: 1;
}
.img {
width: 100%;
height: 400px;
display: block;
background-size: cover;
background-position: center;
}
}
}
.ball {
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
border: 2px solid;
opacity: 0.5;
&.visible {
opacity: 1;
}
}
.click-area {
width: 50px;
text-align: center;
i {
font-size: 3em;
}
}
}
```
[View more examples](https://alanzouhome.firebaseapp.com/package/NgxHmCarousel)
## Attribute
### Configuration (Input)
-------------
| Attribute | Necessary | Default value | Type | Location | Description |
| ------------------------ | -------- | --------------------- | --------------- | ------------------ | ------------------ |
| `autoplay` | no | false | `boolean` | ngx-hm-carousel | carousel auto play confing |
| `autoplay-speed` | no | 5000 (ms) | `number` | ngx-hm-carousel | auto play speed |
| `between-delay` | no | 8000 (ms) | `number` | ngx-hm-carousel | each auto play between time |
| `autoplay-direction` | no | 'right' |`'left'` or `'right'`| ngx-hm-carousel | auto play direction |
| `mourse-enable` | no | false | `boolean` | ngx-hm-carousel | is mourse moveover stop the auto play |
| `autoplay` | no | false | `boolean` | ngx-hm-carousel | carousel auto play confing |
| `[breakpoint]` | no | [] | `NgxHmCarouselBreakPointUp` | ngx-hm-carousel | switch show number with own logic like boostrap scss media-breakpoint-up |
| `show-num` | no | 1 | `number` or `'auto'` | ngx-hm-carousel | how many number items to show once |
| `scroll-num` | no | 1 | `number` | ngx-hm-carousel | how many number with each scroll |
| `drag-many` | no | false | `boolean` | ngx-hm-carousel | is can scroll many item once, simulate with scrollbar |
| `swipe-velocity` | no | 0.3 | `number` | ngx-hm-carousel | Minimal velocity required before recognizing, unit is in px per ms. |
| `pan-boundary` | no | 0.15 | `number` of `false` | ngx-hm-carousel| user move picture with the container width rate, when more than that rate, it will go to next or prev, set false will never move with distance rate |
| `align` | no | 'left' | `'left'` or `'right'` or `'center'` | ngx-hm-carousel | when show-num is bigger than 1, the first item align |
| `infinite` | no | false | `boolean` | ngx-hm-carousel | is the carousel will move loop |
| `data` | no | undefined | `any[]` | ngx-hm-carousel | the data you using with `*ngFor`, it need when infinite mode or autoplay mode |
| `aniTime` | no | 400 | `number` | ngx-hm-carousel | when `infinite` is true, the animation time with item |
| `aniClass` | no | 'transition' | `string` | ngx-hm-carousel | this class will add when carousel touch drap or click change index |
| `aniClassAuto` | no | 'aniClass' | `string` | ngx-hm-carousel | this class will add when carousel auto play |
| `disable-drag` | no | false | `boolean` | ngx-hm-carousel | disable drag event with touch and mouse pan moving|
| `not-follow-pan` | no | false | `boolean` | ngx-hm-carousel | disable when drag occur the child element will follow touch point. |
| `[(ngModel)]` | no | 0 | `number` | ngx-hm-carousel | You can bind ngModel with this carousel, it will two way binding with current index. You also can use `(ngModelChange)="change($event)"` with that. |
```ts
// the breakpoint interface
export interface NgxHmCarouselBreakPointUp {
width: number;
number: number;
}
```
### Other Directive
nomal click with effect the touch event, using this event replace that.
| Attribute | Location | Description |
| ----------------------------------------------- | ----------- | ----------- |
| `ngxHmCarouselDynamic` | any tag | It will dynamic load tag with element. |
This Directive will Dynamin load element with previous element and next element and current element.
* Example
```html
<section ngx-hm-carousel-container class="content">
<article class="item cursor-pointer"
ngx-hm-carousel-item
*ngFor="let item of data; let i = index">
<div *ngxHmCarouselDynamic="i; length: data.length; index: currentI"
class="img" [style.backgroundImage]="item.url">
</div>
</article>
</section>
```
1. first data is this data index
2. length is ths total length with array
3. index is now index
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc