@acorex/components 6.0.1 → 6.0.7

package/date-picker/src/datepicker.component.ts

@@ -1,289 +0,0 @@
-import { AXStringUtil } from '@acorex/core/utils';
-import { AXPlatform } from '@acorex/core/platform';
-import { AXTranslator } from '@acorex/core/translation';
-import { AXDateTime } from '@acorex/core/dateTime';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  ViewChild,
-  Input,
-  EventEmitter,
-  Output,
-} from '@angular/core';
-import { AXClickEvent, AXClosbaleComponent } from '@acorex/components/common';
-
-import {
-  AXCalendarComponent,
-  AXCalendarBaseComponent,
-  AXCalendarNavigateEvent,
-} from '@acorex/components/calendar';
-import { AXPopoverComponent } from '@acorex/components/popover';
-import {
-  AXComponentOptionChanged,
-  _DropdownComponenetMixin,
-  _InteractiveComponenetMixin,
-  _ValueComponenetMixin,
-} from '@acorex/components/mixin';
-
-export const AXBaseDatePickerMixin = _InteractiveComponenetMixin(
-  _DropdownComponenetMixin(_ValueComponenetMixin(AXCalendarBaseComponent))
-);
-
-@Component({
-  selector: 'ax-date-picker',
-  templateUrl: './datepicker.component.html',
-  inputs: [
-    'isOpen',
-    'fitParent',
-    'dropdownWidth',
-    'position',
-    'disabled',
-    'tabIndex',
-    'readonly',
-    'allowNull',
-    'value',
-    'name',
-    'checked',
-    'placeholder',
-    'maxLength',
-    'allowNull',
-    'debounceTime',
-    'type',
-    'autoComplete',
-    'readonly',
-    'allowNull',
-    'value',
-    'name',
-    'checked',
-    'depth',
-    'activeView',
-    'min',
-    'max',
-    'disabledDates',
-    'type',
-    'holidayDates',
-  ],
-  outputs: [
-    'onOpened',
-    'onClosed',
-    'onBlur',
-    'onFocus',
-    'valueChange',
-    'onValueChanged',
-    'valueChange',
-    'onValueChanged',
-    'depthChange',
-    'typeChange',
-    'disabledDatesChange',
-    'holidayDatesChange',
-    'onNavigate',
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  providers: [
-    { provide: AXClosbaleComponent, useExisting: AXDatePickerComponent },
-  ],
-  host: { class: 'ax-editor-container ax-drop-down' },
-})
-export class AXDatePickerComponent extends AXBaseDatePickerMixin {
-  @ViewChild(AXPopoverComponent, { static: true })
-  popover: AXPopoverComponent;
-
-  @ViewChild(AXCalendarComponent, { static: true })
-  private _calendar: AXCalendarComponent;
-
-  _target: HTMLDivElement;
-  displayText: string;
-  _calendarValue: Date;
-  _cursorPos: number = 0;
-  _isMobile: boolean = false;
-  _popoverTitle: string;
-  _popoverWidth: number;
-
-  @Output()
-  formatChange = new EventEmitter<string>();
-
-  private _format: string = 'YYYY-MM-dd';
-  @Input()
-  public get format(): string {
-    return this._format;
-  }
-  public set format(v: string) {
-    this._setOption({
-      name: 'format',
-      value: v,
-    });
-  }
-
-  @Input()
-  placeholder: string;
-
-  @Input()
-  interface: 'calendar' | 'picker' = 'calendar';
-
-  constructor(
-    _elementRef: ElementRef,
-    _cdr: ChangeDetectorRef,
-    private _platform: AXPlatform
-  ) {
-    super(_elementRef, _cdr);
-    this._target = this._getHostElement();
-    this._isMobile = this._platform.is('Mobile');
-    this._platform.resize.subscribe(() => {
-      this._isMobile = this._platform.is('Mobile');
-      this.popover.dispose();
-    });
-  }
-
-  onInit(): void {
-    this._popoverTitle =
-      this.placeholder || AXTranslator.get('datepicker.popover.title');
-  }
-
-  private _updateDisplayText() {
-    this.displayText = this.value
-      ? AXDateTime.convert(this.value, this.type).format(this._format)
-      : '';
-  }
-
-  _handlePopoverOpened(e) {
-    this._calendar.navTo(this.value || new AXDateTime(new Date(), this.type));
-  }
-
-  _handleArrowClickEvent(e: AXClickEvent) {
-    this.toggle();
-  }
-
-  _onValueChanged(oldValue?: any, newValue?: any) {
-    this._updateDisplayText();
-    this.close();
-  }
-
-  _onOptionChanged(option: AXComponentOptionChanged): void {
-    super._onOptionChanged(option);
-    if (option.name == 'type') {
-      this._updateDisplayText();
-    }
-  }
-
-  _handleOnKeydownEvent(e: KeyboardEvent) {
-    const ignore = () => {
-      e.preventDefault();
-      e.stopPropagation();
-    };
-
-    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 sStart = input.selectionStart || 0;
-    const sEnd = input.selectionEnd || 0;
-    const dateVal = new AXDateTime(this.value);
-    //
-    const re = /[a-zA-Z0-9]+/gi;
-    const parts = Array.from(this.format.matchAll(re));
-    const word = valStr.substring(sStart, sEnd);
-    const part = parts.find((c: any) => c.index >= sStart);
-    //
-    //
-    if ([...nums].includes(key)) {
-      if (part) {
-        switch (part[0]) {
-          case 'dd':
-          case 'DD':
-            const newVal = Math.max(1, Math.min(31, Number(word + e.key)));
-            this.value = dateVal.set('day', newVal).date;
-            break;
-          case 'mm':
-            break;
-          case 'yy':
-          case 'YYYY':
-            break;
-        }
-        setTimeout(() => {
-          this._highlightPart(input, sStart);
-        }, 10);
-        ignore();
-      }
-    } else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-      const next = Array.from(valStr.substr(sEnd).matchAll(re));
-      const prev = Array.from(valStr.substring(0, sStart).matchAll(re));
-      ignore();
-      this._highlightPart(
-        input,
-        e.key === 'ArrowRight'
-          ? sEnd + (next[0]?.index || 0)
-          : prev[prev.length - 1]?.index
-      );
-    } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-      if (e.ctrlKey && e.key === 'ArrowDown') {
-        this.open();
-      } else {
-        const sign = e.key === 'ArrowUp' ? +1 : -1;
-        if (part) {
-          switch (part[0]) {
-            case 'dd':
-            case 'DD':
-              this.value = dateVal.add('day', sign).date;
-              break;
-            case 'mm':
-            case 'MMM':
-            case 'MMMM':
-              this.value = dateVal.add('month', sign).date;
-              break;
-            case 'yy':
-            case 'YYYY':
-              this.value = dateVal.add('year', sign).date;
-              break;
-          }
-          setTimeout(() => {
-            this._highlightPart(input, sStart);
-          }, 10);
-        }
-      }
-      ignore();
-    } else if (e.key == 'Backspace') {
-      if (this.allowNull) {
-        this.value = null;
-      }
-      ignore();
-    }
-    // else if (nums.includes(key)) {
-
-    // }
-    // super._emitOnKeydownEvent(e);
-  }
-
-  _handleOnInputClickEvent(e: MouseEvent): void {
-    const input = e.target as HTMLInputElement;
-    this._highlightPart(input);
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  _handleOnNavigate(e: AXCalendarNavigateEvent) {
-    this.onNavigate.emit(e);
-  }
-
-  private _highlightPart(input: HTMLInputElement, pos?: number) {
-    const { start, end } = AXStringUtil.getWordBoundsAtPosition(
-      input.value,
-      pos != null ? pos : input.selectionStart || 0
-    );
-    input.setSelectionRange(start, end);
-  }
-}

package/date-picker/src/datepicker.module.ts

@@ -1,31 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXDateTimeModule } from '@acorex/core/dateTime';
-
-import { AXDatePickerComponent } from './datepicker.component';
-import { AXCalendarModule } from '@acorex/components/calendar';
-import { AXButtonModule } from '@acorex/components/button';
-import { AXPopoverModule } from '@acorex/components/popover';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import { AXTextBoxModule } from '@acorex/components/textbox';
-import { FormsModule } from '@angular/forms';
-
-const COMPONENT = [AXDatePickerComponent];
-const MODULES = [
-    CommonModule,
-    AXCalendarModule,
-    AXTextBoxModule,
-    AXButtonModule,
-    AXPopoverModule,
-    AXDecoratorModule,
-    AXDateTimeModule,
-    FormsModule
-];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXDatepickerModule { }

package/decorators/index.ts

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

package/decorators/ng-package.json

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

package/decorators/public-api.ts

@@ -1,10 +0,0 @@
-export * from './src/addon.component';
-export * from './src/close-button.component';
-export * from './src/content.component';
-export * from './src/decorators.module';
-export * from './src/footer.component';
-export * from './src/header.component';
-export * from './src/icon.component';
-export * from './src/prefix.component';
-export * from './src/suffix.component';
-export * from './src/title.component';

package/decorators/src/addon.component.ts

@@ -1,21 +0,0 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-} from '@angular/core';
-
-@Component({
-  selector: 'ax-addon',
-  template: `<ng-content></ng-content>`,
-  host: { class: '.ax-addon' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXDecoratorAddOnComponent extends AXBaseComponentMixin {
-  constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef) {
-    super(_elementRef, _cdr);
-  }
-}

package/decorators/src/close-button.component.ts

@@ -1,48 +0,0 @@
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  Input,
-  Optional,
-  Inject,
-} from '@angular/core';
-import { AXClosbaleComponent } from '@acorex/components/common';
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-
-@Component({
-  selector: 'ax-close-button',
-  template: `<ax-icon
-    [icon]="icon"
-    (click)="_handleOnClick($event)"
-    tabindex="1"
-  ></ax-icon>`,
-  host: { class: 'ax-close-button' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXDecoratorCloseButtonComponent extends AXBaseComponentMixin {
-  constructor(
-    _elementRef: ElementRef,
-    _cdr: ChangeDetectorRef,
-    @Optional()
-    @Inject(AXClosbaleComponent)
-    private _parent?: AXClosbaleComponent
-  ) {
-    super(_elementRef, _cdr);
-  }
-
-  private _icon: string = 'ax-ic-close';
-  @Input()
-  public get icon(): string {
-    return this._icon || 'ax-ic-close';
-  }
-  public set icon(v: string) {
-    this._icon = v;
-  }
-
-  _handleOnClick(e: MouseEvent) {
-    this._parent?.close();
-  }
-}

package/decorators/src/content.component.ts

@@ -1,21 +0,0 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-} from '@angular/core';
-
-@Component({
-  selector: 'ax-content',
-  template: ` <ng-content> </ng-content> `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'ax-content' },
-})
-export class AXDecoratorContentComponent extends AXBaseComponentMixin {
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-}

package/decorators/src/decorators.module.ts

@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXDecoratorPrefixComponent } from './prefix.component';
-import { AXDecoratorSuffixComponent } from './suffix.component';
-import { AXDecoratorContentComponent } from './content.component';
-import { AXDecoratorHeaderComponent } from './header.component';
-import { AXDecoratorFooterComponent } from './footer.component';
-import { AXDecoratorAddOnComponent } from './addon.component';
-import { AXDecoratorIconComponent } from './icon.component';
-import { AXDecoratorTitleComponent } from './title.component';
-import { AXDecoratorCloseButtonComponent } from './close-button.component';
-
-const COMPONENT = [
-    AXDecoratorPrefixComponent,
-    AXDecoratorSuffixComponent,
-    AXDecoratorContentComponent,
-    AXDecoratorHeaderComponent,
-    AXDecoratorFooterComponent,
-    AXDecoratorAddOnComponent,
-    AXDecoratorIconComponent,
-    AXDecoratorTitleComponent,
-    AXDecoratorCloseButtonComponent,
-];
-const MODULES = [CommonModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXDecoratorModule { }

package/decorators/src/footer.component.ts

@@ -1,25 +0,0 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-} from '@angular/core';
-
-@Component({
-  selector: 'ax-footer',
-  template: `
-    <ng-content
-      select="ax-suffix,ax-prefix,ax-button,ax-title,ax-data-pager,ax-close-button,ng-container"
-    ></ng-content>
-  `,
-  host: { class: 'ax-footer' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXDecoratorFooterComponent extends AXBaseComponentMixin {
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-}

package/decorators/src/header.component.ts

@@ -1,25 +0,0 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-} from '@angular/core';
-
-@Component({
-  selector: 'ax-header',
-  template: `
-    <ng-content
-      select="ax-suffix,ax-prefix,ax-button,ax-icon,ax-title,ax-data-pager,ax-close-button,ng-container,ng-content"
-    ></ng-content>
-  `,
-  host: { class: 'ax-header' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXDecoratorHeaderComponent extends AXBaseComponentMixin {
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-}

package/decorators/src/icon.component.ts

@@ -1,31 +0,0 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  Input,
-  HostBinding,
-} from '@angular/core';
-
-@Component({
-  selector: 'ax-icon',
-  template: '<ng-content select="i,svg,img"></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'ax-icon' },
-})
-export class AXDecoratorIconComponent extends AXBaseComponentMixin {
-  @Input()
-  icon: string;
-
-  @HostBinding('class')
-  private get __iconClass(): string {
-    return `ax-ic ${this.icon}`;
-  }
-
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-}

package/decorators/src/prefix.component.ts

@@ -1,21 +0,0 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-} from '@angular/core';
-
-@Component({
-  selector: 'ax-prefix',
-  template: ` <ng-content></ng-content> `,
-  host: { class: 'ax-prefix' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXDecoratorPrefixComponent extends AXBaseComponentMixin {
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-}

package/decorators/src/suffix.component.ts

@@ -1,21 +0,0 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-} from '@angular/core';
-
-@Component({
-  selector: 'ax-suffix',
-  template: ` <ng-content></ng-content> `,
-  host: { class: 'ax-suffix' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXDecoratorSuffixComponent extends AXBaseComponentMixin {
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-}

package/decorators/src/title.component.ts

@@ -1,26 +0,0 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  Input,
-} from '@angular/core';
-
-@Component({
-  selector: 'ax-title',
-  template: `<h4 *ngIf="text">{{ text }}</h4>
-    <ng-container><ng-content *ngIf="!text"></ng-content></ng-container>`,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'ax-title' },
-})
-export class AXDecoratorTitleComponent extends AXBaseComponentMixin {
-  constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef) {
-    super(_elementRef, _cdr);
-  }
-
-  @Input()
-  text: string = '';
-}

package/dialog/index.ts

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

package/dialog/ng-package.json

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

package/dialog/src/dialog.class.ts

@@ -1,13 +0,0 @@
-import { AXStyleColorType } from '@acorex/components/common';
-import { AXButtonItem } from '@acorex/components/button';
-
-export interface AXDialogOptions {
-  title: string;
-  content: string;
-  buttons?: AXButtonItem[];
-  type: AXStyleColorType;
-  dismissible?: boolean;
-}
-export interface AXDialogRef {
-  close(): void;
-}

package/dialog/src/dialog.component.html

@@ -1,21 +0,0 @@
-<div class="ax-popup-wrapper" aria-modal="true" [cdkTrapFocus]="true">
-    <div class="ax-dialog ax-{{options.type}}-default"  cdkDrag role="alert" cdkDragHandle>
-        <div class="ax-dialog-icon-side">
-            <i class="ax-dialog-icon {{_icon}}"></i>
-        </div>
-        <div class="ax-dialog-content-side">
-            <div class="ax-dialog-title">{{options.title}}</div>
-            <div class="ax-dialog-content">{{options.content}}</div>
-        </div>
-        <div class="ax-dialog-dismiss-icon">
-            <i class="ax-ic ax-ic-close" *ngIf="options.dismissible" (click)="close()"></i>
-        </div>
-        <ax-footer>
-            <ng-container *ngFor="let button of options.buttons;let i=index">
-                <ax-button [text]="button.text" [axAutoFocus]="_hasAutoFocus(button)" [hotkey]="button.hotkey"
-                    (onClick)="_handleButtonClick(button)" [class]="button.cssClass" [look]="button.look"
-                    [color]="button.color"></ax-button>
-            </ng-container>
-        </ax-footer>
-    </div>
-</div>