@acorex/components 6.0.1 → 6.0.2

package/button/src/button-group.component.ts

@@ -1,126 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  ElementRef,
-  EventEmitter,
-  Input,
-  NgZone,
-  Output,
-  QueryList,
-  ViewEncapsulation,
-} from '@angular/core';
-import { AXButtonComponent } from './button.component';
-import {
-  AXClickEvent,
-  AXItemClickEvent,
-  AXSelectionMode,
-  AXSelectionValueChangedEvent,
-} from '@acorex/components/common';
-import {
-  _InteractiveComponenetMixin,
-  _ColorLookComponentMixin,
-  AXBaseComponent,
-} from '@acorex/components/mixin';
-
-export const AXBaseButtonGroupMixin = _InteractiveComponenetMixin(
-  _ColorLookComponentMixin(AXBaseComponent)
-);
-
-@Component({
-  selector: 'ax-button-group',
-  templateUrl: 'button-group.component.html',
-  inputs: ['disabled', 'tabIndex', 'color', 'look'],
-  outputs: ['onBlur', 'onFocus', 'lookChange', 'colorChange'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'ax-button-group', role: 'group' },
-})
-export class AXButtonGroupComponent extends AXBaseButtonGroupMixin {
-  @Output()
-  selectionChange: EventEmitter<AXSelectionMode> = new EventEmitter();
-
-  private _selection: AXSelectionMode;
-  @Input()
-  public get selection(): AXSelectionMode {
-    return this._selection;
-  }
-  public set selection(value: AXSelectionMode) {
-    value = this._onOptionChanging({ name: 'selection', value: value });
-    const oldValue = this.selection;
-    if (value != oldValue) {
-      this._selection = value;
-      this.selectionChange.emit(value);
-      this.onOptionChanged({ name: 'selection', oldValue, newValue: value });
-    }
-  }
-
-  @Output()
-  onItemClick: EventEmitter<AXItemClickEvent<AXButtonComponent>> =
-    new EventEmitter<AXItemClickEvent<AXButtonComponent>>();
-
-  public onValueChanged: EventEmitter<AXSelectionValueChangedEvent> =
-    new EventEmitter<AXSelectionValueChangedEvent>();
-
-  @ContentChildren(AXButtonComponent, { descendants: true })
-  _contentButtons: QueryList<AXButtonComponent>;
-
-  constructor(
-    elementRef: ElementRef,
-    private zone: NgZone,
-    cdr: ChangeDetectorRef
-  ) {
-    super(elementRef, cdr);
-  }
-
-  ngAfterContentInit() {
-    this._bindEvents();
-    this._bindProps();
-    this._contentButtons.changes.subscribe(() => {
-      this._bindEvents();
-      this._bindProps();
-    });
-  }
-
-  private _bindEvents() {
-    this._contentButtons?.forEach((b: any) => {
-      if (!b.onClick.length)
-        b.onClick.subscribe((c: any) => {
-          this._handleClickEvent(c, b);
-        });
-    });
-  }
-
-  private _bindProps() {
-    this._contentButtons?.forEach((b: any) => {
-      b.look = this.look ?? this.look;
-      b.color = this.color ?? this.color;
-      b.disabled = b.disabled ?? this.disabled;
-      b.toggleable = false;
-    });
-  }
-
-  onOptionChanged(option: any) {
-    this._bindProps();
-  }
-
-  _handleClickEvent(e: AXClickEvent, button: any) {
-    if (this.selection == 'multiple') {
-      button.selected = !button.selected;
-    } else if (this.selection == 'single') {
-      this._contentButtons.forEach((c: any) => {
-        c.selected = false;
-      });
-      button.selected = true;
-    } else {
-      button.selected = false;
-    }
-
-    this.onItemClick.emit({
-      component: this,
-      htmlElement: e.htmlElement,
-      item: button,
-    });
-  }
-}

package/button/src/button-item.class.ts

@@ -1,24 +0,0 @@
-import { AXStyleLookType, AXStyleColorType, AXHotKeyAction } from '@acorex/components/common';
-
-export interface AXClickItemBase {
-  cssClass?: string;
-  color?: AXStyleColorType;
-  look?: AXStyleLookType;
-  text?: string;
-  tooltip?: string;
-  iconClass?: string;
-  badge?: string;
-  disabled?: boolean;
-  selected?: boolean;
-  seperated?: boolean;
-  name?: string;
-  data?: any;
-  onClick?: (...args: any) => void;
-  hotkey?: string | AXHotKeyAction;
-}
-export interface AXButtonItem extends AXClickItemBase {
-  type?: 'submit' | 'button' | 'cancel' | 'reset';
-  autofocus?: boolean;
-}
-
-export interface AXMenuItem extends AXClickItemBase {}

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

@@ -1,78 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  HostBinding,
-  HostListener,
-  Input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { AXStyleColorType } from '@acorex/components/common';
-import { _InteractiveComponenetMixin, _ClickableComponenetMixin, AXBaseComponent } from '@acorex/components/mixin';
-
-
-export const AXBaseItemButtonMixin = _InteractiveComponenetMixin(
-  _ClickableComponenetMixin(AXBaseComponent)
-);
-
-@Component({
-  selector: 'ax-button-item',
-  template: `
-    <ng-content select="ax-prefix"> </ng-content>
-    <ng-content select="ax-icon"> </ng-content>
-    <span *ngIf="text">{{ text }}</span>
-    <ng-content select="ax-suffix"> </ng-content>
-  `,
-  host: { class: 'ax-button-item' },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AXButtonItemComponent extends AXBaseItemButtonMixin {
-  /**
-   *  @ignore
-   */
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-
-  @Input()
-  text: string = '';
-
-  @Input()
-  tooltip: string = '';
-
-  @Input()
-  selected: boolean = false;
-
-  @Input()
-  seperated: boolean = false;
-
-  @Input()
-  name: string;
-
-  @Input()
-  data: any;
-
-  @Input()
-  color: AXStyleColorType = 'light';
-
-  @HostListener('click', ['$event'])
-  private __hostClick(e: MouseEvent) {
-    this._emitOnClickEvent(e);
-  }
-
-  @HostBinding('class')
-  private get __hostClass(): string {
-    const cssClasses: any = {
-      'ax-button-icon': !this.text,
-      'ax-state-disabled': this.disabled,
-      'ax-state-selected': this.selected,
-    };
-    cssClasses[`ax-${this.color || 'primary'}-default`] = true;
-    return Object.entries(cssClasses)
-      .filter((c) => c[1])
-      .map((c) => c[0])
-      .join(' ');
-  }
-}

package/button/src/button.component.html

@@ -1,10 +0,0 @@
-<button [disabled]="disabled" [attr.tabindex]="tabIndex" (click)="_emitOnClickEvent($event)"
-  (focus)="_emitOnFocusEvent($event)" (blur)="_emitOnBlurEvent($event)"  type="button">
-  <ng-content select="ax-prefix,ax-loading,ax-icon">
-  </ng-content>
-  <span *ngIf="text" >{{text}}</span>
-  <ng-content select="ax-suffix">
-  </ng-content>
-  <ng-content select="ax-dropdown-panel">
-  </ng-content>
-</button>

package/button/src/button.component.ts

@@ -1,79 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  HostBinding,
-  ViewEncapsulation,
-} from '@angular/core';
-import { AXComponent, AXFocusableComponent } from '@acorex/components/common';
-import {
-  AXBaseButtonMixin,
-} from '@acorex/components/mixin';
-
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-@Component({
-  selector: 'ax-button',
-  templateUrl: './button.component.html',
-  inputs: [
-    'disabled',
-    'size',
-    'tabIndex',
-    'color',
-    'look',
-    'text',
-    'toggleable',
-    'selected',
-  ],
-  outputs: [
-    'onBlur',
-    'onFocus',
-    'onClick',
-    'selectedChange',
-    'toggleableChange',
-    'lookChange',
-    'colorChange',
-  ],
-  host: { class: 'ax-button' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  providers: [
-    { provide: AXComponent, useExisting: AXButtonComponent },
-    { provide: AXFocusableComponent, useExisting: AXButtonComponent },
-  ],
-})
-export class AXButtonComponent extends AXBaseButtonMixin {
-  /**
-   *  @ignore
-   */
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-
-  onViewInit(): void {
-    this._getHostElement().removeAttribute('tabindex');
-  }
-
-  _emitOnClickEvent(e: MouseEvent) {
-    if (this.disabled) return;
-    if (this.toggleable) {
-      this.selected = !this.selected;
-    }
-    super._emitOnClickEvent(e);
-  }
-
-  click() {
-    this._getInnerElement().click();
-  }
-
-  @HostBinding('class')
-  private get __hostClass(): string[] {
-    return Object.entries(this._classes)
-      .filter((c) => c[1])
-      .map((c) => c[0]);
-  }
-}

package/button/src/button.module.ts

@@ -1,22 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import { NgModule } from '@angular/core';
-import { AXButtonGroupComponent } from './button-group.component';
-import { AXButtonItemComponent } from './button-item.component';
-import { AXButtonComponent } from './button.component';
-
-
-const COMPONENT = [
-    AXButtonComponent,
-    AXButtonItemComponent,
-    AXButtonGroupComponent,
-];
-const MODULES = [CommonModule,AXDecoratorModule];
-
-@NgModule({
-    imports: [MODULES],
-    exports: [...COMPONENT],
-    declarations: [...COMPONENT],
-    providers: [],
-})
-export class AXButtonModule { }

package/calendar/index.ts

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

package/calendar/ng-package.json

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

package/calendar/public-api.ts

@@ -1,3 +0,0 @@
-export * from './src/calendar.class';
-export * from './src/calendar.component';
-export * from './src/calendar.module';

package/calendar/src/calendar.class.ts

@@ -1,143 +0,0 @@
-import { AXConfig } from "@acorex/core/config";
-import { ChangeDetectorRef, ElementRef, EventEmitter, Injectable, Input, Output } from "@angular/core";
-import { AXItemClickEvent,  AXRangeChangedEvent } from "@acorex/components/common";
-import { AXBaseComponent } from "@acorex/components/mixin";
-
-export type AXCalendarViewType = 'years' | 'months' | 'days';
-export type AXCalendarViewDepth = AXCalendarViewType;
-export type AXCalendarDisabledDates = Date[] | ((date: Date) => boolean);
-export type AXCalendarHolidayDates = Date[] | ((date: Date) => boolean);
-
-
-/**
-*  Contains native event
-* @category Events
-*/
-export class AXCalendarNavigateEvent extends AXRangeChangedEvent<Date> {
-
-}
-
-@Injectable()
-export class AXCalendarBaseComponent extends AXBaseComponent {
-
-
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-        super(elementRef, cdr);
-    }
-
-    @Output()
-    onSlotClick: EventEmitter<AXItemClickEvent<Date>> = new EventEmitter<AXItemClickEvent<Date>>();
-  
-    @Output()
-    onNavigate: EventEmitter<AXCalendarNavigateEvent> = new EventEmitter<AXCalendarNavigateEvent>();
-
-    @Output()
-    activeViewChange: EventEmitter<AXCalendarViewType> = new EventEmitter<AXCalendarViewType>();
-
-    private _activeView: AXCalendarViewType = 'days';
-    @Input()
-    public get activeView(): AXCalendarViewType {
-        return this._activeView;
-    }
-    public set activeView(v: AXCalendarViewType) {
-        this._setOption({ name: 'activeView', value: v });
-    }
-
-
-    @Output()
-    public typeChange: EventEmitter<string> = new EventEmitter<string>();
-  
-    private _type: string = AXConfig.get(`dateTime.calendar`);
-  
-    @Input()
-    public get type(): string {
-      return this._type || AXConfig.get(`dateTime.calendar`);
-    }
-    public set type(v: string) {
-      this._setOption({
-        name: 'type',
-        value: v
-      })
-    }
-
-
-    @Output()
-    depthChange: EventEmitter<AXCalendarViewDepth> = new EventEmitter<AXCalendarViewDepth>();
-
-    private _depth: AXCalendarViewDepth = 'days';
-    @Input()
-    public get depth(): AXCalendarViewDepth {
-        return this._depth;
-    }
-    public set depth(v: AXCalendarViewDepth) {
-        this._setOption({
-            name: 'depth', 
-            value: v, 
-            beforeCallback: () => {
-                this._activeView = v;
-            }
-        });
-    }
-
-    @Output()
-    minChange: EventEmitter<Date> = new EventEmitter<Date>();
-
-    private _min: Date;
-    @Input()
-    public get min(): Date {
-        return this._min;
-    }
-    public set min(v: Date) {
-        this._setOption({ name: 'min', value: v });
-    }
-
-
-    @Output()
-    maxChange: EventEmitter<Date> = new EventEmitter<Date>();
-
-    private _max: Date;
-    @Input()
-    public get max(): Date {
-        return this._max;
-    }
-    public set max(v: Date) {
-        this._setOption({ name: 'max', value: v });
-    }
-
-    @Output()
-    disabledDatesChange: EventEmitter<AXCalendarDisabledDates> = new EventEmitter<AXCalendarDisabledDates>();
-
-    private _disabledDates: AXCalendarDisabledDates;
-    @Input()
-    public get disabledDates(): AXCalendarDisabledDates {
-        return this._disabledDates;
-    }
-    public set disabledDates(v: AXCalendarDisabledDates) {
-        this._setOption({ name: 'disabledDates', value: v });
-    }
-
-    @Output()
-    holidayDatesChange: EventEmitter<AXCalendarHolidayDates> = new EventEmitter<AXCalendarHolidayDates>();
-
-    private _holidayDates: AXCalendarHolidayDates;
-    @Input()
-    public get holidayDates(): AXCalendarHolidayDates {
-        return this._holidayDates;
-    }
-    public set holidayDates(v: AXCalendarHolidayDates) {
-        this._setOption({ name: 'holidayDates', value: v });
-    }
-}
-
-
-
-export const CALENDAR_INPUTS = [
-    'depth',
-    'activeView',
-    'min',
-    'max',
-    'disabledDates',
-    'type',
-    'holidayDates',
-];
-export const CALENDAR_OUTPUTS = ['depthChange','typeChange','disabledDatesChange','holidayDatesChange','onNavigate'];

package/calendar/src/calendar.component.html

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