diff --git a/docs/content-services/components/breadcrumb.component.md b/docs/content-services/components/breadcrumb.component.md index da272b2724..b9d504de96 100644 --- a/docs/content-services/components/breadcrumb.component.md +++ b/docs/content-services/components/breadcrumb.component.md @@ -31,6 +31,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. | +| readOnly | `boolean` | false | Prevents changing the active node | ### Events diff --git a/docs/content-services/components/dropdown-breadcrumb.component.md b/docs/content-services/components/dropdown-breadcrumb.component.md index e44e704473..93011a5057 100644 --- a/docs/content-services/components/dropdown-breadcrumb.component.md +++ b/docs/content-services/components/dropdown-breadcrumb.component.md @@ -32,6 +32,7 @@ Indicates the current position within a navigation hierarchy using a dropdown me | 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. | +| readOnly | `boolean` | false | Prevents changing the active node | ### Events diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.html b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.html index 1ee12e55e6..bc742fc7e5 100644 --- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.html +++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.html @@ -33,6 +33,7 @@ (click)="onRoutePathClick(node, $event)" (onSelectionChange)="onRoutePathClick(node, $event)" class="adf-breadcrumb-path-option" + [disabled]="readOnly" > {{ node.name | translate }} @@ -41,11 +42,11 @@
-
{{ item.name | translate }}
diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.spec.ts b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.spec.ts index 2eafc5dcb0..244a791cf0 100644 --- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.spec.ts +++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.spec.ts @@ -160,6 +160,19 @@ describe('Breadcrumb', () => { expect(documentListComponent.navigateTo).toHaveBeenCalledWith('folder1'); }); + + it('should not navigate if component is read-only', () => { + spyOn(documentListComponent, 'navigateTo').and.stub(); + + component.target = documentListComponent; + component.readOnly = true; + component.ngOnInit(); + + documentListComponent.$folderNode.next(folderNode); + component.onRoutePathClick(component.route[0]); + + expect(documentListComponent.navigateTo).not.toHaveBeenCalled(); + }); }); it('should not parse the route when node not provided', () => { diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts index 1ca7a94a51..1a55097d08 100644 --- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts +++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts @@ -92,6 +92,10 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy { return !!this.root; } + /** If true, prevents the user from navigating away from the active node. */ + @Input() + readOnly: boolean = false; + /** Emitted when the user clicks on a breadcrumb. */ @Output() navigate = new EventEmitter(); @@ -178,12 +182,16 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy { return position; } + breadcrumbItemIsAnchor(lastItem): boolean { + return !this.readOnly && !lastItem; + } + onRoutePathClick(route: PathElementEntity, event?: Event): void { if (event && event.type === 'click') { event.preventDefault(); } - if (route) { + if (route && !this.readOnly) { this.navigate.emit(route); if (this.target) { diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html index 34fd9187eb..04a8bb50da 100644 --- a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html +++ b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html @@ -25,7 +25,8 @@ (click)="onRoutePathClick(node, $event)" (onSelectionChange)="onRoutePathClick(node, $event)" class="adf-dropdown-breadcrumb-path-option" - data-automation-class="dropdown-breadcrumb-path-option"> + data-automation-class="dropdown-breadcrumb-path-option" + [disabled]="readOnly"> {{ node.name | translate }}