@acorex/components 6.5.27 → 6.5.29

package/src/lib/data-filter/toolbar/filter-toolbar.component.ts

@@ -1,179 +0,0 @@
-import { Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
-import { AXHtmlUtil, AXMenuItem } from '@acorex/core';
-import { AXFilterPanelComponent } from '../filter-panel/filter-panel.component';
-import { AXToolbarItem } from '../../toolbar/toolbar-item';
-import { AXToolbarMenuComponent } from '../../toolbar/menu/toolbar-menu.component';
-import { AXMenuComponent } from '../../menu/menu.component';
-
-
-@Component({
-    selector: 'ax-toolbar-filter-view',
-    templateUrl: './filter-toolbar.component.html',
-    styleUrls: ['./filter-toolbar.component.scss'],
-    encapsulation: ViewEncapsulation.None,
-    providers: [{ provide: AXToolbarItem, useExisting: AXToolbarFilterViewComponent }]
-})
-export class AXToolbarFilterViewComponent {
-    constructor() { }
-    _uid: string = AXHtmlUtil.getUID();
-
-    @ViewChild('menu', { static: true }) menu: AXToolbarMenuComponent;
-    @ViewChild('contextMenu', { static: true }) contextMenu: AXMenuComponent;
-
-    @Input()
-    filterPanel: AXFilterPanelComponent;
-
-    contextMenuItems: AXMenuItem[] = [
-        // {
-        //     name: 'addFolder',
-        //     startIcon: 'fas fa-folder',
-        //     text: 'New Folder',
-        // },
-        {
-            name: 'remove',
-            startIcon: 'fas fa-trash',
-            text: 'Delete',
-        },
-    ];
-
-
-
-    menuItems: AXMenuItem[] = [
-        {
-            name: 'root',
-            startIcon: 'fas fa-filter',
-            text: 'Select All',
-            items: [
-                {
-                    name: 'selectAll',
-                    style: 'f',
-                    text: 'Select All',
-                },
-                // {
-                //     split: true,
-                //     name: 'addFolder',
-                //     startIcon: 'fas fa-folder',
-                //     text: 'New Folder',
-                // },
-                {
-                    divider: true,
-                    name: 'save',
-                    startIcon: 'fas fa-save',
-                    text: 'Save'
-                },
-                {
-                    divider: true,
-                    name: 'saveAs',
-                    startIcon: 'fas fa-save',
-                    text: 'Save As...'
-                }
-            ]
-        }
-
-    ];
-
-    ngAfterViewInit(): void {
-        setTimeout(() => {
-            this.selectAll();
-            this.addPredefinedList();
-        }, 100);
-    }
-
-    addPredefinedList() {
-        this.filterPanel.predefinedFilters.forEach(c => {
-            const item = {
-                name: c.name,
-                text: c.title,
-                type: 'f',
-                startIcon: 'fas',
-                data: c.value,
-                style: this._uid,
-                uid: AXHtmlUtil.getUID()
-            };
-            this.root.items.splice(1, 0, item);
-        });
-        this.update();
-    }
-
-    public selectAll(): void {
-        this.setCurrent(this.root.items[0]);
-        this.filterPanel.clear();
-        this.update();
-        this.menu.close();
-        // this.contextMenu.close();
-    }
-
-    itemClick(e: AXMenuItem) {
-
-        if (e.style === 'f') {
-            if (e.name === 'selectAll') {
-                this.selectAll();
-            }
-            else {
-                this.setCurrent(e);
-                this.filterPanel.load(e.data);
-            }
-        }
-        else {
-            if (e.name === 'saveAs') {
-                const name = prompt('Please enter the name;');
-                if (name) {
-                    const item = {
-                        text: name,
-                        type: 'f',
-                        style: this._uid,
-                        startIcon: 'fas',
-                        data: this.filterPanel.value,
-                        uid: AXHtmlUtil.getUID()
-                    };
-                    this.root.items.splice(1, 0, item);
-                    this.setCurrent(item);
-                }
-
-            }
-            if (e.name === 'save') {
-                const selected = this.findSelected();
-                if (selected) {
-                    selected.data = this.filterPanel.value;
-                }
-            }
-        }
-        this.update();
-    }
-
-    private findSelected(): AXMenuItem {
-        return this.root.items.find(c => c.selected);
-    }
-
-    private get root(): AXMenuItem {
-        return this.menuItems[0];
-    }
-
-    public update(): void {
-        this.menu.update();
-        setTimeout(() => {
-            // this.contextMenu.update();
-        }, 100);
-
-    }
-
-    private setCurrent(e: AXMenuItem) {
-        this.root.text = e.text;
-        this.root.items.filter(c => c.style === 'f').forEach(c => {
-            c.selected = false;
-            c.startIcon = 'fas';
-        });
-        e.selected = true;
-        e.startIcon = 'fas fa-check';
-        this.root.items.find(c => c.name === 'save').visible = e.name !== 'selectAll';
-    }
-
-    onCtxClick(e: AXMenuItem) {
-        const target = this.contextMenu.currentTarget as HTMLElement;
-        const menuId = target.getAttribute('data-uid');
-        if (e.name === 'remove' && menuId) {
-            this.root.items = this.root.items.filter(c => c.uid !== menuId);
-            this.selectAll();
-        }
-    }
-}

package/src/lib/data-list/core/data-list.component.ts

@@ -1,62 +0,0 @@
-import { ContentChild, Input, Directive } from '@angular/core';
-import { AXDataSourceComponent } from '../../data-source/datasource.component';
-import { AXDataSourceReadParams } from '../../data-source/read-param';
-import { AXBaseComponent } from '../../base/element.class';
-
-
-@Directive()
-export abstract class AXDataListComponent extends AXBaseComponent {
-
-
-
-  @Input()
-  items: any[] = [];
-
-  // @ContentChild(AXDataSourceComponent, { static: true })
-  // private _contentDataSource: AXDataSourceComponent;
-
-  // private _dataSource: AXDataSourceComponent;
-
-  // @Input()
-  // public get dataSource(): AXDataSourceComponent {
-  //   return this._dataSource ? this._dataSource : this._contentDataSource;
-  // }
-
-  // public set dataSource(v: AXDataSourceComponent) {
-  //   this._dataSource = v;
-  // }
-
-
-  abstract dataSource: AXDataSourceComponent;
-
-
-  // ngAfterContentInit(): void {
-  //   this.configDataList();
-  // }
-
-
-  protected configDataList() {
-    if (this.dataSource) {
-      this.dataSource.onDataReceived.subscribe(c => {
-        this.dataReceived(c.data.result);
-      });
-    }
-  }
-
-  private dataReceived(data: any) {
-    this.items = data;
-  }
-
-  private params: AXDataSourceReadParams = {};
-
-  fetch(params: AXDataSourceReadParams = {}) {
-    this.params = params;
-    if (this.dataSource) {
-      this.dataSource.fetch(params);
-    }
-  }
-
-  refresh() {
-    this.fetch(this.params);
-  }
-}

package/src/lib/data-list/list/list.component.html

@@ -1,32 +0,0 @@
-<div [style.height]="height" [style.width]="width">
-  <div class="ax-list-toolbar" *ngIf="toolbar">
-    <ng-content select="ax-toolbar"></ng-content>
-  </div>
-  <div class="ax-list-container" cdkDropList [id]="dropId" [cdkDropListConnectedTo]="connectedList"
-    (cdkDropListDropped)="dragDrop($event)" [cdkDropListData]="items"
-    [ngClass]="{'overflow-y': direction=='vertical' || direction=='horizontal-wrap','overflow-x': direction=='horizontal' || direction=='vertical-wrap'}">
-    <div class="item-wrapper" [ngClass]="direction">
-      <!-- <ng-container *ngIf="items && items.length; else emptyTemplate"> -->
-      <ng-container *ngIf="allowMoveItem; else elseTemplate">
-        <div class="ax-list-item" *ngFor="let item of items" cdkDrag [cdkDragData]="item">
-          <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item,direction:direction}">
-          </ng-container>
-          <div class="drop-placeholder" *cdkDragPlaceholder></div>
-        </div>
-      </ng-container>
-      <ng-template #elseTemplate>
-        <div class="ax-list-item" *ngFor="let item of items">
-          <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item,direction:direction }">
-          </ng-container>
-        </div>
-      </ng-template>
-      <!-- </ng-container> -->
-
-    </div>
-    <ng-container *ngIf="items==null || items.length==0">
-      <ng-container *ngTemplateOutlet="emptyTemplate">
-      </ng-container>
-    </ng-container>
-
-  </div>
-</div>

package/src/lib/data-list/list/list.component.scss

@@ -1,64 +0,0 @@
-.ax-list-container {
-
-    height: calc(100% - 45px);
-    min-height: 50px;
-
-    &.overflow-x {
-        overflow-x: auto;
-        overflow-y: hidden
-    }
-
-    &.overflow-y {
-        overflow-y: auto;
-        overflow-x: hidden
-    }
-
-
-    .item-wrapper {
-        height: auto;
-        display: flex;
-    }
-
-    .cdk-drop-list-dragging .cdk-drag {
-        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-    }
-
-    .cdk-drag-animating {
-        transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
-    }
-
-    .drop-placeholder {
-        background: var(--gray-light-color);
-        border: dotted 2px var(--border-color);
-        min-height: 60px;
-        margin-bottom: 5px;
-        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-    }
-
-    .vertical {
-        flex-direction: column;
-    }
-
-    .vertical-wrap {
-        flex-direction: column;
-        flex-wrap: wrap;
-    }
-
-    .horizontal-wrap {
-        flex-direction: row;
-        flex-wrap: wrap;
-    }
-
-    .horizontal {
-        flex-direction: row;
-    }
-    
-}
-
-.ax-list-toolbar {
-    padding: 4px 5px;
-    background: #fff;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    margin-bottom: 10px;
-}

package/src/lib/data-list/list/list.component.ts

@@ -1,149 +0,0 @@
-import {
-  Component,
-  ContentChild,
-  TemplateRef,
-  Input,
-  Output,
-  EventEmitter
-} from "@angular/core";
-import { AXDataListComponent } from "../core/data-list.component";
-import {
-  AXToolbarListViewComponent,
-  AXListViewDirection
-} from "./toolbar-list-view.component";
-import { ViewEncapsulation } from "@angular/core";
-import { AXToolbarSearchComponent } from '../../toolbar/search/toolbar-search.component';
-import { AXToolbarComponent } from '../../toolbar/toolbar.component';
-import { AXEvent, AXValueEvent } from '../../base/events.class';
-import { AXDataSourceComponent } from '../../data-source/datasource.component';
-
-
-
-
-
-
-@Component({
-  selector: "ax-list",
-  templateUrl: "./list.component.html",
-  styleUrls: ["./list.component.scss"],
-  encapsulation: ViewEncapsulation.None
-})
-export class AXListComponent extends AXDataListComponent {
-  constructor() {
-    super();
-  }
-  @Input() width: string = "";
-  @Input() height: string = "auto";
-
-  @Input("dropId") public dropId: string;
-  @Input("connectedList") public connectedList: string[] = [];
-
-  @Input() public allowMoveItem: boolean = false;
-
-
-  @ContentChild(AXDataSourceComponent, { static: true })
-  private _contentDataSource: AXDataSourceComponent;
-
-  private _dataSource: AXDataSourceComponent;
-
-  @Input()
-  public get dataSource(): AXDataSourceComponent {
-    return this._dataSource ? this._dataSource : this._contentDataSource;
-  }
-
-  public set dataSource(v: AXDataSourceComponent) {
-    this._dataSource = v;
-  }
-
-
-  @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(AXToolbarSearchComponent, { static: true })
-  searchToolbar: AXToolbarSearchComponent;
-
-  @ContentChild(AXToolbarListViewComponent, { static: true })
-  viewToolbar: AXToolbarListViewComponent;
-
-  @ContentChild(AXToolbarComponent, { static: true })
-  toolbar: AXToolbarComponent;
-
-
-
-  @Output()
-  onDirectionChanged: EventEmitter<AXValueEvent<AXListViewDirection>> = new EventEmitter<AXValueEvent<AXListViewDirection>>();
-
-  private _direction: AXListViewDirection = "vertical";
-  @Input()
-  public get direction(): AXListViewDirection {
-    return this._direction;
-  }
-  public set direction(v: AXListViewDirection) {
-    if (this._direction != v) {
-      const old = this._direction;
-      this._direction = v;
-      this.setDirection(v);
-      this.onDirectionChanged.emit({
-        component: this,
-        value: v,
-        oldValue: old
-      });
-    }
-  }
-
-
-  ngAfterViewInit(): void {
-    this.fetch();
-    if (this.viewToolbar) {
-      this.viewToolbar.onDirectionChanged.subscribe(c => {
-        this.direction = c.value;
-      });
-    }
-  }
-
-  private setDirection(e: AXListViewDirection) {
-    this.direction = e;
-  }
-
-
-
-  // dragDrop(event: CdkDragDrop<any[]>) {
-  //   if (event.previousContainer === event.container) {
-  //     moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-  //   } else {
-  //     transferArrayItem(event.previousContainer.data,
-  //       event.container.data,
-  //       event.previousIndex,
-  //       event.currentIndex);
-  //   }
-  // }
-  dragDrop(event: any) {
-
-  }
-}

package/src/lib/data-list/list/list.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { AXListComponent } from './list.component';
-import { CommonModule } from '@angular/common';
-import { AXToolbarListViewComponent } from './toolbar-list-view.component';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { AXDataSourceModule } from '../../data-source/datasource.module';
-
-@NgModule({
-    declarations: [AXListComponent, AXToolbarListViewComponent],
-    imports: [CommonModule, AXDataSourceModule, DragDropModule],
-    exports: [AXListComponent, AXToolbarListViewComponent],
-    providers: [],
-})
-export class AXListModule { }

package/src/lib/data-list/list/toolbar-list-view.component.ts

@@ -1,63 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { AXToolbarItem } from '../../toolbar/toolbar-item';
-import { AXValueEvent } from '../../base/events.class';
-
-export type AXListViewDirection = "vertical" | "vertical-wrap" | "horizontal-wrap" | "horizontal";
-
-@Component({
-    selector: 'ax-toolbar-list-view',
-    template: `
-    <div class="btn-group" role="group">
-        <button type="button" class="btn btn-light btn-sm" *ngIf="vertical" [class.active]="direction=='vertical'"   (click)="direction='vertical'" title="vertical">
-        <i class="far fa-bars"></i>
-        </button>
-        <button type="button" class="btn btn-light btn-sm"  *ngIf="verticalWrap" [class.active]="direction=='vertical-wrap'" (click)="direction='vertical-wrap'" title="vertical-wrap">
-        <i class="far fa-grip-horizontal"></i>
-        </button>
-        <button type="button" class="btn btn-light btn-sm"  *ngIf="horizontalWrap" [class.active]="direction=='horizontal-wrap'" title="horizontal-wrap'" (click)="direction='horizontal-wrap'" title="horizontal-wrap">
-        <i class="far fa-bars fa-rotate-90"></i>
-        </button>
-        <button type="button" class="btn btn-light btn-sm"  *ngIf="horizontal" [class.active]="direction=='horizontal'" (click)="direction='horizontal'" title="horizontal">
-        <i class="far fa-grip-horizontal fa-rotate-90"></i>
-        </button>
-    </div>
-    `,
-    providers: [{ provide: AXToolbarItem, useExisting: AXToolbarListViewComponent }]
-})
-export class AXToolbarListViewComponent {
-    constructor() { }
-
-    @Input('vertical')
-    vertical: boolean = true;
-
-    @Input('vertical-wrap')
-    verticalWrap: boolean = true;
-
-    @Input('horizontal-wrap')
-    horizontalWrap: boolean = true;
-
-    @Input('horizontal')
-    horizontal: boolean = true;
-
-
-    @Output()
-    onDirectionChanged: EventEmitter<AXValueEvent<AXListViewDirection>> = new EventEmitter<AXValueEvent<AXListViewDirection>>();
-
-    private _direction: AXListViewDirection = "vertical";
-    @Input()
-    public get direction(): AXListViewDirection {
-        return this._direction;
-    }
-    public set direction(v: AXListViewDirection) {
-        if (v != this._direction) {
-            const old = this._direction;
-            this._direction = v;
-            this.onDirectionChanged.emit({
-                component: this,
-                value: v,
-                oldValue: old
-            });
-        }
-    }
-
-}

package/src/lib/data-source/datasource.component.ts

@@ -1,50 +0,0 @@
-import { Component, ContentChild, EventEmitter, Input } from "@angular/core";
-import { AXDataSourceReadParams, AXDataSourceRead, AXDataSourceReceivedResult } from './read-param';
-import { AXBaseEvent, AXValueEvent } from '../base/events.class';
-import { AXDataEvent } from '../base/events.class';
-
-
-export class AXDataSourceReceivedEvent extends AXDataEvent<AXDataSourceReceivedResult>
-{
-
-}
-
-
-@Component({
-    selector: "ax-data-source",
-    template: "<ng-content></ng-content>"
-})
-export class AXDataSourceComponent {
-
-    onDataReceived: EventEmitter<AXDataSourceReceivedEvent> = new EventEmitter<AXDataSourceReceivedEvent>();
-    onFetchStart: EventEmitter<AXBaseEvent> = new EventEmitter<AXBaseEvent>();
-
-    @Input()
-    provideData: (params: AXDataSourceReadParams) => Promise<any>;
-
-    @Input()
-    params: any;
-
-    fetch(params: AXDataSourceReadParams) {
-        this.onFetchStart.emit({ component: this });
-        if (this.provideData) {
-            if (params === null) {
-                params = this.params === undefined ? null : this.params;
-            } else {
-                params.extra = this.params;
-            }
-
-            //
-            this.provideData(params).then(_data => {
-                const data: AXDataSourceReceivedResult = new AXDataSourceReceivedResult();
-                data.result = _data;
-                data.requestId = params == null ? null : params.requestId;
-                this.onDataReceived.emit({
-                    component: this,
-                    data: data
-                });
-            });
-        }
-    }
-
-}

package/src/lib/data-source/datasource.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { AXDataSourceComponent } from './datasource.component';
-import { AXHttpModule } from '@acorex/core';
-
-@NgModule({
-    declarations: [AXDataSourceComponent],
-    imports: [],
-    exports: [AXDataSourceComponent],
-    providers: [],
-})
-export class AXDataSourceModule { }

package/src/lib/date-picker/date-picker.component.html

@@ -1,30 +0,0 @@
-<ax-drop-down [readonly]="readonly" [fitParent]="false" [size]="size" [showDropDownButton]="false"
-    icon="far fa-calendar-alt" #dropdown maxHeight="unset">
-    <ng-container start>
-        <ng-content select="[start]">
-        </ng-content>
-    </ng-container>
-    <ng-container header>
-        <ax-text-box #input [textAlign]="textAlign" [(value)]="text" [readonly]="false" [textMask]="dateType"
-            [disabled]="disabled" [placeholder]="placeholder" [size]="size" (onkey)="handleKeyPress($event)"
-            (onFocus)="handleInputFocus()" (click)="handleClick()" (onBlur)="handleInputBlur()"
-            (onValueChanged)="textChange($event)"></ax-text-box>
-    </ng-container>
-    <ng-container panel>
-        <ax-calendar-box *ngIf="_renderPicker" [showTodayButton]="showTodayButton"
-            [selectableHoliday]="selectableHoliday" [min]="min" [max]="max" [size]="size" (onClick)="onClick($event)"
-            (onValueChanged)="onDateChange($event)" [type]="type" [(value)]="value" [dayStyle]="dayStyle"
-            [dayMinMaxResoan]="dayMinMaxResoan">
-        </ax-calendar-box>
-    </ng-container>
-    <ng-container end>
-        <ax-button end *ngIf="allowClear && value" [disabled]="disabled" icon="far fa-times icon" type="blank danger"
-            (click)="clear()" [size]="size" [tabIndex]="-1">
-        </ax-button>
-        <ax-button end icon="far fa-calendar-alt icon" type="light blank" (click)="handleButtonClick()"
-            [disabled]="disabled" [size]="size" [tabIndex]="-1"></ax-button>
-        <ng-content select="[end]">
-        </ng-content>
-    </ng-container>
-
-</ax-drop-down>

package/src/lib/date-picker/date-picker.component.scss

@@ -1,5 +0,0 @@
-.ax-dropdown-container-bordered {
-  .ax-calendar-container {
-    border: none !important;
-  }
-}