@acorex/components 5.8.0 → 6.0.1

package/calendar/src/calendar.component.html

@@ -0,0 +1,70 @@
+<ng-container *ngIf="interface === 'calendar'; else pickerTemplate">
+    <div class="ax-calendar-header">
+        <div>
+            <ng-container *ngIf="activeView=='days'; else elseTemplate">
+                <ax-button class="ax-nav-button" [text]="_navText.split(' ')[1]" color="light" look="blank"
+                    (onClick)="_handleNavClick($event)" [disabled]="disabled">
+                </ax-button>
+                <ax-button class="ax-nav-button" [text]="_navText.split(' ')[0]" color="light" look="blank"
+                    (onClick)="_handleNavClick($event)" [disabled]="disabled">
+                </ax-button>
+            </ng-container>
+            <ng-template #elseTemplate>
+                <ax-button class="ax-nav-button" [text]="_navText" color="light" look="blank"
+                    (onClick)="_handleNavClick($event)" [disabled]="disabled">
+                </ax-button>
+            </ng-template>
+        </div>
+        <div class="ax-calendar-header-buttons">
+            <ax-button class="ax-prev-button" color="light" look="blank" (onClick)="_handlePrevClick($event)"
+                [disabled]="disabled">
+                <ax-prefix>
+                    <ax-icon icon="ax-ic ax-ic-chevron "></ax-icon>
+                </ax-prefix>
+            </ax-button>
+            <ax-button class="ax-next-button" color="light" look="blank" (onClick)="_handleNextClick($event)"
+                [disabled]="disabled">
+                <ax-prefix>
+                    <ax-icon icon="ax-ic ax-ic-chevron "></ax-icon>
+
+                </ax-prefix>
+            </ax-button>
+        </div>
+
+    </div>
+    <div class="ax-calendar-body">
+        <div [ngSwitch]="activeView">
+            <ng-container *ngSwitchCase="'years'">
+                <div class="ax-calendar-slots ax-calendar-slots-year">
+                    <div tabindex="0" *ngFor="let slot of _slots" [ngClass]="slot.cssClass"
+                        (click)="_handleSlotClick($event,slot)">{{slot.text}}</div>
+                </div>
+            </ng-container>
+            <ng-container *ngSwitchCase="'months'">
+                <div class="ax-calendar-slots ax-calendar-slots-month">
+                    <div tabindex="0" *ngFor="let slot of _slots" [title]="slot.tooltip" [ngClass]="slot.cssClass"
+                        (click)="_handleSlotClick($event,slot)">{{slot.text}}</div>
+                </div>
+            </ng-container>
+            <ng-container *ngSwitchDefault>
+                <div class="ax-calendar-week">
+                    <div *ngFor="let d of _dayNames">{{d}}</div>
+                </div>
+                <div class="ax-calendar-slots ax-calendar-slots-day">
+                    <div tabindex="0" *ngFor="let slot of _slots" [title]="slot.tooltip" [ngClass]="slot.cssClass"
+                        (click)="_handleSlotClick($event,slot)">{{slot.text}}</div>
+                </div>
+            </ng-container>
+        </div>
+
+    </div>
+    <div class="ax-calendar-footer">
+        <ax-button class="dark:ax-text-danger" [text]="_todayText" color="dark" look="blank" size="sm"
+            (onClick)="_handleGoToday()" [disabled]="disabled"></ax-button>
+    </div>
+</ng-container>
+<ng-template #pickerTemplate>
+    <div class="ax-calendar-picker">
+        //TODO: picker
+    </div>
+</ng-template>

package/calendar/src/calendar.component.ts

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

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

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

package/carousel/ng-package.json

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

package/carousel/public-api.ts

@@ -0,0 +1,7 @@
+export * from './src/carousel-arrows.component';
+export * from './src/carousel-item.component';
+export * from './src/carousel-pager.component';
+export * from './src/carousel-splidejs.class';
+export * from './src/carousel.class';
+export * from './src/carousel.component';
+export * from './src/carousel.module';

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

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

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

@@ -0,0 +1,83 @@
+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();
+        });
+    }
+
+}