@bizdoc/core 1.12.1 → 1.12.2

package/fesm2020/bizdoc-core.mjs

@@ -14651,11 +14651,9 @@ class CubeMatrixComponent {
             const element = {
                 key: SUM_PREFIX + i,
                 value: s.title,
-                explorable: !isFunction(s.calculate),
-                accumulate: s.accumulate,
+                explorable: !isFunction(s.calculate) && s.explorable !== false,
                 precision: s.precision || this.PRECISION,
-                format: s.format,
-                index: i
+                sum: s
             };
             let j = 0;
             if (axis === 'xAxis') {
@@ -14690,10 +14688,10 @@ class CubeMatrixComponent {
             filters: this.filters,
             scope: this.scope
         }).pipe(modelize()).subscribe(d => {
-            this._data = JSON.parse(JSON.stringify(d));
+            this._clone(d);
             this._totals(d);
             this._sum && this._calculatesum(d);
-            this._stringfy(d);
+            this._stringify(d);
             this.data = d;
             clearTimeout(progressTask);
             this.loadingChange.next(this.loading = false);
@@ -14703,51 +14701,55 @@ class CubeMatrixComponent {
             this.loadingChange.next(this.loading = false);
         }));
     }
-    _stringfy(data) {
+    _stringify(data) {
         const fmt = (xAxis, series) => data[xAxis][series] = formatNumber(data[xAxis][series] || 0, this.LANGUAGE, this.PRECISION);
         this.columns.forEach(c => {
-            if (c.index !== undefined)
+            if (c.sum)
                 return;
             this.indices && this.indices.forEach(i => fmt(i.name, c.key));
-            this.rows.forEach(r => {
-                r.index === undefined &&
-                    fmt(r.key, c.key);
-            });
+            this.rows.forEach(r => !r.sum &&
+                fmt(r.key, c.key));
         });
     }
+    _clone(data) {
+        this._data = {};
+        const copy = key => Object.assign(this._data[key] = {}, data[key]);
+        this.rows.forEach(r => copy(r.key));
+        this.indices.forEach(i => copy(i.name));
+    }
     _totals(data) {
         let grand = 0;
         this.indices && this.indices.forEach(i => {
-            let row = data[i.name];
-            if (!row)
-                row = data[i.name] = {};
-            else {
+            const row = data[i.name];
+            if (row) {
                 let sum = 0;
                 for (let x in row)
                     sum += row[x];
                 row['_total'] = this._format(sum);
                 grand += sum;
             }
+            else
+                data[i.name] = {};
         });
         this.rows.forEach(r => {
-            if (r.accumulate === false)
+            if (r.sum?.accumulate === false)
                 return;
-            let row = data[r.key];
-            if (!row)
-                row = data[r.key] = {
-                    '_total': '0'
-                };
-            else {
+            const row = data[r.key];
+            if (row) {
                 let sum = 0;
                 for (let x in row)
                     sum += row[x];
                 row['_total'] = this._format(sum, r);
                 grand += sum * -1;
             }
+            else
+                data[r.key] = {
+                    '_total': '0'
+                };
         });
         const totals = data['_total'] = this.totals = {};
         this.columns.forEach(c => {
-            if (c.accumulate === false)
+            if (c.sum?.accumulate === false)
                 return;
             let sum = 0;
             for (let key in data) {
@@ -14766,89 +14768,90 @@ class CubeMatrixComponent {
             if (axis === 'xAxis') {
                 let total = 0;
                 this.rows.forEach(r => {
-                    if (r.accumulate === false)
+                    if (r.sum?.accumulate === false)
                         return;
-                    const row = data[r.key];
-                    if (!row)
+                    const datarow = data[r.key];
+                    if (!datarow)
                         return;
-                    let sum = 0, j = 0;
-                    while (j < this.columns.length) {
-                        let column = this.columns[j], key = column.key;
-                        if (column.index === undefined) {
-                            if (isFunction(calculate)) {
-                                let val = calculate(r.key, this._data);
-                                if (val !== undefined)
-                                    sum += val;
-                            }
-                            else {
-                                let val = row[key];
-                                if (val !== undefined)
-                                    sum += val;
-                                if (key === value)
-                                    break;
-                            }
+                    let sum = 0;
+                    for (let column of this.columns) {
+                        let key = column.key;
+                        if (column.sum)
+                            continue;
+                        if (isFunction(calculate)) {
+                            let val = calculate(r.key, this._data);
+                            if (val !== undefined && val !== null)
+                                sum += val;
+                        }
+                        else {
+                            let val = datarow[key];
+                            if (val !== undefined)
+                                sum += val;
+                            if (key === value)
+                                break;
                         }
-                        j++;
                     }
-                    row[name] = this._format(sum, s);
+                    this._data[r.key][name] = sum;
+                    datarow[name] = this._format(sum, s);
                     total += sum;
                 });
                 if (accumulate !== false)
                     data['_total'][name] = this._format(total);
                 this.indices && this.indices.forEach(i => {
-                    const row = data[i.name];
-                    if (!row)
+                    const datarow = data[i.name];
+                    if (!datarow)
                         return;
-                    let sum = 0, j = 0;
-                    while (j < this.columns.length) {
-                        let key = this.columns[j].key;
+                    let sum = 0;
+                    for (let column of this.columns) {
+                        let key = column.key;
                         if (isFunction(calculate)) {
                             let val = calculate(i.name, this._data);
-                            if (val !== undefined)
+                            if (val !== undefined && val !== null)
                                 sum += val;
                         }
                         else {
-                            let val = row[key];
+                            let val = datarow[key];
                             if (val !== undefined)
                                 sum += val;
                             if (key === value)
                                 break;
                         }
-                        j++;
                     }
-                    row[name] = this._format(sum);
+                    this._data[i.name][name] = sum;
+                    datarow[name] = this._format(sum);
                 });
             }
             else {
-                data[name] = {};
-                let total = 0;
-                this.columns.forEach(c => {
-                    if (c.explorable === false)
-                        return;
-                    let sum = 0, j = 0;
-                    while (j < this.rows.length) {
-                        let row = this.rows[j], key = row.key;
-                        if (row.index === undefined) {
-                            if (isFunction(calculate)) {
-                                let val = calculate(c.key, this._data);
-                                if (val !== undefined)
+                let datarow = data[name] = {}, total = 0;
+                this.columns.forEach(column => {
+                    let sum = 0;
+                    for (let row of this.rows) {
+                        let key = row.key;
+                        if (isFunction(calculate)) {
+                            let val = calculate(row.key, this._data);
+                            if (val !== undefined && val !== null)
+                                sum += val;
+                        }
+                        else {
+                            let datarow = data[key];
+                            if (!datarow)
+                                continue;
+                            if (column.sum) {
+                                let val = this._data[row.key][column.key];
+                                if (val != undefined)
                                     sum += val;
                             }
                             else {
-                                let drow = data[key];
-                                if (drow) {
-                                    let val = drow[c.key];
-                                    if (val !== undefined)
-                                        sum += val;
-                                    if (key === value)
-                                        break;
-                                }
+                                let val = datarow[column.key];
+                                if (val !== undefined)
+                                    sum += val;
                             }
+                            if (key === value)
+                                break;
                         }
-                        j++;
                     }
-                    data[name][c.key] = this._format(sum, s);
-                    if (c.index === undefined)
+                    datarow[column.key] = this._format(sum, s);
+                    if (!column.sum)
                         total += sum;
                 });
                 if (accumulate !== false)
@@ -14869,19 +14872,19 @@ class CubeMatrixComponent {
             return formatNumber(val, this.LANGUAGE, this.PRECISION);
     }
     explore(column, row) {
-        if (!this.interactive)
+        if (!this.interactive || column.explorable === false || row.explorable === false)
             return;
         let x, series, index;
         const axes = { ...this.filters };
-        if (column.index === undefined)
+        if (!column.sum)
             x = column.key;
         else {
-            let { value, calculate } = this._sum[column.index];
+            let { value, calculate } = column.sum;
             if (isFunction(calculate))
                 return;
             x = [];
             for (let column of this.columns) {
-                if (column.index !== undefined)
+                if (column.sum)
                     continue;
                 let key = column.key;
                 x.push(key);
@@ -14891,15 +14894,15 @@ class CubeMatrixComponent {
         }
         axes[this.xAxis.name] = x;
         if (row.key) {
-            if (row.index === undefined)
+            if (!row.sum)
                 series = row.key;
             else {
-                let { value, calculate } = this._sum[row.index];
+                let { value, calculate } = row.sum;
                 if (isFunction(calculate))
                     return;
                 series = [];
                 for (let row of this.rows) {
-                    if (row.index !== undefined)
+                    if (row.sum)
                         continue;
                     let key = row.key;
                     series.push(key);
@@ -14963,7 +14966,7 @@ class CubeMatrixComponent {
         }, 'xlsx');
         this._service.nameOf(this.filters, this.cube.name).subscribe(n => book.save(`${n || this._translate.get('Matrix')}.xlsx`));
     }
-    move(x, y) {
+    _move(x, y) {
         let rowIndex = 0;
         for (let b = 0; b < this.tableElement.nativeElement.tBodies.length; b++) {
             let tBody = this.tableElement.nativeElement.tBodies.item(b);
@@ -14994,10 +14997,10 @@ class CubeMatrixComponent {
     }
 }
 CubeMatrixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CubeMatrixComponent, deps: [{ token: PromptService }, { token: CubeService }, { token: SessionService }, { token: TranslateService }, { token: DatasourceService }], target: i0.ɵɵFactoryTarget.Component });
-CubeMatrixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: CubeMatrixComponent, selector: "bizdoc-cube-matrix", inputs: { seriesTotalLabel: "seriesTotalLabel", xAxisTotalLabel: "xAxisTotalLabel", _cube: ["cube", "_cube"], _xAxis: ["xAxis", "_xAxis"], _series: ["series", "_series"], _indices: ["indices", "_indices"], scope: "scope", sum: "sum", filters: "filters", loading: "loading", interactive: "interactive" }, outputs: { onExplore: "explore", loadingChange: "loadingChange" }, viewQueries: [{ propertyName: "tableElement", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<table #table class=\"mat-table cube-table\" (mouseleave)=\"move(-1, -1)\" *ngIf=\"data\">\r\n  <thead>\r\n    <!-- headers -->\r\n    <tr class=\"mat-header-row\">\r\n      <th></th>\r\n      <th *ngFor=\"let column of columns; let x = index\" (mouseenter)=\"move(x + 1, -2)\" class=\"mat-header-cell\">\r\n        {{ column.value }}\r\n      </th>\r\n      <th class=\"mat-header-cell\">{{xAxisTotalLabel}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <!-- indices -->\r\n    <tr class=\"mat-row cube-index\" *ngFor=\"let index of indices; let y = index\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"move(0, y)\">{{index.title}}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" [class.clickable]=\"interactive && column.explorable !== false\" class=\"mat-cell figure\" (mouseenter)=\"move(x + 1, y)\" (click)=\"explore(column, index)\">\r\n        {{ data[index.name][column.key] }}\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"move(0, y)\">\r\n        {{ data[index.name]['_total'] }}\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tbody>\r\n    <!-- rows -->\r\n    <tr *ngFor=\"let row of rows; let y = index\" class=\"mat-row\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"move(-2, y + indices.length)\">{{ row.value }}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-cell figure\" (mouseenter)=\"move(x + 1, y + indices.length)\" [class.clickable]=\"interactive && column.explorable !== false && row.explorable !== false\" (click)=\"explore(column, row)\">\r\n          {{ data[row.key][column.key] }}\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"move(-1, y + indices.length)\">\r\n        <ng-container *ngIf=\"data[row.key]['_total'] !== undefined\">\r\n          {{ data[row.key]['_total'] }}\r\n        </ng-container>\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <!-- footer -->\r\n    <tr class=\"mat-footer-row\">\r\n      <td class=\"mat-footer-cell\">{{seriesTotalLabel}}</td>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-footer-cell figure\" (mouseenter)=\"move(x + 1, -2)\"\r\n          [class.negative-figure]=\"totals[column.key].startsWith('-')\">\r\n        <ng-container *ngIf=\"totals[column.key] !== undefined\">\r\n          {{ totals[column.key] }}\r\n        </ng-container>\r\n      </td>\r\n      <th class=\"mat-footer-cell figure\">{{ totals['_grand'] }}</th>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r\n", styles: [".clickable{cursor:pointer}.cube-table{width:100%;background:transparent!important;table-layout:fixed}.cube-table th{cursor:default}.cube-table th.figure{font-weight:500}.cube-table td,.cube-table th{padding-right:8px}\n"], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [matrixAnimation] });
+CubeMatrixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: CubeMatrixComponent, selector: "bizdoc-cube-matrix", inputs: { seriesTotalLabel: "seriesTotalLabel", xAxisTotalLabel: "xAxisTotalLabel", _cube: ["cube", "_cube"], _xAxis: ["xAxis", "_xAxis"], _series: ["series", "_series"], _indices: ["indices", "_indices"], scope: "scope", sum: "sum", filters: "filters", loading: "loading", interactive: "interactive" }, outputs: { onExplore: "explore", loadingChange: "loadingChange" }, viewQueries: [{ propertyName: "tableElement", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<table #table class=\"mat-table cube-table\" (mouseleave)=\"_move(-1, -1)\" *ngIf=\"data\">\r\n  <thead>\r\n    <!-- headers -->\r\n    <tr class=\"mat-header-row\">\r\n      <th></th>\r\n      <th *ngFor=\"let column of columns; let x = index\"\r\n          (mouseenter)=\"_move(x + 1, -2)\" class=\"mat-header-cell\">\r\n        {{ column.value }}\r\n      </th>\r\n      <th class=\"mat-header-cell\">{{xAxisTotalLabel}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <!-- indices -->\r\n    <tr class=\"mat-row cube-index\" *ngFor=\"let index of indices; let y = index\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"_move(0, y)\">{{index.title}}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\"\r\n          [class.clickable]=\"interactive && column.explorable !== false\" class=\"mat-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, y)\"\r\n          (click)=\"explore(column, index)\">\r\n        {{ data[index.name][column.key] }}\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"_move(0, y)\">\r\n        {{ data[index.name]['_total'] }}\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tbody>\r\n    <!-- rows -->\r\n    <tr *ngFor=\"let row of rows; let y = index\" class=\"mat-row\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"_move(-2, y + indices.length)\">{{ row.value }}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-cell figure\"\r\n          [class.clickable]=\"interactive && column.explorable !== false && row.explorable !== false\"\r\n          (mouseenter)=\"_move(x + 1, y + indices.length)\"\r\n          (click)=\"explore(column, row)\">\r\n          {{ data[row.key][column.key] }}\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"_move(-1, y + indices.length)\">\r\n        <ng-container *ngIf=\"data[row.key]['_total'] !== undefined\">\r\n          {{ data[row.key]['_total'] }}\r\n        </ng-container>\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <!-- footer -->\r\n    <tr class=\"mat-footer-row\">\r\n      <td class=\"mat-footer-cell\">{{seriesTotalLabel}}</td>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-footer-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, -2)\"\r\n          [class.negative-figure]=\"totals[column.key].startsWith('-')\">\r\n        <ng-container *ngIf=\"totals[column.key] !== undefined\">\r\n          {{ totals[column.key] }}\r\n        </ng-container>\r\n      </td>\r\n      <th class=\"mat-footer-cell figure\">{{ totals['_grand'] }}</th>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r\n", styles: [".clickable{cursor:pointer}.cube-table{width:100%;table-layout:fixed}.cube-table th{cursor:default}.cube-table th.figure{font-weight:500}.cube-table td,.cube-table th{padding-right:8px}\n"], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [matrixAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CubeMatrixComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-cube-matrix', animations: [matrixAnimation], template: "<table #table class=\"mat-table cube-table\" (mouseleave)=\"move(-1, -1)\" *ngIf=\"data\">\r\n  <thead>\r\n    <!-- headers -->\r\n    <tr class=\"mat-header-row\">\r\n      <th></th>\r\n      <th *ngFor=\"let column of columns; let x = index\" (mouseenter)=\"move(x + 1, -2)\" class=\"mat-header-cell\">\r\n        {{ column.value }}\r\n      </th>\r\n      <th class=\"mat-header-cell\">{{xAxisTotalLabel}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <!-- indices -->\r\n    <tr class=\"mat-row cube-index\" *ngFor=\"let index of indices; let y = index\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"move(0, y)\">{{index.title}}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" [class.clickable]=\"interactive && column.explorable !== false\" class=\"mat-cell figure\" (mouseenter)=\"move(x + 1, y)\" (click)=\"explore(column, index)\">\r\n        {{ data[index.name][column.key] }}\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"move(0, y)\">\r\n        {{ data[index.name]['_total'] }}\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tbody>\r\n    <!-- rows -->\r\n    <tr *ngFor=\"let row of rows; let y = index\" class=\"mat-row\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"move(-2, y + indices.length)\">{{ row.value }}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-cell figure\" (mouseenter)=\"move(x + 1, y + indices.length)\" [class.clickable]=\"interactive && column.explorable !== false && row.explorable !== false\" (click)=\"explore(column, row)\">\r\n          {{ data[row.key][column.key] }}\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"move(-1, y + indices.length)\">\r\n        <ng-container *ngIf=\"data[row.key]['_total'] !== undefined\">\r\n          {{ data[row.key]['_total'] }}\r\n        </ng-container>\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <!-- footer -->\r\n    <tr class=\"mat-footer-row\">\r\n      <td class=\"mat-footer-cell\">{{seriesTotalLabel}}</td>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-footer-cell figure\" (mouseenter)=\"move(x + 1, -2)\"\r\n          [class.negative-figure]=\"totals[column.key].startsWith('-')\">\r\n        <ng-container *ngIf=\"totals[column.key] !== undefined\">\r\n          {{ totals[column.key] }}\r\n        </ng-container>\r\n      </td>\r\n      <th class=\"mat-footer-cell figure\">{{ totals['_grand'] }}</th>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r\n", styles: [".clickable{cursor:pointer}.cube-table{width:100%;background:transparent!important;table-layout:fixed}.cube-table th{cursor:default}.cube-table th.figure{font-weight:500}.cube-table td,.cube-table th{padding-right:8px}\n"] }]
+            args: [{ selector: 'bizdoc-cube-matrix', animations: [matrixAnimation], template: "<table #table class=\"mat-table cube-table\" (mouseleave)=\"_move(-1, -1)\" *ngIf=\"data\">\r\n  <thead>\r\n    <!-- headers -->\r\n    <tr class=\"mat-header-row\">\r\n      <th></th>\r\n      <th *ngFor=\"let column of columns; let x = index\"\r\n          (mouseenter)=\"_move(x + 1, -2)\" class=\"mat-header-cell\">\r\n        {{ column.value }}\r\n      </th>\r\n      <th class=\"mat-header-cell\">{{xAxisTotalLabel}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <!-- indices -->\r\n    <tr class=\"mat-row cube-index\" *ngFor=\"let index of indices; let y = index\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"_move(0, y)\">{{index.title}}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\"\r\n          [class.clickable]=\"interactive && column.explorable !== false\" class=\"mat-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, y)\"\r\n          (click)=\"explore(column, index)\">\r\n        {{ data[index.name][column.key] }}\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"_move(0, y)\">\r\n        {{ data[index.name]['_total'] }}\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tbody>\r\n    <!-- rows -->\r\n    <tr *ngFor=\"let row of rows; let y = index\" class=\"mat-row\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"_move(-2, y + indices.length)\">{{ row.value }}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-cell figure\"\r\n          [class.clickable]=\"interactive && column.explorable !== false && row.explorable !== false\"\r\n          (mouseenter)=\"_move(x + 1, y + indices.length)\"\r\n          (click)=\"explore(column, row)\">\r\n          {{ data[row.key][column.key] }}\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"_move(-1, y + indices.length)\">\r\n        <ng-container *ngIf=\"data[row.key]['_total'] !== undefined\">\r\n          {{ data[row.key]['_total'] }}\r\n        </ng-container>\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <!-- footer -->\r\n    <tr class=\"mat-footer-row\">\r\n      <td class=\"mat-footer-cell\">{{seriesTotalLabel}}</td>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-footer-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, -2)\"\r\n          [class.negative-figure]=\"totals[column.key].startsWith('-')\">\r\n        <ng-container *ngIf=\"totals[column.key] !== undefined\">\r\n          {{ totals[column.key] }}\r\n        </ng-container>\r\n      </td>\r\n      <th class=\"mat-footer-cell figure\">{{ totals['_grand'] }}</th>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r\n", styles: [".clickable{cursor:pointer}.cube-table{width:100%;table-layout:fixed}.cube-table th{cursor:default}.cube-table th.figure{font-weight:500}.cube-table td,.cube-table th{padding-right:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: PromptService }, { type: CubeService }, { type: SessionService }, { type: TranslateService }, { type: DatasourceService }]; }, propDecorators: { tableElement: [{
                 type: ViewChild,
                 args: ['table']
@@ -18560,7 +18563,7 @@ class SlotsComponent {
     }
 }
 SlotsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SlotsComponent, deps: [{ token: PANES_DATA }, { token: PromptService }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: PanesRouter }, { token: WindowTitleService }, { token: GuideService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SlotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SlotsComponent, selector: "bizdoc-panes", host: { listeners: { "document:keydown.escape": "collapse()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["paning"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabing"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div class=\"panes\">\r\n  <div class=\"backdrop\" [style.display]=\"dialog ? '' : 'none'\"></div>\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"mat-icon-rtl-mirror\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #paning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let p of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"p.badge\" [matBadgeHidden]=\"!p.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{p.icon}}</mat-icon>&nbsp;\r\n        {{p.title}}\r\n        <mat-icon *ngIf=\"p.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:col-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"], components: [{ type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: QuickToolsComponent, selector: "bizdoc-quicktools" }, { type: i9$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { type: NgxComponentOutlet, selector: "ngx-component-outlet", inputs: ["type", "injector", "ngxComponentOutletContent"], outputs: ["create"] }, { type: i9$2.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { type: i13.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], pipes: { "translate": TranslatePipe }, animations: [panesAnimation,
+SlotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SlotsComponent, selector: "bizdoc-panes", host: { listeners: { "document:keydown.escape": "collapse()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["paning"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabing"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div class=\"panes\">\r\n  <div class=\"backdrop\" [style.display]=\"dialog ? '' : 'none'\"></div>\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"mat-icon-rtl-mirror\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #paning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let p of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"p.badge\" [matBadgeHidden]=\"!p.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{p.icon}}</mat-icon>&nbsp;\r\n        {{p.title}}\r\n        <mat-icon *ngIf=\"p.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"], components: [{ type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: QuickToolsComponent, selector: "bizdoc-quicktools" }, { type: i9$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { type: NgxComponentOutlet, selector: "ngx-component-outlet", inputs: ["type", "injector", "ngxComponentOutletContent"], outputs: ["create"] }, { type: i9$2.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { type: i13.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], pipes: { "translate": TranslatePipe }, animations: [panesAnimation,
         panesTitleAnimation,
         paneAnimation,
         paramAnimation,
@@ -18577,7 +18580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         queryAnimation,
                         tabsAnimation,
                         tabAnimation
-                    ], template: "<div class=\"panes\">\r\n  <div class=\"backdrop\" [style.display]=\"dialog ? '' : 'none'\"></div>\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"mat-icon-rtl-mirror\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #paning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let p of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"p.badge\" [matBadgeHidden]=\"!p.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{p.icon}}</mat-icon>&nbsp;\r\n        {{p.title}}\r\n        <mat-icon *ngIf=\"p.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:col-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"] }]
+                    ], template: "<div class=\"panes\">\r\n  <div class=\"backdrop\" [style.display]=\"dialog ? '' : 'none'\"></div>\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"mat-icon-rtl-mirror\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #paning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let p of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"p.badge\" [matBadgeHidden]=\"!p.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{p.icon}}</mat-icon>&nbsp;\r\n        {{p.title}}\r\n        <mat-icon *ngIf=\"p.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PANES_DATA]