@acorex/components 6.0.0 → 6.0.1

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

@@ -0,0 +1,42 @@
+import { _InteractiveComponenetMixin, _ClickableComponenetMixin, AXBaseComponent } from '@acorex/components/mixin';
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostListener,
+  Inject,
+  Input,
+  Optional,
+} from '@angular/core';
+
+import { AXBreadCrumbsComponent } from './breadcrumbs.component';
+
+export const AXBaseItemBreadCrumbMixin = _InteractiveComponenetMixin(
+  _ClickableComponenetMixin(AXBaseComponent)
+);
+@Component({
+  selector: 'ax-breadcrumbs-item',
+  templateUrl: './breadcrumbs-item.component.html',
+  host: { class: 'ax-breadcrumbs-item' },
+})
+export class AXBreadCrumbsItemComponent extends AXBaseItemBreadCrumbMixin {
+  @Input() text: string;
+
+  /**
+   *  @ignore
+   */
+  constructor(
+    _elementRef: ElementRef,
+    _cdr: ChangeDetectorRef,
+    @Optional()
+    @Inject(AXBreadCrumbsComponent)
+    public _parent: AXBreadCrumbsComponent
+  ) {
+    super(_elementRef, _cdr);
+  }
+
+  @HostListener('click', ['$event'])
+  private __hostClick(e: MouseEvent) {
+    this._emitOnClickEvent(e);
+  }
+}

package/breadcrumbs/src/breadcrumbs.component.html

@@ -0,0 +1,8 @@
+<ng-content select="ax-breadcrumbs-item"></ng-content>
+<ng-template #dividerTpl>
+    <ng-container [ngTemplateOutlet]="default" *ngIf="!_divider"></ng-container>
+    <ng-container [ngTemplateOutlet]="_divider" *ngIf="_divider"></ng-container>
+    <ng-template #default>
+        <div class="ax-breadcrumb-divider">/</div>
+    </ng-template>
+</ng-template>

package/breadcrumbs/src/breadcrumbs.component.ts

@@ -0,0 +1,28 @@
+import { AXBaseComponent } from '@acorex/components/mixin';
+import {
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ElementRef,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+
+@Component({
+  selector: 'ax-breadcrumbs',
+  templateUrl: './breadcrumbs.component.html',
+  host: { class: 'ax-breadcrumbs' },
+})
+export class AXBreadCrumbsComponent extends AXBaseComponent {
+  @ContentChild('divider')
+  _divider: TemplateRef<any>;
+
+  @ViewChild('dividerTpl')
+  dividerTemplate: TemplateRef<any>;
+  /**
+   *  @ignore
+   */
+  constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef) {
+    super(_elementRef, _cdr);
+  }
+}

package/breadcrumbs/src/breadcrumbs.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXBreadCrumbsComponent } from './breadcrumbs.component';
+import { AXBreadCrumbsItemComponent } from './breadcrumbs-item.component';
+
+@NgModule({
+  declarations: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent],
+  imports: [CommonModule],
+  exports: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent],
+  providers: [],
+})
+export class AXBreadcrumbsModule {}

package/button/index.ts

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

package/button/ng-package.json

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

package/button/public-api.ts

@@ -0,0 +1,5 @@
+export * from './src/button.component';
+export * from './src/button-group.component';
+export * from './src/button-item.component';
+export * from './src/button.module';
+export * from './src/button-item.class';

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

@@ -0,0 +1,2 @@
+<ng-content select="ax-button">
+</ng-content>

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

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

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

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

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

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

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

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

package/calendar/ng-package.json

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

package/calendar/public-api.ts

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

package/calendar/src/calendar.class.ts

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

@@ -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>