mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[ACS-8113] UX bug - Checkbox selections checked state should be Hyland blue not green- edit summary (#9861) (#9911)
Co-authored-by: jacekpluta <73617938+jacekpluta@users.noreply.github.com>
This commit is contained in:
Pablo Martinez
GitHub
parent
e9e5592e95
commit
c43c0aa9a0
@ -24,7 +24,7 @@ Indicates the current position within a navigation hierarchy.
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
|-----------------------|-----------------------------------------------------------------------------------------|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| folderNode | `Node` | null | Active node, builds UI based on folderNode.path.elements collection. |
|
||||
| maxItems | `number` | | Maximum number of nodes to display before wrapping them with a dropdown element. |
|
||||
| readOnly | `boolean` | false | If true, prevents the user from navigating away from the active node. |
|
||||
@ -32,6 +32,7 @@ Indicates the current position within a navigation hierarchy.
|
||||
| rootId | `string` | null | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. |
|
||||
| target | [`DocumentListComponent`](../../content-services/components/document-list.component.md) | | (optional) [Document List component](../../content-services/components/document-list.component.md) to operate with. The list will update when the breadcrumb is clicked. |
|
||||
| transform | `Function` | | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |
|
||||
| selectedRowItemsCount | `number` | 0 | Number of table rows that are currently selected. |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -66,6 +66,7 @@ Displays the documents from a repository.
|
||||
| contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". |
|
||||
| contextMenuActions | `boolean` | false | Toggles context menus for each row |
|
||||
| currentFolderId | `string` | null | The ID of the folder node to display or a reserved string alias for special sources |
|
||||
| displayCheckboxesOnHover | `boolean` | false | Enables checkboxes in datatable rows being displayed on hover only. |
|
||||
| emptyFolderImageUrl | `string` | | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' |
|
||||
| filterValue | `any` | | Initial value for filter. |
|
||||
| headerFilters | `boolean` | false | Toggles the header filters mode. |
|
||||
@ -99,7 +100,7 @@ Displays the documents from a repository.
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the API fails to get the Document List data |
|
||||
| filterSelection | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FilterSearch`](../../../lib/content-services/src/lib/search/models/filter-search.interface.ts)`[]>` | Emitted when a filter value is selected |
|
||||
| folderChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntryEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the current display folder changes |
|
||||
@ -111,6 +112,7 @@ Displays the documents from a repository.
|
||||
| columnsVisibilityChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<{ [columnId: string]: boolean } \| undefined>` | Emitted when columns visibility change |
|
||||
| columnsWidthChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<{ [columnId: string]: number } \| undefined>` | Emitted when columns width change |
|
||||
| columnsOrderChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`< string[] \| undefined>` | Emitted when columns order change |
|
||||
| selectedItemsCountChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`< number \| undefined>` | Emitted when items row count change |
|
||||
|
||||
## Details
|
||||
|
||||
|
||||
@ -429,6 +429,7 @@ Learn more about styling your datatable: [Customizing the component's styles](#c
|
||||
| columns | `any[]` | \[] | The columns that the datatable will show. |
|
||||
| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
|
||||
| data | [`DataTableAdapter`](../../../lib/core/src/lib/datatable/data/datatable-adapter.ts) | | Data source for the table |
|
||||
| displayCheckboxesOnHover | `boolean` | false | Enables checkboxes in datatable rows being displayed on hover only. |
|
||||
| fallbackThumbnail | `string` | | Fallback image for rows where the thumbnail is missing. |
|
||||
| isResizingEnabled | `boolean` | false | Flag that indicates if the datatable allows column resizing. |
|
||||
| loading | `boolean` | false | Flag that indicates if the datatable is in loading state and needs to show the loading template (see the docs to learn how to configure a loading template). |
|
||||
@ -449,9 +450,10 @@ Learn more about styling your datatable: [Customizing the component's styles](#c
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|
|
||||
|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|
|
||||
| columnOrderChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column order is changed. |
|
||||
| columnsWidthChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column width is changed. |
|
||||
| selectedItemsCountChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<number>` | Emitted when the item row count is changed. |
|
||||
| executeRowAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowActionEvent`](../../../lib/core/src/lib/datatable/components/data-row-action.event.ts)`>` | Emitted when the user executes a row action. |
|
||||
| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user clicks a row. |
|
||||
| rowDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user double-clicks a row. |
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
</a>
|
||||
|
||||
<div *ngSwitchDefault class="adf-breadcrumb-item-current" aria-current="location">
|
||||
{{ item.name | translate }}
|
||||
{{ (selectedRowItemsCount < 1 ? item.name : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
|
||||
</div>
|
||||
|
||||
<mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last">
|
||||
|
||||
@ -33,6 +33,9 @@ describe('Breadcrumb', () => {
|
||||
});
|
||||
let documentListComponent: DocumentListComponent;
|
||||
|
||||
const getBreadcrumbActionText = (): string =>
|
||||
fixture.debugElement.nativeElement.querySelector('.adf-breadcrumb-item-current').textContent.trim();
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [ContentTestingModule],
|
||||
@ -300,4 +303,26 @@ describe('Breadcrumb', () => {
|
||||
expect(component.route[3].id).toBe('test-id');
|
||||
expect(component.route[3].name).toBe('test-name');
|
||||
});
|
||||
|
||||
it('should set title based on selectedRowItemsCount', () => {
|
||||
component.transform = (transformNode) => {
|
||||
transformNode.id = 'test-id';
|
||||
transformNode.name = 'test-name';
|
||||
return transformNode;
|
||||
};
|
||||
|
||||
component.folderNode = {
|
||||
path: { elements: [{ id: 'element-1-id', name: 'element-1-name' }] }
|
||||
} as Node;
|
||||
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getBreadcrumbActionText()).toEqual('test-name');
|
||||
|
||||
component.selectedRowItemsCount = 2;
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getBreadcrumbActionText()).toEqual('BREADCRUMB.HEADER.SELECTED');
|
||||
});
|
||||
});
|
||||
|
||||
@ -77,6 +77,10 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy {
|
||||
@Input()
|
||||
maxItems: number;
|
||||
|
||||
/** Number of table rows that are currently selected. */
|
||||
@Input()
|
||||
selectedRowItemsCount = 0;
|
||||
|
||||
previousNodes: PathElement[];
|
||||
lastNodes: PathElement[];
|
||||
|
||||
|
||||
@ -17,11 +17,13 @@
|
||||
[allowFiltering]="allowFiltering"
|
||||
[isResizingEnabled]="isResizingEnabled"
|
||||
[blurOnResize]="blurOnResize"
|
||||
[displayCheckboxesOnHover]="displayCheckboxesOnHover"
|
||||
(showRowContextMenu)="onShowRowContextMenu($event)"
|
||||
(showRowActionsMenu)="onShowRowActionsMenu($event)"
|
||||
(executeRowAction)="onExecuteRowAction($event)"
|
||||
(columnsWidthChanged)="onColumnsWidthChange($event)"
|
||||
(columnOrderChanged)="onColumnOrderChange($event)"
|
||||
(selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
|
||||
(rowClick)="onNodeClick($event.value?.node)"
|
||||
(rowDblClick)="onNodeDblClick($event.value?.node)"
|
||||
(row-select)="onNodeSelect($any($event).detail)"
|
||||
|
||||
@ -1467,6 +1467,12 @@ describe('DocumentList', () => {
|
||||
expect(documentList.reload).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should emit custom date range on date picker closed', () => {
|
||||
const selectedItemsCountChangedSpy = spyOn(documentList.selectedItemsCountChanged, 'emit');
|
||||
documentList.onSelectedItemsCountChanged(1);
|
||||
expect(selectedItemsCountChangedSpy).toHaveBeenCalledWith(1);
|
||||
});
|
||||
|
||||
it('should add includeFields in the server request when present', () => {
|
||||
documentList.includeFields = ['test-include'];
|
||||
documentList.currentFolderId = 'fake-id';
|
||||
|
||||
@ -340,6 +340,10 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
|
||||
@Input()
|
||||
blurOnResize = true;
|
||||
|
||||
/** Display checkboxes in datatable rows on hover only */
|
||||
@Input()
|
||||
displayCheckboxesOnHover = false;
|
||||
|
||||
/** Emitted when the user clicks a list node */
|
||||
@Output()
|
||||
nodeClick = new EventEmitter<NodeEntityEvent>();
|
||||
@ -388,6 +392,10 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
|
||||
@Output()
|
||||
columnsOrderChanged = new EventEmitter<string[] | undefined>();
|
||||
|
||||
/** Emitted when the selected row items count in the table changed. */
|
||||
@Output()
|
||||
selectedItemsCountChanged = new EventEmitter<number | undefined>();
|
||||
|
||||
@ViewChild('dataTable', { static: true })
|
||||
dataTable: DataTableComponent;
|
||||
|
||||
@ -832,6 +840,10 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
|
||||
this.columnsWidthChanged.emit(this.columnsWidths);
|
||||
}
|
||||
|
||||
onSelectedItemsCountChanged(count: number) {
|
||||
this.selectedItemsCountChanged.emit(count);
|
||||
}
|
||||
|
||||
onNodeClick(nodeEntry: NodeEntry) {
|
||||
const domEvent = new CustomEvent('node-click', {
|
||||
detail: {
|
||||
|
||||
@ -656,6 +656,9 @@
|
||||
"ARIA-LABEL": {
|
||||
"BREADCRUMB": "Breadcrumb",
|
||||
"DROPDOWN": "Dropdown"
|
||||
},
|
||||
"HEADER": {
|
||||
"SELECTED": "Selected ({{ count }})"
|
||||
}
|
||||
},
|
||||
"NAME_COLUMN_LINK": {
|
||||
|
||||
@ -182,11 +182,14 @@
|
||||
</mat-menu>
|
||||
</div>
|
||||
|
||||
<label *ngIf="multiselect" [for]="'select-file-' + idx" class="adf-datatable-cell adf-datatable-checkbox">
|
||||
<label *ngIf="multiselect" [for]="'select-file-' + idx" class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single">
|
||||
<mat-checkbox
|
||||
[id]="'select-file-' + idx"
|
||||
[class.adf-datatable-checkbox-selected]="row.isSelected"
|
||||
[class.adf-datatable-hover-only]="displayCheckboxesOnHover"
|
||||
[checked]="row.isSelected"
|
||||
[attr.aria-checked]="row.isSelected"
|
||||
[aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate"
|
||||
role="checkbox"
|
||||
(change)="onCheckboxChange(row, $event)"
|
||||
class="adf-checkbox-sr-only">
|
||||
|
||||
@ -159,6 +159,20 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
.adf-datatable-hover-only {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-hover-only {
|
||||
visibility: hidden;
|
||||
|
||||
&.adf-datatable-checkbox-selected {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-checkbox {
|
||||
max-width: $data-table-thumbnail-width;
|
||||
width: $data-table-thumbnail-width;
|
||||
@ -290,6 +304,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.adf-datatable-checkbox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adf-cell-value {
|
||||
display: flex;
|
||||
min-height: inherit;
|
||||
@ -438,6 +457,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* stylelint-disable media-feature-range-notation */
|
||||
|
||||
/* mobile phone */
|
||||
@media all and (width <= 768px) {
|
||||
.adf-desktop-only.adf-ellipsis-cell {
|
||||
@ -501,11 +522,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
&.adf-datatable-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header-content {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
||||
@ -157,6 +157,7 @@ describe('DataTable', () => {
|
||||
});
|
||||
|
||||
it('should preserve the historical selection order', () => {
|
||||
spyOn(dataTable.selectedItemsCountChanged, 'emit');
|
||||
dataTable.data = new ObjectDataTableAdapter([{ id: 0 }, { id: 1 }, { id: 2 }], [new ObjectDataColumn({ key: 'id' })]);
|
||||
|
||||
const rows = dataTable.data.getRows();
|
||||
@ -169,6 +170,25 @@ describe('DataTable', () => {
|
||||
expect(selection[0].getValue('id')).toBe(2);
|
||||
expect(selection[1].getValue('id')).toBe(0);
|
||||
expect(selection[2].getValue('id')).toBe(1);
|
||||
|
||||
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledTimes(3);
|
||||
});
|
||||
|
||||
it('should selectedItemsCountChanged be emitted 4 times', () => {
|
||||
spyOn(dataTable.selectedItemsCountChanged, 'emit');
|
||||
dataTable.data = new ObjectDataTableAdapter([{ id: 0 }, { id: 1 }, { id: 2 }], [new ObjectDataColumn({ key: 'id' })]);
|
||||
|
||||
const rows = dataTable.data.getRows();
|
||||
|
||||
dataTable.selectRow(rows[2], true);
|
||||
dataTable.selectRow(rows[0], true);
|
||||
dataTable.selectRow(rows[1], true);
|
||||
dataTable.selectRow(rows[1], false);
|
||||
|
||||
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(1);
|
||||
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(2);
|
||||
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(3);
|
||||
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledTimes(4);
|
||||
});
|
||||
|
||||
it('should update schema if columns change', fakeAsync(() => {
|
||||
@ -540,6 +560,7 @@ describe('DataTable', () => {
|
||||
});
|
||||
|
||||
it('should unselect the row searching it by row id, when row id is defined', () => {
|
||||
spyOn(dataTable.selectedItemsCountChanged, 'emit');
|
||||
const findSelectionByIdSpy = spyOn(dataTable, 'findSelectionById');
|
||||
dataTable.data = new ObjectDataTableAdapter([], [new ObjectDataColumn({ key: 'name' })]);
|
||||
|
||||
@ -555,6 +576,8 @@ describe('DataTable', () => {
|
||||
|
||||
expect(indexOfSpy).not.toHaveBeenCalled();
|
||||
expect(findSelectionByIdSpy).toHaveBeenCalledWith(fakeDataRows[0].id);
|
||||
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledTimes(1);
|
||||
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(2);
|
||||
});
|
||||
|
||||
it('should unselect the row by searching for the exact same reference of it (indexOf), when row id is not defined ', () => {
|
||||
@ -872,16 +895,13 @@ describe('DataTable', () => {
|
||||
dataTable.multiselect = true;
|
||||
dataTable.onCheckboxChange(rows[0], { checked: true } as MatCheckboxChange);
|
||||
expect(dataTable.isSelectAllIndeterminate).toBe(true);
|
||||
expect(dataTable.isSelectAllChecked).toBe(false);
|
||||
|
||||
dataTable.onCheckboxChange(rows[1], { checked: true } as MatCheckboxChange);
|
||||
expect(dataTable.isSelectAllIndeterminate).toBe(false);
|
||||
expect(dataTable.isSelectAllChecked).toBe(true);
|
||||
|
||||
dataTable.onCheckboxChange(rows[0], { checked: false } as MatCheckboxChange);
|
||||
dataTable.onCheckboxChange(rows[1], { checked: false } as MatCheckboxChange);
|
||||
expect(dataTable.isSelectAllIndeterminate).toBe(false);
|
||||
expect(dataTable.isSelectAllChecked).toBe(false);
|
||||
});
|
||||
|
||||
it('should allow select row when multi-select enabled', () => {
|
||||
@ -1309,6 +1329,36 @@ describe('DataTable', () => {
|
||||
expect(rows[1].getValue('icon')).toBe('directions_car');
|
||||
expect(rows[2].getValue('icon')).toBe('local_shipping');
|
||||
});
|
||||
|
||||
describe('displayCheckboxesOnHover', () => {
|
||||
const getCheckboxes = () =>
|
||||
fixture.debugElement.queryAll(By.css('.adf-datatable-checkbox-single .adf-checkbox-sr-only')).map((row) => row.nativeElement);
|
||||
|
||||
beforeEach(() => {
|
||||
dataTable.data = new ObjectDataTableAdapter([{ name: '1' }, { name: '2' }], [new ObjectDataColumn({ key: 'name' })]);
|
||||
dataTable.multiselect = true;
|
||||
});
|
||||
|
||||
it('should always display checkboxes when displayCheckboxesOnHover is set to false', () => {
|
||||
dataTable.displayCheckboxesOnHover = false;
|
||||
fixture.detectChanges();
|
||||
|
||||
const checkboxes = getCheckboxes();
|
||||
checkboxes.forEach((checkbox) => {
|
||||
expect(checkbox.classList).not.toContain('adf-datatable-hover-only');
|
||||
});
|
||||
});
|
||||
|
||||
it('should display checkboxes on hover when displayCheckboxesOnHover is set to true', () => {
|
||||
dataTable.displayCheckboxesOnHover = true;
|
||||
fixture.detectChanges();
|
||||
|
||||
const checkboxes = getCheckboxes();
|
||||
checkboxes.forEach((checkbox) => {
|
||||
expect(checkbox.classList).toContain('adf-datatable-hover-only');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accesibility', () => {
|
||||
|
||||
@ -241,6 +241,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
|
||||
@Output()
|
||||
columnsWidthChanged = new EventEmitter<DataColumn[]>();
|
||||
|
||||
/** Emitted when the selected row items count in the table changed. */
|
||||
@Output()
|
||||
selectedItemsCountChanged = new EventEmitter<number>();
|
||||
|
||||
/**
|
||||
* Flag that indicates if the datatable is in loading state and needs to show the
|
||||
* loading template (see the docs to learn how to configure a loading template).
|
||||
@ -284,6 +288,12 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
|
||||
@Input()
|
||||
blurOnResize = true;
|
||||
|
||||
/**
|
||||
* Flag that indicates if selection checkboxes inside row should be displayed on hover only.
|
||||
*/
|
||||
@Input()
|
||||
displayCheckboxesOnHover = false;
|
||||
|
||||
headerFilterTemplate: TemplateRef<any>;
|
||||
noContentTemplate: TemplateRef<any>;
|
||||
noPermissionTemplate: TemplateRef<any>;
|
||||
@ -316,7 +326,12 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
|
||||
this.keyManager.onKeydown(event);
|
||||
}
|
||||
|
||||
constructor(private elementRef: ElementRef, differs: IterableDiffers, private matIconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
|
||||
constructor(
|
||||
private elementRef: ElementRef,
|
||||
differs: IterableDiffers,
|
||||
private matIconRegistry: MatIconRegistry,
|
||||
private sanitizer: DomSanitizer
|
||||
) {
|
||||
if (differs) {
|
||||
this.differ = differs.find([]).create(null);
|
||||
}
|
||||
@ -566,7 +581,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
|
||||
}
|
||||
|
||||
private handleRowSelection(row: DataRow, e: KeyboardEvent | MouseEvent) {
|
||||
if (this.data) {
|
||||
if (!this.data) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isSingleSelectionMode()) {
|
||||
if (row.isSelected) {
|
||||
this.resetSelection();
|
||||
@ -593,7 +611,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
|
||||
}
|
||||
this.selectRow(row, newValue);
|
||||
this.emitRowSelectionEvent(domEventName, row);
|
||||
}
|
||||
this.checkSelectAllCheckboxState();
|
||||
}
|
||||
}
|
||||
|
||||
@ -849,6 +867,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
|
||||
this.selection.splice(idx, 1);
|
||||
}
|
||||
}
|
||||
|
||||
this.selectedItemsCountChanged.emit(this.selection.length);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user