[ADF-2304] Add option to Content Node Selector to transform the breadcrumb folder node (#2952)

* [ADF-2304] Add option to Content Node Selector to transform the breadcrumb folder node

* [ADF-2304] update documentation with recent changes

* [ADF-2304] added example of using the breadcrumbTransform

docs/content-node-selector-panel.component.md

@@ -25,12 +25,52 @@ Opens a [Content Node Selector](content-node-selector.component.md) in its own d
 | rowFilter | RowFilter | null | Custom row filter function. [See More](document-list.component.md#custom-row-filter) |
 | imageResolver | ImageResolver | null | Custom image resolver function. [See More](document-list.component.md#custom-image-resolver) |
 | pageSize | number | 10 | Number of items shown per page in the list |
+| isSelectionValid | ValidationFunction | defaultValidation | Function used to decide if the selected node has permission to be the chosen. The defaultValidation always returns true.  |
+| breadcrumbTransform | (node) => any | null | Action to be performed to the chosen/folder node before building the breadcrumb UI. Can be useful in case a custom formatting is needed to the breadcrumb, so changing the node's path elements that help build the breadcrumb can be done through this function. |
+
+#### Using breadcrumbTransform example
+
+Before opening the Content Node Selector, you can add a breadcrumbTransform function to the ContentNodeSelectorComponentData to make changes to what is displayed on the breadcrumb. For example, something like this:
+```
+    const data: ContentNodeSelectorComponentData = {
+        title: title,
+        actionName: action,
+        currentFolderId: contentEntry.parentId,
+        imageResolver: this.imageResolver.bind(this),
+        rowFilter : this.rowFilter.bind(this, contentEntry.id),
+        isSelectionValid: this.hasEntityCreatePermission.bind(this),
+        breadcrumbTransform: this.changeBreadcrumbPath.bind(this), // here is the transform function
+        select: select
+    };
+
+    this.openContentNodeDialog(data, 'adf-content-node-selector-dialog', '630px');
+```
+where the transform function could be something like this:
+```
+    private changeBreadcrumbPath(node: MinimalNodeEntryEntity) {
+
+        if (node && node.path && node.path.elements) {
+            const elements = node.path.elements;
+
+            if (elements.length > 1) {
+                if (elements[1].name === 'Sites') {
+                    elements.splice(1, 1);
+                }
+            }
+        }
+
+        return node;
+    }
+```
+and here is the display of the breadcrumb before and after transform:
+![Content Node Selector breadcrumbTransfrom before/after screenshot](docassets/images/breadcrumbTransform.png)
+
 
 ### Events
 
 | Name | Description |
 | ---- | ----------- |
-| select | Emitted when the user has selected an item |
+| select | Emitted when the user has chosen an item |
 
 ## Details
 

docs/content-node-selector.component.md

@@ -43,9 +43,14 @@ to work with the Dialog's
 ```ts
 interface ContentNodeSelectorComponentData {
     title: string;
-    currentFolderId?: string;
+    actionName?: string;
+    currentFolderId: string;
+    dropdownHideMyFiles?: boolean;
+    dropdownSiteList?: SitePaging;
     rowFilter?: RowFilter;
     imageResolver?: ImageResolver;
+    isSelectionValid?: (entry: MinimalNodeEntryEntity) => boolean;
+    breadcrumbTransform?: (node) => any;
     select: EventEmitter<MinimalNodeEntryEntity[]>;
 }
 ```