@datorama/core 21.4.0-rc.19 → 21.4.0-rc.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.scss +2 -2
- package/bundles/datorama-core.umd.js +26 -14
- package/bundles/datorama-core.umd.js.map +1 -1
- package/bundles/datorama-core.umd.min.js +2 -2
- package/bundles/datorama-core.umd.min.js.map +1 -1
- package/datorama-core.metadata.json +1 -1
- package/esm2015/lib/grid-v2/grid-filter/grid-filter.component.js +15 -11
- package/esm2015/lib/grid-v2/grid-pagination/grid-pagination.component.js +5 -3
- package/esm2015/lib/grid-v2/grid-store/grid.service.js +2 -2
- package/esm2015/lib/grid-v2/grid-toolbar/grid-toolbar.component.js +7 -2
- package/esm5/lib/grid-v2/grid-filter/grid-filter.component.js +15 -11
- package/esm5/lib/grid-v2/grid-pagination/grid-pagination.component.js +6 -3
- package/esm5/lib/grid-v2/grid-store/grid.service.js +2 -2
- package/esm5/lib/grid-v2/grid-toolbar/grid-toolbar.component.js +7 -2
- package/fesm2015/datorama-core.js +25 -14
- package/fesm2015/datorama-core.js.map +1 -1
- package/fesm5/datorama-core.js +26 -14
- package/fesm5/datorama-core.js.map +1 -1
- package/lib/grid-v2/grid-toolbar/grid-toolbar.component.d.ts +1 -0
- package/package.json +1 -1
package/fesm5/datorama-core.js
CHANGED
|
@@ -12767,22 +12767,26 @@ var DatoGridFilterComponent = /** @class */ (function () {
|
|
|
12767
12767
|
DatoGridFilterComponent.prototype.buildFilter = function () {
|
|
12768
12768
|
var _this = this;
|
|
12769
12769
|
var _a = this.filterForm.value, byValue = _a.byValue, conditional = _a.conditional;
|
|
12770
|
-
var filter = {
|
|
12771
|
-
filter.pivotKeys = this.pivotKeys;
|
|
12772
|
-
if (this.pivotColumn) {
|
|
12773
|
-
filter.pivotFieldsMap = this.getPivotFields(this.pivotColumn.getParent()).reduce(function (fieldMap, field, index) {
|
|
12774
|
-
if (_this.pivotKeys[index]) {
|
|
12775
|
-
fieldMap[field] = _this.pivotKeys[index];
|
|
12776
|
-
}
|
|
12777
|
-
return fieldMap;
|
|
12778
|
-
}, {});
|
|
12779
|
-
}
|
|
12770
|
+
var filter = {};
|
|
12780
12771
|
if (this.filterSections.Conditional) {
|
|
12781
12772
|
this.setConditionalFilter(filter, conditional);
|
|
12782
12773
|
}
|
|
12783
12774
|
if (this.filterSections.By_Value) {
|
|
12784
12775
|
this.setByValueFilter(filter, byValue);
|
|
12785
12776
|
}
|
|
12777
|
+
/** If filters applied, add the extra properties to be used by pivot mode */
|
|
12778
|
+
if (filter.byValue || filter.conditional) {
|
|
12779
|
+
filter.colId = this.colDef.colId;
|
|
12780
|
+
filter.pivotKeys = this.pivotKeys;
|
|
12781
|
+
if (this.pivotColumn) {
|
|
12782
|
+
filter.pivotFieldsMap = this.getPivotFields(this.pivotColumn.getParent()).reduce(function (fieldMap, field, index) {
|
|
12783
|
+
if (_this.pivotKeys[index]) {
|
|
12784
|
+
fieldMap[field] = _this.pivotKeys[index];
|
|
12785
|
+
}
|
|
12786
|
+
return fieldMap;
|
|
12787
|
+
}, {});
|
|
12788
|
+
}
|
|
12789
|
+
}
|
|
12786
12790
|
return filter;
|
|
12787
12791
|
};
|
|
12788
12792
|
DatoGridFilterComponent.prototype.initForm = function () {
|
|
@@ -14742,7 +14746,7 @@ var GridService = /** @class */ (function () {
|
|
|
14742
14746
|
var field = parsedValue.field, value = parsedValue.value;
|
|
14743
14747
|
colGroupDef.headerClass = [field];
|
|
14744
14748
|
colGroupDef.headerName = value;
|
|
14745
|
-
if (colGroupDef.children && colGroupDef.children.length >
|
|
14749
|
+
if (colGroupDef.children && colGroupDef.children.length > 0) {
|
|
14746
14750
|
colGroupDef.headerClass.push('group-pivot-cell');
|
|
14747
14751
|
}
|
|
14748
14752
|
}
|
|
@@ -16217,8 +16221,11 @@ var DatoGridPaginationV2Component = /** @class */ (function () {
|
|
|
16217
16221
|
return page;
|
|
16218
16222
|
};
|
|
16219
16223
|
DatoGridPaginationV2Component.prototype.toggleGroupsState = function () {
|
|
16220
|
-
|
|
16224
|
+
var _this = this;
|
|
16221
16225
|
this.isExpanded = !this.isExpanded;
|
|
16226
|
+
this.gridApi.forEachNode(function (node) {
|
|
16227
|
+
node.setExpanded(_this.isExpanded);
|
|
16228
|
+
});
|
|
16222
16229
|
};
|
|
16223
16230
|
DatoGridPaginationV2Component.prototype.autoFitGrid = function (type) {
|
|
16224
16231
|
this.gridService.fitGrid(type);
|
|
@@ -16311,7 +16318,7 @@ var DatoGridPaginationV2Component = /** @class */ (function () {
|
|
|
16311
16318
|
Component({
|
|
16312
16319
|
selector: 'dato-grid-pagination-v2',
|
|
16313
16320
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
16314
|
-
template: "<div class=\"d-flex-row d-flex-auto d-flex-wrap container\" [class.small]=\"smallVersion\"\n [attr.data-pages-count]=\"totalPages\"\n [attr.data-current-page]=\"pageNumbersDisplay.currentPage\"\n [attr.data-page-size]=\"rowsPerPage\"\n [attr.data-rows-count]=\"rowCount\">\n <div *ngIf=\"totalPages > 1\" #navigation\n class=\"navigation d-flex-row d-flex-0-0-auto align-center\">\n\n <!-- First Page -->\n <dato-icon-button *ngIf=\"!disableButtons\"\n class=\"mr-4\" data-auto-id=\"pagiantion-first-page\"\n icon=\"chevron-left-double\"\n datoType=\"secondary\"\n datoSize=\"md\"\n [disabled]=\"prevPageDisabled\"\n (click)=\"navigateFirstPage()\">\n </dato-icon-button>\n\n <!-- Previous Page -->\n <dato-icon-button icon=\"arrow-left\" datoType=\"secondary\" datoSize=\"md\"\n [disabled]=\"prevPageDisabled\" data-auto-id=\"pagiantion-previous-page\"\n (click)=\"navigatePrevPage()\">\n </dato-icon-button>\n\n\n <div class=\"d-flex mx-5 align-center number-container\">\n <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\" data-auto-id=\"pagiantion-previous-batch\"\n *ngIf=\"pageNumbersDisplay.showFirstEllipsis && !smallVersion\"\n (click)=\"showPreviousBatch()\">...\n </dato-link>\n <dato-link class=\"page-number mx-5\" [datoType]=\"page === pageNumbersDisplay.currentPage ? 'primary' : 'secondary'\" datoSize=\"sm\"\n *ngFor=\"let page of pageNumbersDisplay.pages; index as i; trackBy: trackByPage;\" [attr.data-auto-id]=\"'pagiantion-page-' + i\"\n (click)=\"navigatePage(page - 1)\">\n {{page}}\n </dato-link>\n\n <div class=\"d-flex\" *ngIf=\"pageNumbersDisplay.showLastPage && !smallVersion\">\n <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\" data-auto-id=\"pagiantion-next-batch\"\n (click)=\"showNextBatch()\">...</dato-link>\n <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\"\n [attr.data-auto-id]=\"'pagiantion-page-' + totalPages\"\n (click)=\"navigatePage(totalPages - 1)\">\n {{totalPages}}\n </dato-link>\n </div>\n\n </div>\n\n <!-- Next Page -->\n <dato-icon-button icon=\"arrow-right\" datoType=\"secondary\" datoSize=\"md\"\n (click)=\"navigateNextPage()\" data-auto-id=\"pagiantion-next-page\"\n [disabled]=\"nextPageDisabled\">\n </dato-icon-button>\n\n <!-- Last Page -->\n <dato-icon-button *ngIf=\"!disableButtons\"\n class=\"ml-4\" icon=\"chevron-right-double\"\n datoType=\"secondary\" datoSize=\"md\" data-auto-id=\"pagiantion-last-page\"\n [disabled]=\"nextPageDisabled\"\n (click)=\"navigatePage(totalPages - 1)\">\n </dato-icon-button>\n\n </div>\n\n <div *ngIf=\"totalPages > 1 && !smallVersion\"\n class=\"separator mx-10 my-auto primary-100-background-color\">\n </div>\n\n <div class=\"total d-flex-0-0-auto d-flex-row align-center\">\n <span class=\"dato-note primary-300-color\">{{rowsRange}}</span>\n </div>\n\n <div *ngIf=\"showBottomControls\" class=\"grid-controls d-flex d-flex-1 justify-end\">\n <dato-icon-button [icon]=\"isExpanded ? 'collapse' : 'expand'\" datoType=\"secondary\" datoSize=\"md\"\n (click)=\"toggleGroupsState()\" data-auto-id=\"pagiantion-
|
|
16321
|
+
template: "<div class=\"d-flex-row d-flex-auto d-flex-wrap container\" [class.small]=\"smallVersion\"\n [attr.data-pages-count]=\"totalPages\"\n [attr.data-current-page]=\"pageNumbersDisplay.currentPage\"\n [attr.data-page-size]=\"rowsPerPage\"\n [attr.data-rows-count]=\"rowCount\">\n <div *ngIf=\"totalPages > 1\" #navigation\n class=\"navigation d-flex-row d-flex-0-0-auto align-center\">\n\n <!-- First Page -->\n <dato-icon-button *ngIf=\"!disableButtons\"\n class=\"mr-4\" data-auto-id=\"pagiantion-first-page\"\n icon=\"chevron-left-double\"\n datoType=\"secondary\"\n datoSize=\"md\"\n [disabled]=\"prevPageDisabled\"\n (click)=\"navigateFirstPage()\">\n </dato-icon-button>\n\n <!-- Previous Page -->\n <dato-icon-button icon=\"arrow-left\" datoType=\"secondary\" datoSize=\"md\"\n [disabled]=\"prevPageDisabled\" data-auto-id=\"pagiantion-previous-page\"\n (click)=\"navigatePrevPage()\">\n </dato-icon-button>\n\n\n <div class=\"d-flex mx-5 align-center number-container\">\n <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\" data-auto-id=\"pagiantion-previous-batch\"\n *ngIf=\"pageNumbersDisplay.showFirstEllipsis && !smallVersion\"\n (click)=\"showPreviousBatch()\">...\n </dato-link>\n <dato-link class=\"page-number mx-5\" [datoType]=\"page === pageNumbersDisplay.currentPage ? 'primary' : 'secondary'\" datoSize=\"sm\"\n *ngFor=\"let page of pageNumbersDisplay.pages; index as i; trackBy: trackByPage;\" [attr.data-auto-id]=\"'pagiantion-page-' + i\"\n (click)=\"navigatePage(page - 1)\">\n {{page}}\n </dato-link>\n\n <div class=\"d-flex\" *ngIf=\"pageNumbersDisplay.showLastPage && !smallVersion\">\n <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\" data-auto-id=\"pagiantion-next-batch\"\n (click)=\"showNextBatch()\">...</dato-link>\n <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\"\n [attr.data-auto-id]=\"'pagiantion-page-' + totalPages\"\n (click)=\"navigatePage(totalPages - 1)\">\n {{totalPages}}\n </dato-link>\n </div>\n\n </div>\n\n <!-- Next Page -->\n <dato-icon-button icon=\"arrow-right\" datoType=\"secondary\" datoSize=\"md\"\n (click)=\"navigateNextPage()\" data-auto-id=\"pagiantion-next-page\"\n [disabled]=\"nextPageDisabled\">\n </dato-icon-button>\n\n <!-- Last Page -->\n <dato-icon-button *ngIf=\"!disableButtons\"\n class=\"ml-4\" icon=\"chevron-right-double\"\n datoType=\"secondary\" datoSize=\"md\" data-auto-id=\"pagiantion-last-page\"\n [disabled]=\"nextPageDisabled\"\n (click)=\"navigatePage(totalPages - 1)\">\n </dato-icon-button>\n\n </div>\n\n <div *ngIf=\"totalPages > 1 && !smallVersion\"\n class=\"separator mx-10 my-auto primary-100-background-color\">\n </div>\n\n <div class=\"total d-flex-0-0-auto d-flex-row align-center\">\n <span class=\"dato-note primary-300-color\">{{rowsRange}}</span>\n </div>\n\n <div *ngIf=\"showBottomControls\" class=\"grid-controls d-flex d-flex-1 justify-end\">\n <dato-icon-button [icon]=\"isExpanded ? 'collapse' : 'expand'\" datoType=\"secondary\" datoSize=\"md\"\n (click)=\"toggleGroupsState()\" data-auto-id=\"pagiantion-expand-collapse\"\n [datoTooltipV2]=\"isExpanded ? 'core.collapse-rows' : 'core.expand-rows'\">\n </dato-icon-button>\n\n <dato-icon-button class=\"mx-4\" icon=\"maximize-horizontal\" datoType=\"secondary\" datoSize=\"md\"\n (click)=\"autoFitGrid('content')\" [datoTooltipV2]=\"'core.fit-to-content'\"\n data-auto-id=\"pagiantion-fit-to-content\">\n </dato-icon-button>\n\n <dato-icon-button icon=\"minimize-horizontal\" datoType=\"secondary\" datoSize=\"md\"\n (click)=\"autoFitGrid('container')\" [datoTooltipV2]=\"'core.fit-to-container'\"\n data-auto-id=\"pagiantion-fit-to-container\">\n </dato-icon-button>\n </div>\n</div>\n",
|
|
16315
16322
|
providers: [DecimalPipe],
|
|
16316
16323
|
styles: [":host{padding:12px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:25px}:host .container{height:25px}:host .navigation .page-number{transition:color .3s ease-in-out}:host .navigation .page-number:first-of-type{margin-left:7px}:host .navigation .page-number:last-of-type{margin-right:7px}:host .separator{width:1px;height:25px}:host .container.small .navigation,:host .container.small .total{margin-top:8px;margin-left:auto;margin-right:auto}"]
|
|
16317
16324
|
}),
|
|
@@ -16425,6 +16432,7 @@ var DatoGridV2ToolbarComponent = /** @class */ (function () {
|
|
|
16425
16432
|
this.gridActions = { mainList: [], moreMenu: [] };
|
|
16426
16433
|
this.searchPlaceholder = this.translate.transform('core.search');
|
|
16427
16434
|
this.rowActionsShortLabelThreshold = 1539;
|
|
16435
|
+
this.displayCustomGridActionsSeparator = true;
|
|
16428
16436
|
this.openMenus = {
|
|
16429
16437
|
group: false,
|
|
16430
16438
|
settings: false
|
|
@@ -16844,10 +16852,14 @@ var DatoGridV2ToolbarComponent = /** @class */ (function () {
|
|
|
16844
16852
|
Input(),
|
|
16845
16853
|
__metadata("design:type", Number)
|
|
16846
16854
|
], DatoGridV2ToolbarComponent.prototype, "rowActionsShortLabelThreshold", void 0);
|
|
16855
|
+
__decorate([
|
|
16856
|
+
Input(),
|
|
16857
|
+
__metadata("design:type", Object)
|
|
16858
|
+
], DatoGridV2ToolbarComponent.prototype, "displayCustomGridActionsSeparator", void 0);
|
|
16847
16859
|
DatoGridV2ToolbarComponent = __decorate([
|
|
16848
16860
|
Component({
|
|
16849
16861
|
selector: 'dato-grid-toolbar-v2',
|
|
16850
|
-
template: "<section *ngIf=\"gridController.gridQuery.gridReady$ | async\" class=\"d-flex mb-20 justify-between items-center main-container\" [class.mx-30]=\"enableBackground\">\n\n <section [ngClass]=\"{ 'd-flex items-center right-section': enableV2_1 }\">\n <!-- Dynamic content for the left area -->\n <div data-auto-id=\"grid-toolbar-dynamic-left\">\n <ng-content select=\"[toolbarLeftArea]\"></ng-content>\n </div>\n\n <div class=\"d-flex items-center\">\n <dato-grid-search-bar *ngIf=\"enableSearch\" [searchPlaceholder]=\"searchPlaceholder\"></dato-grid-search-bar>\n <ng-container *ngIf=\"enableV2_1 && selectedRowsCount > 0\">\n <div class=\"d-flex items-center\">\n <div class=\"chip align-center d-flex dato-note px-9 nowrap ml-16\">\n <span data-auto-id=\"grid-selected-items-text\">{{ (allPageRowsSelected ? 'core.all-items-in-page-selected' : 'core.selected-items') | translate:{ itemsCount: selectedRowsCount } }}</span>\n <dato-icon datoType=\"primary\" datoIcon=\"close\" datoSize=\"md\" class=\"ml-6 pointer\" (click)=\"clearSelectedRows()\"\n data-auto-id=\"grid-clear-selected-rows\"></dato-icon>\n </div>\n <dato-link *ngIf=\"allPageRowsSelected\" (click)=\"selectAllPages()\" datoSize=\"sm\" class=\"ml-10\"\n data-auto-id=\"grid-select-all-pages\">\n <span>{{'core.select-all-items' | translate:{ itemsCount: totalRowsCount } }}</span>\n </dato-link>\n </div>\n <div *ngIf=\"hasRowActions\" class=\"separator\"></div>\n </ng-container>\n </div>\n\n <!-- Row Actions-->\n <div class=\"d-flex items-center\" *ngIf=\"isRowActionsVisible\">\n\n <ng-container *ngFor=\"let rowAction of rowActions.mainList; index as i; last as isLast\">\n\n <div *ngIf=\"!isRowActionHidden(rowAction)\"\n [attr.data-auto-id]=\"'grid-toolbar-action-' + rowAction.key\"\n [attr.data-action-index]=\"'grid-toolbar-action-' + i\"\n [class.disabled-action]=\"isActionDisabled(rowAction)\">\n <ng-container [ngTemplateOutlet]=\"rowAction.template || defaultButton\"\n [ngTemplateOutletContext]=\"{disabled: isActionDisabled(rowAction)}\"></ng-container>\n </div>\n\n <ng-template #defaultButton>\n <div (click)=\"onActionClick(rowAction)\">\n <dato-grid-toolbar-button [icon]=\"rowAction.icon\"\n [disabled]=\"isActionDisabled(rowAction)\"\n [label]=\"rowAction.label\"\n [shortLabel]=\"rowAction.shortLabel\"\n [tooltip]=\"rowAction.tooltip\"\n [getMenu]=\"rowAction.getMenu\"\n [enableV2_1]=\"enableV2_1\"\n [isLast]=\"isLast\"\n [widthToHideLabel]=\"widthToHideActionsLabels\">\n </dato-grid-toolbar-button>\n </div>\n </ng-template>\n </ng-container>\n\n <div *ngIf=\"rowActions.moreMenu.length > 0\" class=\"separator\"></div>\n <dato-grid-toolbar-more-menu [actions]=\"rowActions.moreMenu\" (actionClick)=\"onActionClick($event)\" [isRowActions]=\"true\">\n </dato-grid-toolbar-more-menu>\n </div>\n\n </section>\n\n\n <!-- General Actions -->\n <div class=\"d-flex items-center\">\n <!-- Dynamic content for the right area -->\n <div #customActions data-auto-id=\"grid-toolbar-dynamic-right\">\n <ng-content select=\"[toolbarRightArea]\"></ng-content>\n </div>\n <div *ngIf=\"customActions.childNodes.length\" class=\"separator\"></div>\n <!-- Group buttons -->\n <div *ngIf=\"groupsAllowed\" class=\"d-flex grouping-section opacity-0 invisible\" [class.open]=\"openMenus.group || hasGroups\">\n <dato-icon-button [class.active]=\"openMenus.group\" (click)=\"executeTableAction('Group from Toolbar')\"\n data-auto-id=\"grid-toolbar-open-groups\"\n removeIconPadding datoSize=\"md\" datoType=\"none\" icon=\"group\" iconWidth=\"17px\"\n datoTooltip=\"core.row-grouping\" #groupTrigger\n class=\"mr-10 pointer\"></dato-icon-button>\n <dato-icon-button data-auto-id=\"grid-toolbar-toggle-expand\" datoSize=\"md\" datoType=\"none\"\n (click)=\"executeTableAction('Collapse Expand')\"\n [icon]=\"rowGroupsCollapsed ? 'expand' : 'collapse'\"\n [disabled]=\"!hasGroups\"\n [datoTooltip]=\"'core.' + (rowGroupsCollapsed ? 'expand' : 'collapse') + '-rows'\"\n class=\"pointer\"></dato-icon-button>\n <div class=\"separator\"></div>\n </div>\n\n <!-- Settings and export -->\n <ng-container *ngIf=\"createAction\">\n <dato-button datoSize=\"sm\" class=\"pointer primary-300-color\" (click)=\"onActionClick(createAction)\"\n [datoTooltip]=\"createAction.tooltip\" [attr.data-auto-id]=\"'grid-toolbar-action-' + createAction.key\">\n <dato-icon *ngIf=\"createAction.icon\" [icon]=\"createAction.icon\" class=\"mr-5\"></dato-icon>\n {{ createAction.label | translate }}\n </dato-button>\n <div class=\"separator\"></div>\n </ng-container>\n <ng-container *ngFor=\"let gridAction of gridActions.mainList; index as i\">\n <div *ngIf=\"gridAction.getMenu else button\" [datoMenuTriggerFor]=\"gridAction.getMenu()\">\n <ng-container [ngTemplateOutlet]=\"button\"></ng-container>\n </div>\n <ng-template #button>\n <dato-icon datoSize=\"sm\" (click)=\"onActionClick(gridAction)\"\n [attr.data-auto-id]=\"'grid-toolbar-action-' + gridAction.key\"\n [attr.data-action-index]=\"'grid-toolbar-general-action-' + i\"\n [icon]=\"gridAction.icon\" class=\"pointer primary-300-color\"\n [class.mr-16]=\"!gridAction.separator\"\n [datoTooltip]=\"gridAction.tooltip || gridAction.label\">\n </dato-icon>\n </ng-template>\n <div *ngIf=\"gridAction.separator\" class=\"separator\"></div>\n </ng-container>\n\n <dato-icon data-auto-id=\"grid-toolbar-export\" datoSize=\"sm\"\n (click)=\"executeTableAction('Export')\" *ngIf=\"displayExport && !isTreeMode\"\n icon=\"export\" class=\"pointer mr-16 primary-300-color\" datoTooltip=\"core.export-table\"></dato-icon>\n <dato-icon [class.active]=\"openMenus.settings\" (click)=\"openMenus.settings = true\"\n data-auto-id=\"grid-toolbar-settings\" datoSize=\"sm\"\n icon=\"account\" class=\"pointer primary-300-color\" datoTooltip=\"core.table-settings\"\n #settingsTrigger\n [datoMenuTriggerFor]=\"settingsMenu\"></dato-icon>\n\n <ng-container *ngIf=\"gridActions.moreMenu.length > 0\">\n <div class=\"separator\"></div>\n <dato-grid-toolbar-more-menu [actions]=\"gridActions.moreMenu\" (actionClick)=\"onActionClick($event)\" [isRowActions]=\"false\">\n </dato-grid-toolbar-more-menu>\n </ng-container>\n\n\n <dato-menu #settingsMenu=\"datoMenu\" menuClass=\"grid-settings-menu\" placement=\"bottom-end\"\n (menuClosed)=\"openMenus.settings = false\">\n <ng-template datoMenuContent>\n <button data-auto-id=\"grid-toolbar-settings-autofit-page\" datoMenuItem\n (click)=\"executeTableAction('Autofit to Page')\">\n <dato-icon datoSize=\"sm\" icon=\"maximize-horizontal\" class=\"mr-8 primary-300-color\"></dato-icon>\n {{ 'core.autofitPage' | translate }}</button>\n <button data-auto-id=\"grid-toolbar-settings-autofit-content\" datoMenuItem\n (click)=\"executeTableAction('Autofit to Content')\">\n <dato-icon datoSize=\"sm\" icon=\"minimize-horizontal\" class=\"mr-8 primary-300-color\"></dato-icon>\n {{ 'core.autofitContent' | translate }}</button>\n <ng-container *ngIf=\"groupsAllowed\">\n <button data-auto-id=\"grid-toolbar-settings-group\" datoMenuItem (click)=\"executeTableAction('Group from Settings')\">\n <dato-icon datoSize=\"sm\" icon=\"group\" class=\"mr-4 primary-300-color\"></dato-icon>\n {{ 'core.group' | translate }}\n </button>\n </ng-container>\n <button data-auto-id=\"grid-toolbar-settings-toggle-columns\" datoMenuItem (click)=\"executeTableAction('Show Hide Column')\">\n <dato-icon datoSize=\"sm\" icon=\"hide\" class=\"mr-8 primary-300-color\"></dato-icon>\n <span>{{ 'core.hideShowColumns' | translate }}<span\n class=\"dato-simple-italic ml-5 primary-200-color\">{{hiddenColumns}}</span></span>\n </button>\n <button data-auto-id=\"grid-toolbar-settings-reset-settings\" datoMenuItem\n (click)=\"executeTableAction('Reset Settings')\">\n <dato-icon datoSize=\"sm\" icon=\"reset-table\" class=\"mr-8 primary-300-color\"></dato-icon>\n {{ 'core.resetTableSettings' | translate }}\n </button>\n <button data-auto-id=\"grid-toolbar-settings-reset-filters\" datoMenuItem\n (click)=\"executeTableAction('Reset Filters')\">\n <dato-icon datoSize=\"sm\" icon=\"reset-filters\" class=\"mr-8 primary-300-color\"></dato-icon>\n {{ 'core.resetAllFilters' | translate }}\n </button>\n <button data-auto-id=\"grid-toolbar-export\" datoMenuItem\n (click)=\"executeTableAction('Export')\" *ngIf=\"this.displayExport && isTreeMode\">\n <dato-icon datoSize=\"sm\"\n icon=\"export\" class=\"pointer mr-5 primary-300-color\" datoTooltip=\"core.export-table\"></dato-icon>\n {{ 'core.export-table' | translate }}\n </button>\n </ng-template>\n </dato-menu>\n </div>\n</section>\n\n\n",
|
|
16862
|
+
template: "<section *ngIf=\"gridController.gridQuery.gridReady$ | async\" class=\"d-flex mb-20 justify-between items-center main-container\" [class.mx-30]=\"enableBackground\">\n\n <section [ngClass]=\"{ 'd-flex items-center right-section': enableV2_1 }\">\n <!-- Dynamic content for the left area -->\n <div data-auto-id=\"grid-toolbar-dynamic-left\">\n <ng-content select=\"[toolbarLeftArea]\"></ng-content>\n </div>\n\n <div class=\"d-flex items-center\">\n <dato-grid-search-bar *ngIf=\"enableSearch\" [searchPlaceholder]=\"searchPlaceholder\"></dato-grid-search-bar>\n <ng-container *ngIf=\"enableV2_1 && selectedRowsCount > 0\">\n <div class=\"d-flex items-center\">\n <div class=\"chip align-center d-flex dato-note px-9 nowrap ml-16\">\n <span data-auto-id=\"grid-selected-items-text\">{{ (allPageRowsSelected ? 'core.all-items-in-page-selected' : 'core.selected-items') | translate:{ itemsCount: selectedRowsCount } }}</span>\n <dato-icon datoType=\"primary\" datoIcon=\"close\" datoSize=\"md\" class=\"ml-6 pointer\" (click)=\"clearSelectedRows()\"\n data-auto-id=\"grid-clear-selected-rows\"></dato-icon>\n </div>\n <dato-link *ngIf=\"allPageRowsSelected\" (click)=\"selectAllPages()\" datoSize=\"sm\" class=\"ml-10\"\n data-auto-id=\"grid-select-all-pages\">\n <span>{{'core.select-all-items' | translate:{ itemsCount: totalRowsCount } }}</span>\n </dato-link>\n </div>\n <div *ngIf=\"hasRowActions\" class=\"separator\"></div>\n </ng-container>\n </div>\n\n <!-- Row Actions-->\n <div class=\"d-flex items-center\" *ngIf=\"isRowActionsVisible\">\n\n <ng-container *ngFor=\"let rowAction of rowActions.mainList; index as i; last as isLast\">\n\n <div *ngIf=\"!isRowActionHidden(rowAction)\"\n [attr.data-auto-id]=\"'grid-toolbar-action-' + rowAction.key\"\n [attr.data-action-index]=\"'grid-toolbar-action-' + i\"\n [class.disabled-action]=\"isActionDisabled(rowAction)\">\n <ng-container [ngTemplateOutlet]=\"rowAction.template || defaultButton\"\n [ngTemplateOutletContext]=\"{disabled: isActionDisabled(rowAction)}\"></ng-container>\n </div>\n\n <ng-template #defaultButton>\n <div (click)=\"onActionClick(rowAction)\">\n <dato-grid-toolbar-button [icon]=\"rowAction.icon\"\n [disabled]=\"isActionDisabled(rowAction)\"\n [label]=\"rowAction.label\"\n [shortLabel]=\"rowAction.shortLabel\"\n [tooltip]=\"rowAction.tooltip\"\n [getMenu]=\"rowAction.getMenu\"\n [enableV2_1]=\"enableV2_1\"\n [isLast]=\"isLast\"\n [widthToHideLabel]=\"widthToHideActionsLabels\">\n </dato-grid-toolbar-button>\n </div>\n </ng-template>\n </ng-container>\n\n <div *ngIf=\"rowActions.moreMenu.length > 0\" class=\"separator\"></div>\n <dato-grid-toolbar-more-menu [actions]=\"rowActions.moreMenu\" (actionClick)=\"onActionClick($event)\" [isRowActions]=\"true\">\n </dato-grid-toolbar-more-menu>\n </div>\n\n </section>\n\n\n <!-- General Actions -->\n <div class=\"d-flex items-center\">\n <!-- Create action -->\n <ng-container *ngIf=\"createAction\">\n <dato-button datoSize=\"sm\" class=\"pointer primary-300-color\" (click)=\"onActionClick(createAction)\"\n [datoTooltip]=\"createAction.tooltip\" [attr.data-auto-id]=\"'grid-toolbar-action-' + createAction.key\">\n <dato-icon *ngIf=\"createAction.icon\" [icon]=\"createAction.icon\" class=\"mr-5\"></dato-icon>\n {{ createAction.label | translate }}\n </dato-button>\n <div class=\"separator\"></div>\n </ng-container>\n\n <!-- Dynamic content for the right area -->\n <div #customActions data-auto-id=\"grid-toolbar-dynamic-right\">\n <ng-content select=\"[toolbarRightArea]\"></ng-content>\n </div>\n <div *ngIf=\"customActions.childNodes.length && displayCustomGridActionsSeparator\" class=\"separator\"></div>\n\n <!-- Group buttons -->\n <div *ngIf=\"groupsAllowed\" class=\"d-flex grouping-section opacity-0 invisible\" [class.open]=\"openMenus.group || hasGroups\">\n <dato-icon-button [class.active]=\"openMenus.group\" (click)=\"executeTableAction('Group from Toolbar')\"\n data-auto-id=\"grid-toolbar-open-groups\"\n removeIconPadding datoSize=\"md\" datoType=\"none\" icon=\"group\" iconWidth=\"17px\"\n datoTooltip=\"core.row-grouping\" #groupTrigger\n class=\"mr-10 pointer\"></dato-icon-button>\n <dato-icon-button data-auto-id=\"grid-toolbar-toggle-expand\" datoSize=\"md\" datoType=\"none\"\n (click)=\"executeTableAction('Collapse Expand')\"\n [icon]=\"rowGroupsCollapsed ? 'expand' : 'collapse'\"\n [disabled]=\"!hasGroups\"\n [datoTooltip]=\"'core.' + (rowGroupsCollapsed ? 'expand' : 'collapse') + '-rows'\"\n class=\"pointer\"></dato-icon-button>\n <div class=\"separator\"></div>\n </div>\n\n <!-- Grid Actions -->\n <ng-container *ngFor=\"let gridAction of gridActions.mainList; index as i\">\n <div *ngIf=\"gridAction.getMenu else button\" [datoMenuTriggerFor]=\"gridAction.getMenu()\">\n <ng-container [ngTemplateOutlet]=\"button\"></ng-container>\n </div>\n <ng-template #button>\n <dato-icon datoSize=\"sm\" (click)=\"onActionClick(gridAction)\"\n [attr.data-auto-id]=\"'grid-toolbar-action-' + gridAction.key\"\n [attr.data-action-index]=\"'grid-toolbar-general-action-' + i\"\n [icon]=\"gridAction.icon\" class=\"pointer primary-300-color\"\n [class.mr-16]=\"!gridAction.separator\"\n [datoTooltip]=\"gridAction.tooltip || gridAction.label\">\n </dato-icon>\n </ng-template>\n <div *ngIf=\"gridAction.separator\" class=\"separator\"></div>\n </ng-container>\n\n <!-- Export -->\n <dato-icon data-auto-id=\"grid-toolbar-export\" datoSize=\"sm\"\n (click)=\"executeTableAction('Export')\" *ngIf=\"displayExport && !isTreeMode\"\n icon=\"export\" class=\"pointer mr-16 primary-300-color\" datoTooltip=\"core.export-table\"></dato-icon>\n\n <!-- Settings -->\n <dato-icon [class.active]=\"openMenus.settings\" (click)=\"openMenus.settings = true\"\n data-auto-id=\"grid-toolbar-settings\" datoSize=\"sm\"\n icon=\"account\" class=\"pointer primary-300-color\" datoTooltip=\"core.table-settings\"\n #settingsTrigger\n [datoMenuTriggerFor]=\"settingsMenu\"></dato-icon>\n\n <!-- More actions menu -->\n <ng-container *ngIf=\"gridActions.moreMenu.length > 0\">\n <div class=\"separator\"></div>\n <dato-grid-toolbar-more-menu [actions]=\"gridActions.moreMenu\" (actionClick)=\"onActionClick($event)\" [isRowActions]=\"false\">\n </dato-grid-toolbar-more-menu>\n </ng-container>\n\n <dato-menu #settingsMenu=\"datoMenu\" menuClass=\"grid-settings-menu\" placement=\"bottom-end\"\n (menuClosed)=\"openMenus.settings = false\">\n <ng-template datoMenuContent>\n <button data-auto-id=\"grid-toolbar-settings-autofit-page\" datoMenuItem\n (click)=\"executeTableAction('Autofit to Page')\">\n <dato-icon datoSize=\"sm\" icon=\"maximize-horizontal\" class=\"mr-8 primary-300-color\"></dato-icon>\n {{ 'core.autofitPage' | translate }}</button>\n <button data-auto-id=\"grid-toolbar-settings-autofit-content\" datoMenuItem\n (click)=\"executeTableAction('Autofit to Content')\">\n <dato-icon datoSize=\"sm\" icon=\"minimize-horizontal\" class=\"mr-8 primary-300-color\"></dato-icon>\n {{ 'core.autofitContent' | translate }}</button>\n <ng-container *ngIf=\"groupsAllowed\">\n <button data-auto-id=\"grid-toolbar-settings-group\" datoMenuItem (click)=\"executeTableAction('Group from Settings')\">\n <dato-icon datoSize=\"sm\" icon=\"group\" class=\"mr-4 primary-300-color\"></dato-icon>\n {{ 'core.group' | translate }}\n </button>\n </ng-container>\n <button data-auto-id=\"grid-toolbar-settings-toggle-columns\" datoMenuItem (click)=\"executeTableAction('Show Hide Column')\">\n <dato-icon datoSize=\"sm\" icon=\"hide\" class=\"mr-8 primary-300-color\"></dato-icon>\n <span>{{ 'core.hideShowColumns' | translate }}<span\n class=\"dato-simple-italic ml-5 primary-200-color\">{{hiddenColumns}}</span></span>\n </button>\n <button data-auto-id=\"grid-toolbar-settings-reset-settings\" datoMenuItem\n (click)=\"executeTableAction('Reset Settings')\">\n <dato-icon datoSize=\"sm\" icon=\"reset-table\" class=\"mr-8 primary-300-color\"></dato-icon>\n {{ 'core.resetTableSettings' | translate }}\n </button>\n <button data-auto-id=\"grid-toolbar-settings-reset-filters\" datoMenuItem\n (click)=\"executeTableAction('Reset Filters')\">\n <dato-icon datoSize=\"sm\" icon=\"reset-filters\" class=\"mr-8 primary-300-color\"></dato-icon>\n {{ 'core.resetAllFilters' | translate }}\n </button>\n <button data-auto-id=\"grid-toolbar-export\" datoMenuItem\n (click)=\"executeTableAction('Export')\" *ngIf=\"this.displayExport && isTreeMode\">\n <dato-icon datoSize=\"sm\"\n icon=\"export\" class=\"pointer mr-5 primary-300-color\" datoTooltip=\"core.export-table\"></dato-icon>\n {{ 'core.export-table' | translate }}\n </button>\n </ng-template>\n </dato-menu>\n </div>\n</section>\n\n\n",
|
|
16851
16863
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
16852
16864
|
styles: [".grouping-section{transition:visibility .2s ease-in-out,width .2s ease-in-out,opacity .2s ease-in-out;width:0}.grouping-section.open{width:75px;visibility:visible;opacity:1}:host .main-container{min-height:24px}:host .right-section{margin-right:50px}:host .separator{width:1px;height:24px;margin:0 16px}.disabled-action{pointer-events:none}"]
|
|
16853
16865
|
}),
|