@acorex/components 5.8.0 → 6.0.1

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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1,11 @@
+<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

@@ -0,0 +1,477 @@
+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();
+    }
+}