@acorex/components 5.0.5 → 5.0.9

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

@@ -1,104 +0,0 @@
-import { AXCarousel, AXCarouselCore } from "./carousel.class";
-import { Splide as SS, SplideOptions } 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(): SplideOptions {
-        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.pageSize,
-            perMove: 1,
-            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: true,
-            focus: this._instance.centered ? 'center' : false,
-        }
-    }
-
-
-
-    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/src/lib/carousel/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/src/lib/carousel/carousel.component.ts

@@ -1,273 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, ContentChildren, QueryList, Input, NgZone, Output, EventEmitter, ViewChild, ContentChild } from '@angular/core';
-import { AXBaseComponentMixin, AXValueChangedEvent } from '../base';
-import { coerceBooleanProperty, coerceCssPixelValue, coerceNumberProperty } from '@angular/cdk/coercion';
-import { AXCarousel, AXCarouselCore } from './carousel.class';
-import { AXCarouselSplideJS } from './carousel-splidejs.class';
-
-@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 pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
-
-    private _pageSize: number = 1
-    @Input()
-    public get pageSize(): number {
-        return this._pageSize;
-    }
-    public set pageSize(v: number) {
-        const val = Math.max(1, coerceNumberProperty(v));
-        if (val != this._pageSize) {
-            this._pageSize = val;
-            if (this._pageSize > 1) {
-                this._vertical = false;
-            }
-            this.pageSizeChange.emit(this.pageSize);
-            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 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();
-    }
-}

package/src/lib/carousel/carousel.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXCarouselComponent } from './carousel.component';
-import { AXCarouselItemComponent } from './carousel-item.component';
-import { AXCarouselArrowsComponent } from './carousel-arrows.component';
-import { AXCarouselPagerComponent } from './carousel-pager.component';
-import { AXCarouselSplideJS } from './carousel-splidejs.class';
-import { AXCarousel, AXCarouselCore } from './carousel.class';
-
-const COMPONENT = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
-const MODULES = [CommonModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXCarouselModule { }

package/src/lib/checkbox/checkbox.component.html

@@ -1,15 +0,0 @@
-<div class="ax-flex ax-items-start ax-checkbox-container">
-    <div class="ax-flex ax-items-center ax-h-5">
-        <input [id]="_id" class="ax-checkbox" type="checkbox" [(ngModel)]="value" [checked]="value" [disabled]="disabled" [readonly]="readonly" [tabindex]="tabIndex" (focus)="_emitOnFocusEvent($event)" (blur)="_emitOnBlurEvent($event)">
-    </div>
-    <div class="ax-ms-2 ax-text-sm ax-flex ax-flex-col">
-        <label [for]="_id" class="ax-font-medium ax-text-light-700">
-            <ng-content></ng-content><br>
-        </label>
-    </div>
-    <!-- <div class="ax-ms-3 ax-text-sm">
-     
-    </div> -->
-</div>
-<ng-content select="ax-validation-rule">
-</ng-content>

package/src/lib/checkbox/checkbox.component.ts

@@ -1,43 +0,0 @@
-import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Input } from '@angular/core';
-import { AXBaseValueComponentMixin } from '../base';
-
-@Component({
-  selector: 'ax-check-box',
-  templateUrl: './checkbox.component.html',
-  inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'value'],
-  outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AXCheckBoxComponent extends AXBaseValueComponentMixin {
-
-  //TODO: apply it
-  @Input()
-  indeterminate: boolean = false;
-
-
-
-  _id: string = `ax-checkbox-${Math.floor(Math.random() * 1000)}`
-
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-
-
-  onInit() {
-    super.onInit();
-    if (!this.indeterminate && this.value == null) {
-      this.value = false;
-    }
-  }
-
-
-  _handleOnClickEvent(e: MouseEvent) {
-    if (this.readonly || this.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }
-
-
-}

package/src/lib/checkbox/checkbox.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { AXCheckBoxComponent } from './checkbox.component';
-@NgModule({
-  declarations: [AXCheckBoxComponent],
-  imports: [CommonModule, FormsModule],
-  exports: [AXCheckBoxComponent],
-  providers: [],
-})
-export class AXCheckBoxModule {}

package/src/lib/datalist/datalist.component.html

@@ -1,35 +0,0 @@
-<div class="ax-list-items-container ax-default ax-vertical" (scroll)="_handleListScroll($event)" #container>
-    <ng-container *ngFor="let item of displayItems;trackBy : _trackByFunction">
-        <ng-container *ngIf="itemTemplate; else elseTemplate">
-            <div class="ax-list-item" (click)="_handleOnItemClick($event,item)">
-                <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item,direction:direction}">
-                </ng-container>
-            </div>
-        </ng-container>
-        <ng-template #elseTemplate>
-            <div class="ax-list-item" (click)="_handleOnItemClick($event,item)">
-                {{ item ? _getItemDisplayTextTemplte(item) : 'Loading...'}}
-            </div>
-        </ng-template>
-    </ng-container>
-    <ng-container *ngIf="(displayItems==null || displayItems.length==0) && !isLoading">
-        <ng-container *ngIf="emptyTemplate; else elseEmptyTemplate">
-            <ng-container *ngTemplateOutlet="elseEmptyTemplate">
-            </ng-container>
-        </ng-container>
-        <ng-template #elseTemplate>
-            Empty!
-        </ng-template>
-    </ng-container>
-    <ng-container *ngIf="isLoading">
-        <ng-container *ngIf="loadingTemplate; else elseLoadingTemplate">
-            <ng-container *ngTemplateOutlet="loadingTemplate">
-            </ng-container>
-        </ng-container>
-        <ng-template #elseLoadingTemplate>
-            <div class="ax-list-loading-container">
-                <div><i class="fas fa-spinner ax-animate-spin"></i> Loading ...</div>
-            </div>
-        </ng-template>
-    </ng-container>
-</div>

package/src/lib/datalist/datalist.component.ts

@@ -1,86 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, Input, ContentChild, TemplateRef, HostListener, ViewChild } from '@angular/core';
-import { AXBaseSelectionValueMixin } from '../base';
-
-@Component({
-    selector: 'ax-datalist',
-    templateUrl: './datalist.component.html',
-    inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'value', 'items', 'pageSize'],
-    outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-list ax-list-container' }
-})
-export class AXDataListComponent extends AXBaseSelectionValueMixin {
-
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-        super(elementRef, cdr);
-    }
-
-    @ViewChild('container')
-    _container: ElementRef<HTMLDivElement>
-
-    @ContentChild('itemTemplate', { static: true })
-    _contentItemTemplate: TemplateRef<any>;
-
-    private _itemTemplate: TemplateRef<any>;
-    @Input()
-    public get itemTemplate(): TemplateRef<any> {
-        return this._itemTemplate ? this._itemTemplate : this._contentItemTemplate;
-    }
-    public set itemTemplate(v: TemplateRef<any>) {
-        this._itemTemplate = v;
-    }
-
-    @ContentChild('emptyTemplate', { static: true })
-    _contentEmptyTemplate: TemplateRef<any>;
-
-    private _emptyTemplate: TemplateRef<any>;
-    @Input()
-    public get emptyTemplate(): TemplateRef<any> {
-        return this._emptyTemplate ? this._emptyTemplate : this._contentEmptyTemplate;
-    }
-    public set emptyTemplate(v: TemplateRef<any>) {
-        this._emptyTemplate = v;
-    }
-
-    @ContentChild('loadingTemplate', { static: true })
-    _contentloadingTemplate: TemplateRef<any>;
-
-    private _loadingTemplate: TemplateRef<any>;
-    @Input()
-    public get loadingTemplate(): TemplateRef<any> {
-        return this._loadingTemplate ? this._loadingTemplate : this._contentloadingTemplate;
-    }
-    public set loadingTemplate(v: TemplateRef<any>) {
-        this._loadingTemplate = v;
-    }
-
-
-    _handleOnItemClick(e: MouseEvent, item: any) {
-        this.selectItems(item);
-    }
-
-    _handleListScroll(e: Event) {
-        const list = e.target as HTMLDivElement;
-        if ((list.scrollTop < list.scrollHeight - list.clientHeight)) {
-            return;
-        }
-        this._fetchData();
-    }
-
-
-    private _checkForLoadData() {
-        const list = this._container.nativeElement;
-        if (this.loadedCount < this.totalCount && list.clientHeight < list.parentElement.clientHeight) {
-            this._fetchData();
-        }
-    }
-
-    _onDataLoaded() {
-        setTimeout(() => {
-            this._checkForLoadData();
-        }, 100);
-
-    }
-
-}

package/src/lib/datalist/datalist.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXDataListComponent } from './datalist.component';
-import { AXButtonModule } from '../button';
-
-
-
-const COMPONENT = [AXDataListComponent];
-const MODULES = [CommonModule, AXButtonModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXDataListModule { }

package/src/lib/datapager/datapager-base.component.ts

@@ -1,29 +0,0 @@
-import { Inject, Injectable, Input } from "@angular/core";
-import { AXBaseValueComponentMixin, AXInteractiveComponenetMixin } from "../base";
-
-
-export interface AXDataPagerElementInterface {
-    visible: boolean;
-}
-
-@Injectable()
-export abstract class AXDataPagerElementBase extends AXInteractiveComponenetMixin implements AXDataPagerElementInterface {
-
-    @Input()
-    visible: boolean = true;
-
-    constructor(@Inject(Array) ...args: any[]) {
-        super(...args);
-    }
-}
-
-@Injectable()
-export abstract class AXDataPagerSelectorBase extends AXBaseValueComponentMixin implements AXDataPagerElementInterface {
-
-    @Input()
-    visible: boolean = true;
-
-    constructor(@Inject(Array) ...args: any[]) {
-        super(...args);
-    }
-}