@acorex/components 5.0.5 → 5.0.9

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

@@ -1,142 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, NgZone, Output, QueryList, ViewChildren, ViewEncapsulation } from "@angular/core";
-import { AXButtonComponent } from "./button.component";
-import { AXClickEvent, AXInteractiveComponenetMixin, AXItemClickEvent, AXSelectionMode, AXSelectionValueChangedEvent, AXStyleButtonLook, AXStyleColorType } from "../base";
-
-@Component({
-    selector: 'ax-button-group',
-    templateUrl: 'button-group.component.html',
-    inputs: ['cssClass', 'size', 'cssStyle', 'rtl', 'disabled'],
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    host: { class: 'ax-button-group', role: 'group' }
-})
-export class AXButtonGroupComponent extends AXInteractiveComponenetMixin {
-
- 
-    @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()
-    colorChange: EventEmitter<AXStyleColorType> = new EventEmitter();
-    private _color: AXStyleColorType = 'primary';
-    /**
-    *  Predefined color schemes
-    */
-    @Input()
-    get color(): AXStyleColorType {
-        return this._color;
-    }
-    set color(value: AXStyleColorType) {
-        value = this.onOptionChanging({ name: 'color', value: value });
-        const oldValue = this.color;
-        if (value != oldValue) {
-            this._color = value;
-            this.colorChange.emit(value);
-            this.onOptionChanged({ name: 'value', oldValue, newValue: value });
-        }
-    }
-
-    @Output()
-    lookChange: EventEmitter<AXStyleButtonLook> = new EventEmitter();
-    private _look?: AXStyleButtonLook = null;
-    /**
-    *  Predefined look schemes
-    */
-    @Input()
-    get look(): AXStyleButtonLook {
-        return this._look;
-    }
-    set look(value: AXStyleButtonLook) {
-        value = this.onOptionChanging({ name: 'look', value: value });
-        const oldValue = this.look;
-        if (value != oldValue) {
-            this._look = value;
-            this.lookChange.emit(value);
-            this.onOptionChanged({ name: 'look', 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();
-    }
-
-
-    private _bindEvents() {
-        (this._contentButtons || []).forEach(b => {
-            b.onClick.subscribe(c => {
-                this._handleClickEvent(c, b);
-            });
-        });
-    }
-
-    private _bindProps() {
-        (this._contentButtons || []).forEach(b => {
-            b.look = this.look;
-            b.color = this.color;
-            b.disabled = this.disabled;
-            b.toggleable = false;
-        });
-    }
-
-    onOptionChanged(options) {
-        this._bindProps();
-    }
-
-
-    _handleClickEvent(e: AXClickEvent, button: AXButtonComponent) {
-        if (this.selection == 'multiple') {
-            button.selected = !button.selected;
-        }
-        else if (this.selection == 'single') {
-            this._contentButtons.forEach(c => {
-                c.selected = false;
-            })
-            button.selected = true;
-        }
-        else {
-            button.selected = false;
-        }
-       
-        this.onItemClick.emit({
-            component: this,
-            htmlElement: e.htmlElement,
-            item : button
-        });
-
-    }
-}

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

@@ -1,79 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { AXBaseComponent, AXStyleColorType } from '../base';
-import { _ClickableComponenetMixin } from '../base/mixin/clickable-mixin.class';
-import { _InteractiveComponenetMixin } from '../base/mixin/interactive-mixin.class';
-
-
-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>
-    `,
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    host: { style: 'cssStyle' }
-})
-
-export class AXButtonItemComponent extends AXBaseItemButtonMixin {
-
-
-    /**
-    *  @ignore
-    */
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-        super(elementRef, cdr);
-    }
-
-    @Input()
-    text: string = null;
-
-    @Input()
-    tooltip: string = null;
-
-
-    @Input()
-    selected: boolean = false;
-
-    @Input()
-    seperated: boolean = false;
-
-    @Input()
-    name: string;
-
-    @Input()
-    data: any;
-
-
-    @Input()
-    color: AXStyleColorType = 'primary';
-
-
-    @HostListener('click', ['$event'])
-    private __hostClick(e: MouseEvent) {
-        this._emitOnClickEvent(e);
-    }
-
-    @HostBinding('class')
-    private get __hostClass(): string {
-        const cssClasses = {
-            'ax-button-icon': !this.text,
-            'ax-state-disabled': this.disabled,
-            'ax-state-selected': this.selected,
-        };
-        cssClasses[`ax-${this.color || 'primary'}`] = true;
-        return Object.entries(cssClasses).filter(c => c[1]).map(c => c[0]).join(' ');
-    }
-}
-

package/src/lib/button/button.component.html

@@ -1,18 +0,0 @@
-<!-- <button [ngClass]="_classes" class="{{cssClass}} ax-{{size}}" [disabled]="disabled" [tabindex]="tabIndex" [attr.style]="cssStyle" (click)="_emitOnClickEvent($event)" (focus)="_emitOnFocusEvent($event)" (blur)="_emitOnBlurEvent($event)">
-  <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> -->
-<!-- <button [ngClass]="_classes" class="{{cssClass}} ax-{{size}}" [disabled]="disabled" [tabindex]="tabIndex" [attr.style]="cssStyle" (click)="_emitOnClickEvent($event)" (focus)="_emitOnFocusEvent($event)" (blur)="_emitOnBlurEvent($event)"> -->
-  <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/src/lib/button/button.component.ts

@@ -1,71 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Input, ViewEncapsulation } from '@angular/core';
-import { BUTTON_INPUTS, BUTTON_OUTPUT } from '../base/mixin/button-mixin.class';
-import { AXBaseButtonMixin } from '../base/mixin/mixin.class';
-
-/**
- * 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', 'tabIndex', 'size', ...BUTTON_INPUTS],
-    outputs: [...BUTTON_OUTPUT],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { role: 'button' }
-})
-export class AXButtonComponent extends AXBaseButtonMixin {
-
-    /**
-    *  @ignore
-    */
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-        super(elementRef, cdr);
-    }
-
-    @HostListener('document:keydown.escape', ['$event'])
-    onKeydownHandler(e: KeyboardEvent) {
-        if (this.cancelBehavior) {
-            this._emitOnClickEvent(e as any);
-            e.stopPropagation();
-            e.preventDefault();
-            return false;
-        }
-    }
-
-    @HostListener('click', ['$event'])
-    _emitOnClickEvent(e: MouseEvent) {
-        if (this.disabled)
-            return;
-        if (this.toggleable) {
-            this.selected = !this.selected;
-        }
-        super._emitOnClickEvent(e);
-    }
-
-    @HostListener('focus', ['$event'])
-    _emitOnFocusEvent(e: MouseEvent) {
-        super._emitOnFocusEvent(e);
-    }
-
-
-    @HostListener('blur', ['$event'])
-    _emitOnBlurEvent(e: MouseEvent) {
-        super._emitOnBlurEvent(e);
-    }
-
-  
-
-    @HostBinding('class')
-    private get __hostClass(): string {
-        return Object.entries(this._classes).filter(c => c[1]).map(c => c[0]).join(' ');
-    }
-
-    @HostBinding('tabindex')
-    private get __tabindex(): number {
-        return this.tabIndex;
-    }
-
-}

package/src/lib/button/button.module.ts

@@ -1,23 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { AXEditorDecoratorModule } from '../decorators';
-import { AXIconModule } from '../icon';
-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,AXIconModule,AXEditorDecoratorModule];
-
-@NgModule({
-    imports: [MODULES],
-    exports: [COMPONENT],
-    declarations: [COMPONENT],
-    providers: [],
-})
-export class AXButtonModule { }

package/src/lib/calendar/calendar.component.html

@@ -1,74 +0,0 @@
-<div class="ax-calendar">
-    <div class="ax-calendar-header">
-        <ax-button class="ax-nav-button" text="October 2021" color="light" look="blank"></ax-button>
-        <ax-button class="ax-prev-button" color="light" look="blank">
-            <ax-prefix>
-                <ax-icon icon="ax-ic ax-ic-chevron ax-transform ax-rotate-90"></ax-icon>
-            </ax-prefix>
-        </ax-button>
-        <ax-button class="ax-next-button" color="light" look="blank">
-            <ax-prefix>
-                <ax-icon icon="ax-ic ax-ic-chevron ax-transform ax--rotate-90"></ax-icon>
-            </ax-prefix>
-        </ax-button>
-    </div>
-    <div class="ax-calendar-body">
-        <div class="ax-month-items">
-            <div class="ax-month-item">MO</div>
-            <div class="ax-month-item">TU</div>
-            <div class="ax-month-item">WE</div>
-            <div class="ax-month-item">TH</div>
-            <div class="ax-month-item">FR</div>
-            <div class="ax-month-item">SA</div>
-            <div class="ax-month-item">SU</div>
-        </div>
-        <div class="ax-day-items">
-            <div class="ax-day-item ax-state-event">27</div>
-            <div class="ax-day-item ax-state-event ax-state-event-primary">28</div>
-            <div class="ax-day-item ax-state-event ax-state-event-secondary">29</div>
-            <div class="ax-day-item ax-state-event ax-state-event-success">30</div>
-            <div class="ax-day-item ax-state-event ax-state-event-warning">01</div>
-            <div class="ax-day-item ax-state-event ax-state-event-danger">02</div>
-            <div class="ax-day-item ax-state-holiday">03</div>
-            <div class="ax-day-item">04</div>
-            <div class="ax-day-item">05</div>
-            <div class="ax-day-item">06</div>
-            <div class="ax-day-item">07</div>
-            <div class="ax-day-item">08</div>
-            <div class="ax-day-item">09</div>
-            <div class="ax-day-item ax-state-holiday">10</div>
-            <div class="ax-day-item">11</div>
-            <div class="ax-day-item ax-state-event ax-state-event-info">12</div>
-            <div class="ax-day-item">13</div>
-            <div class="ax-day-item">14</div>
-            <div class="ax-day-item">15</div>
-            <div class="ax-day-item">16</div>
-            <div class="ax-day-item ax-state-holiday">17</div>
-            <div class="ax-day-item">18</div>
-            <div class="ax-day-item">19</div>
-            <div class="ax-day-item">20</div>
-            <div class="ax-day-item">21</div>
-            <div class="ax-day-item">22</div>
-            <div class="ax-day-item">23</div>
-            <div class="ax-day-item ax-state-holiday">24</div>
-            <div class="ax-day-item">25</div>
-            <div class="ax-day-item">26</div>
-            <div class="ax-day-item">27</div>
-            <div class="ax-day-item ax-state-today">28</div>
-            <div class="ax-day-item">29</div>
-            <div class="ax-day-item">30</div>
-            <div class="ax-day-item ax-state-holiday">31</div>
-            <div class="ax-day-item">01</div>
-            <div class="ax-day-item">02</div>
-            <div class="ax-day-item">03</div>
-            <div class="ax-day-item">04</div>
-            <div class="ax-day-item ax-state-selected">05</div>
-            <div class="ax-day-item">06</div>
-            <div class="ax-day-item ax-state-holiday">07</div>
-        </div>
-
-    </div>
-    <div class="ax-calendar-footer">
-        <ax-button text="Today" color="dark" size="sm"></ax-button>
-    </div>
-</div>

package/src/lib/calendar/calendar.component.ts

@@ -1,60 +0,0 @@
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  Input,
-  ViewChild,
-} from '@angular/core';
-import { AXBaseComponentMixin, AXCalendarMixin } from '../base';
-
-@Component({
-  selector: 'ax-calendar',
-  templateUrl: './calendar.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  inputs: ['disabled', 'tabIndex', 'size', 'cssClass', 'cssStyle'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXCalendarComponent extends AXCalendarMixin {
-  @ViewChild('days') days: ElementRef<HTMLDivElement>;
-
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-    this.createYears();
-  }
-  @Input()
-  actionBar: boolean = false;
-
-  @Input()
-  showTime: boolean = false;
-
-  dayItems: number[] = new Array(32);
-  yearItems: number[] = [1990];
-  monthItems: string[] = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-
-  ngAfterViewInit() {
-
-  }
-
-  createYears() {
-    let number = 1990;
-    for (let i = 0; i < 40; i++) {
-      number = number + 1;
-      this.yearItems.push(number);
-    }
-  }
-}

package/src/lib/calendar/calendar.module.ts

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

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

@@ -1,46 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, EventEmitter, Output, Host, Optional } from '@angular/core';
-import { AXBaseComponentMixin, AXClickEvent } from '../base';
-import { AXCarouselComponent } from './carousel.component';
-
-@Component({
-    selector: 'ax-carousel-arrows',
-    template: `
-        <button class="ax-carousel-arrow-prev" (click)="_handlePrevClick($event)">
-            <i class="ax-ic ax-ic-keyboard-arrow-left"></i>
-        </button>
-        <button class="ax-carousel-arrow-next" (click)="_handleNextClick($event)">
-            <i class="ax-ic ax-ic-keyboard-arrow-right"></i>
-        </button>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-carousel-arrows' }
-})
-export class AXCarouselArrowsComponent extends AXBaseComponentMixin {
-
-    @Output()
-    public onNextClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();
-
-    @Output()
-    public onPrevClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef,
-        @Optional() 
-        private parent: AXCarouselComponent
-    ) {
-        super(elementRef, cdr);
-    }
-
-
-    _handlePrevClick(e: MouseEvent) {
-        e.stopPropagation();
-        this.parent.prev();
-    }
-
-    _handleNextClick(e: MouseEvent) {
-        e.stopPropagation();
-        this.parent.next();
-    }
-}

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

@@ -1,19 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef } from '@angular/core';
-import { AXBaseComponentMixin } from '../base';
-
-@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/src/lib/carousel/carousel-pager.component.ts

@@ -1,83 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, EventEmitter, Output, Host, Optional } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { AXBaseComponentMixin } from '../base';
-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.pageSizeChange.subscribe(c => {
-            this._size = c;
-            this._generateDots();
-        });
-         _parent.onSlideChanged.subscribe(c => {
-            this._visibleIndex = c.value;
-            this._generateDots();
-        });
-         _parent.onItemsChanged.subscribe(c => {
-            this._generateDots();
-        });
-    }
-
-
-    onViewInit() {
-        this._size = this._parent.pageSize;
-        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();
-        });
-    }
-
-}