@acorex/components 5.0.5 → 5.0.9

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

@@ -1,64 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input, NgZone, HostBinding } from "@angular/core";
-import { AXDataPagerElementBase, AXDataPagerSelectorBase } from "./datapager-base.component";
-import { AXDataPagerComponent } from "./datapager.component";
-
-export interface AXDataPagerInfoData {
-    range: { from: number, to: number };
-    page: number;
-    skip: number;
-    take: number;
-    totalPages: number;
-    totalItems: number;
-}
-
-@Component({
-    selector: 'ax-datapager-info',
-    template: `<ng-container *ngIf="visible"><span></span></ng-container>`,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    inputs: ['size'],
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-datapager-info' },
-    providers: [{ provide: AXDataPagerElementBase, useExisting: AXDataPagerInfoComponent }]
-})
-export class AXDataPagerInfoComponent extends AXDataPagerElementBase {
-
-    constructor(
-        private elementRef: ElementRef<HTMLDivElement>,
-        private cdr: ChangeDetectorRef,
-        private _parent: AXDataPagerComponent,
-        private zone: NgZone
-    ) {
-        super(elementRef, cdr);
-    }
-
-
-    @HostBinding('class')
-    get sizeBinding(): string {
-        return this.size ? `ax-text-${this.size}` : null;
-    }
-
-    onViewInit() {
-        this._updateText();
-        this._parent.onStateChanged.subscribe(c => {
-            this._updateText();
-        });
-    }
-
-    private _updateText() {
-        this.zone.runOutsideAngular(() => {
-            const span = this.elementRef.nativeElement.querySelector('span');
-            if (!span)
-                return;
-            const info = this._parent.getState();
-            if ([info.range, info.range.from].every(c => c)) {
-                span.innerHTML = '{{from}} - {{to}} of {{totalItems}} items'
-                    .replace('{{from}}', info.range.from.toString())
-                    .replace('{{to}}', info.range.to.toString())
-                    .replace('{{totalItems}}', info.totalItems.toString());
-            }
-            else {
-                span.innerHTML = '...';
-            }
-        });
-    }
-}

package/src/lib/datapager/datapager-input-selector.component.ts

@@ -1,54 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input } from "@angular/core";
-import { VALUE_INPUTS, VALUE_OUTPUT } from "../base/mixin/value-mixin.class";
-import { AXDataPagerElementBase, AXDataPagerSelectorBase } from "./datapager-base.component";
-import { AXDataPagerComponent } from "./datapager.component";
-
-@Component({
-    selector: 'ax-datapager-input-selector',
-    template: `
-        <ax-number-box [(value)]="value" [size]="size" 
-            [minValue]="1" [maxValue]="_totalPages"  allowNull="false" [debounceTime]="500">
-        </ax-number-box>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    inputs: ['size', ...VALUE_INPUTS],
-    outputs: [...VALUE_OUTPUT],
-    host: { class: 'ax-datapager-input-selector' },
-    providers: [{ provide: AXDataPagerElementBase, useExisting: AXDataPagerInputSelectorComponent }]
-})
-export class AXDataPagerInputSelectorComponent extends AXDataPagerSelectorBase {
-
-    constructor(
-        elementRef: ElementRef,
-        private _parent: AXDataPagerComponent,
-        private cdr: ChangeDetectorRef
-    ) {
-        super(elementRef, cdr);
-    }
-
-    _totalPages: number = 1;
-
-    onViewInit() {
-        this.value = this._parent.getState().page;
-        this._totalPages = this._parent.getState().totalPages;
-
-        this._parent.onPageChanged.subscribe(c => {
-            this.value = c.page;
-        });
-        this._parent.onStateChanged.subscribe(c => {
-            this.value = c.page;
-            this._totalPages = c.totalPages;
-        });
-    }
-
-    _onValueChanging(value: number) {
-        return Number(value) || 1;
-
-    }
-
-    _onValueChanged(oldValue: number, newValue: number) {
-        this._parent.value = newValue;
-
-    }
-}

package/src/lib/datapager/datapager-next-buttons.components.ts

@@ -1,52 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Output, EventEmitter } from "@angular/core";
-import { AXClickEvent } from "../base";
-import { AXDataPagerElementBase, AXDataPagerSelectorBase } from "./datapager-base.component";
-import { AXDataPagerComponent } from "./datapager.component";
-
-@Component({
-    selector: 'ax-datapager-next-buttons',
-    template: `
-      <ng-container *ngIf="visible">
-            <ax-button class="ax-light-blank" [size]="size" [disabled]="disabled" iconClass="ax-ic ax-ic-navigate-next" text="" title="Go to the next page" (onClick)="_emitOnNextPageClick($event)" >
-            </ax-button>
-            <ax-button class="ax-light-blank" [size]="size" [disabled]="disabled" iconClass="ax-ic ax-ic-last-page" text="" title="Go to the last page" (onClick)="_emitOnLastPageClick($event)">
-            </ax-button>
-      </ng-container>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    inputs: ['size'],
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-datapager-nav-buttons' },
-    providers: [{ provide: AXDataPagerElementBase, useExisting: AXDataPagerNextButtonsComponent }]
-})
-export class AXDataPagerNextButtonsComponent extends AXDataPagerElementBase {
-
-    constructor(
-        private elementRef: ElementRef,
-        private cdr: ChangeDetectorRef,
-        private _parent: AXDataPagerComponent,
-    ) {
-        super(elementRef, cdr);
-    }
-
-    onViewInit() {
-        this._checkDisabled();
-        //
-        this._parent.onStateChanged.subscribe(c => {
-            this._checkDisabled();
-        });
-    }
-
-    private _checkDisabled()
-    {
-        this.disabled = this._parent.value == this._parent.getState().totalPages;
-    }
-
-    _emitOnLastPageClick(e: AXClickEvent) {
-        this._parent.goLastPage();
-    }
-
-    _emitOnNextPageClick(e: AXClickEvent) {
-        this._parent.goNextPage();
-    }
-}

package/src/lib/datapager/datapager-numeric-selector.component.ts

@@ -1,94 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input } from "@angular/core";
-import { AXBaseValueComponentMixin, AXClickEvent } from "../base";
-import { VALUE_INPUTS, VALUE_OUTPUT } from "../base/mixin/value-mixin.class";
-import { AXButtonItem } from "../button";
-import { AXDataPagerElementBase, AXDataPagerSelectorBase } from "./datapager-base.component";
-import { AXDataPagerComponent } from "./datapager.component";
-
-@Component({
-    selector: 'ax-datapager-numeric-selector',
-    template: `
-        <ax-button-group class="ax-primary-blank" [size]="size" [selectable]="true" [items]="_items"  (onItemClick)="_emitOnItemClick($event)">
-        </ax-button-group>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    inputs: ['size', ...VALUE_INPUTS],
-    outputs: [...VALUE_OUTPUT],
-    host: { class: 'ax-datapager-numeric-selector' },
-    providers: [{ provide: AXDataPagerElementBase, useExisting: AXDataPagerNumericSelectorComponent }]
-})
-export class AXDataPagerNumericSelectorComponent extends AXDataPagerSelectorBase {
-
-    constructor(
-        elementRef: ElementRef,
-        private cdr: ChangeDetectorRef,
-        private _parent: AXDataPagerComponent,
-    ) {
-        super(elementRef, cdr);
-    }
-
-
-    _items: AXButtonItem[] = [];
-
-    private _displayCount: number = 5;
-
-
-    onViewInit() {
-        this._generateDisplayItems();
-        this._parent.onPageChanged.subscribe(c => {
-            this.value = c.page;
-            this._generateDisplayItems();
-        });
-        this._parent.onStateChanged.subscribe(c => {
-            this._generateDisplayItems();
-        });
-    }
-
-    private _generateDisplayItems(): void {
-        const val = this._parent.value;
-        const totalPages = this._parent._totalPages;
-        //
-        this._items = [];
-
-        const start: number = ((Math.ceil(val / this._displayCount) - 1) * this._displayCount) + 1;
-        const end: number = Math.min(start + this._displayCount - 1, totalPages);
-        //
-        if (start > this._displayCount) {
-            this._items.push({
-                selected: false,
-                iconClass: 'ax-ic ax-ic-keyboard-control',
-                data: start - 1
-            });
-        }
-        //
-        for (let i = start; i <= end; i++) {
-            this._items.push({
-                selected: val == i,
-                text: i.toString(),
-                data: i
-            });
-        }
-        if (end < totalPages) {
-            this._items.push({
-                selected: false,
-                iconClass: 'ax-ic ax-ic-keyboard-control',
-                data: end + 1
-            });
-        }
-        this.cdr.detectChanges();
-    }
-
-    _onValueChanging(value: number) {
-        return Number(value) || 1;
-
-    }
-
-    _onValueChanged(oldValue: number, newValue: number) {
-        this._parent.value = newValue;
-    }
-
-    _emitOnItemClick(e: AXClickEvent) {
-        this.value = Number(e.data.data);
-    }
-}

package/src/lib/datapager/datapager-pagesize-dropdown.component.ts

@@ -1,77 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input } from "@angular/core";
-import { AXClickEvent } from "../base";
-import { AXButtonItem } from "../button";
-import { AXDataPagerElementBase } from "./datapager-base.component";
-import { AXDataPagerComponent } from "./datapager.component";
-
-@Component({
-    selector: 'ax-datapager-page-sizes',
-    template: `
-        <ax-button [text]="_pageSize">
-            <ax-dropdown-panel (onItemClick)="_emitOnItemClick($event)">
-                <ax-button-item *ngFor="let item of _items" [text]="item.text" >
-                </ax-button-item>
-            </ax-dropdown-panel>
-            <!-- <ax-suffix>
-                <ax-icon icon="far fas fa-angle-down"></ax-icon>
-            </ax-suffix> -->
-        </ax-button>
-    <span class="ax-text-light-700">items per page</span>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    inputs: ['size'],
-    outputs: [],
-    host: { class: 'ax-datapager-page-sizes' },
-    providers: [{ provide: AXDataPagerElementBase, useExisting: AXDataPagerPageSizesComponent }]
-})
-export class AXDataPagerPageSizesComponent extends AXDataPagerElementBase {
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef,
-        private _parent: AXDataPagerComponent,
-    ) {
-        super(elementRef, cdr);
-    }
-
-
-    _pageSize: number;
-
-
-    onViewInit() {
-        this._generateDisplayItems();
-        //
-        this._parent.onStateChanged.subscribe(c => {
-            this._generateDisplayItems();
-        });
-    }
-
-
-    _items: AXButtonItem[] = [];
-
-    private _sizes: number[];
-    @Input()
-    public get sizes(): number[] {
-        return this._sizes || [5, 10, 20, 50, 100];
-    }
-    public set sizes(v: number[]) {
-        this._sizes = v;
-        this._generateDisplayItems();
-    }
-
-    private _generateDisplayItems(): void {
-        this._pageSize =  this._parent.pageSize;
-        this._items = this.sizes.map(s => ({
-            text: s.toString(),
-            selected : s == this._pageSize
-        }));
-        this._cdr.detectChanges();
-    }
-
-
-    _emitOnItemClick(e: AXClickEvent) {
-        this._pageSize = Number(e.data.text);    
-        this._parent.pageSize = this._pageSize;        
-    }
-}

package/src/lib/datapager/datapager-prev-buttons.component.ts

@@ -1,50 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Output, EventEmitter } from "@angular/core";
-import { AXClickEvent, AXInteractiveComponenetMixin } from "../base";
-import { AXDataPagerElementBase, AXDataPagerSelectorBase } from "./datapager-base.component";
-import { AXDataPagerComponent } from "./datapager.component";
-
-@Component({
-    selector: 'ax-datapager-prev-buttons',
-    template: `
-        <ax-button [disabled]="disabled" [size]="size" class="ax-light-blank" iconClass="ax-ic ax-ic-first-page" text="" title="Go to the last page" (onClick)="_emitOnFirstPageClick($event)">
-        </ax-button>
-        <ax-button [disabled]="disabled" [size]="size" class="ax-light-blank" iconClass="ax-ic ax-ic-navigate-before" text="" title="Go to the next page" (onClick)="_emitOnPrevPageClick($event)">
-        </ax-button>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    inputs: ['size'],
-    host: { class: 'ax-datapager-nav-buttons' },
-    providers: [{ provide: AXDataPagerElementBase, useExisting: AXDataPagerPrevButtonsComponent }]
-})
-export class AXDataPagerPrevButtonsComponent extends AXDataPagerSelectorBase {
-
-    constructor(
-        private elementRef: ElementRef,
-        cdr: ChangeDetectorRef,
-        private _parent: AXDataPagerComponent
-    ) {
-        super(elementRef, cdr);
-    }
-
-    onViewInit() {
-        this._checkDisabled();
-        this._parent.onStateChanged.subscribe(c => {
-            this._checkDisabled();
-        });
-    }
-
-    private _checkDisabled() {
-        this.disabled = this.disabled = this._parent.value == 1;
-    }
-
-
-    _emitOnFirstPageClick(e: AXClickEvent) {
-        this._parent.goFirstPage();
-    }
-
-    _emitOnPrevPageClick(e: AXClickEvent) {
-        this._parent.goPrevPage();
-    }
-
-}

package/src/lib/datapager/datapager.component.html

@@ -1,19 +0,0 @@
-<div class="ax-wrapper">
-    <ng-container *ngIf="_contents.length==0">
-        <ax-datapager-prev-buttons>
-        </ax-datapager-prev-buttons>
-        <ax-datapager-numeric-selector>
-        </ax-datapager-numeric-selector>
-        <ax-datapager-next-buttons>
-        </ax-datapager-next-buttons>
-        <ax-datapager-page-sizes>
-        </ax-datapager-page-sizes>
-        <ax-datapager-info>
-        </ax-datapager-info>
-    </ng-container>
-    <ng-container *ngIf="_contents.length!=0">
-        <ng-content>
-
-        </ng-content>
-    </ng-container>
-</div>

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

@@ -1,146 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, Input, EventEmitter, Output, ViewChild, ContentChildren, QueryList } from '@angular/core';
-import { AXBaseValueComponentMixin, AXEvent } from '../base';
-import { SIZABLE_INPUTS } from '../base/mixin/sizable-mixin.class';
-import { VALUE_OUTPUT, VALUE_INPUTS } from '../base/mixin/value-mixin.class';
-import { AXDataPagerElementBase } from './datapager-base.component';
-import { AXDataPagerInfoData } from './datapager-info.component';
-
-export class AXPagerPageChangedEvent extends AXEvent implements AXDataPagerInfoData {
-    range: { from: number, to: number } = { from: 0, to: 0 };
-    page: number = 0;
-    skip: number = 0;
-    take: number = 0;
-    totalPages: number = 0;
-    totalItems: number = 0;
-}
-
-export class AXPagerStateChangedEvent extends AXPagerPageChangedEvent {
-}
-
-
-@Component({
-    selector: 'ax-datapager',
-    templateUrl: './datapager.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    inputs: [...SIZABLE_INPUTS, ...VALUE_INPUTS],
-    outputs: [...VALUE_OUTPUT],
-    host: { class: 'ax-datapager' }
-})
-export class AXDataPagerComponent extends AXBaseValueComponentMixin {
-
-
-    private _pageSize: number;
-    @Input()
-    public get pageSize(): number {
-        return this._pageSize;
-    }
-    public set pageSize(v: number) {
-        const oldValue = this.pageSize;
-        this._pageSize = v;
-        this._emitStateChangedEvent();
-        const newPage = Math.ceil(this.getState().range.from / this._pageSize) || 1;
-        const needRefresh = this.value == newPage && oldValue != v;
-        this.value = newPage;
-        if (needRefresh) {
-            this._emitChangedEvent();
-        }
-    }
-
-
-    private _total: number;
-    @Input()
-    public get total(): number {
-        return this._total;
-    }
-    public set total(v: number) {
-        this._total = v && v > 0 ? v : 0;
-        this._emitStateChangedEvent();
-    }
-
-
-    _totalPages: number = 0;
-
-    @Output()
-    onPageChanged: EventEmitter<AXPagerPageChangedEvent> = new EventEmitter<AXPagerPageChangedEvent>();
-    @Output()
-    onStateChanged: EventEmitter<AXPagerStateChangedEvent> = new EventEmitter<AXPagerStateChangedEvent>();
-
-
-    @ContentChildren(AXDataPagerElementBase,{descendants:true})
-    _contents: QueryList<AXDataPagerElementBase>;
-
-
-
-    constructor(
-        private elementRef: ElementRef,
-        private cdr: ChangeDetectorRef
-    ) {
-        super(elementRef, cdr);
-        
-    }
-
-    onInit() {
-        if (!this.pageSize) {
-            this.pageSize = 5;
-        }
-    }
-
-    _onValueChanged(oldValue: number, newValue: number) {
-        this._emitStateChangedEvent();
-        this._emitChangedEvent();
-    }
-
-    public getState(): AXDataPagerInfoData {
-        return {
-            page: this.value,
-            totalItems: this.total,
-            totalPages: this._totalPages,
-            range: {
-                from: ((this.value - 1) * this.pageSize) + 1,
-                to: Math.min((this.value * this.pageSize), this.total)
-            },
-            skip: (this.value - 1) * this.pageSize,
-            take: this.pageSize,
-        }
-    }
-
-    private _emitStateChangedEvent(): void {
-        this._totalPages = Math.ceil(this._total / this.pageSize);
-        //
-        this.onStateChanged.emit(
-            Object.assign({
-                component: this,
-                htmlElement: this.elementRef.nativeElement
-            }, this.getState())
-        );
-    }
-
-    private _emitChangedEvent(): void {
-        if (this.value) {
-            this.onPageChanged.emit(
-                Object.assign({
-                    component: this,
-                    htmlElement: this.elementRef.nativeElement
-                }, this.getState())
-            );
-        }
-    }
-
-
-    goNextPage(): void {
-        this.value = Math.min(++this.value, this._totalPages);
-    }
-
-    goLastPage(): void {
-        this.value = this._totalPages;
-    }
-
-    goFirstPage(): void {
-        this.value = 1;
-    }
-
-    goPrevPage(): void {
-        this.value = Math.max(--this.value, 1);
-    }
-}

package/src/lib/datapager/datapager.module.ts

@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXDataPagerComponent } from './datapager.component';
-import { AXDataPagerNextButtonsComponent } from './datapager-next-buttons.components';
-import { AXButtonModule } from '../button';
-import { AXDataPagerPrevButtonsComponent } from './datapager-prev-buttons.component';
-import { AXDataPagerPageSizesComponent } from './datapager-pagesize-dropdown.component';
-import { AXDataPagerNumericSelectorComponent } from './datapager-numeric-selector.component';
-import { AXDataPagerInputSelectorComponent } from './datapager-input-selector.component';
-import { AXDataPagerInfoComponent } from './datapager-info.component';
-import { AXNumberBoxModule } from '../number-box';
-import { AXDropdownModule } from '../dropdown';
-import { AXEditorDecoratorModule } from '../decorators';
-
-const COMPONENT = [
-    AXDataPagerComponent,
-    AXDataPagerNextButtonsComponent,
-    AXDataPagerPrevButtonsComponent,
-    AXDataPagerPageSizesComponent,
-    AXDataPagerNumericSelectorComponent,
-    AXDataPagerInputSelectorComponent,
-    AXDataPagerInfoComponent
-];
-const MODULES = [CommonModule, AXButtonModule, AXNumberBoxModule,AXDropdownModule,AXEditorDecoratorModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXDataPagerModule { }

package/src/lib/datapager/index.ts

@@ -1,8 +0,0 @@
-export * from './datapager.component';
-export * from './datapager-next-buttons.components';
-export * from './datapager-prev-buttons.component';
-export * from './datapager-pagesize-dropdown.component';
-export * from './datapager-numeric-selector.component';
-export * from './datapager-input-selector.component';
-export * from './datapager-info.component';
-export * from './datapager.module';

package/src/lib/datepicker/datepicker.component.html

@@ -1,11 +0,0 @@
-<ax-drop-down [fitParent]="false" [disabled]="disabled">
-    <ng-container input>
-        <ng-content select="ax-prefix">
-        </ng-content>
-        <ng-content select="ax-suffix">
-        </ng-content>
-    </ng-container>
-    <div class="ax-datepicker-body" panel>
-        <ax-calendar [showTime]="true" [actionBar]="true"></ax-calendar>
-    </div>
-</ax-drop-down>