@acorex/components 6.0.1 → 6.0.2

package/carousel/src/carousel-splidejs.class.ts

@@ -1,115 +0,0 @@
-import { AXCarousel, AXCarouselCore } from "./carousel.class";
-import { Splide as SS, Options } from '@splidejs/splide'
-
-
-declare var Splide: any;
-
-export class AXCarouselSplideJS implements AXCarouselCore {
-    constructor() {
-
-    }
-
-    _ref: SS;
-    _instance: AXCarousel;
-
-    mount(instance: AXCarousel): void {
-        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?.classList.add('splide__list');
-        //
-        this.rebuild();
-        this._instance.onItemsChanged.subscribe((items) => {
-            items?.value?.forEach(i => i.classList.add('splide__slide'));
-            this._ref.refresh();
-        });
-        this._instance.items = Array.from(listElement!.querySelectorAll<HTMLDivElement>('ax-carousel-item'));
-        this._instance.onOptionsChanged.subscribe(() => {
-            this.rebuild();
-        });
-    }
-
-    private _emitOnSlideChanged(i: number) {
-        const oldValue = this._instance.visibleIndex;
-        this._instance.visibleIndex = i;
-        this._instance.onSlideChanged.emit({
-            component: this,
-            htmlElement: this._instance.host,
-            value: this._instance.visibleIndex,
-            oldValue
-        });
-    }
-
-
-    private _getConfig(): Options {
-        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(): void {
-        this._ref.go('+');
-    }
-
-    last(): void {
-        this._ref.go(this._ref.length - 1);
-    }
-
-    prev(): void {
-        this._ref.go('-');
-    }
-
-    first(): void {
-        this._ref.go(0);
-    }
-
-    goToSlide(index: number): void {
-        this._ref.go(index);
-    }
-
-    goToPage(index: number): void {
-        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);
-    }
-}

package/carousel/src/carousel.class.ts

@@ -1,103 +0,0 @@
-import { EventEmitter, Injectable } from "@angular/core";
-import { AXValueChangedEvent } from "@acorex/components/common";
-
-
-@Injectable()
-export abstract class AXCarouselCore {
-    abstract next(): void;
-    abstract last(): void;
-    abstract prev(): void;
-    abstract first(): void;
-    abstract destroy(): void;
-    abstract goToSlide(index: number): void;
-    abstract goToPage(index: number): void;
-    abstract mount(instance: AXCarousel): void;
-    abstract rebuild(): void;
-}
-
-
-
-export interface AXCarousel {
-
-    onSlideChanged: EventEmitter<AXValueChangedEvent<number>>;
-    onOptionsChanged: EventEmitter<void>;
-
-    //
-    gap: number;
-    //
-    focusChange: EventEmitter<number>;
-    focus: number;
-    //
-    dragChange: EventEmitter<any>;
-    drag: any;
-    //
-    wheelChange: EventEmitter<boolean>;
-    wheel: boolean;
-    //
-    widthChange: EventEmitter<string>;
-    width: string;
-    //
-    fixedWidthChange: EventEmitter<string>;
-    fixedWidth: string;
-    //
-    heightChange: EventEmitter<string>;
-    height: string;
-    //
-    fixedHeightChange: EventEmitter<string>;
-    fixedHeight: string;
-    //
-    perPageChange: EventEmitter<number>;
-    perPage: number;
-    //
-    perMoveChange: EventEmitter<number>;
-    perMove: number;
-    //
-    heightRatioChange: EventEmitter<number>;
-    heightRatio: number;
-    //
-    autoplayChange: EventEmitter<boolean>;
-    autoplay: boolean;
-    //
-    intervalChange: EventEmitter<number>
-    interval: number;
-    //
-    centeredChange: EventEmitter<boolean>
-    centered: boolean;
-    //
-    verticalChange: EventEmitter<boolean>
-    vertical: boolean;
-    //
-    paddingChange: EventEmitter<string | number>
-    padding: string | number;
-    //
-    loopChange: EventEmitter<boolean>
-    loop: boolean;
-    //
-    snapChange: EventEmitter<boolean>
-    snap: boolean;
-    //
-    rewindChange: EventEmitter<boolean>
-    rewind: boolean;
-    //
-    autoWidthChange: EventEmitter<boolean>
-    autoWidth: boolean;
-    //
-    breakpoints: any;
-    //
-    visibleIndex: number;
-    //
-    onItemsChanged: EventEmitter<AXValueChangedEvent<HTMLDivElement[]>>
-    items: HTMLDivElement[];
-
-    rtl: boolean;
-
-    next(): void;
-    last(): void;
-    prev(): void;
-    first(): void;
-    goToSlide(index: number): void;
-    goToPage(index: number): void;
-
-    host: HTMLDivElement;
-}
-

package/carousel/src/carousel.component.html

@@ -1,11 +0,0 @@
-<div class="ax-carousel-list-container">
-    <div class="ax-carousel-list">
-        <ng-content select="ax-carousel-item">
-        </ng-content>
-    </div>
-    <ng-content select="ax-carousel-arrows">
-    </ng-content>
-</div>
-
-<ng-content select="ax-carousel-pager">
-</ng-content>

package/carousel/src/carousel.component.ts

@@ -1,477 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, Input, NgZone, Output, EventEmitter } from '@angular/core';
-import { AXValueChangedEvent } from '@acorex/components/common';
-import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import { AXCarousel, AXCarouselCore } from './carousel.class';
-import { AXCarouselSplideJS } from './carousel-splidejs.class';
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-
-@Component({
-    selector: 'ax-carousel',
-    templateUrl: './carousel.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-carousel' },
-    providers: [{
-        provide: AXCarouselCore,
-        useClass: AXCarouselSplideJS
-    }]
-})
-export class AXCarouselComponent extends AXBaseComponentMixin implements AXCarousel {
-
-
-    constructor(
-        elementRef: ElementRef,
-        private zone: NgZone,
-        cdr: ChangeDetectorRef,
-        private core: AXCarouselCore,
-    ) {
-        super(elementRef, cdr);
-    }
-
-
-    @Output()
-    onOptionsChanged: EventEmitter<void> = new EventEmitter<void>();
-
-    @Output()
-    public onSlideChanged: EventEmitter<AXValueChangedEvent<number>> = new EventEmitter<AXValueChangedEvent<number>>();
-
-
-
-    @Output()
-    public perMoveChange: EventEmitter<number> = new EventEmitter<number>();
-
-    private _perMove: number = 1
-    @Input()
-    public get perMove(): number {
-        return this._perMove;
-    }
-    public set perMove(v: number) {
-        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();
-        }
-    }
-
-    @Output()
-    public focusChange: EventEmitter<number> = new EventEmitter<number>();
-
-    private _focus: number = 0;
-
-    @Input()
-    public get focus(): number {
-        return this._focus;
-    }
-    public set focus(v: number) {
-        if (v != this._focus) {
-            this._focus = v;
-            this.paddingChange.emit(v);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-    @Output()
-    public breakpointsChange: EventEmitter<any> = new EventEmitter<any>();
-
-    private _breakpoints: any;
-
-    @Input()
-    public get breakpoints(): any {
-        return this._breakpoints;
-    }
-    public set breakpoints(v: any) {
-        if (v != this._breakpoints) {
-            this._breakpoints = v;
-            this.paddingChange.emit(v);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-
-
-
-    @Output()
-    public heightRatioChange: EventEmitter<number> = new EventEmitter<number>();
-
-    private _heightRatio: number = 0;
-
-    @Input()
-    public get heightRatio(): number {
-        return this._heightRatio;
-    }
-    public set heightRatio(v: number) {
-        if (v != this._heightRatio) {
-            this._heightRatio = v;
-            this.paddingChange.emit(v);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-
-    @Output()
-    public heightChange: EventEmitter<string> = new EventEmitter<string>();
-
-    private _height: string = 'auto'
-    @Input()
-    public get height(): string {
-        return this._height;
-    }
-    public set height(v: string) {
-        const val = v;
-        if (val != this._height) {
-            this._height = val;
-            this.heightChange.emit(this.height);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-    @Output()
-    public fixedHeightChange: EventEmitter<string> = new EventEmitter<string>();
-
-    private _fixedHeight: string = ''
-    @Input()
-    public get fixedHeight(): string {
-        return this._fixedHeight;
-    }
-    public set fixedHeight(v: string) {
-        const val = v;
-        if (val != this._fixedHeight) {
-            this._fixedHeight = val;
-            this.fixedHeightChange.emit(this.fixedHeight);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-
-
-    @Output()
-    public widthChange: EventEmitter<string> = new EventEmitter<string>();
-
-    private _width: string = 'fit-content'
-    @Input()
-    public get width(): string {
-        return this._width;
-    }
-    public set width(v: string) {
-        const val = v;
-        if (val != this._width) {
-            this._width = val;
-            this.widthChange.emit(this.width);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-    @Output()
-    public fixedWidthChange: EventEmitter<string> = new EventEmitter<string>();
-
-    private _fixedWidth: string = ''
-    @Input()
-    public get fixedWidth(): string {
-        return this._fixedWidth;
-    }
-    public set fixedWidth(v: string) {
-        const val = v;
-        if (val != this._fixedWidth) {
-            this._fixedWidth = val;
-            this.fixedWidthChange.emit(this.fixedWidth);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-    @Output()
-    public perPageChange: EventEmitter<number> = new EventEmitter<number>();
-
-    private _perPage: number = 1;
-    @Input()
-    public get perPage(): number {
-        return this._perPage;
-    }
-    public set perPage(v: number) {
-        const val = v;
-        if (val != this._perPage) {
-            this._perPage = val;
-            this.perPageChange.emit(this.perPage);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-
-    @Input()
-    gap: number = 10;
-
-    @Output()
-    public autoplayChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    private _autoplay: boolean = false;
-    @Input()
-    public get autoplay(): boolean {
-        return this._autoplay;
-    }
-    public set autoplay(v: boolean) {
-        const val = coerceBooleanProperty(v);
-        if (val != this._autoplay) {
-            this._autoplay = val;
-            this.autoplayChange.emit(this.autoplay);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-    @Output()
-    public snapChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    private _snap: boolean = false;
-    @Input()
-    public get snap(): boolean {
-        return this._snap;
-    }
-    public set snap(v: boolean) {
-        const val = coerceBooleanProperty(v);
-        if (val != this._snap) {
-            this._snap = val;
-            this.snapChange.emit(this.snap);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-    @Output()
-    public autoWidthChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    private _autoWidth: boolean = true;
-    @Input()
-    public get autoWidth(): boolean {
-        return this._autoWidth;
-    }
-    public set autoWidth(v: boolean) {
-        const val = coerceBooleanProperty(v);
-        if (val != this._autoWidth) {
-            this._autoWidth = val;
-            this.autoWidthChange.emit(this.autoWidth);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-    @Output()
-    public dragChange: EventEmitter<any> = new EventEmitter<any>();
-
-    private _drag: any = true;
-    @Input()
-    public get drag(): any {
-        return this._drag;
-    }
-    public set drag(v: any) {
-        const val = v;
-        if (val != this._drag) {
-            this._drag = val;
-            this.dragChange.emit(this.drag);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-    @Output()
-    public wheelChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    private _wheel: boolean = false;
-    @Input()
-    public get wheel(): boolean {
-        return this._wheel;
-    }
-    public set wheel(v: boolean) {
-        const val = coerceBooleanProperty(v);
-        if (val != this._wheel) {
-            this._wheel = val;
-            this.wheelChange.emit(this.wheel);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-    @Output()
-    public intervalChange: EventEmitter<number> = new EventEmitter<number>();
-
-    private _interval: number = 3000
-    @Input()
-    public get interval(): number {
-        return this._interval;
-    }
-    public set interval(v: number) {
-        const val = coerceNumberProperty(v);
-        if (val != this._interval) {
-            this.intervalChange.emit(val);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-
-
-    @Output()
-    public paddingChange: EventEmitter<number | string> = new EventEmitter<number | string>();
-
-    private _padding: number | string = 0
-    @Input()
-    public get padding(): number | string {
-        return this._padding;
-    }
-    public set padding(v: number | string) {
-        if (v != this._padding) {
-            this._padding = v;
-            this.paddingChange.emit(v);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-
-
-    @Output()
-    public centeredChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    private _centered: boolean = false;
-    @Input()
-    public get centered(): boolean {
-        return this._centered;
-    }
-    public set centered(v: boolean) {
-        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();
-        }
-    }
-
-    @Output()
-    public verticalChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    private _vertical: boolean = false;
-    @Input()
-    public get vertical(): boolean {
-        return this._vertical;
-    }
-    public set vertical(v: boolean) {
-        const val = coerceBooleanProperty(v);
-        if (val != this._vertical) {
-            this._vertical = val;
-            this.verticalChange.emit(this.vertical);
-            this.onOptionsChanged.emit();
-        }
-    }
-
-    @Output()
-    public loopChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    private _loop: boolean = false;
-    @Input()
-    public get loop(): boolean {
-        return this._loop;
-    }
-    public set loop(v: boolean) {
-        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();
-        }
-    }
-
-    @Output()
-    public rewindChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    private _rewind: boolean = false;
-    @Input()
-    public get rewind(): boolean {
-        return this._rewind;
-    }
-    public set rewind(v: boolean) {
-        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();
-        }
-    }
-
-
-
-    private _visibleIndex: number = 0;
-    public get visibleIndex(): number {
-        return this._visibleIndex;
-    }
-    public set visibleIndex(v: number) {
-        this._visibleIndex = v;
-    }
-
-
-
-    @Output()
-    public onItemsChanged: EventEmitter<AXValueChangedEvent<HTMLDivElement[]>> = new EventEmitter<AXValueChangedEvent<HTMLDivElement[]>>();
-
-    private _items: HTMLDivElement[] = [];
-    public get items(): HTMLDivElement[] {
-        return this._items ?? [];
-    }
-    public set items(v: HTMLDivElement[]) {
-        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(): void {
-        this.core.next();
-    }
-
-    last(): void {
-        this.core.last();
-    }
-
-    prev(): void {
-        this.core.prev();
-    }
-
-    first(): void {
-        this.core.first();
-    }
-
-    goToSlide(index: number): void {
-        this.core.goToSlide(index);
-    }
-
-    goToPage(index: number): void {
-        this.core.goToPage(index);
-    }
-
-
-    get host(): HTMLDivElement {
-        return this._getHostElement();
-    }
-
-
-    onDestroy() {
-        this.core.destroy();
-    }
-}