@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.
@@ -16431,6 +16431,7 @@ var DatoGridV2ToolbarComponent = /** @class */ (function () {
16431
16431
  this.gridActions = { mainList: [], moreMenu: [] };
16432
16432
  this.searchPlaceholder = this.translate.transform('core.search');
16433
16433
  this.rowActionsShortLabelThreshold = 1539;
16434
+ this.displayCustomGridActionsSeparator = true;
16434
16435
  this.openMenus = {
16435
16436
  group: false,
16436
16437
  settings: false
@@ -16838,10 +16839,14 @@ var DatoGridV2ToolbarComponent = /** @class */ (function () {
16838
16839
  Input(),
16839
16840
  __metadata("design:type", Number)
16840
16841
  ], DatoGridV2ToolbarComponent.prototype, "rowActionsShortLabelThreshold", void 0);
16842
+ __decorate([
16843
+ Input(),
16844
+ __metadata("design:type", Object)
16845
+ ], DatoGridV2ToolbarComponent.prototype, "displayCustomGridActionsSeparator", void 0);
16841
16846
  DatoGridV2ToolbarComponent = __decorate([
16842
16847
  Component({
16843
16848
  selector: 'dato-grid-toolbar-v2',
16844
- 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",
16849
+ 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",
16845
16850
  changeDetection: ChangeDetectionStrategy.OnPush,
16846
16851
  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}"]
16847
16852
  }),
@@ -25113,7 +25118,7 @@ function fixNgLeaks() {
25113
25118
  };
25114
25119
  }
25115
25120
 
25116
- window.coreVersion = '22.0.2';
25121
+ window.coreVersion = '22.0.3';
25117
25122
 
25118
25123
  /**
25119
25124
  * @license