@acorex/components 6.5.27 → 6.5.29

package/src/lib/base/element.class.ts

@@ -1,344 +0,0 @@
-import { Input, Output, EventEmitter, ChangeDetectorRef, ViewChild, ElementRef, ContentChild, Directive } from '@angular/core';
-import { AXValidationComponent, AXValidation } from '../validation/validation.component';
-import { AXValidationRuleResult } from '../validation/validation.class';
-import { AXHtmlUtil } from '@acorex/core';
-import { AXEvent, AXHtmlEvent, AXValueEvent } from './events.class';
-
-export type AXElementSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-@Directive()
-export abstract class AXBaseComponent {
-  @Input() cssClass: string;
-  uid: string = AXHtmlUtil.getUID();
-  constructor() {
-  }
-}
-
-
-export class AXBaseInputChangeEvent extends AXValueEvent<any> {
-  isUserChange?: boolean;
-}
-
-export interface AXBaseSizableComponent {
-  size: AXElementSize;
-}
-
-export interface AXBaseInteractiveComponent {
-  disabled: boolean;
-  tabIndex: number;
-}
-
-export interface AXBaseInputComponent extends AXBaseInteractiveComponent {
-  readonly: boolean;
-  focus(): void;
-}
-
-
-export interface AXBaseValueComponent<T> extends AXBaseInputComponent {
-  onValueChanged?: EventEmitter<AXValueEvent<T>>;
-  valueChange?: EventEmitter<T>;
-  value: T;
-}
-
-export interface AXBaseClickableComponent extends AXBaseInteractiveComponent {
-  click: EventEmitter<AXHtmlEvent<MouseEvent>>;
-}
-
-@Directive()
-export abstract class AXValidatableComponent extends AXBaseComponent {
-
-  private __valueField: string = 'value';
-  private __nativeElement: HTMLElement;
-  private __validation: AXValidation;
-
-
-  @Input()
-  tabIndex: number = 0;
-
-  protected initValidation(
-    elementRef: ElementRef,
-    valueField: string,
-    validation: AXValidation
-  ) {
-    this.__nativeElement = elementRef.nativeElement;
-    this.__valueField = valueField;
-    this.__validation = validation;
-    const value = this[this.__valueField]
-    if ((!Array.isArray(value) && value) || (Array.isArray(value) && value.length > 0))
-      this.validate();
-  }
-
-  get validation() {
-    return this.__validation;
-  }
-
-  validate(): Promise<AXValidationRuleResult> {
-    if (this.__validation !== undefined && (this.__validation.rules || []).length > 0) {
-      const result = this.__validation.validate(this[this.__valueField]);
-      result.then(c => {
-        if (c.result) {
-          this.clearValidationStyle(this.__nativeElement);
-        }
-        else {
-          this.applyValidationStyle(this.__nativeElement, c);
-        }
-      });
-      return result;
-    }
-    else {
-      return Promise.resolve({ result: true });
-    }
-  }
-
-
-  protected clearValidationStyle(element: HTMLElement, clear: boolean = false) {
-    if (this.__validation !== undefined && (this.__validation.rules || []).length > 0) {
-      const formGroup = element.closest('.form-group');
-      const formItem = formGroup?.querySelector('.form-item') || element.closest('.form-item') || element.querySelector('.form-item');;
-      const label = formGroup?.querySelector('.form-group-label');
-      const parent = formItem?.parentElement || element.parentElement;
-
-      formItem?.classList.remove('success-state');
-      formItem?.classList.remove('error-state');
-      //formItem?.classList.remove('required-state');
-      if (!clear) {
-        formItem?.classList.add('success-state');
-      }
-      // label?.classList.remove('error-text');
-      if (parent.querySelector('span.error-text')) {
-        parent.removeChild(parent.querySelector('span.error-text'));
-      }
-    }
-  }
-
-  protected applyValidationStyle(element: HTMLElement, v: AXValidationRuleResult): void {
-    if (this.__validation !== undefined && (this.__validation.rules || []).length > 0) {
-      const formGroup = element.closest('.form-group');
-      const formItem = formGroup?.querySelector('.form-item') || element.closest('.form-item') || element.querySelector('.form-item');
-      const label = formGroup?.querySelector('.form-group-label');
-      const parent = formItem?.parentElement || element.parentElement;
-      formItem?.classList.add('error-state');
-      formItem?.classList.remove('success-state');
-      if (parent.querySelector('span.error-text')) {
-        parent.removeChild(parent.querySelector('span.error-text'));
-      }
-      if (this.__validation.showMessage) {
-        const span = document.createElement('span');
-        span.innerText = v.message;
-        span.classList.add('ax', 'error-text');
-        parent.appendChild(span);
-      }
-      // label?.classList.add('error-text');
-    }
-  }
-}
-
-
-
-
-@Directive()
-export abstract class AXBaseTextComponent extends AXValidatableComponent implements AXBaseSizableComponent, AXBaseValueComponent<string> {
-
-  ngAfterViewInit() {
-    if (this.input) {
-      this.input.nativeElement.onkeyup = (e) => {
-        this.userChange = true;
-        this.value = (e.target as any).value;
-        this.onkey.emit(e);
-      };
-      this.input.nativeElement.onkeydown = (e) => {
-        this.userChange = true;
-
-        this.value = (e.target as any).value;
-        this.onkey.emit(e);
-      };
-      this.input.nativeElement.onkeypress = (e) => {
-        this.userChange = true;
-
-        this.value = (e.target as any).value;
-        this.onkey.emit(e);
-      };
-    }
-  }
-
-
-  ngAfterContentInit(): void {
-    this.initValidation(this.ref, 'value', this.validation);
-  }
-
-
-  @Input()
-  tabIndex: number = 0;
-
-  @ViewChild('input', { static: true })
-  @ContentChild('input', { static: true })
-  input: ElementRef<HTMLInputElement>;
-
-  @ContentChild(AXValidation, { static: true })
-  private _contentValidation: AXValidation;
-
-  private _validation: AXValidation;
-
-  @Input()
-  public get validation(): AXValidation {
-    return this._validation ? this._validation : this._contentValidation;
-  }
-
-  public set validation(v: AXValidation) {
-    this._validation = v;
-    this.initValidation(this.ref, 'value', v);
-  }
-
-
-  @Input()
-  disabled: boolean = false;
-
-  @Input()
-  readonly: boolean = false;
-
-  @Input()
-  textAlign: 'right' | 'left' | null = null;
-
-  @Input()
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
-
-  @Input()
-  placeholder: string;
-
-
-  @Input()
-  autocomplete: "on" | "off";
-
-  @Input()
-  name: string;
-
-  userChange: boolean = false;
-
-  constructor(protected cdr: ChangeDetectorRef, protected ref: ElementRef) {
-    super();
-  }
-
-  @Output()
-  public onkey: EventEmitter<KeyboardEvent> = new EventEmitter<KeyboardEvent>();
-
-  @Output()
-  public onBlur: EventEmitter<AXHtmlEvent<Event>> = new EventEmitter<AXHtmlEvent<Event>>();
-
-  @Output()
-  public onFocus: EventEmitter<AXHtmlEvent<Event>> = new EventEmitter<AXHtmlEvent<Event>>();
-
-  @Output()
-  public onValueChanged: EventEmitter<AXBaseInputChangeEvent> = new EventEmitter<AXBaseInputChangeEvent>();
-
-  @Output()
-  valueChange: EventEmitter<any> = new EventEmitter<any>();
-
-
-  @Input()
-  icon: string = '';
-
-  @Input()
-  allowClear: boolean = false;
-
-  private _value: string;
-  @Input()
-  public get value(): string {
-    return this._value;
-  }
-  public set value(v: string) {
-    if (v !== this._value) {
-      const old = this._value;
-      this._value = v;
-
-      this.valueChange.emit(v);
-      this.onValueChanged.emit({
-        component: this,
-        value: v,
-        oldValue: old,
-        isUserChange: this.userChange
-      });
-      this.userChange = false;
-      this.clearValidationStyle(this.input.nativeElement, v ? false : true);
-      this.cdr.detectChanges();
-    }
-  }
-
-  focus() {
-    this.input.nativeElement.focus();
-  }
-
-  clear() {
-    this.userChange = true;
-
-    this.value = null;
-    this.input.nativeElement.value = null;
-  }
-
-  isFocused(): boolean {
-    return this.input.nativeElement === document.activeElement;
-  }
-
-  setTextAlign() {
-    if (this.textAlign === 'left') {
-      return 'text-left';
-    }
-    if (this.textAlign === 'right') {
-      return 'text-right';
-    }
-  }
-
-  handleInputBlur(e: Event) {
-    this.onBlur.emit({
-      component: this,
-      htmlElement: this.ref.nativeElement,
-      htmlEvent: e
-    });
-  }
-
-  handleInputFocus(e: Event) {
-    this.onFocus.emit({
-      component: this,
-      htmlElement: this.ref.nativeElement,
-      htmlEvent: e
-    });
-  }
-}
-
-@Directive()
-export abstract class AXBaseButtonComponent extends AXBaseComponent implements AXBaseClickableComponent, AXBaseSizableComponent {
-
-  @Input()
-  disabled: boolean;
-
-  @Output()
-  click: EventEmitter<AXHtmlEvent<MouseEvent>> = new EventEmitter<AXHtmlEvent<MouseEvent>>();
-
-  @Input()
-  size: AXElementSize = "md";
-
-  @Input()
-  tabIndex: number = 0;
-
-}
-
-@Directive()
-export abstract class AXBaseDropdownComponent extends AXBaseComponent implements AXBaseInteractiveComponent, AXBaseSizableComponent {
-
-  @Input()
-  disabled: boolean;
-
-  @Input()
-  size: AXElementSize;
-
-  @Input()
-  fitParent: boolean = true;
-
-  @Input()
-  tabIndex: number = 0;
-
-  @Input()
-  showDropDownButton: boolean = true;
-
-  abstract close();
-  abstract open();
-}

package/src/lib/base/events.class.ts

@@ -1,32 +0,0 @@
-export class AXBaseEvent {
-    component: any;
-    htmlElement?: HTMLElement;
-}
-
-export class AXHtmlEvent<E extends Event> extends AXBaseEvent {
-
-    htmlEvent?: E;
-}
-
-export class AXValueEvent<T> extends AXBaseEvent {
-    value?: T;
-    oldValue?: T;
-}
-
-export class AXDataEvent<T> extends AXBaseEvent {
-    data?: T;
-}
-
-export class AXEvent<T, E extends Event>
-{
-
-}
-export interface AXEvent<T, E extends Event> extends AXDataEvent<T>, AXHtmlEvent<E> {
-
-}
-
-
-
-
-
-

package/src/lib/button/button.component.html

@@ -1,17 +0,0 @@
-<button #container class="ax button form-control {{type}} {{size}} {{cssClass}}" [class.ax-button-icon]="refContent.innerText.length==0 && refContent.children.length == 0" [class.selected]="selected" [class.icon]="icon"
-    [class.icon]="loading" [class.disabled]="disabled || loading" (click)="handleClick($event)" [disabled]="disabled"
-    [ngStyle]="{'width.%': block ? 100 : 'auto'}" [attr.tabindex]="tabIndex">
-    <div class="button-inner-content">
-        <ng-container *ngIf="icon && !loading">
-            <i class="{{icon}} icon"></i>
-            <ng-container *ngIf="refContent.innerText.length==0 && refContent.children.length == 0"></ng-container>
-        </ng-container>
-        <ng-container *ngIf="loading">
-            <i class="far fa-circle-notch fa-spin icon"></i>
-            <ng-container *ngIf="refContent.innerText.length==0 && refContent.children.length == 0"></ng-container>
-        </ng-container>
-        <div class="ax-wrapper" #refContent>
-            <ng-content></ng-content>
-        </div>
-    </div>
-</button>

package/src/lib/button/button.component.ts

@@ -1,72 +0,0 @@
-import { Component, Input, ViewEncapsulation, ElementRef, ViewChild, HostListener } from '@angular/core';
-import { AXBaseButtonComponent } from '../base/element.class';
-
-@Component({
-  selector: 'ax-button',
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './button.component.html'
-})
-export class AXButtonComponent extends AXBaseButtonComponent {
-
-  constructor(private el: ElementRef) {
-    super();
-  }
-
-  @ViewChild('container', { static: true }) container: ElementRef<HTMLButtonElement>;
-
-  @Input()
-  type: string = 'primary';
-
-  @Input()
-  icon: string;
-
-  @Input()
-  submitBehavior: boolean = false;
-
-  @Input()
-  cancelBehavior: boolean = false;
-
-  @Input()
-  block: boolean = false;
-
-  @Input()
-  loading: boolean = false;
-
-  @Input()
-  selected: boolean = false;
-
-  ngAfterViewInit(): void {
-    if (this.submitBehavior) {
-      setTimeout(() => {
-        this.focusButton();
-      }, 10);
-    }
-  }
-
-
-
-  handleClick(e: MouseEvent) {
-    if (this.disabled === true) {
-      this.click.emit({
-        component: this,
-        htmlElement: this.el.nativeElement,
-        htmlEvent: e,
-      });
-      e.stopPropagation();
-    }
-  }
-
-  @HostListener('document:keydown.escape', ['$event'])
-  onKeydownHandler(e: KeyboardEvent) {
-    if (this.cancelBehavior) {
-      this.handleClick(null);
-      e.stopPropagation();
-      e.preventDefault();
-      return false;
-    }
-  }
-
-  focusButton() {
-    this.container.nativeElement.focus();
-  }
-}

package/src/lib/button/button.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXButtonComponent } from './button.component';
-
-const COMPONENT = [AXButtonComponent];
-const MODULES = [CommonModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXButtonModule { }

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

@@ -1,68 +0,0 @@
-<div class="ax-calendar-container {{size}}" [ngClass]="type">
-    <div class="ax-calendar-header">
-        <div class="ax-controll-button">
-            <ax-button type="light blank" (click)="next()">
-                {{'common.next' | trans}}
-            </ax-button>
-        </div>
-        <div class="ax-nav-button" [ngSwitch]="view">
-            <ax-button type="light blank" (click)="changeView()">
-                <ng-container *ngSwitchCase="'day'">
-                    {{viewRange.startTime.add('day',10) | dt:"MMM YYYY"}}
-                </ng-container>
-                <ng-container *ngSwitchCase="'month'">
-                    {{viewRange.startTime | dt:"YYYY"}}
-                </ng-container>
-                <ng-container *ngSwitchDefault>
-                    {{viewRange.startTime | dt:"YYYY"}} - {{viewRange.endTime | dt:"YYYY"}}
-                </ng-container>
-            </ax-button>
-        </div>
-        <div class="ax-controll-button">
-            <ax-button type="light blank" (click)="prev()">
-                {{'common.prev' | trans}}
-            </ax-button>
-        </div>
-    </div>
-    <div class="ax-calendar-body">
-        <ng-container [ngSwitch]="view">
-            <ng-container *ngSwitchCase="'day'">
-                <div class="ax-month-items">
-                    <ng-container *ngFor='let w of weekdays'>
-                        <div class="ax-month-item">{{w}}</div>
-                    </ng-container>
-                </div>
-                <div class="ax-day-items">
-                    <ng-container *ngFor="let r of matrix">
-                        <div class="ax-day-item ax-state-event" *ngFor="let d of r;trackBy:trackByFn" [title]="getTitle(d.date)" [ngClass]="{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}" [ngStyle]="(findDay(d.date)) ? getStyle(d.date):''"
-                            (click)="setDayClick($event,d)">
-                            {{d.date.dayInMonth}}</div>
-                    </ng-container>
-
-                </div>
-            </ng-container>
-            <div class="ax-month-container" *ngSwitchCase="'month'">
-                <ng-container *ngFor="let r of matrix">
-                    <div class="ax-month-item" *ngFor="let d of r;trackBy:trackByFn" [ngClass]="{'selected': d.selected,'focused':d.focused,'today':d.today}" (click)="setMonthClick($event,d.date)">
-                        <strong>
-                            {{d.date| dt:"MMM"}}
-                        </strong>
-                    </div>
-                </ng-container>
-            </div>
-            <div class="ax-year-container" *ngSwitchCase="'year'">
-                <ng-container class="calendar-row" *ngFor="let r of matrix">
-                    <div class="ax-year-item" *ngFor="let d of r;trackBy:trackByFn" [ngClass]="{'selected': d.selected,'focused':d.focused,'today':d.today}" (click)="setYearClick($event,d.date)">
-                        <strong>{{d.date | dt:"YYYY"}}</strong>
-                    </div>
-                </ng-container>
-            </div>
-        </ng-container>
-
-    </div>
-    <div class="ax-calendar-footer">
-        <ax-button (click)="setToday()" *ngIf="showTodayButton" type="dark">
-            {{getTodayName()}}
-        </ax-button>
-    </div>
-</div>