@acorex/components 5.8.0 → 6.0.1

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

@@ -0,0 +1,289 @@
+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

@@ -0,0 +1,31 @@
+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

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

package/decorators/ng-package.json

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

package/decorators/public-api.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,26 @@
+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

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

package/dialog/ng-package.json

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

package/dialog/public-api.ts

@@ -0,0 +1,4 @@
+export * from './src/dialog.class';
+export * from './src/dialog.component';
+export * from './src/dialog.module';
+export * from './src/dialog.service';

package/dialog/src/dialog.class.ts

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,21 @@
+<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>