@acorex/components 5.7.0 → 6.0.0

package/fesm2015/acorex-components-carousel.mjs

@@ -0,0 +1,726 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, Input, Optional, NgModule } from '@angular/core';
+import { AXBaseComponentMixin } from '@acorex/components/mixin';
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class AXCarouselCore {
+}
+AXCarouselCore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselCore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXCarouselCore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselCore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselCore, decorators: [{
+            type: Injectable
+        }] });
+
+class AXCarouselSplideJS {
+    constructor() {
+    }
+    mount(instance) {
+        this._instance = instance;
+        this._instance.host.classList.add('splide');
+        this._instance.host.querySelector('.ax-carousel-list-container').classList.add('splide__track');
+        const listElement = this._instance.host.querySelector('.ax-carousel-list');
+        listElement === null || listElement === void 0 ? void 0 : listElement.classList.add('splide__list');
+        //
+        this.rebuild();
+        this._instance.onItemsChanged.subscribe((items) => {
+            var _a;
+            (_a = items === null || items === void 0 ? void 0 : items.value) === null || _a === void 0 ? void 0 : _a.forEach(i => i.classList.add('splide__slide'));
+            this._ref.refresh();
+        });
+        this._instance.items = Array.from(listElement.querySelectorAll('ax-carousel-item'));
+        this._instance.onOptionsChanged.subscribe(() => {
+            this.rebuild();
+        });
+    }
+    _emitOnSlideChanged(i) {
+        const oldValue = this._instance.visibleIndex;
+        this._instance.visibleIndex = i;
+        this._instance.onSlideChanged.emit({
+            component: this,
+            htmlElement: this._instance.host,
+            value: this._instance.visibleIndex,
+            oldValue
+        });
+    }
+    _getConfig() {
+        return {
+            autoplay: this._instance.autoplay,
+            type: this._instance.loop && !this._instance.rewind ? 'loop' : 'slide',
+            rewind: this._instance.rewind,
+            gap: this._instance.gap,
+            perPage: this._instance.perPage,
+            perMove: this._instance.perMove,
+            start: this._instance.visibleIndex,
+            interval: this._instance.interval,
+            direction: this._instance.vertical ? 'ttb' : (this._instance.rtl ? 'rtl' : 'ltr'),
+            arrows: false,
+            pagination: false,
+            padding: this._instance.padding,
+            autoWidth: this._instance.autoWidth,
+            focus: this._instance.centered ? 'center' : this._instance.focus,
+            height: this._instance.height,
+            fixedHeight: this._instance.fixedHeight,
+            heightRatio: this._instance.heightRatio,
+            wheel: this._instance.wheel,
+            width: this._instance.width,
+            fixedWidth: this._instance.fixedWidth,
+            drag: this._instance.drag,
+            snap: this._instance.snap,
+            breakpoints: this._instance.breakpoints,
+        };
+    }
+    next() {
+        this._ref.go('+');
+    }
+    last() {
+        this._ref.go(this._ref.length - 1);
+    }
+    prev() {
+        this._ref.go('-');
+    }
+    first() {
+        this._ref.go(0);
+    }
+    goToSlide(index) {
+        this._ref.go(index);
+    }
+    goToPage(index) {
+        this._ref.go(`>${index}`);
+    }
+    destroy() {
+        this._ref.destroy();
+    }
+    rebuild() {
+        if (this._ref) {
+            this._ref.off('move');
+            this._ref.destroy();
+        }
+        //
+        this._ref = new Splide(this._instance.host, this._getConfig());
+        this._ref.mount();
+        this._ref.on('move', this._emitOnSlideChanged.bind(this));
+        this._emitOnSlideChanged(this._instance.visibleIndex);
+    }
+}
+
+class AXCarouselComponent extends AXBaseComponentMixin {
+    constructor(elementRef, zone, cdr, core) {
+        super(elementRef, cdr);
+        this.zone = zone;
+        this.core = core;
+        this.onOptionsChanged = new EventEmitter();
+        this.onSlideChanged = new EventEmitter();
+        this.perMoveChange = new EventEmitter();
+        this._perMove = 1;
+        this.focusChange = new EventEmitter();
+        this._focus = 0;
+        this.breakpointsChange = new EventEmitter();
+        this.heightRatioChange = new EventEmitter();
+        this._heightRatio = 0;
+        this.heightChange = new EventEmitter();
+        this._height = 'auto';
+        this.fixedHeightChange = new EventEmitter();
+        this._fixedHeight = '';
+        this.widthChange = new EventEmitter();
+        this._width = 'fit-content';
+        this.fixedWidthChange = new EventEmitter();
+        this._fixedWidth = '';
+        this.perPageChange = new EventEmitter();
+        this._perPage = 1;
+        this.gap = 10;
+        this.autoplayChange = new EventEmitter();
+        this._autoplay = false;
+        this.snapChange = new EventEmitter();
+        this._snap = false;
+        this.autoWidthChange = new EventEmitter();
+        this._autoWidth = true;
+        this.dragChange = new EventEmitter();
+        this._drag = true;
+        this.wheelChange = new EventEmitter();
+        this._wheel = false;
+        this.intervalChange = new EventEmitter();
+        this._interval = 3000;
+        this.paddingChange = new EventEmitter();
+        this._padding = 0;
+        this.centeredChange = new EventEmitter();
+        this._centered = false;
+        this.verticalChange = new EventEmitter();
+        this._vertical = false;
+        this.loopChange = new EventEmitter();
+        this._loop = false;
+        this.rewindChange = new EventEmitter();
+        this._rewind = false;
+        this._visibleIndex = 0;
+        this.onItemsChanged = new EventEmitter();
+        this._items = [];
+    }
+    get perMove() {
+        return this._perMove;
+    }
+    set perMove(v) {
+        const val = Math.max(1, coerceNumberProperty(v));
+        if (val != this._perMove) {
+            this._perMove = val;
+            if (this._perMove > 1) {
+                this._vertical = false;
+            }
+            this.perMoveChange.emit(this.perMove);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get focus() {
+        return this._focus;
+    }
+    set focus(v) {
+        if (v != this._focus) {
+            this._focus = v;
+            this.paddingChange.emit(v);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get breakpoints() {
+        return this._breakpoints;
+    }
+    set breakpoints(v) {
+        if (v != this._breakpoints) {
+            this._breakpoints = v;
+            this.paddingChange.emit(v);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get heightRatio() {
+        return this._heightRatio;
+    }
+    set heightRatio(v) {
+        if (v != this._heightRatio) {
+            this._heightRatio = v;
+            this.paddingChange.emit(v);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get height() {
+        return this._height;
+    }
+    set height(v) {
+        const val = v;
+        if (val != this._height) {
+            this._height = val;
+            this.heightChange.emit(this.height);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get fixedHeight() {
+        return this._fixedHeight;
+    }
+    set fixedHeight(v) {
+        const val = v;
+        if (val != this._fixedHeight) {
+            this._fixedHeight = val;
+            this.fixedHeightChange.emit(this.fixedHeight);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get width() {
+        return this._width;
+    }
+    set width(v) {
+        const val = v;
+        if (val != this._width) {
+            this._width = val;
+            this.widthChange.emit(this.width);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get fixedWidth() {
+        return this._fixedWidth;
+    }
+    set fixedWidth(v) {
+        const val = v;
+        if (val != this._fixedWidth) {
+            this._fixedWidth = val;
+            this.fixedWidthChange.emit(this.fixedWidth);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get perPage() {
+        return this._perPage;
+    }
+    set perPage(v) {
+        const val = v;
+        if (val != this._perPage) {
+            this._perPage = val;
+            this.perPageChange.emit(this.perPage);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get autoplay() {
+        return this._autoplay;
+    }
+    set autoplay(v) {
+        const val = coerceBooleanProperty(v);
+        if (val != this._autoplay) {
+            this._autoplay = val;
+            this.autoplayChange.emit(this.autoplay);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get snap() {
+        return this._snap;
+    }
+    set snap(v) {
+        const val = coerceBooleanProperty(v);
+        if (val != this._snap) {
+            this._snap = val;
+            this.snapChange.emit(this.snap);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get autoWidth() {
+        return this._autoWidth;
+    }
+    set autoWidth(v) {
+        const val = coerceBooleanProperty(v);
+        if (val != this._autoWidth) {
+            this._autoWidth = val;
+            this.autoWidthChange.emit(this.autoWidth);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get drag() {
+        return this._drag;
+    }
+    set drag(v) {
+        const val = v;
+        if (val != this._drag) {
+            this._drag = val;
+            this.dragChange.emit(this.drag);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get wheel() {
+        return this._wheel;
+    }
+    set wheel(v) {
+        const val = coerceBooleanProperty(v);
+        if (val != this._wheel) {
+            this._wheel = val;
+            this.wheelChange.emit(this.wheel);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get interval() {
+        return this._interval;
+    }
+    set interval(v) {
+        const val = coerceNumberProperty(v);
+        if (val != this._interval) {
+            this.intervalChange.emit(val);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get padding() {
+        return this._padding;
+    }
+    set padding(v) {
+        if (v != this._padding) {
+            this._padding = v;
+            this.paddingChange.emit(v);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get centered() {
+        return this._centered;
+    }
+    set centered(v) {
+        const val = coerceBooleanProperty(v);
+        if (val != this._centered) {
+            this._centered = val;
+            if (this._centered) {
+                this._rewind = false;
+            }
+            this.centeredChange.emit(this.centered);
+            this.rewindChange.emit(this.rewind);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get vertical() {
+        return this._vertical;
+    }
+    set vertical(v) {
+        const val = coerceBooleanProperty(v);
+        if (val != this._vertical) {
+            this._vertical = val;
+            this.verticalChange.emit(this.vertical);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get loop() {
+        return this._loop;
+    }
+    set loop(v) {
+        const val = coerceBooleanProperty(v);
+        if (val != this._loop) {
+            this._loop = val;
+            if (this._loop) {
+                this._rewind = false;
+            }
+            this.loopChange.emit(this.loop);
+            this.rewindChange.emit(this.rewind);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get rewind() {
+        return this._rewind;
+    }
+    set rewind(v) {
+        const val = coerceBooleanProperty(v);
+        if (val != this._rewind) {
+            this._rewind = val;
+            if (this._rewind) {
+                this._loop = false;
+                this._centered = false;
+            }
+            this.rewindChange.emit(this.rewind);
+            this.loopChange.emit(this.loop);
+            this.centeredChange.emit(this.centered);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get visibleIndex() {
+        return this._visibleIndex;
+    }
+    set visibleIndex(v) {
+        this._visibleIndex = v;
+    }
+    get items() {
+        var _a;
+        return (_a = this._items) !== null && _a !== void 0 ? _a : [];
+    }
+    set items(v) {
+        const oldValue = this.items.slice();
+        this._items = v;
+        this.onItemsChanged.emit({
+            component: this,
+            htmlElement: this._getHostElement(),
+            oldValue,
+            value: this.items
+        });
+    }
+    onViewInit() {
+        this.core.mount(this);
+    }
+    next() {
+        this.core.next();
+    }
+    last() {
+        this.core.last();
+    }
+    prev() {
+        this.core.prev();
+    }
+    first() {
+        this.core.first();
+    }
+    goToSlide(index) {
+        this.core.goToSlide(index);
+    }
+    goToPage(index) {
+        this.core.goToPage(index);
+    }
+    get host() {
+        return this._getHostElement();
+    }
+    onDestroy() {
+        this.core.destroy();
+    }
+}
+AXCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: AXCarouselCore }], target: i0.ɵɵFactoryTarget.Component });
+AXCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AXCarouselComponent, selector: "ax-carousel", inputs: { perMove: "perMove", focus: "focus", breakpoints: "breakpoints", heightRatio: "heightRatio", height: "height", fixedHeight: "fixedHeight", width: "width", fixedWidth: "fixedWidth", perPage: "perPage", gap: "gap", autoplay: "autoplay", snap: "snap", autoWidth: "autoWidth", drag: "drag", wheel: "wheel", interval: "interval", padding: "padding", centered: "centered", vertical: "vertical", loop: "loop", rewind: "rewind" }, outputs: { onOptionsChanged: "onOptionsChanged", onSlideChanged: "onSlideChanged", perMoveChange: "perMoveChange", focusChange: "focusChange", breakpointsChange: "breakpointsChange", heightRatioChange: "heightRatioChange", heightChange: "heightChange", fixedHeightChange: "fixedHeightChange", widthChange: "widthChange", fixedWidthChange: "fixedWidthChange", perPageChange: "perPageChange", autoplayChange: "autoplayChange", snapChange: "snapChange", autoWidthChange: "autoWidthChange", dragChange: "dragChange", wheelChange: "wheelChange", intervalChange: "intervalChange", paddingChange: "paddingChange", centeredChange: "centeredChange", verticalChange: "verticalChange", loopChange: "loopChange", rewindChange: "rewindChange", onItemsChanged: "onItemsChanged" }, host: { classAttribute: "ax-carousel" }, providers: [{
+            provide: AXCarouselCore,
+            useClass: AXCarouselSplideJS
+        }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-carousel-list-container\">\r\n    <div class=\"ax-carousel-list\">\r\n        <ng-content select=\"ax-carousel-item\">\r\n        </ng-content>\r\n    </div>\r\n    <ng-content select=\"ax-carousel-arrows\">\r\n    </ng-content>\r\n</div>\r\n\r\n<ng-content select=\"ax-carousel-pager\">\r\n</ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-carousel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-carousel' }, providers: [{
+                            provide: AXCarouselCore,
+                            useClass: AXCarouselSplideJS
+                        }], template: "<div class=\"ax-carousel-list-container\">\r\n    <div class=\"ax-carousel-list\">\r\n        <ng-content select=\"ax-carousel-item\">\r\n        </ng-content>\r\n    </div>\r\n    <ng-content select=\"ax-carousel-arrows\">\r\n    </ng-content>\r\n</div>\r\n\r\n<ng-content select=\"ax-carousel-pager\">\r\n</ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: AXCarouselCore }]; }, propDecorators: { onOptionsChanged: [{
+                type: Output
+            }], onSlideChanged: [{
+                type: Output
+            }], perMoveChange: [{
+                type: Output
+            }], perMove: [{
+                type: Input
+            }], focusChange: [{
+                type: Output
+            }], focus: [{
+                type: Input
+            }], breakpointsChange: [{
+                type: Output
+            }], breakpoints: [{
+                type: Input
+            }], heightRatioChange: [{
+                type: Output
+            }], heightRatio: [{
+                type: Input
+            }], heightChange: [{
+                type: Output
+            }], height: [{
+                type: Input
+            }], fixedHeightChange: [{
+                type: Output
+            }], fixedHeight: [{
+                type: Input
+            }], widthChange: [{
+                type: Output
+            }], width: [{
+                type: Input
+            }], fixedWidthChange: [{
+                type: Output
+            }], fixedWidth: [{
+                type: Input
+            }], perPageChange: [{
+                type: Output
+            }], perPage: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], autoplayChange: [{
+                type: Output
+            }], autoplay: [{
+                type: Input
+            }], snapChange: [{
+                type: Output
+            }], snap: [{
+                type: Input
+            }], autoWidthChange: [{
+                type: Output
+            }], autoWidth: [{
+                type: Input
+            }], dragChange: [{
+                type: Output
+            }], drag: [{
+                type: Input
+            }], wheelChange: [{
+                type: Output
+            }], wheel: [{
+                type: Input
+            }], intervalChange: [{
+                type: Output
+            }], interval: [{
+                type: Input
+            }], paddingChange: [{
+                type: Output
+            }], padding: [{
+                type: Input
+            }], centeredChange: [{
+                type: Output
+            }], centered: [{
+                type: Input
+            }], verticalChange: [{
+                type: Output
+            }], vertical: [{
+                type: Input
+            }], loopChange: [{
+                type: Output
+            }], loop: [{
+                type: Input
+            }], rewindChange: [{
+                type: Output
+            }], rewind: [{
+                type: Input
+            }], onItemsChanged: [{
+                type: Output
+            }] } });
+
+class AXCarouselArrowsComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr, parent) {
+        super(elementRef, cdr);
+        this.parent = parent;
+        this.onNextClick = new EventEmitter();
+        this.onPrevClick = new EventEmitter();
+    }
+    _handlePrevClick(e) {
+        e.stopPropagation();
+        this.parent.prev();
+    }
+    _handleNextClick(e) {
+        e.stopPropagation();
+        this.parent.next();
+    }
+}
+AXCarouselArrowsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselArrowsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXCarouselComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXCarouselArrowsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AXCarouselArrowsComponent, selector: "ax-carousel-arrows", inputs: { class: "class" }, outputs: { onNextClick: "onNextClick", onPrevClick: "onPrevClick" }, host: { classAttribute: "ax-carousel-arrows" }, usesInheritance: true, ngImport: i0, template: `
+    <button
+      class="ax-carousel-arrow-prev"
+      [ngClass]="{ 'ax-vertical-arrow ax-top-arrow': this.parent.vertical }"
+      (click)="_handlePrevClick($event)"
+    >
+      <i class="ax-ic ax-ic-chevron ax-block rtl:ax-rotate-180 {{ class }}"></i>
+    </button>
+    <button
+      class="ax-carousel-arrow-next"
+      [ngClass]="{ 'ax-vertical-arrow ax-bottom-arrow': this.parent.vertical }"
+      (click)="_handleNextClick($event)"
+    >
+      <i
+        class="ax-ic ax-ic-chevron ax-block ax-rotate-180 rtl:ax-rotate-0 {{
+          class
+        }}"
+      ></i>
+    </button>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselArrowsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-carousel-arrows',
+                    template: `
+    <button
+      class="ax-carousel-arrow-prev"
+      [ngClass]="{ 'ax-vertical-arrow ax-top-arrow': this.parent.vertical }"
+      (click)="_handlePrevClick($event)"
+    >
+      <i class="ax-ic ax-ic-chevron ax-block rtl:ax-rotate-180 {{ class }}"></i>
+    </button>
+    <button
+      class="ax-carousel-arrow-next"
+      [ngClass]="{ 'ax-vertical-arrow ax-bottom-arrow': this.parent.vertical }"
+      (click)="_handleNextClick($event)"
+    >
+      <i
+        class="ax-ic ax-ic-chevron ax-block ax-rotate-180 rtl:ax-rotate-0 {{
+          class
+        }}"
+      ></i>
+    </button>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-carousel-arrows' },
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXCarouselComponent, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { class: [{
+                type: Input
+            }], onNextClick: [{
+                type: Output
+            }], onPrevClick: [{
+                type: Output
+            }] } });
+
+class AXCarouselItemComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+}
+AXCarouselItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXCarouselItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AXCarouselItemComponent, selector: "ax-carousel-item", host: { classAttribute: "ax-carousel-item" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-carousel-item',
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-carousel-item' }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+class AXCarouselPagerComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr, _parent) {
+        super(elementRef, cdr);
+        this.cdr = cdr;
+        this._parent = _parent;
+        this._visibleIndex = 0;
+        this._pageIndex = 0;
+        this._size = 1;
+        this._dots = [];
+        this._subs = [];
+        _parent.perPageChange.subscribe(c => {
+            this._size = c;
+            this._generateDots();
+        });
+        _parent.onSlideChanged.subscribe((c) => {
+            this._visibleIndex = c.value;
+            this._generateDots();
+        });
+        _parent.onItemsChanged.subscribe(c => {
+            this._generateDots();
+        });
+    }
+    onViewInit() {
+        this._size = this._parent.perPage;
+        this._visibleIndex = this._parent.visibleIndex;
+        this._generateDots();
+    }
+    _generateDots() {
+        this._dots = [...Array(Math.ceil(this._parent.items.length / this._size)).keys()];
+        this._setPageIndex(this._findPageIndex(this._visibleIndex));
+        this.cdr.detectChanges();
+    }
+    _handleClick(e, index) {
+        e.stopPropagation();
+        this._setPageIndex(index);
+        this._parent.goToPage(index);
+    }
+    _setPageIndex(index) {
+        this._pageIndex = index;
+        this.cdr.detectChanges();
+    }
+    _findPageIndex(slideIndex) {
+        return Math.min(Math.ceil(slideIndex / this._size), this._dots.length - 1);
+    }
+    onDestroy() {
+        this._subs.forEach(s => {
+            s.unsubscribe();
+        });
+    }
+}
+AXCarouselPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselPagerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXCarouselComponent }], target: i0.ɵɵFactoryTarget.Component });
+AXCarouselPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AXCarouselPagerComponent, selector: "ax-carousel-pager", host: { classAttribute: "ax-carousel-pager" }, usesInheritance: true, ngImport: i0, template: `
+        <button *ngFor="let d of _dots;let i=index" [class.ax-state-active]="i==_pageIndex" (click)="_handleClick($event,i)">
+        </button>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselPagerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-carousel-pager',
+                    template: `
+        <button *ngFor="let d of _dots;let i=index" [class.ax-state-active]="i==_pageIndex" (click)="_handleClick($event,i)">
+        </button>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-carousel-pager' }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXCarouselComponent }]; } });
+
+const COMPONENT = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
+const MODULES = [CommonModule];
+class AXCarouselModule {
+}
+AXCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselModule, declarations: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent], imports: [CommonModule], exports: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent] });
+AXCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselModule, imports: [MODULES] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXCarouselModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCarouselSplideJS };
+//# sourceMappingURL=acorex-components-carousel.mjs.map