@acorex/components 5.8.0 → 6.0.1

package/data-pager/src/data-pager.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXDataPagerComponent } from './data-pager.component';
+import { AXDataPagerNextButtonsComponent } from './data-pager-next-buttons.components';
+import { AXDataPagerPrevButtonsComponent } from './data-pager-prev-buttons.component';
+import { AXDataPagerPageSizesComponent } from './data-pager-pagesize-dropdown.component';
+import { AXDataPagerNumericSelectorComponent } from './data-pager-numeric-selector.component';
+import { AXDataPagerInputSelectorComponent } from './data-pager-input-selector.component';
+import { AXDataPagerInfoComponent } from './data-pager-info.component';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXNumberBoxModule } from '@acorex/components/number-box';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+
+const COMPONENT = [
+    AXDataPagerComponent,
+    AXDataPagerNextButtonsComponent,
+    AXDataPagerPrevButtonsComponent,
+    AXDataPagerPageSizesComponent,
+    AXDataPagerNumericSelectorComponent,
+    AXDataPagerInputSelectorComponent,
+    AXDataPagerInfoComponent
+];
+const MODULES = [CommonModule, AXButtonModule, AXNumberBoxModule,AXDropdownModule,AXDecoratorModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXDataPagerModule { }

package/data-table/index.ts

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

package/data-table/ng-package.json

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

package/data-table/public-api.ts

@@ -0,0 +1,4 @@
+export * from './src/data-column.directive';
+export * from './src/data-table.component';
+export * from './src/data-column-cell-template.directive';
+export * from './src/data-table.module';

package/data-table/src/data-column-cell-template.directive.ts

@@ -0,0 +1,13 @@
+import { ContentChild, Directive, TemplateRef } from '@angular/core';
+
+@Directive({ selector: 'ax-data-column-cell-template' })
+export class AXDataColumnCellTemplateDirective {
+
+    @ContentChild(TemplateRef, { static: true })
+    _contentTemplate: TemplateRef<any>;
+
+
+    get template(): TemplateRef<any> {
+        return this._contentTemplate;
+    }
+}

package/data-table/src/data-column.directive.ts

@@ -0,0 +1,45 @@
+import { Input, ContentChild, Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: 'ax-data-column',
+})
+export class AXDataColumnComponent {
+
+    @Input("headerTemplate")
+    _inputHeaderTemplate?: TemplateRef<any>;
+
+    @ContentChild("header", { static: true })
+    _contentHeaderTemplate?: TemplateRef<any>;
+
+    @ContentChild(TemplateRef, { static: true })
+    _defaultTemplate?: TemplateRef<any>;
+
+    get headerTemplate():TemplateRef<any>
+    {
+        return this._inputHeaderTemplate! || this._contentHeaderTemplate ;
+    }
+
+
+    @Input("cellTemplate")
+    _inputCellTemplate?: TemplateRef<any>;
+
+    @ContentChild("cell", { static: true })
+    _contentCellTemplate?: TemplateRef<any>;
+
+    get cellTemplate():TemplateRef<any>
+    {
+        return this._inputCellTemplate! || this._contentCellTemplate || this._defaultTemplate;
+    }
+
+    // @ContentChild(AXDataColumnCellTemplateDirective, { static: true })
+    // cellTemplate?: AXDataColumnCellTemplateDirective;
+
+    @Input()
+    valueField: string;
+
+    @Input()
+    caption: string;
+
+    @Input()
+    width: string | number = 'auto';
+}

package/data-table/src/data-table.component.html

@@ -0,0 +1,89 @@
+<ng-content select="ax-header">
+</ng-content>
+<div class="ax-wrapper">
+  <table class="ax-table ax-table-bordered" tabindex="0" [axIsLoading]="_isLoading">
+    <thead>
+     
+      <tr>
+        <th *ngFor="let c of _columns">
+          <ng-template [ngIf]="c.headerTemplate" [ngIfElse]="captionTpl">
+            <ng-container *ngTemplateOutlet="c.headerTemplate"></ng-container>
+          </ng-template>
+          <ng-template #captionTpl>
+            {{c.caption}}
+          </ng-template>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <ng-container *ngIf="displayItems.length; else emptyTpl">
+        <ng-container *ngFor="let d of displayItems;let rIndex=index">
+          <ng-template [ngIf]="rowTemplate" [ngIfElse]="rowTpl">
+            <ng-container *ngTemplateOutlet="rowTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }">
+            </ng-container>
+          </ng-template>
+          <ng-template #rowTpl>
+            <tr>
+              <ng-container *ngFor="let c of _columns">
+                <ng-template [ngIf]="c.cellTemplate" [ngIfElse]="cellTpl">
+                  <ng-container *ngTemplateOutlet="c.cellTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }">
+                  </ng-container>
+                </ng-template>
+                <ng-template #cellTpl>
+                  <td [attr.data-label]="c.caption" tabindex="0">
+                    {{d[c.valueField]}}
+                  </td>
+                </ng-template>
+              </ng-container>
+            </tr>
+          </ng-template>
+        </ng-container>
+      </ng-container>
+      <ng-template #emptyTpl>
+        <tr>
+          <td [attr.colspan]="_columns.length">
+            <ax-result type="empty" caption=" {{'common.no-result-found' | trans }}"></ax-result>
+          </td>
+        </tr>
+      </ng-template>
+    </tbody>
+  </table>
+</div>
+<ng-content select="ax-footer">
+</ng-content>
+
+<!-- <br>
+<table class="ax-table ax-table-responsive  ax-table-alternate">
+    <thead>
+      <col>
+      <colgroup span="2"></colgroup>
+      <colgroup span="2"></colgroup>
+      <tr>
+        <th rowspan="2">Index</th>
+        <th colspan="2" scope="colgroup">Mars</th>
+        <th colspan="2" scope="colgroup">Venus</th>
+      </tr>
+      <tr>
+        <th scope="col">Produced</th>
+        <th scope="col">Sold</th>
+        <th scope="col">Produced</th>
+        <th scope="col">Sold</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td >Teddy Bears</td>
+        <td>50,000</td>
+        <td>30,000</td>
+        <td>100,000</td>
+        <td>80,000</td>
+      </tr>
+      <tr>
+        <td >Board Games</td>
+        <td>10,000</td>
+        <td>5,000</td>
+        <td>12,000</td>
+        <td>9,000</td>
+      </tr>
+    </tbody>
+  </table> -->

package/data-table/src/data-table.component.ts

@@ -0,0 +1,159 @@
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+  Input,
+  ContentChildren,
+  QueryList,
+  TemplateRef,
+  EventEmitter,
+  Output,
+} from '@angular/core';
+import {
+  AXPagedComponent,
+  AXPagedComponentInterface,
+  AXValueChangedEvent,
+} from '@acorex/components/common';
+
+import { AXDataColumnComponent } from './data-column.directive';
+import { AXBaseComponentMixin, AXDataListFetchDataCallback, AXDataListItems } from '@acorex/components/mixin';
+
+
+@Component({
+  selector: 'ax-data-table',
+  templateUrl: './data-table.component.html',
+  host: { class: 'ax-data-table' },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }],
+})
+export class AXDataTableComponent
+  extends AXBaseComponentMixin
+  implements AXPagedComponentInterface
+{
+  @ContentChildren(AXDataColumnComponent)
+  _columns: QueryList<AXDataColumnComponent> = {} as QueryList<AXDataColumnComponent>;
+
+  @Output()
+  onPageChanged: EventEmitter<AXValueChangedEvent<number>> = new EventEmitter<
+    AXValueChangedEvent<number>
+  >();
+
+  @Input()
+  rowTemplate?: TemplateRef<any>;
+
+  private _pageSize: number = 20;
+  @Input()
+  public get pageSize(): number {
+    return this._pageSize;
+  }
+  public set pageSize(v: number) {
+    this._pageSize = v;
+  }
+
+  @Input()
+  fetchDataMode: 'auto' | 'manual' = 'auto';
+
+  private _currentPage: number = 1;
+  _isLoading: boolean = false;
+  private _loadedItems: any[] = [];
+  private _totalItems: number = 0;
+
+  private _isLazy: boolean = false;
+
+  get totalCount(): number {
+    return this._totalItems;
+  }
+
+  get isLazy(): boolean {
+    return this._isLazy;
+  }
+
+  get loadedCount(): number {
+    return this._loadedItems?.length || 0;
+  }
+
+  private _items: AXDataListItems = [];
+
+  @Input()
+  get items(): AXDataListItems {
+    return this._items;
+  }
+  set items(v: AXDataListItems) {
+    if (Array.isArray(v)) {
+      this._items = v;
+    } else if (typeof v === 'function') {
+      this._isLazy = true;
+      this._items = v;
+    } else {
+      this._items = [];
+    }
+  }
+
+  get displayItems(): any[] {
+    if (Array.isArray(this.items)) {
+      return (this._items || []) as any[];
+    } else if (typeof this._items == 'function') {
+      return this._loadedItems || [];
+    }
+    return [];
+  }
+
+  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+  }
+
+  onViewInit(): void {
+    if (this.fetchDataMode == 'auto') this._fetchData();
+  }
+
+  _fetchData(opts?: { searchQuery?: string }) {
+    const skip = (this._currentPage - 1) * this.pageSize,
+      take = this.pageSize;
+    if (
+      (this.loadedCount >= this.totalCount && this.totalCount != 0) ||
+      this._isLoading ||
+      !this._isLazy ||
+      skip > this.totalCount
+    ) {
+      return;
+    }
+    if (this._items) {
+      this._isLoading = true;
+      this._cdr.markForCheck();
+      const fetchFn = this._items as AXDataListFetchDataCallback;
+      fetchFn({ skip, take, searchQuery: opts?.searchQuery })
+        .then((c) => {
+          if (Array.isArray(c)) {
+            this._loadedItems = c;
+            this._totalItems = c.length;
+          } else {
+            this._totalItems = c.total || c.items?.length || 0;
+            //this._loadedItems = [...new Set(this._loadedItems.concat(c.items))];
+            this._loadedItems = [...new Set(c.items)];
+          }
+        })
+        .finally(() => {
+          this._isLoading = false;
+          this.onPageChanged.next({
+            component: this,
+            isUserInteraction: false,
+            name: 'page',
+            value: this._currentPage,
+          });
+          this._cdr.markForCheck();
+        });
+    }
+  }
+
+  refresh() {
+    this._fetchData();
+  }
+
+  goToPage(page: number) {
+    this._currentPage = page;
+    this.refresh();
+  }
+}

package/data-table/src/data-table.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXDataTableComponent } from './data-table.component';
+import { AXDataColumnComponent } from './data-column.directive';
+import { AXDataColumnCellTemplateDirective } from './data-column-cell-template.directive';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { AXResultModule } from '@acorex/components/result';
+import { AXLoadingModule } from '@acorex/components/loading';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+
+const COMPONENT = [AXDataTableComponent, AXDataColumnComponent, AXDataColumnCellTemplateDirective];
+const MODULES = [CommonModule, AXTranslationModule, AXResultModule, AXLoadingModule,AXDecoratorModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXDataTableModule { }

package/date-picker/index.ts

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

package/date-picker/ng-package.json

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

package/date-picker/public-api.ts

@@ -0,0 +1,2 @@
+export * from './src/datepicker.component';
+export * from './src/datepicker.module';

package/date-picker/src/datepicker.component.html

@@ -0,0 +1,37 @@
+<ng-content select="ax-prefix">
+</ng-content>
+<div class="ax-dropdown-content">
+    <input class="ax-input" type="text" [attr.placeholder]="placeholder" [class.ax-state-disabled]="disabled"
+        [class.ax-state-readonly]="readonly" [disabled]="disabled" [readonly]="readonly"
+        [attr.tabindex]="_isMobile ? -1 : tabIndex" [ngModel]="displayText" (focus)="_emitOnFocusEvent($event)"
+        (mouseup)="_handleOnInputClickEvent($event)" (blur)="_emitOnBlurEvent($event)"
+        (keydown)="_handleOnKeydownEvent($event)">
+</div>
+<ax-button [disabled]="disabled" [tabIndex]="-1" color="light" look="blank" (onClick)="_handleArrowClickEvent($event)">
+    <ax-icon icon="ax-ic ax-ic-chevron ax-transform ax--rotate-90"></ax-icon>
+</ax-button>
+<ng-content select="ax-suffix">
+</ng-content>
+<ng-content select="ax-validation-rule">
+</ng-content>
+<ng-content select="ax-calendar-options">
+</ng-content>
+<ax-popover [target]="_target" [position]="position" [openTrigger]="'manual'" [closeTrigger]="'clickout'" [adaptivityEnabled]="true"
+    (onOpened)="_handlePopoverOpened($event)">
+    <div class="ax-overlay-pane" [class.ax-w-full]="_isMobile">
+        <ax-header *ngIf="_isMobile" >
+            <ax-title text="{{placeholder || 'Choose a date'}}"></ax-title>
+            <ax-close-button></ax-close-button>
+        </ax-header>
+        <ng-container *ngIf="interface === 'calendar'; then calendarTemplate; else pickerTemplate"></ng-container>
+        <ng-template #calendarTemplate>
+            <ax-calendar #calendar [disabled]="disabled" [readonly]="readonly" [(value)]="value" [min]="min" [max]="max"
+                [disabledDates]="disabledDates" [holidayDates]="holidayDates" [depth]="depth"
+                (onNavigate)="_handleOnNavigate($event)" [type]="type">
+            </ax-calendar>
+        </ng-template>
+        <ng-template #pickerTemplate>
+        </ng-template>
+
+    </div>
+</ax-popover>