diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md
index 08e8ad7034..654cbf5875 100644
--- a/ng2-components/ng2-alfresco-documentlist/README.md
+++ b/ng2-components/ng2-alfresco-documentlist/README.md
@@ -206,6 +206,42 @@ _For a complete example source code please refer to
[DocumentList Demo](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-documentlist/demo)
repository._
+### DOM Events
+
+Below are the DOM events the DocumentList component emits.
+All of them are `bubbling`, meaning you can handle them in any component up the parent hierarchy, even if DocumentList is wrapped by another component(s).
+
+| Name | Description |
+| --- | --- |
+| node-click | Raised when user clicks the node |
+| node-dblclick | Raised when user double-clicks the node |
+
+Every event is represented by a [CustomEvent](https://developer.mozilla.org/en/docs/Web/API/CustomEvent) instance, having at least the following properties as part of the `Event.detail` property value:
+
+```ts
+{
+ sender: DocumentListComponent,
+ node: MinimalNodeEntity
+}
+```
+
+#### Handling DOM events
+
+Here's a basic example on handling DOM events in the parent elements:
+
+```html
+
+```
+
### Setting default folder
You can set current folder path by assigning a value for `currentFolderId` property.
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts
index 56744a769f..1365facf18 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts
@@ -50,7 +50,7 @@ describe('DocumentListBreadcrumb', () => {
});
it('should update document list on click', (done) => {
- let documentList = new DocumentListComponent(null, null, null);
+ let documentList = new DocumentListComponent(null, null, null, null);
spyOn(documentList, 'loadFolderByNodeId').and.stub();
let node = { id: '-id-', name: 'name' };
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts
index ffcaaa044e..493d10c542 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts
@@ -27,7 +27,7 @@ describe('ContentColumnList', () => {
beforeEach(() => {
let documentListService = new DocumentListServiceMock();
- documentList = new DocumentListComponent(documentListService, null, null);
+ documentList = new DocumentListComponent(documentListService, null, null, null);
actionList = new ContentActionListComponent(documentList);
});
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts
index bd8b614b26..40f24becc2 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts
@@ -38,7 +38,7 @@ describe('ContentAction', () => {
documentActions = new DocumentActionsService(null, null);
folderActions = new FolderActionsService(null);
- documentList = new DocumentListComponent(documentServiceMock, null, null);
+ documentList = new DocumentListComponent(documentServiceMock, null, null, null);
actionList = new ContentActionListComponent(documentList);
});
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts
index 8fd4daad64..3cccfcebc2 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts
@@ -28,7 +28,7 @@ describe('ContentColumnList', () => {
beforeEach(() => {
let service = new DocumentListServiceMock();
- documentList = new DocumentListComponent(service, null, null);
+ documentList = new DocumentListComponent(service, null, null, null);
columnList = new ContentColumnListComponent(documentList);
});
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts
index eec2eb9202..e06c860619 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts
@@ -27,7 +27,7 @@ describe('ContentColumn', () => {
beforeEach(() => {
let service = new DocumentListServiceMock();
- documentList = new DocumentListComponent(service, null, null);
+ documentList = new DocumentListComponent(service, null, null, null);
columnList = new ContentColumnListComponent(documentList);
});
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
index 1506e14dc5..ae18bd9bd5 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
@@ -513,6 +513,19 @@ describe('DocumentList', () => {
expect(documentList.onNodeClick).toHaveBeenCalledWith(node);
});
+ it('should emit node-click DOM event', (done) => {
+ let node = new NodeMinimalEntry();
+ let row = new ShareDataRow(node);
+ let event = new DataRowEvent(row, null);
+
+ const htmlElement = fixture.debugElement.nativeElement as HTMLElement;
+ htmlElement.addEventListener('node-click', (e: CustomEvent) => {
+ done();
+ });
+
+ documentList.onRowClick(event);
+ });
+
it('should emit [nodeDblClick] event on row double-click', () => {
let node = new NodeMinimalEntry();
let row = new ShareDataRow(node);
@@ -523,6 +536,19 @@ describe('DocumentList', () => {
expect(documentList.onNodeDblClick).toHaveBeenCalledWith(node);
});
+ it('should emit node-dblclick DOM event', (done) => {
+ let node = new NodeMinimalEntry();
+ let row = new ShareDataRow(node);
+ let event = new DataRowEvent(row, null);
+
+ const htmlElement = fixture.debugElement.nativeElement as HTMLElement;
+ htmlElement.addEventListener('node-dblclick', (e: CustomEvent) => {
+ done();
+ });
+
+ documentList.onRowDblClick(event);
+ });
+
it('should load folder by ID on init', () => {
documentList.currentFolderId = '1d26e465-dea3-42f3-b415-faa8364b9692';
spyOn(documentList, 'loadFolderNodesByFolderNodeId').and.returnValue(Promise.resolve());
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts
index f82be39c34..5c773fc4c3 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts
@@ -16,7 +16,7 @@
*/
import {
- Component, OnInit, Input, OnChanges, Output, SimpleChanges, EventEmitter,
+ Component, OnInit, Input, OnChanges, Output, SimpleChanges, EventEmitter, ElementRef,
AfterContentInit, TemplateRef, NgZone, ViewChild, HostListener, ContentChild
} from '@angular/core';
import { Subject } from 'rxjs/Rx';
@@ -150,7 +150,8 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
constructor(private documentListService: DocumentListService,
private ngZone: NgZone,
- private translateService: AlfrescoTranslationService) {
+ private translateService: AlfrescoTranslationService,
+ private el: ElementRef) {
this.data = new ShareDataTableAdapter(this.documentListService);
@@ -396,7 +397,16 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
}
onNodeClick(node: MinimalNodeEntity) {
- let event = new NodeEntityEvent(node);
+ const domEvent = new CustomEvent('node-click', {
+ detail: {
+ sender: this,
+ node: node
+ },
+ bubbles: true
+ });
+ this.el.nativeElement.dispatchEvent(domEvent);
+
+ const event = new NodeEntityEvent(node);
this.nodeClick.emit(event);
if (!event.defaultPrevented) {
@@ -420,7 +430,16 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
}
onNodeDblClick(node: MinimalNodeEntity) {
- let event = new NodeEntityEvent(node);
+ const domEvent = new CustomEvent('node-dblclick', {
+ detail: {
+ sender: this,
+ node: node
+ },
+ bubbles: true
+ });
+ this.el.nativeElement.dispatchEvent(domEvent);
+
+ const event = new NodeEntityEvent(node);
this.nodeDblClick.emit(event);
if (!event.defaultPrevented) {
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts
index 546deb3fca..aae664a984 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts
@@ -28,7 +28,7 @@ describe('EmptyFolderContent', () => {
beforeEach(() => {
let documentListService = new DocumentListServiceMock();
- documentList = new DocumentListComponent(documentListService, null, null);
+ documentList = new DocumentListComponent(documentListService, null, null, null);
documentList.dataTable = new DataTableComponent(null);
emptyFolderContent = new EmptyFolderContentComponent(documentList);
});