@acorex/components 5.8.0 → 6.0.1

package/common/src/styles.class.ts

@@ -0,0 +1,47 @@
+export const AX_STYLE_TYPES = ['info', 'danger', 'success', 'warning'];
+
+/**
+ * A token that specifies the  color style of component.
+ */
+export type AXStyleColorType =
+  | 'primary'
+  | 'secondary'
+  | 'info'
+  | 'danger'
+  | 'success'
+  | 'warning'
+  | 'light'
+  | 'dark';
+export type AXStyleLookType =
+  | 'default'
+  | 'blank'
+  | 'outline'
+  | 'twotone'
+  | 'link';
+
+export const AX_LOCATIONS = [
+  'bottom-start',
+  'bottom-center',
+  'bottom-end',
+  'top-start',
+  'top-center',
+  'top-end',
+];
+export type AXLocation =
+  | 'bottom-start'
+  | 'bottom-center'
+  | 'bottom-end'
+  | 'top-start'
+  | 'top-center'
+  | 'top-end';
+
+export const AX_DIRECTIONS = ['vertical', 'horizontal'];
+/**
+ * A token that specifies the  direction of component.
+ */
+export type AXDirection = 'vertical' | 'horizontal';
+
+/**
+ * A token that specifies the  selection mode of component.
+ */
+export type AXSelectionMode = 'single' | 'multiple';

package/data-pager/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/data-pager/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/data-pager/public-api.ts

@@ -0,0 +1,9 @@
+export * from './src/data-pager-base.component';
+export * from './src/data-pager-info.component';
+export * from './src/data-pager-input-selector.component';
+export * from './src/data-pager-next-buttons.components';
+export * from './src/data-pager-numeric-selector.component';
+export * from './src/data-pager-pagesize-dropdown.component';
+export * from './src/data-pager-prev-buttons.component';
+export * from './src/data-pager.component';
+export * from './src/data-pager.module';

package/data-pager/src/data-pager-base.component.ts

@@ -0,0 +1,50 @@
+import { EventEmitter, Inject, Injectable } from '@angular/core';
+import { AXEvent } from '@acorex/components/common';
+import { AXInteractiveComponenetMixin } from '@acorex/components/mixin';
+
+/**
+ * A token that specifies the  display mode of datapager component.
+ */
+export type AXDataPagerDisplayMode = 'full' | 'compact' | 'custom';
+
+export interface AXDataPagerInfoData {
+  range: { from: number; to: number };
+  page: number;
+  skip: number;
+  take: number;
+  totalPages: number;
+  totalItems: number;
+}
+
+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 {}
+
+@Injectable()
+export abstract class AXPagerComponent {
+  abstract onStateChanged: EventEmitter<AXPagerStateChangedEvent>;
+  abstract get state(): AXDataPagerInfoData;
+  abstract size: number;
+  abstract goNextPage(): void;
+  abstract goLastPage(): void;
+  abstract goFirstPage(): void;
+  abstract goPrevPage(): void;
+  abstract goToPage(page: number): void;
+}
+
+@Injectable()
+export abstract class AXDataPagerChild extends AXInteractiveComponenetMixin {
+  constructor(@Inject(Array) ...args: any[]) {
+    super(...args);
+  }
+}

package/data-pager/src/data-pager-info.component.ts

@@ -0,0 +1,61 @@
+import { AXTranslator } from '@acorex/core/translation';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  ElementRef,
+  ChangeDetectorRef,
+  Input,
+  Inject,
+} from '@angular/core';
+import {
+  AXDataPagerChild,
+  AXPagerComponent,
+} from './data-pager-base.component';
+
+@Component({
+  selector: 'ax-data-pager-info',
+  template: `{{ _textFormatted }}`,
+  host: { class: 'ax-data-pager-info' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  providers: [
+    { provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent },
+  ],
+})
+export class AXDataPagerInfoComponent extends AXDataPagerChild {
+  constructor(
+    private elementRef: ElementRef<HTMLDivElement>,
+    private cdr: ChangeDetectorRef,
+    @Inject(AXPagerComponent)
+    private _parent: AXPagerComponent
+  ) {
+    super(elementRef, cdr);
+  }
+
+  @Input()
+  text: string = AXTranslator.get('datapager.info.text');
+
+  _textFormatted: string;
+
+  onViewInit() {
+    this._updateText();
+    this._parent.onStateChanged.subscribe((c) => {
+      this._updateText();
+    });
+  }
+
+  private _updateText() {
+    const info = this._parent.state;
+    if ([info.range, info.range.from, info.totalItems].every((c) => c)) {
+      this._textFormatted = this.text
+        .replace('[from]', info.range.from.toString())
+        .replace('[to]', info.range.to.toString())
+        .replace('[totalItems]', info.totalItems.toString())
+        .replace('[page]', info.page.toString())
+        .replace('[totalPages]', info.totalPages.toString());
+      this.cdr.markForCheck();
+    } else {
+    }
+  }
+}

package/data-pager/src/data-pager-input-selector.component.ts

@@ -0,0 +1,43 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Inject } from "@angular/core";
+import { AXValueChangedEvent } from "@acorex/components/common";
+import { AXDataPagerChild, AXPagerComponent } from "./data-pager-base.component";
+
+@Component({
+    selector: 'ax-data-pager-input-selector',
+    template: `
+        <ax-number-box [value]="_currentPage" class="ax-sm !ax-text-sm !ax-text-center" (onValueChanged)="_handleValueChanged($event)" [showSpinButtons]="false"
+            [minValue]="1" [maxValue]="_totalPages" allowNull="false" [debounceTime]="500">
+        </ax-number-box>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInputSelectorComponent }]
+})
+export class AXDataPagerInputSelectorComponent extends AXDataPagerChild {
+
+    constructor(
+        elementRef: ElementRef,
+        @Inject(AXPagerComponent)
+        private _parent: AXPagerComponent,
+        private cdr: ChangeDetectorRef
+    ) {
+        super(elementRef, cdr);
+    }
+
+    _totalPages: number = 1;
+    _currentPage: number = 1;
+
+    onViewInit() {
+        this._currentPage = this._parent.state.page;
+        this._totalPages = this._parent.state.totalPages;
+        this._parent.onStateChanged.subscribe(c => {
+            this._currentPage = c.page;
+            this._totalPages = c.totalPages;
+            this.cdr.markForCheck();
+        });
+    }
+
+    _handleValueChanged(e: AXValueChangedEvent<number>) {
+        this._parent.goToPage(e.value as number);
+    }
+}

package/data-pager/src/data-pager-next-buttons.components.ts

@@ -0,0 +1,49 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Inject } from "@angular/core";
+import { AXClickEvent } from "@acorex/components/common";
+import { AXDataPagerChild, AXPagerComponent } from "./data-pager-base.component";
+
+@Component({
+    selector: 'ax-data-pager-next-buttons',
+    template: `
+            <ax-button  [disabled]="disabled"   look="blank" color="light" class="ax-sm"  title="Go to the next page" (onClick)="_emitOnNextPageClick($event)" >
+                <ax-icon icon="ax-ic-chevron ax-rotate-180 "></ax-icon>                
+            </ax-button>
+            <ax-button  [disabled]="disabled"  look="blank" color="light" class="ax-sm" title="Go to the last page" (onClick)="_emitOnLastPageClick($event)">
+                <ax-icon icon="ax-ic-chevron-page ax-rotate-180"></ax-icon>
+            </ax-button>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent }]
+})
+export class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
+
+    constructor(
+        private elementRef: ElementRef,
+        private cdr: ChangeDetectorRef,
+        @Inject(AXPagerComponent)
+        private _parent: AXPagerComponent,
+    ) {
+        super(elementRef, cdr);
+    }
+
+    onViewInit() {
+        this._checkDisabled();
+        //
+        this._parent.onStateChanged.subscribe(c => {
+            this._checkDisabled();
+        });
+    }
+
+    private _checkDisabled() {
+        this.disabled = this._parent.state.page == this._parent.state.totalPages;
+    }
+
+    _emitOnLastPageClick(e: AXClickEvent) {
+        this._parent.goLastPage();
+    }
+
+    _emitOnNextPageClick(e: AXClickEvent) {
+        this._parent.goNextPage();
+    }
+}

package/data-pager/src/data-pager-numeric-selector.component.ts

@@ -0,0 +1,86 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Inject, NgZone } from "@angular/core";
+import { AXButtonItem } from "@acorex/components/button";
+import { AXDataPagerChild, AXPagerComponent } from "./data-pager-base.component";
+
+@Component({
+    selector: 'ax-data-pager-numeric-selector',
+    template: `
+        <ax-button [disabled]="_currentPage==1"  look="blank" color="light" class="ax-sm"   (onClick)="_handleOnItemClick({data:1})">
+            <ax-icon icon="ax-ic-chevron-page"></ax-icon>
+        </ax-button>
+        <ax-button-group color="light" look="blank" class="ax-sm"  >
+            <ax-button  *ngFor="let item of _items" color="light" look="blank" [selected]="_currentPage==item.data"  class="ax-sm" [text]="item.text" (onClick)="_handleOnItemClick(item)">
+                <ax-icon [class]="item.iconClass" *ngIf="item.iconClass">
+                </ax-icon>
+            </ax-button>
+        </ax-button-group>
+        <ax-button [disabled]="_currentPage==_lastPage"  look="blank" color="light" class="ax-sm"   (onClick)="_handleOnItemClick({data:_lastPage})">
+            <ax-icon icon="ax-ic-chevron-page ax-rotate-180"></ax-icon>
+        </ax-button>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNumericSelectorComponent }]
+})
+export class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
+
+    constructor(
+        _elementRef: ElementRef,
+        _cdr: ChangeDetectorRef,
+        @Inject(AXPagerComponent)
+        private _parent: AXPagerComponent,
+        private _zone: NgZone,
+    ) {
+        super(_elementRef, _cdr);
+    }
+
+
+    _items: AXButtonItem[] = [];
+    _currentPage: number = 1;
+    _lastPage: number = 1;
+
+    private _displayCount: number = 5;
+
+    onViewInit() {
+        this._generateDisplayItems();
+        this._parent.onStateChanged.subscribe(c => {
+      
+            this._generateDisplayItems();
+        });
+    }
+
+    private _generateDisplayItems(): void {
+        this._currentPage = this._parent.state.page;
+        this._lastPage = this._parent.state.totalPages;
+        //
+        this._items = [];
+
+        const start: number = ((Math.ceil(this._currentPage  / this._displayCount) - 1) * this._displayCount) + 1;
+        const end: number = Math.min(start + this._displayCount - 1,  this._lastPage);
+        //
+        if (start > this._displayCount) {
+            this._items.push({
+                iconClass: 'ax-ic-more ax-rotate-90',
+                data: start - 1
+            });
+        }
+        //
+        for (let i = start; i <= end; i++) {
+            this._items.push({
+                text: i.toString(),
+                data: i
+            });
+        }
+        if (end <  this._lastPage) {
+            this._items.push({
+                iconClass: 'ax-ic-more ax-rotate-90',
+                data: end + 1
+            });
+        }
+        this._cdr.detectChanges();
+    }
+
+    _handleOnItemClick(e: any) {
+        this._parent.goToPage(Number(e.data));
+    }
+}

package/data-pager/src/data-pager-pagesize-dropdown.component.ts

@@ -0,0 +1,77 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input, Inject } from "@angular/core";
+import { AXClickEvent } from "@acorex/components/common";
+import { AXDataPagerChild, AXPagerComponent } from "./data-pager-base.component";
+
+@Component({
+    selector: 'ax-data-pager-page-sizes',
+    template: `
+        <ax-button [text]="_size" color="light" look="blank" class="ax-sm">
+            <ax-dropdown-panel (onItemClick)="_emitOnItemClick($event)">
+                <ax-button-item *ngFor="let item of _items" [text]="item.text" [data]="item.data" [selected]="item.selected" >
+                </ax-button-item>
+            </ax-dropdown-panel>
+            <ax-suffix>
+                <ax-icon icon="ax-ic-chevron ax-transform ax--rotate-90 ax-md"></ax-icon>
+            </ax-suffix>
+        </ax-button>
+        <!-- <span >items per page</span> -->
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    outputs: [],
+    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPageSizesComponent }]
+})
+export class AXDataPagerPageSizesComponent extends AXDataPagerChild {
+
+    constructor(
+        elementRef: ElementRef,
+        cdr: ChangeDetectorRef,
+        @Inject(AXPagerComponent)
+        private _parent: AXPagerComponent,
+    ) {
+        super(elementRef, cdr);
+    }
+
+
+    _size: number;
+
+
+    onViewInit() {
+        this._generateDisplayItems();
+        //
+        this._parent.onStateChanged.subscribe(c => {
+            this._generateDisplayItems();
+        });
+    }
+
+
+    //TODO: AXButtonItems type error
+    _items: any[] = [];
+
+    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._size = this._parent.state.take;
+        this._items = this.sizes.map((s:any) => ({
+            text: s.toString(),
+            selected: s == this._size,
+            data: {
+                size: s
+            }
+        }));
+        this._cdr.detectChanges();
+    }
+
+
+    _emitOnItemClick(e: AXClickEvent) {
+        this._size = this._parent.size = Number(e.data.size);
+    }
+}

package/data-pager/src/data-pager-prev-buttons.component.ts

@@ -0,0 +1,51 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Inject } from "@angular/core";
+import { AXClickEvent } from "@acorex/components/common";
+import { AXDataPagerChild, AXPagerComponent } from "./data-pager-base.component";
+
+@Component({
+    selector: 'ax-data-pager-prev-buttons',
+    template: `
+        <ax-button [disabled]="disabled"  look="blank" color="light" class="ax-sm"   title="Go to the last page" (onClick)="_emitOnFirstPageClick($event)">
+            <ax-icon icon="ax-ic-chevron-page"></ax-icon>
+        </ax-button>
+        <ax-button [disabled]="disabled"  look="blank" color="light" class="ax-sm"  title="Go to the next page" (onClick)="_emitOnPrevPageClick($event)">
+            <ax-icon icon="ax-ic-chevron"></ax-icon>
+        </ax-button>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPrevButtonsComponent }]
+})
+export class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
+
+
+    constructor(
+        private elementRef: ElementRef,
+        cdr: ChangeDetectorRef,
+        @Inject(AXPagerComponent)
+        private _parent: AXPagerComponent,
+    ) {
+        super(elementRef, cdr);
+    }
+
+    onViewInit() {
+        this._checkDisabled();
+        this._parent.onStateChanged.subscribe(c => {
+            this._checkDisabled();
+        });
+    }
+
+    private _checkDisabled() {
+        this.disabled =  this._parent.state.page == 1;
+    }
+
+
+    _emitOnFirstPageClick(e: AXClickEvent) {
+        this._parent.goFirstPage();
+    }
+
+    _emitOnPrevPageClick(e: AXClickEvent) {
+        this._parent.goPrevPage();
+    }
+
+}

package/data-pager/src/data-pager.component.html

@@ -0,0 +1,33 @@
+<ng-container [ngSwitch]="displayMode">
+    <ng-container *ngSwitchCase="'full'">
+        <ax-prefix>
+            <ax-data-pager-numeric-selector>
+            </ax-data-pager-numeric-selector>
+            <ax-data-pager-page-sizes>
+            </ax-data-pager-page-sizes>
+        </ax-prefix>
+        <ax-suffix>
+            <ax-data-pager-info>
+            </ax-data-pager-info>
+        </ax-suffix>
+    </ng-container>
+    <ng-container *ngSwitchCase="'compact'">
+        <ax-prefix>
+            <ax-data-pager-prev-buttons>
+            </ax-data-pager-prev-buttons>
+            <ax-data-pager-input-selector>
+            </ax-data-pager-input-selector>
+            <ax-data-pager-next-buttons>
+            </ax-data-pager-next-buttons>
+        </ax-prefix>
+        <ax-suffix>
+            <ax-data-pager-info>
+            </ax-data-pager-info>
+        </ax-suffix>
+    </ng-container>
+    <ng-container *ngSwitchDefault>
+        <ng-content select="ax-prefix"></ng-content>
+        <ng-content select="ax-suffix"></ng-content>
+    </ng-container>
+</ng-container>
+

package/data-pager/src/data-pager.component.ts

@@ -0,0 +1,163 @@
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+  Input,
+  EventEmitter,
+  Output,
+  Inject,
+  Optional,
+} from '@angular/core';
+import { isNumber } from 'lodash-es';
+import { AXPagedComponent } from '@acorex/components/common';
+
+import {
+  AXDataPagerDisplayMode,
+  AXDataPagerInfoData,
+  AXPagerComponent,
+  AXPagerStateChangedEvent,
+} from './data-pager-base.component';
+import { VALUE_INPUTS, VALUE_OUTPUT, AXBaseValueComponentMixin } from '@acorex/components/mixin';
+
+@Component({
+  selector: 'ax-data-pager',
+  templateUrl: './data-pager.component.html',
+  inputs: ['readonly','allowNull','value','name', 'checked'],
+  outputs: ['valueChange', 'onValueChanged'],
+  host: { class: 'ax-data-pager' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  providers: [{ provide: AXPagerComponent, useExisting: AXDataPagerComponent }],
+})
+export class AXDataPagerComponent extends AXBaseValueComponentMixin {
+  private _size: number = 10;
+  @Input()
+  public get size(): number {
+    return this._size;
+  }
+  public set size(v: number) {
+    this._size = v;
+    this._emitStateChangedEvent();
+    const newPage = Math.ceil(this.state.range.from / this._size) || 1;
+    this.value = newPage;
+  }
+
+  private _total: number = 0;
+  @Input()
+  public get total(): number {
+    return this._total;
+  }
+  public set total(v: number) {
+    this._total = v && v > 0 ? v : 0;
+    this._emitStateChangedEvent();
+  }
+
+  private _totalPages: number = 0;
+
+  public get totalPages(): number {
+    return this._totalPages;
+  }
+
+  private set totalPages(value: number) {
+    this._totalPages = value;
+  }
+
+  @Input()
+  displayMode: AXDataPagerDisplayMode = 'full';
+
+  @Output()
+  onStateChanged: EventEmitter<AXPagerStateChangedEvent> = new EventEmitter<AXPagerStateChangedEvent>();
+
+  constructor(
+    private _elementRef: ElementRef,
+    private _cdr: ChangeDetectorRef,
+    @Optional()
+    @Inject(AXPagedComponent)
+    private _parent: AXPagedComponent
+  ) {
+    super(_elementRef, _cdr);
+  }
+
+  onInit() {
+    if (this._parent) {
+      this._parent.onPageChanged.subscribe((c) => {
+        this.size = this._parent.pageSize;
+        this.total = this._parent.totalCount;
+        this.value = c.value;
+      });
+      this.size = this._parent.pageSize;
+      this.total = this._parent.totalCount;
+    }
+    this.goFirstPage();
+  }
+
+  onViewInit() {
+    this._emitStateChangedEvent();
+  }
+
+  _onValueChanged(oldValue: number, newValue: number) {
+    this._emitStateChangedEvent();
+    this._parent?.goToPage(newValue);
+  }
+
+  _getValue(value: any) {
+    return !isNumber(value) || value < 1
+      ? 1
+      : value > this.totalPages
+      ? this.totalPages
+      : value;
+  }
+
+  public get state(): AXDataPagerInfoData {
+    const skip = (this.value - 1) * this.size;
+    return {
+      page: this.value,
+      totalItems: this.total,
+      totalPages: this.totalPages,
+      range: {
+        from: skip + 1,
+        to: Math.min(this.value * this.size, this.total),
+      },
+      skip,
+      take: this.size,
+    };
+  }
+
+  private _emitStateChangedEvent(): void {
+    this.totalPages = Math.ceil(this._total / this.size);
+    //
+    this.onStateChanged.emit(
+      Object.assign(
+        {
+          component: this,
+          htmlElement: this._elementRef.nativeElement,
+        },
+        this.state
+      )
+    );
+  }
+
+  goNextPage(): void {
+    this.goToPage(Math.min(++this.value, this.totalPages));
+  }
+
+  goLastPage(): void {
+    this.goToPage(this.totalPages);
+  }
+
+  goFirstPage(): void {
+    this.goToPage(1);
+  }
+
+  goPrevPage(): void {
+    this.goToPage(Math.max(--this.value, 1));
+  }
+
+  goToPage(page: number): void {
+    if (page != this.value) {
+      this.value = page;
+    }
+  }
+}