@datorama/core 22.0.2 → 22.0.3

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.
@@ -16630,6 +16630,7 @@
16630
16630
  this.gridActions = { mainList: [], moreMenu: [] };
16631
16631
  this.searchPlaceholder = this.translate.transform('core.search');
16632
16632
  this.rowActionsShortLabelThreshold = 1539;
16633
+ this.displayCustomGridActionsSeparator = true;
16633
16634
  this.openMenus = {
16634
16635
  group: false,
16635
16636
  settings: false
@@ -17037,10 +17038,14 @@
17037
17038
  core.Input(),
17038
17039
  __metadata("design:type", Number)
17039
17040
  ], DatoGridV2ToolbarComponent.prototype, "rowActionsShortLabelThreshold", void 0);
17041
+ __decorate([
17042
+ core.Input(),
17043
+ __metadata("design:type", Object)
17044
+ ], DatoGridV2ToolbarComponent.prototype, "displayCustomGridActionsSeparator", void 0);
17040
17045
  DatoGridV2ToolbarComponent = __decorate([
17041
17046
  core.Component({
17042
17047
  selector: 'dato-grid-toolbar-v2',
17043
- 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",
17048
+ 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",
17044
17049
  changeDetection: core.ChangeDetectionStrategy.OnPush,
17045
17050
  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}"]
17046
17051
  }),
@@ -25312,7 +25317,7 @@
25312
25317
  };
25313
25318
  }
25314
25319
 
25315
- window.coreVersion = '22.0.2';
25320
+ window.coreVersion = '22.0.3';
25316
25321
 
25317
25322
  exports.APP_TRANSLATE = APP_TRANSLATE;
25318
25323
  exports.AceService = AceService;