@acorex/components 5.0.5 → 5.0.9

package/src/lib/loading/loading.directive.ts

@@ -1,86 +0,0 @@
-import {
-    ChangeDetectorRef,
-    ComponentFactoryResolver,
-    Directive,
-    ElementRef,
-    Input,
-    OnChanges,
-    Renderer2,
-    SimpleChanges, ViewContainerRef
-  } from '@angular/core';
-import { AXLoadingComponent } from './loading.component';
-  
-  
-  const OVERLAY_CLASS = 'loading-overlay';
-  
-  // This directive places an overlay with a loading spinner over its host element
-  // if isLoading equals to true and hides the overlay when isLoading becomes false.
-  @Directive({
-    selector: '[axIsLoading]'
-  })
-  export class AXLoadingDirective implements OnChanges {
-    @Input('axIsLoading')
-    isLoading = false;
-  
-    protected overlayElement!: HTMLDivElement;
-    protected spinnerElement!: HTMLDivElement;
-    protected hostElement!: HTMLDivElement;
-  
-    constructor(
-      protected readonly elementRef: ElementRef,
-      protected readonly renderer: Renderer2,
-      protected readonly changeDetectorRef: ChangeDetectorRef,
-      protected readonly viewContainerRef: ViewContainerRef,
-      protected readonly componentFactoryResolver: ComponentFactoryResolver,
-    ) {
-      this.hostElement = this.elementRef.nativeElement;
-      this.hostElement.style.position = 'relative';
-    }
-  
-    ngOnChanges(changes: SimpleChanges): void {
-      if (!this.overlayElement || !this.spinnerElement) {
-        this.init();
-      }
-  
-      if (changes.isLoading) {
-        const isLoadingValue = changes.isLoading.currentValue;
-  
-        if (isLoadingValue) {
-          this.addLoadingIndicator();
-        }
-        else {
-          this.removeLoadingIndicator();
-        }
-  
-        this.changeDetectorRef.markForCheck();
-      }
-    }
-  
-    protected addLoadingIndicator(): void {
-      this.renderer.appendChild(this.hostElement, this.overlayElement);
-      this.renderer.appendChild(this.overlayElement, this.spinnerElement);
-    }
-  
-    protected removeLoadingIndicator(): void {
-      this.renderer.removeChild(this.overlayElement, this.spinnerElement);
-      this.renderer.removeChild(this.hostElement, this.overlayElement);
-      this.viewContainerRef.clear();
-    }
-  
-    protected init(): void {
-      this.initOverlayElement();
-      this.initSpinnerComponent();
-    }
-  
-    protected initSpinnerComponent(): void {
-      const spinnerComponentFactory = this.componentFactoryResolver.resolveComponentFactory(AXLoadingComponent);
-      const spinnerComponent = this.viewContainerRef.createComponent(spinnerComponentFactory);
-      this.spinnerElement = spinnerComponent.location.nativeElement;
-    }
-  
-    protected initOverlayElement(): void {
-      this.overlayElement = this.renderer.createElement('div');
-      this.renderer.addClass(this.overlayElement, OVERLAY_CLASS);
-    }
-  }
-  

package/src/lib/loading/loading.module.ts

@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXLoadingComponent } from './loading.component';
-import { AXLoadingDirective } from './loading.directive';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { PortalModule } from '@angular/cdk/portal';
-import { AXLoadingSpinnerComponent } from './loading-spinner.component';
-import { AXConfig } from '@acorex/core';
-
-const COMPONENT = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
-const MODULES = [CommonModule, OverlayModule, PortalModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXLoadingModule {
-
-
-    constructor() {
-        AXConfig.set({
-            layout: {
-                loading: {
-                    spinner: AXLoadingSpinnerComponent
-                }
-            }
-        })
-
-    }
-}

package/src/lib/loading/loading.service.ts

@@ -1,172 +0,0 @@
-import { Injectable, NgZone } from '@angular/core';
-import { asyncScheduler, BehaviorSubject, Observable } from 'rxjs';
-import { finalize, observeOn } from 'rxjs/operators';
-import { AXOverlayService, AXOverlayViewRef } from '../base/overlay.service';
-import { AXLoadingComponent } from './loading.component';
-
-type LoadingContext = object;
-type LoaderId = string | number; // expected enum values
-const DEFAULT_LOADER_ID: LoaderId = '_DEFAULT';
-
-/**
- * Used for centrally setting/unsetting loading flags for components or services.
- * Should be connected to global HTTP interceptor which will unset
- * the loading flags in case an error happens using the clearLoadings() method.
- *
- * FAQ:
- * Q: How to change loading flag for a parent component?
- * A: Inject the parent component as a dependency to your constructor and
- *    call loadingService.setLoading(parentComponent, STATE).
- * 
- * Q: How to change loading flag for a child component?
- * A: Use a @ViewChild with component selector and pass the
- *    reference of the child to setLoading method.
- *
- * Q: I need more loading indicators in my components. How to?
- * A: Assign a LoaderId to each indicator and then use them
- *    with calls to methods of this service.
- */
-@Injectable({
-    providedIn: 'root'
-})
-export class AXLoadingService {
-    // WeakMap will remove components from itself upon
-    // their garbage collection by JS runtime.
-    protected loadingStates = new WeakMap<LoadingContext, Map<LoaderId, boolean>>();
-    // Both loading state maps are kept in-sync such that
-    // they can be used by both sync and async methods.
-    protected loadingStates$ = new WeakMap<LoadingContext, Map<LoaderId, BehaviorSubject<boolean>>>();
-
-    constructor(protected zoneRef: NgZone, private overlayService: AXOverlayService) { }
-
-    private _stack: { id: number, component: AXOverlayViewRef }[] = [];
-
-    show(location?: Element): number {
-        let host: Element;
-        if (location) {
-            host = location.closest('.ax-loading-host');
-        }
-        const containerElement = (host || location) as HTMLDivElement;
-        const com = this.overlayService.show(AXLoadingComponent, {},
-            {
-                closeOnClickOutside: false,
-                containerElement,
-                hasBackdrop: true,
-                backdropClass: ['ax-loading-overlay'],
-                scroll: 'block'
-            });
-        com.instance.visible = true;
-        const id = new Date().getTime();
-        this._stack.push({ id, component: com });
-        return id;
-    }
-
-    hide(id): void {
-        const f = this._stack.find(c => c.id === id);
-        if (f) {
-            f.component.dispose();
-            this._stack = this._stack.filter(c => c.id !== id);
-        }
-    }
-
-
-    // Observable creation operator.
-    // LoaderId can be used when there are multiple loading indicators associated to a single context.
-    // Context can be any object, though in practice, components and services will be the most common contexts.
-    // loaderId is a non-mandatory parameter - when not specified, a default loaderId is used.
-    // Such a scenario is used when your context has contains only one loading indicator.
-    doLoading<V>(source$: Observable<V>, context: LoadingContext, loaderId?: LoaderId): Observable<V> {
-        this.startLoading(context, loaderId);
-
-        return source$.pipe(
-            observeOn(asyncScheduler),
-            finalize(() => this.endLoading(context, loaderId)),
-        );
-    }
-
-    // To be used in your html templates.
-    // Returns a boolean indicating whether a given loader is active in a given context.
-    // If loaderId is unspecified, the method will return a logical disjunction of all
-    // loader states in the context.
-    isLoading(context: LoadingContext, loaderId?: LoaderId): boolean {
-        const loaderStates = this.loadingStates.get(context);
-
-        if (!loaderStates) {
-            return false;
-        }
-        else {
-            if (loaderId !== undefined) {
-                return loaderStates.get(this.getLoaderId(loaderId)) ?? false;
-            }
-            else {
-                return [...loaderStates.values()].filter(state => state).length > 0;
-            }
-        }
-    }
-
-    // To be used in your html templates with async pipes.
-    // Returns an Observable of booleans indicating whether a given loader is active in a given context.
-    isLoading$(context: LoadingContext, loaderId?: LoaderId): Observable<boolean> {
-        const coalescedLoaderId = this.getLoaderId(loaderId);
-
-        if (!this.hasLoadingStates(context, coalescedLoaderId)) {
-            this.setLoadingState(context, false, loaderId);
-        }
-
-        return this.loadingStates$.get(context).get(coalescedLoaderId);
-    }
-
-    // The startLoading and endLoading methods are intended to be used when handling
-    // complex scenarios where a need for extended usage flexibility is desired.
-    startLoading(context: LoadingContext, loaderId?: LoaderId): void {
-        this.setLoadingState(context, true, this.getLoaderId(loaderId));
-    }
-
-    endLoading(context: LoadingContext, loaderId?: LoaderId): void {
-        this.setLoadingState(context, false, this.getLoaderId(loaderId));
-    }
-
-    // To be called by middleware code (HTTP interceptors/routing listeners, etc.).
-    clearLoadings(): void {
-        this.loadingStates = new WeakMap<LoadingContext, Map<LoaderId, boolean>>();
-        this.loadingStates$ = new WeakMap<LoadingContext, Map<LoaderId, BehaviorSubject<boolean>>>();
-    }
-
-    protected setLoadingState(context: LoadingContext, state: boolean, loaderId: LoaderId): void {
-        if (!this.hasLoadingStates(context, loaderId)) {
-            if (this.hasContextLoadingState(context)) {
-                this.loadingStates.get(context).set(loaderId, state);
-                this.loadingStates$.get(context).set(loaderId, new BehaviorSubject<boolean>(state));
-            }
-            else {
-                this.loadingStates.set(context, new Map<LoaderId, boolean>([
-                    [loaderId, state]
-                ]));
-                this.loadingStates$.set(context, new Map<LoaderId, BehaviorSubject<boolean>>([
-                    [loaderId, new BehaviorSubject<boolean>(state)]
-                ]));
-            }
-        }
-        else {
-            // @ts-ignore - loadingStates[context] is surely defined in this branch
-            this.loadingStates.get(context).set(loaderId, state);
-            this.loadingStates$.get(context).get(loaderId).next(state);
-        }
-    }
-
-    protected hasLoadingStates(context: LoadingContext, loaderId: LoaderId) {
-        return this.hasContextLoadingState(context) && this.hasLoaderLoadingState(context, loaderId);
-    }
-
-    protected hasContextLoadingState(context: LoadingContext) {
-        return this.loadingStates.has(context) && this.loadingStates$.has(context);
-    }
-
-    protected hasLoaderLoadingState(context: LoadingContext, loaderId: LoaderId) {
-        return this.loadingStates.get(context).has(loaderId) && this.loadingStates$.get(context).has(loaderId);
-    }
-
-    protected getLoaderId(loaderId?: LoaderId): LoaderId {
-        return loaderId ?? DEFAULT_LOADER_ID;
-    }
-}

package/src/lib/number-box/number-box.component.html

@@ -1,15 +0,0 @@
-<ng-content select="ax-prefix">
-</ng-content>
-<input class="ax-input" type="text" [attr.pattern]="'[\d\.]*'" [attr.placeholder]="placeholder" [attr.min]="minValue"
-    [attr.max]="maxValue" [class.ax-state-disabled]="disabled" [class.ax-state-readonly]="readonly"
-    [disabled]="disabled" [readonly]="readonly" [tabindex]="tabIndex" [ngModel]="displayText"
-    (focus)="_emitOnFocusEvent($event)" (blur)="_handleOnBlurEvent($event)" (keydown)="_handleOnKeydownEvent($event)"
-    autocomplete="off">
-<ax-button color="light" look="blank" (onClick)="clear()" [tabIndex]="-1"
-    *ngIf="value && allowNull && !(disabled || readonly)">
-    <i class="ax-icon-x icon"></i>
-</ax-button>
-<ng-content select="ax-suffix">
-</ng-content>
-<ng-content select="ax-validation-rule">
-</ng-content>

package/src/lib/number-box/number-box.component.ts

@@ -1,297 +0,0 @@
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  Input,
-  Output,
-  EventEmitter,
-  HostBinding,
-} from '@angular/core';
-import { MaskApplierService } from 'ngx-mask';
-import { AXBaseTextBoxMixin } from '../base';
-import {
-  TEXTBOX_INPUTS,
-  TEXTBOX_OUTPUT,
-} from '../base/mixin/textbox-mixin.class';
-
-/**
- * The NumberBox is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-@Component({
-  selector: 'ax-number-box',
-  templateUrl: './number-box.component.html',
-  inputs: [
-    'disabled',
-    'readonly',
-    'tabIndex',
-    'size',
-    'value',
-    ...TEXTBOX_INPUTS,
-  ],
-  outputs: [
-    'valueChange',
-    'onValueChanged',
-    'onBlur',
-    'onFocus',
-    ...TEXTBOX_OUTPUT,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'ax-number-box ax-editor-container' },
-})
-export class AXNumberBoxComponent extends AXBaseTextBoxMixin {
-
-  @HostBinding('class')
-  private get __hostClass(): string {
-    return `${this.cssClass} ax-${this.size}`;
-  }
-
-  /**
-  *  A character value that specifies the separator character.
-  */
-  @Input()
-  separator: string = ',';
-
-   /**
-  *  Specifies whether the Separator character will be displayed or not
-  */
-  @Input()
-  thousandSeparator: boolean = false;
-
-   /**
-  *  Specifies the value that is used to increment or decrement the **Integer** part of number
-  */
-  @Input()
-  step: number = 1;
-
-  /**
-  *  Specifies the number of decimals that the user can enter
-  */
-  @Input()
-  scale: number = 0;
-
-  /**
-  *  Specifies the value that is used to increment or decrement the **Deciaml** part of number
-  */
-  @Input()
-  decimalStep: number = 0.1;
-
-  /**
-  *  Specifies whether the Up and Down spin buttons will be rendered or not
-  */
-  @Input()
-  showSpinButtons: boolean = true;
-
-  private _minValue: number = Number.MIN_VALUE;
-
-  /**
-  *  Specifies the smallest value that is valid
-  */
-  @Input()
-  public get minValue(): number {
-    return this._minValue;
-  }
-  public set minValue(v: number) {
-    this._minValue = v ? Number(v) : Number.MIN_VALUE;
-  }
-
-  private _maxValue: number = Number.MAX_VALUE;
-
-  /**
-  *  Specifies the greatest value that is valid
-  */
-  @Input()
-  public get maxValue(): number {
-    return this._maxValue;
-  }
-  public set maxValue(v: number) {
-    this._maxValue = v ? Number(v) : Number.MAX_VALUE;
-  }
-
-  @Output()
-  public displayTextChange: EventEmitter<string> = new EventEmitter<string>();
-  private _displayText: string;
-
-  /**
-  *  The formatted string which is displaying in the numberbox
-  */
-  @Input()
-  public get displayText(): string {
-    return this._displayText;
-  }
-
-  public set displayText(v: string) {
-    this._displayText = v;
-    this.displayTextChange.emit(v);
-  }
-
-
-  /**
-  *  @ignore
-  */
-  constructor(
-    elementRef: ElementRef,
-    private cdr: ChangeDetectorRef,
-    private _maskService: MaskApplierService
-  ) {
-    super(elementRef, cdr);
-  }
-
-  _handleOnKeydownEvent(e: KeyboardEvent) {
-    const ignore = () => {
-      e.preventDefault();
-      e.stopPropagation();
-    };
-    const toNum = (val: string) => {
-      return Number(val.replace(/[^0-9.-]+/g, ''));
-    };
-    const nums: string[] = Array(10)
-      .fill(0)
-      .map((v, i) => i.toString());
-    const chars: string[] = [
-      '.',
-      '-',
-      'Backspace',
-      'ArrowDown',
-      'ArrowUp',
-      'ArrowRight',
-      'ArrowLeft',
-      'Tab',
-      'Enter',
-    ];
-    const input = e.target as HTMLInputElement;
-    const key = e.key;
-    const valStr = input.value;
-    const val = toNum(valStr);
-    const decimalPointIndex = valStr.indexOf('.');
-    const selectionStart = input.selectionStart;
-    const selectionEnd = input.selectionEnd;
-    //
-
-    //
-    if (![...nums, ...chars].includes(key)) {
-      ignore();
-    }
-    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-      const stepVal =
-        decimalPointIndex > -1
-          ? selectionStart >= decimalPointIndex
-            ? this.decimalStep
-            : this.step
-          : this.step;
-      if (e.key === 'ArrowDown') {
-        this.value = val - stepVal;
-      } else {
-        this.value = val + stepVal;
-      }
-      ignore();
-      input.setSelectionRange(selectionStart, selectionStart);
-    } else if (e.key == 'Backspace') {
-      const chr = valStr.substr(selectionStart - 1, 1);
-      if (!nums.includes(chr)) {
-        ignore();
-        input.setSelectionRange(selectionStart - 1, selectionStart - 1);
-      } else {
-        const newVal = toNum(
-          valStr.substr(0, selectionStart - 1) + valStr.substr(selectionEnd)
-        );
-        input.value = this._format(newVal);
-        this.value = newVal;
-        ignore();
-        if (newVal == 0) {
-          input.setSelectionRange(1, 1);
-        } else {
-          input.setSelectionRange(selectionStart - 1, selectionStart - 1);
-        }
-      }
-    } else if (e.key == '.') {
-      if (!this.scale) {
-        ignore();
-      } else if (decimalPointIndex > -1) {
-        input.setSelectionRange(decimalPointIndex + 1, decimalPointIndex + 1);
-        ignore();
-      } else {
-        if (input.selectionEnd != valStr.length) {
-          input.setSelectionRange(valStr.length, valStr.length);
-          ignore();
-        }
-      }
-    } else if (e.key == '-') {
-      const index = valStr.indexOf('-');
-      if (index > -1) {
-        ignore();
-      } else {
-        this.value = Math.abs(this.value) * -1;
-        input.setSelectionRange(index + 1, index + 1);
-        ignore();
-      }
-    } else if (nums.includes(key)) {
-      const newVal = toNum(
-        valStr.substr(0, selectionStart) + key + valStr.substr(selectionEnd)
-      );
-      if (newVal < this.minValue) {
-        //TODO : highlight correct number
-        //input.value = this._format(this.minValue);
-        //const diff = this.minValue - val;
-        //this.value = this.minValue;
-        //ignore();
-        // setTimeout(() => {
-        //     input.setSelectionRange(input.selectionStart + 1, this.minValue.toString().length);
-        // }, 50);
-      } else if (newVal > this.maxValue) {
-        input.value = this._format(this.maxValue);
-        this.value = this.maxValue;
-        ignore();
-      } else {
-        input.value = this._format(newVal);
-        this.value = newVal;
-        ignore();
-      }
-    }
-    super._emitOnKeydownEvent(e);
-  }
-
-  _onValueChanging(value: number) {
-    return this._fixValue(value);
-  }
-
-  _fixValue(value: number): number {
-    if (value == null || value == undefined) {
-      return this.allowNull ? null : this.minValue;
-    } else if (value > this.maxValue) {
-      return this.maxValue;
-    } else if (value < this.minValue) {
-      return this.minValue;
-    }
-    return parseFloat(value.toFixed(this.scale));
-  }
-
-  _format(value: number): string {
-    if (this.thousandSeparator) {
-      this._maskService.thousandSeparator = this.separator;
-      this._maskService.allowNegativeNumbers = true;
-      const format = `separator.${this.scale}`;
-      return this._maskService.applyMask(value?.toString(), format);
-    } else {
-      this._maskService.thousandSeparator = '';
-      this._maskService.allowNegativeNumbers = true;
-      const format = `separator.${this.scale}`;
-      return this._maskService.applyMask(value?.toString(), format);
-    }
-  }
-
-  _onValueChanged(oldValue: any, newValue: any): void {
-    this.displayText = this._format(newValue);
-  }
-
-  _handleOnBlurEvent(e: FocusEvent) {
-    const input = e.target as HTMLInputElement;
-    this.value = this._fixValue(this.value);
-    input.value = this._format(this.value);
-    this._emitOnFocusEvent(e);
-  }
-}

package/src/lib/number-box/number-box.module.ts

@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXNumberBoxComponent } from './number-box.component';
-import { FormsModule } from '@angular/forms';
-import { AXButtonModule } from '../button';
-import { NgxMaskModule } from 'ngx-mask';
-
-const COMPONENT = [AXNumberBoxComponent];
-const MODULES = [
-    CommonModule,
-    FormsModule,
-    AXButtonModule,
-    NgxMaskModule.forChild()
-];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXNumberBoxModule { }

package/src/lib/page/base-page.class.ts

@@ -1,80 +0,0 @@
-import { EventEmitter, Injectable, ViewChild } from '@angular/core';
-import { AXEvent } from '../base/events.class';
-
-
-import { AXPageComponent } from './page.component';
-import { AXPageFooterComponent } from './page-footer.component';
-
-export const TAB_META_KEY = '__meta__';
-
-export class AXPageCloseEvent extends AXEvent {
-    data?: any
-}
-export class AXPageClosing {
-    cancel: boolean = false;
-    data?: any;
-}
-
-export class AXPageResult {
-    sender: AXBasePageComponent;
-    data?: any;
-}
-
-/**
-*  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons after the primary text.
-*/
-export class AXPageClosedPromise extends Promise<AXPageResult> {
-
-    private closeMethod: () => void;
-    constructor(
-        executor: (resolve: (value?: AXPageResult | PromiseLike<AXPageResult>) => void,
-            reject: (reason?: any) => void) => void
-    ) {
-        super(executor);
-    }
-
-    public close() {
-        if (this.closeMethod) {
-            this.closeMethod();
-        }
-    }
-}
-
-
-@Injectable()
-export class AXBasePageComponent {
-
-    @ViewChild(AXPageComponent, { static: true })
-    private pageContainer: AXPageComponent;
-
-    @ViewChild(AXPageFooterComponent, { static: true })
-    footer: AXPageFooterComponent;
-
-    private _isLoading: boolean = false;
-    public get isLoading(): boolean {
-        return this._isLoading;
-    }
-    public set isLoading(v: boolean) {
-        this._isLoading = v;
-        if (this.pageContainer) {
-            this.pageContainer.isLoading = this.isLoading;
-        }
-    }
-
-
-    onClosed: EventEmitter<AXPageCloseEvent> = new EventEmitter<AXPageCloseEvent>();
-
-    close(data?: any) {
-        this.onClosed.emit({
-            component: this,
-            data: data
-        });
-    }
-
-    onClosing(e: AXPageClosing): void | Promise<void> {
-    }
-
-    ngOnDestroy() {
-        this.onClosed.unsubscribe();
-    }
-}