@acorex/components 6.5.28 → 6.5.30

package/src/lib/context-menu/context-menu.directive.ts

@@ -1,159 +0,0 @@
-import { Directive, ElementRef, HostListener, Input, Output, EventEmitter, ComponentFactoryResolver, Injector, ViewContainerRef } from '@angular/core';
-import { AXMenuItem } from '@acorex/core';
-import { AXBaseEvent } from '../base/events.class';
-import { AXContextMenuComponent } from './context-menu.component';
-import { Subscription } from 'rxjs';
-
-export type AXContextMenuPromiseFunction = (item: any) => Promise<AXMenuItem[]>;
-export type AXContextMenuFunction = (item: any) => AXMenuItem[];
-export class AXContextMenuItemClickEvent extends AXBaseEvent {
-  dataItem?: any;
-  menuItem: AXMenuItem;
-}
-
-@Directive({
-  selector: '[axContextMenu]'
-})
-export class AXContextMenuDirective {
-  @Input()
-  contextMenu: AXContextMenuComponent;
-
-  @Input()
-  contextDataItem: any;
-
-  @Input()
-  contextMenuItems: AXMenuItem[] | AXContextMenuPromiseFunction | AXContextMenuFunction;
-
-  @Output()
-  onContextMenuItemClick: EventEmitter<AXContextMenuItemClickEvent> = new EventEmitter<AXContextMenuItemClickEvent>();
-
-  @Input()
-  rtl: boolean = false;
-
-  internalItems: AXMenuItem[] = [];
-
-  private clickSubscribe: Subscription;
-  private closeSubscribe: Subscription;
-
-  @HostListener('contextmenu', ['$event'])
-  onContextMenu(e: MouseEvent) {
-    this.getMenuItems().then(items => {
-      e.stopPropagation();
-      e.preventDefault();
-      this.createContextMenu();
-      this.contextMenu.items = items;
-
-
-      this.contextMenu.open(e.x, e.y, this.rtl);
-
-
-    });
-  }
-
-
-
-  constructor(
-    private ref: ElementRef,
-    private factoryResolver: ComponentFactoryResolver,
-    private viewContainerRef: ViewContainerRef,
-    private injector: Injector
-  ) {
-  }
-
-  ngOnInit(): void {
-    if (this.rtl == null) {
-      this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
-    }
-  }
-
-  createContextMenu(): void {
-    const wrapper = document.createElement('div');
-    wrapper.classList.add('ax-overlay-wrapper');
-    wrapper.addEventListener('click', this.wrapperClick.bind(this));
-    wrapper.addEventListener('contextmenu', this.wrapperRClick.bind(this));
-    //
-    document.body.appendChild(wrapper);
-    const factory = this.factoryResolver.resolveComponentFactory(AXContextMenuComponent);
-    const componentRef = this.viewContainerRef.createComponent(factory);
-    this.contextMenu = componentRef.instance;
-    wrapper.appendChild(componentRef.location.nativeElement);
-    //
-    this.clearComponentSubscriptions();
-    this.createComponentSubscriptions();
-  }
-
-  wrapperClick(e: MouseEvent) {
-    this.remove();
-  }
-
-  wrapperRClick(e: MouseEvent) {
-    if (document.elementsFromPoint(e.clientX, e.clientY).includes(this.ref.nativeElement)) {
-      e.stopPropagation();
-      e.preventDefault();
-
-      this.contextMenu.open(e.x, e.y, this.rtl);
-    }
-    else {
-      e.preventDefault();
-      this.remove();
-    }
-  }
-
-
-
-  private clearComponentSubscriptions() {
-    if (this.clickSubscribe) {
-      this.clickSubscribe.unsubscribe();
-      this.clickSubscribe = undefined;
-    }
-    if (this.closeSubscribe) {
-      this.closeSubscribe.unsubscribe();
-      this.closeSubscribe = undefined;
-    }
-  }
-
-  private createComponentSubscriptions() {
-    this.clickSubscribe = this.contextMenu.onItemClick.subscribe(c => {
-      this.remove();
-      this.onContextMenuItemClick.emit({
-        component: this,
-        dataItem: this.contextDataItem,
-        htmlElement: this.ref.nativeElement,
-        menuItem: c
-      });
-    }) as any;
-    this.closeSubscribe = this.contextMenu.onClosed.subscribe(c => {
-      this.clearComponentSubscriptions();
-    }) as any;
-  }
-
-  private remove() {
-    this.viewContainerRef.clear();
-    this.clearComponentSubscriptions();
-    document.querySelector('.ax-overlay-wrapper')?.remove();
-  }
-
-  private getMenuItems(): Promise<AXMenuItem[]> {
-    return new Promise<AXMenuItem[]>((resolve, reject) => {
-      if (typeof (this.contextMenuItems) === 'function') {
-        const val = this.contextMenuItems(this.contextDataItem);
-        if (val instanceof Promise) {
-          val.then(_data => {
-            resolve(_data);
-          });
-        } else {
-          resolve(val);
-        }
-      } else if (Array.isArray(this.contextMenuItems)) {
-        resolve(this.contextMenuItems);
-      }
-      else {
-        resolve([]);
-      }
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.clearComponentSubscriptions();
-  }
-}

package/src/lib/context-menu/context-menu.module.ts

@@ -1,15 +0,0 @@
-import { NgModule, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXContextMenuComponent } from './context-menu.component';
-import { AXContextMenuDirective } from './context-menu.directive';
-
-
-@NgModule({
-    declarations: [AXContextMenuComponent, AXContextMenuDirective],
-    imports: [CommonModule],
-    exports: [AXContextMenuComponent, AXContextMenuDirective],
-    providers: [],
-})
-export class AXContextMenuModule {
-
-}

package/src/lib/data-filter/columns/filter-column-date.component.ts

@@ -1,123 +0,0 @@
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, EventEmitter, Output } from '@angular/core';
-import { AXFilterCondition, AXFilterColumnComponent } from '../filter.class';
-import { AXDateTime } from '@acorex/core';
-import { AXSelectionListComponent } from '../../selection-list/selection-list.component';
-
-@Component({
-    selector: 'ax-filter-column-date',
-    template: `
-    <div class="ax-filter-section">
-    <ax-selection-list [items]="items" mode="single" direction="vertical" (selectedItemsChange)="onSelectedChanged($event)">
-    </ax-selection-list>
-    </div>
-    <div class="ax-filter-section-value" [hidden]="!showCustom">
-        <ax-date-picker label="From" [(value)]="fromDate" (onValueChanged)="dateChange($event)"></ax-date-picker>
-        <ax-date-picker label="To" [(value)]="toDate" (onValueChanged)="dateChange($event)"></ax-date-picker>
-    </div>
-    <div class="ax-filter-section-value" [hidden]="!showSpecific">
-        <ax-date-picker label="Date" [(value)]="fromDate" (onValueChanged)="dateChange($event)"></ax-date-picker>            
-    </div>
-    `,
-    providers: [
-        { provide: AXFilterColumnComponent, useExisting: AXFilterColumnDateComponent }
-    ],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AXFilterColumnDateComponent extends AXFilterColumnComponent {
-    @ViewChild(AXSelectionListComponent, { static: true }) selection: AXSelectionListComponent;
-
-    items: any = [
-        {
-            text: 'Today',
-            value: 'today'
-        },
-        {
-            text: 'This Week',
-            value: 'this-week'
-        },
-        {
-            text: 'This Month',
-            value: 'this-month'
-        },
-        {
-            text: 'This Year',
-            value: 'this-year'
-        },
-        {
-            text: 'Specific',
-            value: 'specific'
-        },
-        {
-            text: 'Range',
-            value: 'range'
-        }
-    ];
-
-    fromDate: AXDateTime = new AXDateTime();
-    toDate: AXDateTime = new AXDateTime();
-
-    selectedItem: any = null;
-
-    showCustom: boolean = false;
-    showSpecific: boolean = false;
-
-    constructor(protected cdr: ChangeDetectorRef) {
-        super(cdr);
-    }
-
-    ngAfterViewInit(): void {
-        this.selection.selectedItems = [this.items[0]];
-    }
-    dateChange(e) {
-        this.valueChange.emit();
-    }
-    onSelectedChanged(items: any[]) {
-
-        this.selectedItem = items[0];
-        this.showCustom = this.selectedItem && this.selectedItem.value == 'range';
-        this.showSpecific = this.selectedItem && this.selectedItem.value == 'specific';
-        this.cdr.detectChanges();
-        this.valueChange.emit();
-    }
-
-    get condition(): AXFilterCondition {
-        let today = new AXDateTime();
-        switch (this.selectedItem.value) {
-            case 'today':
-                this.fromDate = this.toDate = today;
-
-                return {
-                    condition: 'equal',
-                    field: this.field,
-                    dataType: 'date',
-                    value: this.fromDate.toISOString()
-                }
-            case 'specific':
-                return {
-                    condition: 'equal',
-                    field: this.field,
-                    dataType: 'date',
-                    value: this.fromDate.toISOString()
-                }
-            case 'this-week':
-                this.toDate = today.endOf('week');
-                this.fromDate = today.startOf('week');
-                break;
-            case 'this-month':
-                this.toDate = today.endOf('month')
-                this.fromDate = today.startOf('month');
-                break;
-            case 'this-year':
-                this.toDate = today.endOf('year')
-                this.fromDate = today.startOf('year');
-                break;
-        }
-
-        return {
-            condition: 'between',
-            field: this.field,
-            dataType: 'date',
-            value: [this.fromDate.toISOString(), this.toDate.toISOString()]
-        }
-    }
-}

package/src/lib/data-filter/columns/filter-column-number.component.ts

@@ -1,100 +0,0 @@
-import { Component, ChangeDetectorRef } from '@angular/core';
-import { AXFilterCondition, AXFilterColumnComponent } from '../filter.class';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-
-import { Observable } from 'rxjs';
-
-
-@Component({
-    selector: 'ax-filter-column-number',
-    template: `
-    <div class="ax-filter-section">
-    <div>
-        <select (ngModelChange)="onOperatorChange($event)" class="form-control form-control-sm"  [(ngModel)]="operator">
-            <option *ngFor="let o of operators" value="{{o.value}}">
-                {{o.title}}
-            </option>
-        </select>
-    </div>
-    <div>
-        <ax-text-box placeholder="Type here" (textChange)="onTextChange($event)" [(value)]="value" *ngIf="operator!='is-not-empty' && operator!='is-empty'">
-        </ax-text-box>
-    </div>
-</div>
-    `,
-    providers: [
-        { provide: AXFilterColumnComponent, useExisting: AXFilterColumnNumberComponent }
-    ]
-})
-export class AXFilterColumnNumberComponent extends AXFilterColumnComponent {
-
-    operator: string = 'equal';
-
-    operators: any[] = [
-        {
-            title: 'is',
-            value: 'equal'
-        },
-        {
-            title: `isn't`,
-            value: 'not-equal'
-        },
-        {
-            title: 'less than',
-            value: 'less-than'
-        },
-        {
-            title: 'less than or equal',
-            value: 'less-than-equal'
-        },
-        {
-            title: 'greater than',
-            value: 'greater-than'
-        },
-        {
-            title: 'greater than or equal',
-            value: 'greater-than-equal'
-        },
-        {
-            title: 'is empty',
-            value: 'is-empty'
-        },
-        {
-            title: `isn't empty`,
-            value: 'is-not-empty'
-        }
-    ];
-    constructor(protected cdr: ChangeDetectorRef) {
-        super(cdr);
-    }
-    private searchChangeObserver: any;
-    onOperatorChange(e) {
-
-        this.valueChange.emit();
-
-    }
-    onTextChange(e) {
-        // TODO: Check this method work correctly
-        if (!this.searchChangeObserver) {
-            return new Observable(observer => {
-                this.searchChangeObserver = observer;
-            })
-                .pipe(debounceTime(500))
-                .pipe(distinctUntilChanged())
-                .subscribe(c => {
-                    this.valueChange.emit();
-                });
-        }
-        this.searchChangeObserver.next(e);
-    }
-
-    get condition(): AXFilterCondition {
-        return {
-            condition: this.operator,
-            field: this.field,
-            dataType: 'number',
-            value: this.value
-        };
-    }
-
-}

package/src/lib/data-filter/columns/filter-column-selection.component.ts

@@ -1,69 +0,0 @@
-import { Component, Input, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
-import { AXFilterCondition, AXFilterColumnComponent } from '../filter.class';
-import { AXCheckItem } from '@acorex/core';
-
-@Component({
-    selector: 'ax-filter-column-selection',
-    template: `
-    <div class="ax-filter-section">
-    <ax-selection-list  [items]="items" (selectedItemsChange)="onSelectChange($event)" [mode]="mode" direction="vertical" [(selectedItems)]="selectedItems">
-    </ax-selection-list>
- </div>
-    `,
-    providers: [
-        { provide: AXFilterColumnComponent, useExisting: AXFilterColumnSelectionComponent }
-    ],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AXFilterColumnSelectionComponent extends AXFilterColumnComponent {
-
-
-    selectedItems: any[] = [];
-
-    @Input()
-    items: AXCheckItem[] = [];
-
-    @Input()
-    mode = 'single';
-
-    @Input()
-    dataType: any = 'number';
-
-
-
-    constructor(protected cdr: ChangeDetectorRef) {
-        super(cdr);
-    }
-
-    get condition(): AXFilterCondition {
-        const values = this.selectedItems.map(c => c.value);
-        if (values.length === 0) {
-            return null;
-
-        }
-        return {
-            condition: this.mode === 'single' ? 'equal' : 'contains',
-            field: this.field,
-            dataType: this.dataType,
-            value: this.mode === 'single' ? values[0] : values
-        }
-    }
-    clear() {
-        this.selectedItems = [];
-        super.clear();
-    }
-    onSelectChange(e) {
-        this.valueChange.emit();
-
-    }
-
-    setFilter(value: any, operator: string) {
-        if (value instanceof Array) {
-            this.selectedItems = this.items.filter(c => value.some(z => z === c.value));
-        }
-        else {
-            this.selectedItems = [this.items.find(c => c.value === value)];
-        }
-        super.setFilter(value, operator);
-    }
-}

package/src/lib/data-filter/columns/filter-column-string.component.ts

@@ -1,100 +0,0 @@
-import { Component,ChangeDetectorRef } from '@angular/core';
-import { AXFilterCondition, AXFilterColumnComponent } from '../filter.class';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { Observable } from 'rxjs';
-@Component({
-    selector: 'ax-filter-column-string',
-    template: `
-    <div class="ax-filter-section">
-    <div>
-        <select (ngModelChange)="onOperatorChange($event)" class="form-control form-control-sm"  [(ngModel)]="operator">
-            <option *ngFor="let o of operators" value="{{o.value}}">
-                {{o.title}}
-            </option>
-        </select>
-    </div>
-    <div>
-        <ax-text-box placeholder="Type here" (textChange)="onTextChange($event)" [(value)]="value" *ngIf="operator!='is-not-empty' && operator!='is-empty'">
-        </ax-text-box>
-    </div>
-</div>
-    `,
-    providers: [
-        { provide: AXFilterColumnComponent, useExisting: AXFilterColumnStringComponent }
-    ]
-})
-export class AXFilterColumnStringComponent extends AXFilterColumnComponent {
-
-
-    operator: string = 'contains';
-    operators: any[] = [
-        {
-            title: 'is',
-            value: 'equal'
-        },
-        {
-            title: `isn't`,
-            value: 'not-equal'
-        },
-        {
-            title: 'contains',
-            value: 'contains'
-        },
-        {
-            title: 'not contains',
-            value: 'not-contains'
-        },
-        {
-            title: 'start with',
-            value: 'start-with'
-        },
-        {
-            title: 'end with',
-            value: 'end-with'
-        },
-        {
-            title: 'is empty',
-            value: 'is-empty'
-        },
-        {
-            title: `isn't empty`,
-            value: 'is-not-empty'
-        }
-    ];
-
-    constructor(protected cdr: ChangeDetectorRef) {
-        super(cdr);
-    }
-
-    private searchChangeObserver: any;
-
-    onOperatorChange(e) {
-
-        this.valueChange.emit();
-
-    }
-
-    // TODO: Check this method work correctly
-    onTextChange(e) {
-        if (!this.searchChangeObserver) {
-            return new Observable(observer => {
-                this.searchChangeObserver = observer;
-            })
-                .pipe(debounceTime(500))
-                .pipe(distinctUntilChanged())
-                .subscribe(c => {
-                    this.valueChange.emit();
-                });
-        }
-        this.searchChangeObserver.next(e);
-    }
-
-    get condition(): AXFilterCondition {
-        return {
-            condition: this.operator,
-            field: this.field,
-            dataType: 'string',
-            value: this.value
-        }
-    }
-}

package/src/lib/data-filter/filter-panel/filter-panel.component.html

@@ -1,120 +0,0 @@
-<div class="ax-filter-panel" #panel>
-    <div class="saved-list" #savedList>
-        <ax-panel-box #fb>
-            <ng-template #header>
-                <div class="group-header" (click)="fb.toggle()">
-                    <ax-toolbar>
-                        <ax-toolbar-title>
-                            <div>
-                                <i class="far fa-filter"></i>
-                                <span>SAVED FILTERS</span>
-                            </div>
-                        </ax-toolbar-title>
-                        <ax-toolbar-menu #menu [items]="saveItems" (onItemClick)="onMenuItemClick($event)">
-                        </ax-toolbar-menu>
-                    </ax-toolbar>
-                </div>
-            </ng-template>
-
-            <div class="list">
-                <ng-container *ngIf="predefinedFilters && predefinedFilters.length; else emptyList">
-                    <ul>
-                        <ng-container *ngFor="let f of predefinedFilters">
-                            <ng-container *ngIf="!f.isInEdit; else editMode">
-                                <li (click)="setFilterByName(f.name)">
-                                    <div class="item-line" [class.selected]="f.selected">
-                                        <span class="title"><i class="far fa-check"></i> {{f.title}}</span>
-                                        <span class="tools"><i class="far fa-pen text-primary" title="Rename"
-                                                (click)="handleRenameClick(f)"></i>&nbsp;<i
-                                                class="far fa-times text-danger" title="Remove"
-                                                (click)="removeFilter(f)"></i></span>
-                                    </div>
-                                </li>
-                            </ng-container>
-                            <ng-template #editMode>
-                                <li>
-                                    <ax-text-box #tbxName placeholder="Enter filter's title here"
-                                        (onKey)="tbxNameOnKey($event)">
-                                        <ax-button title="Save" type="primary" (onClick)="applySaveFilter()">
-                                            <i class="far fa-check"></i>
-                                        </ax-button>
-                                        <ax-button title="Cancel" type="danger" (onClick)="cancelSaveFilter()">
-                                            <i class="far fa-times"></i>
-                                        </ax-button>
-                                        <ax-validation>
-                                            <ax-validation-rule type="required" message="this field is required">
-                                            </ax-validation-rule>
-                                        </ax-validation>
-                                    </ax-text-box>
-                                </li>
-                            </ng-template>
-                        </ng-container>
-                    </ul>
-                </ng-container>
-                <ng-template #emptyList>
-                    <div class="empty-list">
-                        Empty
-                    </div>
-                </ng-template>
-            </div>
-        </ax-panel-box>
-    </div>
-    <div class="body" #body>
-        <ng-container *ngFor="let g of groups">
-            <ax-panel-box #fb>
-                <ng-template #header>
-                    <div class="group-header" *ngIf="g.caption" (click)="fb.toggle()">
-                        <i
-                            [ngClass]="{ 'far fa-minus-square' : !fb.collapsed ,'fas fa-plus-square' : fb.collapsed }"></i>
-                        <span>{{g.caption}}</span>
-                    </div>
-                </ng-template>
-                <ng-container *ngFor="let c of g.columns">
-                    <div class="ax-filter-item-header" [style.margin-bottom.px]="c.active ? 0 : 2">
-                        <ax-check-box (onValueChanged)="onCheckValueChange(c,$event)" [label]="c.caption"
-                            [(value)]="c.active">
-                        </ax-check-box>
-                    </div>
-                    <div [hidden]="!c.active">
-                        <ng-container [ngSwitch]="c.type">
-                            <ng-container *ngSwitchCase="'selection'">
-                                <ax-filter-column-selection (valueChange)="onValueChange($event)" [field]="c.field"
-                                    [(active)]="c.active" [mode]="c.options.mode" [items]="c.options.items"
-                                    [dataType]="c.options.dataType">
-                                </ax-filter-column-selection>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'date'">
-                                <ax-filter-column-date (valueChange)="onValueChange($event)" [field]="c.field"
-                                    [(active)]="c.active">
-                                </ax-filter-column-date>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'number'">
-                                <ax-filter-column-number (valueChange)="onValueChange($event)" [field]="c.field"
-                                    [(active)]="c.active">
-                                </ax-filter-column-number>
-                            </ng-container>
-                            <ng-container *ngSwitchDefault>
-                                <ax-filter-column-string (valueChange)="onValueChange($event)" [field]="c.field"
-                                    [(active)]="c.active">
-                                </ax-filter-column-string>
-                            </ng-container>
-                        </ng-container>
-                    </div>
-                </ng-container>
-            </ax-panel-box>
-        </ng-container>
-    </div>
-
-    <div *ngIf="mode=='click'" class="footer" #footer>
-        <div class="filter-panel">
-            <ax-button (onClick)="apply()" type="success" size="sm">
-                <i class="far fa-filter"></i>
-                Apply Filter
-            </ax-button>
-            <ax-button (onClick)="clear();" type="light " size="sm">
-                <i class="far fa-eraser"></i>
-                Clear
-            </ax-button>
-        </div>
-    </div>
-</div>