@bizdoc/core 1.8.8 → 1.8.9

package/src/lib/cube/explore/explore-items.component.html

@@ -0,0 +1,27 @@
+<table mat-table matSort [dataSource]="dataSource" @list>
+  <ng-container [matColumnDef]="c.name" *ngFor="let c of columns">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{c.label || c.name}}</th>
+    <td mat-cell *matCellDef="let element" [class.figure]="c.type === 'Currency'">
+      <div [ngSwitch]="c.type">
+        <span *ngSwitchCase="'Date'">
+          {{element[c.name] | amDateFormat: 'll'}}
+        </span>
+        <span *ngSwitchCase="'Number'">
+          {{element[c.name] | number }}
+        </span>
+        <span *ngSwitchCase="'Currency'">
+          {{element[c.name] | currency : (element.currencyCode || currencyCode) : 'symbol' : CURRENCY_FORMAT }}
+        </span>
+        <span *ngSwitchCase="'Boolean'">
+          <mat-checkbox [checked]="element.model[c.name]" disabled="true"></mat-checkbox>
+        </span>
+        <span *ngSwitchDefault>
+          {{element[c.name] }}
+        </span>
+      </div>
+    </td>
+  </ng-container>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+  <tr mat-row *matRowDef="let element; columns: displayedColumns;" (click)="expand(element)" [class.selectable]="selectable" @item></tr>
+</table>
+<mat-paginator #paginator [pageSize]="PAGE_SIZE" hidePageSize style="display: none"></mat-paginator>

package/src/lib/cube/explore/explore-items.component.scss

@@ -0,0 +1,24 @@
+.selectable {
+  cursor: pointer;
+}
+
+table {
+  width: 100%;
+  background: none;
+
+  td {
+    padding: 0 4px 0 4px;
+
+    &.figure {
+      text-align: right;
+    }
+
+    &:last-of-type {
+      padding-right: 8px;
+    }
+
+    &:first-of-type {
+      padding-left: 8px;
+    }
+  }
+}

package/src/lib/cube/explore/explore-items.component.ts

@@ -0,0 +1,142 @@
+import { Component, ViewChild, Input, OnChanges, SimpleChanges, Output, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+import * as XLSX from 'xlsx';
+import { Cube, FieldInfo, FieldType, AxesMap } from '../../core/models';
+import { CubeService, ScopeType } from '../cube.service';
+import { PromptService } from '../../core/prompt.service';
+import { TranslateService } from '../../core/translate.service';
+import { itemAnimation, listAnimation } from '../../core/animations';
+import { SessionService } from '../../core/session.service';
+import { isMobile } from '../../core/functions';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs';
+
+const PAGE_SIZE = 14, MOBILE_PAGE_SIZE = 8;
+
+@Component({
+  selector: 'bizdoc-cube-explore',
+  templateUrl: './explore-items.component.html',
+  styleUrls: ['./explore-items.component.scss'],
+  animations: [
+    listAnimation,
+    itemAnimation]
+})
+/** drill-down component*/
+export class ExploreItemsComponent implements OnInit, OnChanges, OnDestroy {
+  PAGE_SIZE = PAGE_SIZE;
+  readonly CURRENCY_FORMAT = this._service.digitsInfo;
+  @Input() cube!: string;
+  @Input() index?: string;
+  @Input() scope?: ScopeType;
+  @Input() axes!: AxesMap;
+  @Output() readonly explore = new EventEmitter<ExploreItemEvent>();
+  @Output() readonly load = new EventEmitter();
+  dataSource: MatTableDataSource<any>;
+  @Input() loading: boolean = false;
+  @Output() readonly loadingChange = new EventEmitter<boolean>();
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  columns: FieldInfo[];
+  selectable: boolean;
+  displayedColumns: string[];
+  currencyCode: string;
+  private readonly _loading$ = new Subject<boolean>();
+  private _template: string;
+  private _cube: Cube;
+  /** drill-down ctor */
+  constructor(
+    private _service: CubeService,
+    private _sb: PromptService,
+    private _session: SessionService,
+    private _translate: TranslateService) {
+    this.PAGE_SIZE = isMobile() ? MOBILE_PAGE_SIZE : PAGE_SIZE;
+  }
+    ngOnInit(): void {
+      this._loading$.pipe(debounceTime(200)).subscribe(v=> this.loadingChange.emit(this.loading = v));
+    }
+  ngOnDestroy(): void {
+    this._loading$.unsubscribe();
+    }
+  refresh() { this.ngOnChanges(null); }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this._cube = this._session.profile.cubes.find(c => c.name === this.cube);
+    this.currencyCode = this._cube.currencyCode;
+    if (this.index)
+      this._index();
+    else
+      this._view();
+  }
+  /** */
+  private _view() {
+    this._loading$.next( true);
+    this._service.resolve(this.cube, this.axes).subscribe(e => {
+      const { columns, fields, template } = e;
+      this._service.explore(this.cube, this.axes, { scope: this.scope }).subscribe(r => {
+        this.columns = columns;
+        this.displayedColumns = columns.filter(c => !c.hidden && !c.key).map(c => c.name);
+        this._template = template;
+        this.selectable = template !== null || fields !== null;
+        this._datasource(r);
+      }, () => {
+        this._loading$.next( false);
+        this._sb.error();
+      });
+    }, () => {
+      this._loading$.next( false);
+      this._sb.error();
+    });
+  }
+
+  private _index() {
+    this._loading$.next( true);
+    this._service.indices(this.cube, this.index, this.axes, { scope: this.scope }).subscribe(r => {
+      const columns: FieldInfo[] = this._cube.axes.
+        filter(a => this.axes[a.name] === undefined && !a.hidden &&
+          r.find(row => row[a.name] !== undefined)).
+        map(a => {
+          return { name: a.name, label: a.title };
+        });
+      const iindex = this._cube.indices.find(i => i.name === this.index);
+      columns.push({ name: 'value', label: iindex.title, type: FieldType.Currency });
+      this.columns = columns;
+      this.displayedColumns = columns.map(c => c.name);
+      this._template = null;
+      this.selectable = false;
+      this._datasource(r);
+    }, () => {
+      this._loading$.next( false);
+      this._sb.error();
+    });
+  }
+
+  private _datasource(data: any[]) {
+    this.dataSource = new MatTableDataSource(data);
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+    this._loading$.next( false);
+    this.load.emit();
+  }
+  expand(item: any) {
+    if (!this._template) return;
+    const keys = this.columns.filter(f => f.key).map(f => item[f.name]);
+    if (!keys.length) throw 'no column with Key attribute in IBrowseable model.';
+    this.explore.emit({ keys, template: this._template });
+  }
+  exportExcel() {
+    const ws = XLSX.utils.json_to_sheet(this.dataSource.data);
+    const wb = XLSX.utils.book_new();
+    const name = this._translate.get('SheetN', 1);
+    wb.Sheets[name] = ws;
+    wb.SheetNames.push(name);
+    this._service.nameOf(this.axes, this.cube).
+      subscribe(o =>
+        XLSX.writeFile(wb, `${this._cube.title} ${o}.xlsx`));
+  }
+}
+export interface ExploreItemEvent {
+  keys: (string | number)[];
+  template: string;
+}

package/src/lib/cube/explore/explore.pane.component.html

@@ -0,0 +1,11 @@
+<mat-toolbar class="nav-toolbar">
+  <button mat-icon-button (click)="items.refresh()" [matTooltip]="'Refresh' | translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>
+  <span class="divider"></span>
+  <button mat-icon-button (click)="items.paginator.previousPage()" [matTooltip]="'PrevPage' | translate" [attr.aria-label]="'PrevPage' | translate" [disabled]="!items.paginator.hasPreviousPage()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_left</mat-icon></button>
+  <button mat-icon-button (click)="items.paginator.nextPage()" [matTooltip]="'NextPage' | translate" [attr.aria-label]="'NextPage' | translate" [disabled]="!items.paginator.hasNextPage()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_right</mat-icon></button>
+  <button mat-icon-button (click)="items.exportExcel()" [matTooltip]="'DownloadExcel' | translate"><mat-icon>save_alt</mat-icon></button>
+</mat-toolbar>
+<mat-progress-bar mode="query" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
+<bizdoc-cube-explore #items [cube]="cube" [index]="index" [axes]=axes
+                     (explore)="item($event)" (loadingChange)="loading = $event"
+                     [scope]="scope"></bizdoc-cube-explore>

package/src/lib/cube/explore/explore.pane.component.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit } from '@angular/core';
+import { AxesMap } from '../../core/models';
+import { SessionService } from '../../core/session.service';
+import { PanesRouter } from '../../core/slots/router.service';
+import { PaneRef } from '../../core/slots/pane-ref';
+import { TranslateService } from '../../core/translate.service';
+import { CubeService, ScopeType } from '../cube.service';
+import { ExploreItemEvent } from './explore-items.component';
+import { PromptService } from '../../core/prompt.service';
+
+
+@Component({
+  templateUrl: './explore.pane.component.html', styles: [`
+:host {
+    min-width: 360px;
+}`],
+  host: {
+    class: 'pane'
+  }
+})
+export
+  class CubeExplorePaneComponent implements OnInit {
+  cube: string;
+  axes: AxesMap;
+  index?: string;
+  scope?: ScopeType;
+  loading: boolean;
+  constructor(
+    private _pane: PaneRef<CubeExplorePaneComponent>,
+    private _sb: PromptService,
+    private _session: SessionService,
+    private _service: CubeService,
+    private _translate: TranslateService,
+    private _router: PanesRouter) {
+  }
+  ngOnInit(): void {
+    this._pane.paramsChange.subscribe(p => {
+      this.cube = p['cube'];
+      const cube = this._session.profile.cubes.find(c => c.name === this.cube);
+      if (!this._pane.group) this._pane.group = cube.title;
+      this._pane.title = this._translate.get('Explore');
+    });
+    this._pane.dataChange.subscribe(d => {
+      const { index, scope } = d;
+      this.index = index;
+      this.scope = scope;
+    });
+    this._pane.queryParamsChange.subscribe(q => {
+      this.axes = q;
+    });
+  }
+  item(evt: ExploreItemEvent) {
+    const { keys } = evt;
+    this.loading = true;
+    this._service.item(this.cube, this.axes, keys).subscribe(item => {
+      this._router.navigate(['i', evt.template, keys[0]], {
+        pathMode: 'relative',
+        relativeTo: this._pane,
+        queryParams: this.axes,
+        state: { item },
+        group: this._pane.group
+      });
+      this.loading = false;
+    }, e => {
+      this.loading = false;
+      this._sb.error(e.status === 401 ? 'Unauthorized' : null);
+    });
+  }
+}

package/src/lib/cube/explore/item-resolver.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { CubeService } from '../cube.service';
+import { PaneResolve, ParamMap } from '../../core/configuration';
+import { Observable } from 'rxjs';
+import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
+
+@Injectable()
+export class ItemResolver implements PaneResolve<any> {
+    constructor(
+        private _service: CubeService
+    ) { }
+    onResolve(params: ParamMap, queryParams: ParamMap): Observable<any> {
+        return this._service.item(params['cube'], queryParams, params['key']);
+    }
+}
+
+@Injectable()
+export class ItemResolveService implements Resolve<void | any>{
+  constructor(private _service: CubeService
+    , private _router: Router) {
+  } resolve(route: ActivatedRouteSnapshot): Observable<void | any> {
+    return this._service.item(route.params['cube'], route.queryParams, route.params['key']);
+  }
+}

package/src/lib/cube/explore/item.pane.component.html

@@ -0,0 +1,3 @@
+<bizdoc-cube-item [template]="template" [model]="model"></bizdoc-cube-item>
+
+<!--<lottie name="4958-404-not-found" *ngIf="problem"></lottie>-->

package/src/lib/cube/explore/item.pane.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { PaneRef } from '../../core/slots/pane-ref';
+
+/** shows an item on explore. */
+@Component({
+  templateUrl: './item.pane.component.html',
+  host: {
+    class: 'pane'
+  }
+})
+export class ExploreItemPaneComponent implements OnInit {
+  template: string;
+    model: any;
+  constructor(
+    private _pane: PaneRef<ExploreItemPaneComponent>) {
+  }
+  ngOnInit(): void {
+    this._pane.dataChange.subscribe(d => this.model = d.item);
+    this._pane.paramsChange.subscribe(p =>
+      this.template = p['template']
+    );
+  }
+}

package/src/lib/cube/filter/filter-tags.component.exp.ts

@@ -0,0 +1,59 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { forkJoin, map, Observable } from 'rxjs';
+import { DatasourceService } from '../../core/datasource.service';
+import { isArray } from '../../core/functions';
+import { AxesMap, Cube } from '../../core/models';
+import { SessionService } from '../../core/session.service';
+
+type Tag = {
+  /** axis name */
+  axis: string;
+  key: string | number;
+  /** filter key */
+  value: string | number;
+  /** type value */
+};
+/** accepts filters */
+@Component({
+  selector: 'bizdoc-filter-tags',
+  templateUrl: './filter-tags.component.html',
+  styleUrls: ['./filter-tags.component.scss']
+})
+export class FilterTagsComponent implements OnChanges {
+  @Input() axes: AxesMap;
+  @Input() cube!: Cube;
+  @Output() readonly filtersChange = new EventEmitter<AxesMap>();
+  tags: Tag[];
+  constructor(private _session: SessionService, private _ds: DatasourceService) { }
+  ngOnChanges(changes: SimpleChanges): void {
+    const observables: Observable<Tag>[] = [];
+    this.cube.axes.forEach(a => {
+      const key = this.axes[a.name];
+      if (key === undefined) return;
+      if (isArray(key))
+        key.forEach(key => {
+          const observe = this._ds.get(a.dataType, key as string).pipe(map(value => {
+            return { axis: a.name, value, key } as Tag
+          }));
+          observables.push(observe);
+        });
+      else {
+        const observe = this._ds.get(a.dataType, key as string).pipe(map(value => {
+          return { axis: a.name, value, key } as Tag
+        }));
+        observables.push(observe);
+      }
+    });
+    if (observables.length) forkJoin(observables).subscribe(tags => {
+      this.tags = tags;
+    });
+    else this.tags = [];
+  }
+  remove(tag: Tag) {
+    if (isArray(this.axes[tag.axis]) && (this.axes[tag.axis] as any[]).length > 1)
+      (this.axes[tag.axis] as any[]).remove(tag.key);
+    else
+      delete this.axes[tag.axis];
+    this.filtersChange.emit(this.axes);
+  }
+}

package/src/lib/cube/filter/filter-tags.component.html

@@ -0,0 +1,8 @@
+<mat-chip-list aria-label="">
+  <mat-chip *ngFor="let t of tags" class="small-chip"
+            [removable]="true"
+            (removed)="remove(t)">
+    {{t.value}}
+    <mat-icon matChipRemove>cancel</mat-icon>
+  </mat-chip>
+</mat-chip-list>

package/src/lib/cube/filter/filter-tags.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterTagsComponent } from './filter-tags.component.exp';
+
+describe('FilterTagsComponent', () => {
+  let component: FilterTagsComponent;
+  let fixture: ComponentFixture<FilterTagsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilterTagsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterTagsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/cube/filter/filter.component.html

@@ -0,0 +1,25 @@
+<form [formGroup]="form" fxLayout="column">
+  <mat-form-field *ngFor="let a of visibleAxes" [ngSwitch]="a.selectionMode" [attr.data-help]="'axis-'+a.name">
+    <ng-container *ngSwitchCase="'Pattern'">
+      <input matInput autocomplete="off"
+             [pattern]="pattern" [autofocus]
+             [formControlName]="a.name" [placeholder]="a.title" />
+      <mat-error *ngIf="form.controls[a.name].invalid">{{'SimplePatternErr' |translate}}</mat-error>
+    </ng-container>
+    <ng-container *ngSwitchCase="'Search'">
+      <input matInput autocomplete="off" type="search"
+             [matAutocomplete]="segment" #inp
+             [placeholder]="a.title" />
+      <mat-autocomplete #segment [displayWith]="display"
+                        (optionSelected)="change(a.name, $event)">
+        <mat-option *ngFor="let r of sources[a.dataType] | async | filter : 'value' : inp.value | slice:0:50" [value]="r">{{r.value}}</mat-option>
+      </mat-autocomplete>
+      <button mat-icon-button *ngIf="inp.value" matSuffix aria-label="" (click)="inp.value = ''; form.controls[a.name].setValue(null)"><mat-icon>close</mat-icon></button>
+      <mat-error *ngIf="form.controls[a.name].invalid">{{'SimplePatternErr' |translate}}</mat-error>
+    </ng-container>
+    <mat-select [formControlName]="a.name" [placeholder]="a.title" [multiple]="a.selectionMode === 'Multiple'" *ngSwitchDefault>
+      <mat-option *ngIf="a.selectionMode !== 'Multiple'">{{'All' | translate}}</mat-option>
+      <mat-option *ngFor="let r of sources[a.dataType] | async" [value]="r.key">{{r.value}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+</form>

package/src/lib/cube/filter/filter.component.scss

@@ -0,0 +1,8 @@
+form {
+  padding: 8px
+}
+
+/*form ::ng-deep .mat-form-field-infix {
+    display: flex;
+}
+*/

package/src/lib/cube/filter/filter.component.ts

@@ -0,0 +1,102 @@
+import { Component, OnInit, Input, Output, OnDestroy, EventEmitter, OnChanges, AfterViewInit, ChangeDetectorRef, ElementRef, SimpleChanges } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { Subject, Observable } from 'rxjs';
+import { debounceTime, takeUntil, filter } from 'rxjs/operators';
+import { cleanup } from '../../core/functions';
+import { AxesMap, Cube, CubeAxis } from '../../core/models';
+import { AXIS_VALUE_PATTERN } from '../cube.service';
+import { DatasourceService } from '../../core/datasource.service';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { SessionService } from '../../core/session.service';
+
+@Component({
+  selector: 'bizdoc-cube-filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.scss']
+})
+/** filter component*/
+export class CubeFilterComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+  readonly pattern = AXIS_VALUE_PATTERN;
+  @Input() cube?: string;
+  @Input() exclude?: string[];
+  @Input() include?: string[];
+  @Input() axes: AxesMap = {};
+  @Output() readonly axesChange = new EventEmitter<AxesMap>();
+  form: FormGroup;
+  visibleAxes: CubeAxis[] = [];
+  readonly sources: { [datatype: string]: Observable<{ [name: string]: any }> } = {};
+  private _cube: Cube;
+  private readonly _destroy = new Subject<void>();
+  ngOnInit(): void {
+    this._cube = this._session.profile.cubes.find(c => this.cube == null || c.name === this.cube);
+    const config = {};
+    this._cube.axes.forEach(a => {
+      if (!a.hidden && a.selectionMode !== 'None')
+        config[a.name] = this._fb.control(this.axes[a.name]);
+    });
+    this.form = this._fb.group(config);
+    this.form.valueChanges.pipe(filter(() => this.form.valid), debounceTime(200), takeUntil(this._destroy)).subscribe(v => {
+      cleanup(v);
+      this.axes = v;
+      this.axesChange.emit(v);
+    });
+    this._initialize();
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    changes['exclude'] && !changes['exclude'].firstChange && this._initialize();
+  }
+  private _dependecies = {} as { [axis: string]: string[] };
+  private _initialize() {
+    const visibleAxes = [], values = {};
+    this._cube.axes.forEach(a => {
+      if (!a.hidden &&
+        (!this.include || this.include.indexOf(a.name) > -1) &&
+        ((!this.include && !this.exclude) || (!this.include && this.exclude && this.exclude.indexOf(a.name) < 0)) &&
+        a.selectionMode !== 'None') {
+        if (!this.sources[a.dataType] && a.selectionMode !== 'Pattern') {
+          //const type = this._session.profile.types.find(t => t.name === a.dataType);
+          //if (type.arguments) {
+          //  const dependecies = this._dependecies[a.name] = type.arguments.map(f => f.name);
+          //  var args = {};
+          //  dependecies.forEach(d => {
+          //    if (this.values[d]) args[d] = this.values[d];
+          //  });
+          //  this.sources[a.dataType] = this._ds.all(a.dataType, args);
+          //}
+          //else
+            this.sources[a.dataType] = this._ds.all(a.dataType);
+        }
+        visibleAxes.push(a);
+      }
+      values[a.name] = this.axes[a.name] || null;
+    });
+    this.visibleAxes = visibleAxes;
+    this.form && this.form.patchValue(values, { emitEvent: false });
+  }
+
+  focus() {
+    const inp = (this._element.nativeElement as HTMLElement).querySelectorAll('.mat-select, textarea, input')[0];
+    inp && (inp as HTMLInputElement).focus();
+    this._cd.detectChanges();
+  }
+  /** filter ctor */
+  constructor(private _ds: DatasourceService,
+    private _element: ElementRef<HTMLDivElement>,
+    private _cd: ChangeDetectorRef,
+    private readonly _fb: FormBuilder,
+    private _session: SessionService) {
+  }
+  ngAfterViewInit(): void {
+    this.focus();
+  }
+  display(keyValue) {
+    return keyValue ? keyValue.value : null;
+  }
+  change(axis: string, evt: MatAutocompleteSelectedEvent) {
+    this.form.controls[axis].setValue(evt.option.value.key);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/cube/grid/grid.component.html

@@ -0,0 +1,30 @@
+<!--<ejs-grid [dataSource]="dataSource"
+          [id]='id'
+          [groupSettings]="groupSettings"
+          [enableHover]='false'
+          [allowPdfExport]=true
+          [allowExcelExport]=true
+          [selectionSettings]=selectionSettings
+          [allowSorting]=false
+          (cellSelecting)=cellSelecting($event)
+          (queryCellInfo)="queryCellInfo($event)"
+          [currencyCode]=currencyCode
+          [style.max-height]="height">
+  <e-columns>
+    <e-column headerText="" field="title" width="120">
+    </e-column>
+    <e-column *ngFor="let c of columns" [field]="'_'+c.key" width="100" [headerText]="c.value" [format]="format" textAlign='Right'>
+    </e-column>
+  </e-columns>
+  <e-aggregates>
+    <e-aggregate>
+      <e-columns>
+        <e-column *ngFor="let c of columns" [field]="'_'+c.key" type="Custom" [format]="format" [customAggregate]="customAggregate">
+          <ng-template #footerTemplate let-data>
+            <span class="nowrap" [class.mat-warn]="data['_'+c.key+' - custom'] !== undefined && data['_'+c.key+' - custom']<0">{{data.Custom}}</span>
+          </ng-template>
+        </e-column>
+      </e-columns>
+    </e-aggregate>
+  </e-aggregates>
+</ejs-grid>-->

package/src/lib/cube/grid/grid.component.scss

@@ -0,0 +1,4 @@
+.nowrap {
+  white-space: nowrap;
+  word-wrap: normal;
+}