@acorex/components 6.0.1 → 6.0.7

package/common/src/styles.class.ts

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

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

package/data-pager/ng-package.json

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

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

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

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

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

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

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

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

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

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

@@ -1,163 +0,0 @@
-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;
-    }
-  }
-}