@acorex/components 6.0.1 → 6.0.2

package/calendar/src/calendar.component.ts

@@ -1,416 +0,0 @@
-import { range } from 'lodash-es';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  HostBinding,
-  Input,
-} from '@angular/core';
-import { AXDateTime, AXDateTimeRange } from '@acorex/core/dateTime';
-import { AXClickEvent } from '@acorex/components/common';
-
-
-import {
-  AXCalendarBaseComponent,
-} from './calendar.class';
-import { AXComponentOptionChanged, _ClickableComponenetMixin, _InteractiveComponenetMixin, _ValueComponenetMixin } from '@acorex/components/mixin';
-
-export const AXCalendarComponentMixin = _ClickableComponenetMixin(
-  _InteractiveComponenetMixin(
-    _ValueComponenetMixin<any>(AXCalendarBaseComponent)
-  )
-);
-
-@Component({
-  selector: 'ax-calendar',
-  templateUrl: './calendar.component.html',
-  inputs: ['readonly','allowNull','value','name', 'checked', 'disabled', 'tabIndex', 'depth','activeView','min','max','disabledDates','type','holidayDates',],
-  outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus', 'depthChange','typeChange','disabledDatesChange','holidayDatesChange','onNavigate'],
-  host: { class: 'ax-calendar' },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AXCalendarComponent extends AXCalendarComponentMixin {
-  @Input()
-  interface: 'calendar' | 'picker' = 'calendar';
-
-  private get _viewRange(): AXDateTimeRange {
-    const current = this._viewStartDate || this._today;
-    switch (this.activeView) {
-      case 'years':
-        let y = current.startOf('year').year;
-        let min = y - (y % 10) - 1;
-        let max = min + 11;
-        return new AXDateTimeRange(
-          AXDateTime.from({
-            year: min,
-            month: 1,
-            date: 1,
-            calendar: this._viewStartDate.calendar.name(),
-          }),
-          AXDateTime.from({
-            year: max,
-            month: 12,
-            date: 28,
-            calendar: this._viewStartDate.calendar.name(),
-          })
-        );
-      case 'months':
-        return new AXDateTimeRange(
-          current.startOf('year'),
-          current.endOf('year').add('day', -1)
-        );
-      default:
-        return new AXDateTimeRange(
-          current.startOf('month'),
-          current.endOf('month')
-        );
-    }
-  }
-
-  _today = new AXDateTime(new Date(), this.type);
-  private _viewStartDate!: AXDateTime;
-
-  _navText: string = '';
-  _todayText: string = '';
-
-  _slots: any[] = [];
-  _dayNames: string[] = [];
-
-  private _isUserInteraction: boolean = false;
-
-  constructor(elementRef: ElementRef, private cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-
-  private _initValues() {
-    this._today = new AXDateTime(new Date(), this.type);
-    this._dayNames = this._today.calendar.dayShortNames;
-  }
-
-  private _refresh() {
-    this._initValues();
-    this.navTo(this.value || this._today);
-  }
-
-  onInit() {
-    this._initValues();
-    if (!this.value) this.goToday();
-  }
-
-  private _genearteSlots() {
-    if (!this._viewStartDate) return;
-    const vr = this._viewRange;
-    // just for tailwind
-    //'ax-col-start-1','ax-col-start-2','ax-col-start-3','ax-col-start-4','ax-col-start-5','ax-col-start-6','ax-col-start-7'
-    // year view
-    if (this.activeView == 'years') {
-      const a = vr.enumurate('year');
-      this._slots = a.map((d, i) => {
-        const r: any = {};
-        r.date = d.date;
-        r.text = d.format('YYYY');
-        r.disabled =
-          (this.min && d.compare(this.min, 'year') == -1) ||
-          (this.max && d.compare(this.max, 'year') == 1);
-        if (r.disabled) {
-          r.cssClass = {
-            'ax-state-disabled': r.disabled,
-          };
-        } else {
-          r.cssClass = {
-            'ax-state-today': d.equal(this._today, 'year'),
-            'ax-state-selected':
-              this.value &&
-              this.depth == 'years' &&
-              d.equal(this.value, 'year'),
-          };
-        }
-        // r.cssClass[`ax-col-start-2`] = i == 0;
-        return r;
-      });
-
-      this._navText = `${vr.startTime.year} - ${vr.endTime.year}`;
-      this._todayText = this._today.format('YYYY');
-    }
-    // month view
-    else if (this.activeView == 'months') {
-      const a = vr.enumurate('month');
-      this._slots = a.map((d, i) => {
-        const r: any = {};
-        r.date = d.date;
-        r.text = d.format('MMM');
-        r.tooltip = d.format('MMMM YYYY');
-        r.disabled =
-          (this.min && d.compare(this.min, 'month') == -1) ||
-          (this.max && d.compare(this.max, 'month') == 1);
-        if (r.disabled) {
-          r.cssClass = {
-            'ax-state-disabled': r.disabled,
-          };
-        } else {
-          r.cssClass = {
-            'ax-state-today': d.equal(this._today, 'month'),
-            'ax-state-selected':
-              this.value &&
-              this.depth == 'months' &&
-              d.equal(this.value, 'month'),
-            'ax-state-other': d.year != this._viewStartDate.year,
-          };
-        }
-        return r;
-      });
-      this._navText = this._viewStartDate.format('YYYY');
-      this._todayText = this._today.format('MMMM YYYY');
-    }
-    // day view
-    else {
-      const a = vr.enumurate('day');
-      this._slots = a.map((d, i) => {
-        const r: any = {};
-        r.date = d.date;
-        r.text = d.dayOfMonth;
-        r.tooltip = d.format();
-        r.disabled =
-          (this.min && d.compare(this.min, 'day') == -1) ||
-          (this.max && d.compare(this.max, 'day') == 1) ||
-          this.isDisabled(d);
-        if (r.disabled) {
-          r.cssClass = {
-            'ax-state-disabled': true,
-          };
-        } else {
-          r.cssClass = {
-            'ax-state-today': d.equal(this._today, 'day'),
-            'ax-state-selected': this.value && d.equal(this.value, 'day'),
-            'ax-state-holiday': this.isHoliday(d) || this.isWeekend(d),
-            // 'ax-state-event-info': d.dayOfMonth == 12,
-            // 'ax-state-event': d.dayOfMonth == 12,
-          };
-        }
-
-        r.cssClass[`ax-col-start-${vr.startTime.dayOfWeek}`] = i == 0;
-        return r;
-      });
-      this._navText = this._viewStartDate.format('MMMM YYYY');
-      this._todayText = this._today.format();
-    }
-  }
-
-  _handlePrevClick(e: AXClickEvent) {
-    this._isUserInteraction = true;
-    this.prev();
-    this._isUserInteraction = false;
-  }
-
-  _handleNextClick(e: AXClickEvent) {
-    this._isUserInteraction = true;
-    this.next();
-    this._isUserInteraction = false;
-  }
-
-  _handleSlotClick(e: MouseEvent, slot) {
-    if (slot.disabled || this.disabled) return;
-    if (this.activeView == 'days') {
-      this._setDate(slot.date);
-    } else if (this.activeView == 'months' && this.depth == 'days') {
-      this.activeView = 'days';
-      this.navTo(slot.date);
-    } else if (this.activeView == 'months' && this.depth == 'months') {
-      this._setDate(slot.date);
-    } else if (
-      this.activeView == 'years' &&
-      (this.depth == 'days' || this.depth == 'months')
-    ) {
-      this.activeView = 'months';
-      this.navTo(slot.date);
-    } else if (this.activeView == 'years' && this.depth == 'years') {
-      this._setDate(slot.date);
-    }
-    this.onSlotClick.emit({
-      component: this,
-      item: slot.date,
-      isUserInteraction: true,
-      nativeEvent: e,
-    });
-  }
-
-  _handleNavClick(e: AXClickEvent) {
-    this._isUserInteraction = true;
-    if (this.activeView == 'days') this.activeView = 'months';
-    else if (this.activeView == 'months') this.activeView = 'years';
-    this._isUserInteraction = false;
-  }
-
-  _onOptionChanged(option: AXComponentOptionChanged) {
-    if (
-      option.name == 'depth' ||
-      option.name == 'activeView' ||
-      option.name == 'disabledDates' ||
-      option.name == 'holidayDates'
-    ) {
-      this._genearteSlots();
-    }
-    if (option.name == 'type') {
-      this._refresh();
-    }
-  }
-
-  _onValueChanged(oldValue, newValue) {
-    this._viewStartDate = new AXDateTime(newValue, this.type);
-    this._genearteSlots();
-  }
-
-  _handleGoToday() {
-    this._isUserInteraction = true;
-    this._setDate(this._today.date);
-    this.goToday();
-    this._isUserInteraction = false;
-  }
-
-  next() {
-    this._navNextPrev(false);
-  }
-
-  prev() {
-    this._navNextPrev(true);
-  }
-
-  focus() {
-    const func = (s: string) =>
-      (this._getHostElement() as HTMLDivElement).querySelector<HTMLDivElement>(
-        s
-      );
-    const div =
-      func('.ax-calendar-slots>div.ax-state-selected') ||
-      func('.ax-calendar-slots>div');
-    div?.focus();
-  }
-
-  private _navNextPrev(prev: boolean) {
-    const sign = prev ? -1 : 1;
-    if (this.activeView == 'days')
-      this.navTo(this._viewStartDate.add('month', sign * 1));
-    else if (this.activeView == 'months')
-      this.navTo(this._viewStartDate.add('year', sign * 1));
-    else this.navTo(this._viewStartDate.add('year', sign * 10));
-  }
-
-  goToday() {
-    this.navTo(this._today);
-  }
-
-  navTo(date: Date | AXDateTime) {
-    this._viewStartDate = AXDateTime.convert(
-      date,
-      this._today.calendar.name()
-    ).startOf();
-    const vr = this._viewRange;
-    this.onNavigate.emit({
-      component: this,
-      isUserInteraction: this._isUserInteraction,
-      start: vr.startTime?.date,
-      end: vr.endTime?.date,
-      htmlElement: this._getHostElement(),
-    });
-    if (this.interface == 'calendar') this._genearteSlots();
-    else {
-      this._generatePickerItems('year');
-      this._generatePickerItems('month');
-    }
-    setTimeout(() => {
-      this.focus();
-    }, 50);
-  }
-
-  @HostBinding('class')
-  private get __hostClass(): string {
-    const _classes = {
-      'ax-state-disabled': this.disabled,
-    };
-    return Object.entries(_classes)
-      .filter((c) => c[1])
-      .map((c) => c[0])
-      .join(' ');
-  }
-
-  private _setDate(value: Date) {
-    this.value = AXDateTime.convert(
-      value,
-      this._today.calendar.name()
-    ).startOf().date;
-  }
-
-  private isDisabled(date: AXDateTime): boolean {
-    if (Array.isArray(this.disabledDates) && this.disabledDates.length != 0) {
-      return this.disabledDates.some((d) => date.equal(d, 'day'));
-    } else if (typeof this.disabledDates == 'function') {
-      return this.disabledDates(date.date);
-    }
-    return false;
-  }
-
-  private isHoliday(date: AXDateTime): boolean {
-    if (Array.isArray(this.holidayDates) && this.holidayDates.length != 0) {
-      return this.holidayDates.some((d) => date.equal(d, 'day'));
-    } else if (typeof this.holidayDates == 'function') {
-      return this.holidayDates(date.date);
-    }
-    return false;
-  }
-
-  private isWeekend(date: AXDateTime): boolean {
-    return date.dayOfWeek == 7 || date.dayOfWeek == 1;
-  }
-
-  _pickerDays: number[] = [];
-  _pickerMonths: { text: string; value: number }[] = [];
-  _pickerYears: number[] = [];
-
-  private _generatePickerItems(view) {
-    switch (view) {
-      case 'year':
-        this._pickerYears = range(2000, 2050, 1);
-        break;
-      case 'month':
-        this._pickerMonths = new AXDateTimeRange(
-          this._viewRange.startTime.startOf('year'),
-          this._viewRange.startTime.endOf('year')
-        )
-          .enumurate('month')
-          .map((c) => ({
-            text: c.format('MMM'),
-            value: c.monthOfYear,
-          }));
-        break;
-      default:
-        this._pickerDays = new AXDateTimeRange(
-          this._viewRange.startTime.startOf('month'),
-          this._viewRange.startTime.endOf('month')
-        )
-          .enumurate('day')
-          .map((c) => c.dayOfMonth);
-        this.cdr.detectChanges();
-        break;
-    }
-  }
-
-  _handlePickerChange(item: any, view) {
-    if (!item) return;
-    const date = this._viewRange.startTime;
-    switch (view) {
-      case 'year':
-        this._setDate(date.set('year', item.value).date);
-        break;
-      case 'month':
-        this._setDate(date.set('month', item.value.value).date);
-        this._generatePickerItems('day');
-        break;
-      default:
-        this._setDate(date.set('day', item.value).date);
-        break;
-    }
-  }
-}

package/calendar/src/calendar.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXDateTimeModule } from '@acorex/core/dateTime';
-import { AXButtonModule } from '@acorex/components/button';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import { AXCalendarComponent } from './calendar.component';
-
-const COMPONENT = [AXCalendarComponent];
-const MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXDateTimeModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXCalendarModule { }

package/carousel/index.ts

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

package/carousel/ng-package.json

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

package/carousel/src/carousel-arrows.component.ts

@@ -1,70 +0,0 @@
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  EventEmitter,
-  Output,
-  Optional,
-  Input,
-} from '@angular/core';
-import { AXClickEvent } from '@acorex/components/common';
-import { AXCarouselComponent } from './carousel.component';
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-
-@Component({
-  selector: 'ax-carousel-arrows',
-  template: `
-    <button
-      class="ax-carousel-arrow-prev"
-      [ngClass]="{ 'ax-vertical-arrow ax-top-arrow': this.parent.vertical }"
-      (click)="_handlePrevClick($event)"
-    >
-      <i class="ax-ic ax-ic-chevron ax-block rtl:ax-rotate-180 {{ class }}"></i>
-    </button>
-    <button
-      class="ax-carousel-arrow-next"
-      [ngClass]="{ 'ax-vertical-arrow ax-bottom-arrow': this.parent.vertical }"
-      (click)="_handleNextClick($event)"
-    >
-      <i
-        class="ax-ic ax-ic-chevron ax-block ax-rotate-180 rtl:ax-rotate-0 {{
-          class
-        }}"
-      ></i>
-    </button>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'ax-carousel-arrows' },
-})
-export class AXCarouselArrowsComponent extends AXBaseComponentMixin {
-  @Input() class: string;
-
-  @Output()
-  public onNextClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();
-
-  @Output()
-  public onPrevClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();
-
-  constructor(
-    elementRef: ElementRef,
-    cdr: ChangeDetectorRef,
-    @Optional()
-    public parent: AXCarouselComponent
-  ) {
-    super(elementRef, cdr);
-  }
-
-  _handlePrevClick(e: MouseEvent) {
-    e.stopPropagation();
-
-    this.parent.prev();
-  }
-
-  _handleNextClick(e: MouseEvent) {
-    e.stopPropagation();
-    this.parent.next();
-  }
-}

package/carousel/src/carousel-item.component.ts

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

package/carousel/src/carousel-pager.component.ts

@@ -1,83 +0,0 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { AXCarouselComponent } from './carousel.component';
-
-@Component({
-    selector: 'ax-carousel-pager',
-    template: `
-        <button *ngFor="let d of _dots;let i=index" [class.ax-state-active]="i==_pageIndex" (click)="_handleClick($event,i)">
-        </button>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-carousel-pager' }
-})
-export class AXCarouselPagerComponent extends AXBaseComponentMixin {
-
-
-    _visibleIndex: number = 0;
-    _pageIndex: number = 0;
-    private _size: number = 1;
-
-    _dots: any[] = [];
-
-
-    private _subs: Subscription[] = [];
-
-    constructor(
-        elementRef: ElementRef,
-        private cdr: ChangeDetectorRef,
-        private _parent: AXCarouselComponent
-    ) {
-        super(elementRef, cdr);
-         _parent.perPageChange.subscribe(c => {
-            this._size = c;
-            this._generateDots();
-        });
-         _parent.onSlideChanged.subscribe((c:any) => {
-            this._visibleIndex = c.value;
-            this._generateDots();
-        });
-         _parent.onItemsChanged.subscribe(c => {
-            this._generateDots();
-        });
-    }
-
-
-    onViewInit() {
-        this._size = this._parent.perPage;
-        this._visibleIndex = this._parent.visibleIndex;
-        this._generateDots();
-    }
-
-
-    private _generateDots(): void {
-        this._dots = [...Array(Math.ceil(this._parent.items.length / this._size)).keys()];
-        this._setPageIndex(this._findPageIndex(this._visibleIndex));
-        this.cdr.detectChanges();
-    }
-
-
-    _handleClick(e: MouseEvent, index: number) {
-        e.stopPropagation();
-        this._setPageIndex(index);
-        this._parent.goToPage(index);
-    }
-
-    private _setPageIndex(index: number) {
-        this._pageIndex = index;
-        this.cdr.detectChanges();
-    }
-
-    private _findPageIndex(slideIndex: number): number {
-        return Math.min(Math.ceil(slideIndex / this._size), this._dots.length - 1);
-    }
-
-    onDestroy() {
-        this._subs.forEach(s => {
-            s.unsubscribe();
-        });
-    }
-
-}