@fundamental-ngx/platform 0.48.0-rc.2 → 0.48.0-rc.21

package/fesm2022/fundamental-ngx-platform-approval-flow.mjs

@@ -100,1008 +100,1008 @@ function isNodeTargetsIncludeId(node, id) {
     return node.targets.includes(id);
 }
 
-/**
- * @deprecated
- * ApprovalFlowTeamList component is deprecated since version 0.40.0
+/** Algorithm in short:
+ * 1. Find all possible paths (longest path length = amount of the columns in the graph)
+ * 2. Trim paths (remove blank nodes at the end of the paths)
+ * 3. Make all paths the same length (= longest path length) to make every unique node be present at the same index across all paths
+ * 4. Sort paths by their likeness between each other to avoid paths crossing
+ * 5. Remove "duplicate" nodes in paths (make every unique node be present only once across all paths)
+ * 6. Remove empty paths
+ * 7. Transform paths into the columns
+ * 8. Trim columns (remove space nodes at the end of columns)
+ * 9. Remove columns which contain only blank and empty nodes
+ * 10. Transform columns into the graph columns
  */
-class ApprovalFlowTeamListComponent {
-    constructor() {
-        /** Approval flow teams */
-        this.teams = [];
-        /** Whether in RTL mode */
-        this.isRtl = false;
-        /** Event emitted on team click */
-        this.onTeamClick = new EventEmitter();
-        /** Event emitted on team selection change */
-        this.onTeamRadioClick = new EventEmitter();
-        /** @hidden */
-        this._trackByFn = trackByFn;
+function generateApprovalFlowGraph(nodes) {
+    const graph = { columns: [], errors: false };
+    if (!nodes.length) {
+        return graph;
     }
-    /** @hidden */
-    _showTeamDetails(team) {
-        this.onTeamClick.emit(team);
+    const rootNodes = findRootNodes(nodes);
+    const finalNodes = findFinalNodes(nodes);
+    if (!rootNodes.length || !finalNodes.length) {
+        console.warn(`Err: Not possible to build graph because root or final nodes aren't present!`);
+        graph.errors = true;
+        return graph;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowTeamListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowTeamListComponent, isStandalone: true, selector: "fdp-approval-flow-team-list", inputs: { teams: "teams", isRtl: "isRtl", selectedTeamId: "selectedTeamId" }, outputs: { onTeamClick: "onTeamClick", onTeamRadioClick: "onTeamRadioClick" }, host: { classAttribute: "fdp-approval-flow-team-list" }, ngImport: i0, template: "<fdp-list [hasByLine]=\"true\" fdCompact>\n    <fd-form-group>\n        @for (team of teams; track _trackByFn(i, team); let i = $index) {\n            <div fd-form-item>\n                <fd-radio-button\n                    [value]=\"team.id\"\n                    [attr.id]=\"'team-radio' + i\"\n                    [name]=\"'team-radio' + i\"\n                    [(ngModel)]=\"selectedTeamId\"\n                    (click)=\"onTeamRadioClick.emit(team)\"\n                >\n                </fd-radio-button>\n                <fdp-standard-list-item\n                    [attr.id]=\"'approval-team-' + team.id\"\n                    [avatar]=\"{ image: '', ariaLabel: team.name }\"\n                    [description]=\"team.description || team.members.length + ' members'\"\n                    [title]=\"team.name\"\n                    (click)=\"_showTeamDetails(team)\"\n                >\n                </fdp-standard-list-item>\n                <fd-icon [glyph]=\"'navigation-' + (isRtl ? 'left' : 'right') + '-arrow'\"></fd-icon>\n            </div>\n        }\n    </fd-form-group>\n</fdp-list>\n", styles: [".fdp-approval-flow-team-list .fd-form-item{position:relative;margin-bottom:0}.fdp-approval-flow-team-list .fd-form-item fd-radio-button{position:absolute;z-index:1;top:1.4rem}.fdp-approval-flow-team-list .fd-form-item .fd-list__item{padding-left:2rem!important;cursor:pointer}.fdp-approval-flow-team-list .fd-form-item fd-icon{position:absolute;right:1rem;top:2rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);cursor:pointer}.fdp-approval-flow-team-list .fd-form-item fd-avatar{color:#fff;color:var(--sapBaseColor, #fff)}[dir=rtl] .fdp-approval-flow-team-list .fd-form-item fd-icon,.fdp-approval-flow-team-list[dir=rtl] .fd-form-item fd-icon{right:auto;left:1rem}[dir=rtl] .fdp-approval-flow-team-list .fd-list__item,.fdp-approval-flow-team-list[dir=rtl] .fd-list__item{padding-right:2rem!important;padding-left:0!important}\n"], dependencies: [{ kind: "component", type: ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: FormGroupComponent, selector: "fd-form-group", inputs: ["isInline"] }, { kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: StandardListItemComponent, selector: "fdp-standard-list-item" }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    const paths = getPaths(rootNodes, nodes);
+    if (!paths.length) {
+        console.warn('Err: Not possible to build graph!');
+        graph.errors = true;
+        return graph;
+    }
+    const trimmedPaths = trimPaths(paths);
+    const sameLengthPaths = makePathsSameLength(trimmedPaths);
+    const pathsBySimilarity = sortPaths(sameLengthPaths);
+    const pathsWithUniqueNodes = removeDuplicateNodes(pathsBySimilarity);
+    const notEmptyPaths = removeEmptyPaths(pathsWithUniqueNodes);
+    const columns = getColumnsFromPaths(notEmptyPaths);
+    const trimmedColumns = trimColumns(columns);
+    const notEmptyColumns = removeEmptyColumns(trimmedColumns);
+    graph.columns = getGraphColumnsFromPaths(notEmptyColumns);
+    return graph;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowTeamListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fdp-approval-flow-team-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'fdp-approval-flow-team-list'
-                    }, standalone: true, imports: [
-                        ListComponent,
-                        ContentDensityDirective,
-                        FormGroupComponent,
-                        FormItemComponent,
-                        RadioButtonComponent,
-                        FormsModule,
-                        StandardListItemComponent,
-                        IconComponent
-                    ], template: "<fdp-list [hasByLine]=\"true\" fdCompact>\n    <fd-form-group>\n        @for (team of teams; track _trackByFn(i, team); let i = $index) {\n            <div fd-form-item>\n                <fd-radio-button\n                    [value]=\"team.id\"\n                    [attr.id]=\"'team-radio' + i\"\n                    [name]=\"'team-radio' + i\"\n                    [(ngModel)]=\"selectedTeamId\"\n                    (click)=\"onTeamRadioClick.emit(team)\"\n                >\n                </fd-radio-button>\n                <fdp-standard-list-item\n                    [attr.id]=\"'approval-team-' + team.id\"\n                    [avatar]=\"{ image: '', ariaLabel: team.name }\"\n                    [description]=\"team.description || team.members.length + ' members'\"\n                    [title]=\"team.name\"\n                    (click)=\"_showTeamDetails(team)\"\n                >\n                </fdp-standard-list-item>\n                <fd-icon [glyph]=\"'navigation-' + (isRtl ? 'left' : 'right') + '-arrow'\"></fd-icon>\n            </div>\n        }\n    </fd-form-group>\n</fdp-list>\n", styles: [".fdp-approval-flow-team-list .fd-form-item{position:relative;margin-bottom:0}.fdp-approval-flow-team-list .fd-form-item fd-radio-button{position:absolute;z-index:1;top:1.4rem}.fdp-approval-flow-team-list .fd-form-item .fd-list__item{padding-left:2rem!important;cursor:pointer}.fdp-approval-flow-team-list .fd-form-item fd-icon{position:absolute;right:1rem;top:2rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);cursor:pointer}.fdp-approval-flow-team-list .fd-form-item fd-avatar{color:#fff;color:var(--sapBaseColor, #fff)}[dir=rtl] .fdp-approval-flow-team-list .fd-form-item fd-icon,.fdp-approval-flow-team-list[dir=rtl] .fd-form-item fd-icon{right:auto;left:1rem}[dir=rtl] .fdp-approval-flow-team-list .fd-list__item,.fdp-approval-flow-team-list[dir=rtl] .fd-list__item{padding-right:2rem!important;padding-left:0!important}\n"] }]
-        }], propDecorators: { teams: [{
-                type: Input
-            }], isRtl: [{
-                type: Input
-            }], selectedTeamId: [{
-                type: Input
-            }], 
-        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-        onTeamClick: [{
-                type: Output
-            }], 
-        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-        onTeamRadioClick: [{
-                type: Output
-            }] } });
-
-/**
- * @deprecated
- * ApprovalFlowUserDetails component is deprecated since version 0.40.0
- */
-class ApprovalFlowUserDetailsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowUserDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowUserDetailsComponent, isStandalone: true, selector: "fdp-approval-flow-user-details", inputs: { user: "user", details: "details", detailsTemplate: "detailsTemplate" }, host: { classAttribute: "fdp-approval-flow-user-details" }, ngImport: i0, template: "<div class=\"fdp-approval-flow-user-details__user-info\">\n    <fd-avatar [image]=\"user.imgUrl\" size=\"s\"> </fd-avatar>\n    <div>\n        <div class=\"fdp-approval-flow-user-details__name\">{{ user.name }}</div>\n        <div class=\"fdp-approval-flow-user-details__description\">{{ user.description }}</div>\n    </div>\n</div>\n@if (detailsTemplate) {\n    <ng-template [ngTemplateOutlet]=\"detailsTemplate\" [ngTemplateOutletContext]=\"{ data: details | async }\">\n    </ng-template>\n}\n", styles: [".fdp-approval-flow-user-details__user-info{display:flex;align-items:center;margin-bottom:1rem}.fdp-approval-flow-user-details__name{font-size:1rem}.fdp-approval-flow-user-details__description{color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+/** Generate graph metadata */
+function generateApprovalFlowGraphMetadata(graph) {
+    const nodes = getGraphNodes(graph);
+    const metadata = {};
+    graph.columns.forEach((column, columnIndex) => {
+        column.nodes.forEach((node, nodeIndex) => {
+            const parents = getParentNodes(node, nodes);
+            const parentsApproved = parents.length ? parents.every((_node) => isNodeApproved(_node)) : false;
+            const isRoot = !parents.length && !node.space;
+            const isFinal = !node.targets.length && !node.space;
+            const parallelEnd = parents.length > 1;
+            const firstOfMultipleRootNodes = columnIndex === 0 && column.nodes.length > 1 && nodeIndex === 0;
+            const firstOfMultipleFinalNodes = columnIndex === graph.columns.length - 1 && column.nodes.length > 1 && nodeIndex === 0;
+            metadata[node.id] = {
+                parents,
+                isRoot,
+                isFinal,
+                parallelStart: node.targets.length > 1,
+                parallelEnd,
+                columnIndex,
+                nodeIndex,
+                canAddNodeBefore: !isNodeStarted(node) && !parentsApproved,
+                canAddNodeBeforeAll: isRoot && firstOfMultipleRootNodes,
+                canAddNodeAfter: !isNodeApproved(node),
+                canAddNodeAfterAll: !isNodeApproved(node) && ((isFinal && firstOfMultipleFinalNodes) || (parallelEnd && node.blank)),
+                canAddParallel: !isNodeApproved(node),
+                isVerticalLineBeforeSolid: node.space && graph.columns[columnIndex - 1]?.allNodesApproved,
+                isVerticalLineAfterSolid: node.space && column.allNodesApproved,
+                firstOfMultipleRootNodes,
+                firstOfMultipleFinalNodes,
+                rootNodesApproved: columnIndex === 0 && column.allNodesApproved
+            };
+        });
+    });
+    /* Some flags can be calculated only on the second run, when all nodes already have base metadata */
+    graph.columns.forEach((column) => {
+        column.nodes.forEach((node, nodeIndex) => {
+            const nodeMetadata = metadata[node.id];
+            nodeMetadata.isLastInParallel = metadata[node.targets[0]]?.parallelEnd;
+            nodeMetadata.isFirstInParallel = metadata[nodeMetadata.parents[0]?.id]?.parallelStart;
+            const columnIndex = column.index;
+            const graphPrevColumn = columnIndex ? graph.columns[columnIndex - 1] : undefined;
+            const graphNextColumn = columnIndex ? graph.columns[columnIndex + 1] : undefined;
+            const prevHNode = graphPrevColumn?.nodes[nodeIndex];
+            const nextHNode = graphNextColumn?.nodes[nodeIndex];
+            nodeMetadata.renderAddNodeAfterButton =
+                nodeMetadata.canAddNodeAfter &&
+                    (nodeMetadata.isFinal ||
+                        nodeMetadata.parallelStart ||
+                        nodeMetadata.isLastInParallel ||
+                        nextHNode?.blank);
+            const nextColumnNodes = graphNextColumn?.nodes;
+            if (nodeMetadata.parallelStart && nextColumnNodes) {
+                const children = nextColumnNodes.filter((_node) => node.targets.includes(_node.id));
+                const firstChildIndex = nextColumnNodes.findIndex((_node) => _node.id === children[0].id);
+                const lastChildIndex = nextColumnNodes.findIndex((_node) => _node.id === children[children.length - 1].id);
+                for (let i = firstChildIndex + 1; i <= lastChildIndex; i++) {
+                    metadata[nextColumnNodes[i].id].renderVerticalLineBefore = true;
+                }
+            }
+            const prevColumnNodes = graphPrevColumn?.nodes;
+            if (nodeMetadata.parallelEnd && prevColumnNodes) {
+                const firstParentIndex = prevColumnNodes.findIndex((_node) => _node.id === nodeMetadata.parents[0].id);
+                const lastParentIndex = prevColumnNodes.findIndex((_node) => _node.id === nodeMetadata.parents[nodeMetadata.parents.length - 1].id);
+                for (let i = firstParentIndex + 1; i <= lastParentIndex; i++) {
+                    metadata[prevColumnNodes[i].id].renderVerticalLineAfter = true;
+                }
+            }
+            nodeMetadata.renderVerticalLineBefore = !nodeMetadata.renderVerticalLineBefore
+                ? nodeIndex > 0 && !prevHNode
+                : true;
+            nodeMetadata.renderVerticalLineAfter = !nodeMetadata.renderVerticalLineAfter
+                ? nodeIndex > 0 && !nextHNode
+                : true;
+        });
+    });
+    return metadata;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowUserDetailsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fdp-approval-flow-user-details', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'fdp-approval-flow-user-details'
-                    }, standalone: true, imports: [AvatarComponent, NgTemplateOutlet, AsyncPipe], template: "<div class=\"fdp-approval-flow-user-details__user-info\">\n    <fd-avatar [image]=\"user.imgUrl\" size=\"s\"> </fd-avatar>\n    <div>\n        <div class=\"fdp-approval-flow-user-details__name\">{{ user.name }}</div>\n        <div class=\"fdp-approval-flow-user-details__description\">{{ user.description }}</div>\n    </div>\n</div>\n@if (detailsTemplate) {\n    <ng-template [ngTemplateOutlet]=\"detailsTemplate\" [ngTemplateOutletContext]=\"{ data: details | async }\">\n    </ng-template>\n}\n", styles: [".fdp-approval-flow-user-details__user-info{display:flex;align-items:center;margin-bottom:1rem}.fdp-approval-flow-user-details__name{font-size:1rem}.fdp-approval-flow-user-details__description{color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70)}\n"] }]
-        }], propDecorators: { user: [{
-                type: Input
-            }], details: [{
-                type: Input
-            }], detailsTemplate: [{
-                type: Input
-            }] } });
-
-const ITEMS_RENDERED_AT_ONCE = 100;
-const INTERVAL_IN_MS = 10;
-/**
- * @deprecated
- * ApprovalFlowUserList component is deprecated since version 0.40.0
- */
-class ApprovalFlowUserListComponent {
-    /** @hidden */
-    constructor(_cdr) {
-        this._cdr = _cdr;
-        /** Approval flow users */
-        this.users = [];
-        /** Approval flow selected users */
-        this.selectedUsers = [];
-        /** Whether the list is selectable */
-        this.isSelectable = true;
-        /** Event emitted on user click */
-        this.onUserClick = new EventEmitter();
-        /** Event emitted on selection change */
-        this.onSelectionChange = new EventEmitter();
-        /** @hidden */
-        this._selectedItems = [];
-        /** @hidden */
-        this._idPrefix = 'approval-node-user-';
-        /** @hidden */
-        this._trackByFn = trackByFn;
-        /** @hidden */
-        this._displayUsers = [];
-    }
-    /** @hidden */
-    ngAfterViewInit() {
-        if (this.selectedUsers.length) {
-            const selectedApproversNames = this.selectedUsers.map((approver) => approver.name);
-            this._selectedItems = this.listItems.filter((item) => !!item.avatar?.ariaLabel && selectedApproversNames.includes(item.avatar.ariaLabel));
-            this._selectedItems.forEach((item) => {
-                item._selected = true;
-                this.list._selectItem(item);
-            });
-            this._cdr.detectChanges();
+function findRootNodes(nodes) {
+    return nodes.filter((node) => nodes.every((n) => !isNodeTargetsIncludeId(n, node.id)));
+}
+function findFinalNodes(nodes) {
+    return nodes.filter((node) => !node.targets.length);
+}
+/** Find all possible paths (longest path length = amount of the columns in the graph) */
+function getPaths(rootNodes, nodes) {
+    const paths = [];
+    const queue = [];
+    for (let i = 0; i < rootNodes.length; i++) {
+        queue.push([rootNodes[i]]);
+        while (queue.length) {
+            const path = queue.pop();
+            let lastNodeInPath;
+            if (path) {
+                lastNodeInPath = path[path.length - 1];
+            }
+            /** Indicates about an error */
+            if (!lastNodeInPath) {
+                return [];
+            }
+            if (!lastNodeInPath.targets.length) {
+                paths.push(path);
+            }
+            else {
+                lastNodeInPath.targets.forEach((targetId) => {
+                    const targetNode = nodes.find((node) => node.id === targetId);
+                    if (!targetNode) {
+                        return;
+                    }
+                    const newPath = [...path, targetNode];
+                    queue.push(newPath);
+                });
+            }
         }
     }
-    /** @hidden */
-    ngOnChanges(changes) {
-        if (changes.users) {
-            this._collectDataProgressive();
+    return paths;
+}
+/** Trim paths (remove blank nodes at the end of the paths) */
+function trimPaths(paths) {
+    const processedPaths = [];
+    paths.forEach((path) => {
+        let indexToSlice = path.length - 1;
+        for (let i = path.length - 1; i > 0; --i) {
+            if (path[i].blank) {
+                indexToSlice = i - 1;
+            }
+            else {
+                break;
+            }
         }
+        path[indexToSlice].targets = [];
+        processedPaths.push(path.slice(0, indexToSlice + 1));
+    });
+    return processedPaths;
+}
+/** Make all paths the same length (= longest path length) to make every unique node be present at the same index across all paths */
+function makePathsSameLength(paths) {
+    const processedPaths = [];
+    const pathLengths = paths.map((path) => path.length);
+    const longestPathLength = Math.max(...pathLengths);
+    paths.forEach((path) => {
+        if (path.length === longestPathLength) {
+            processedPaths.push(path);
+            return;
+        }
+        path.forEach((node, nodeIndex) => {
+            /** Try to get blank nodes from already processed paths as paths may be the same within some part */
+            let blankNodes = getBlankNodesAfterNode(node, processedPaths);
+            if (blankNodes.length && blankNodes[0].id !== path[nodeIndex + 1]?.id) {
+                path.splice(nodeIndex + 1, 0, ...blankNodes);
+                return;
+            }
+            const nodeIndexInPaths = paths.map((_path) => _path.indexOf(node));
+            const mostFarNodeIndexInPaths = Math.max(...nodeIndexInPaths);
+            if (nodeIndex < mostFarNodeIndexInPaths) {
+                blankNodes = getBlankNodes(mostFarNodeIndexInPaths - nodeIndex, path[nodeIndex - 1].status);
+                blankNodes[blankNodes.length - 1].targets = [node.id];
+                path[nodeIndex - 1].targets = [blankNodes[0].id];
+                path.splice(nodeIndex, 0, ...blankNodes);
+                return;
+            }
+            if (nodeIndex === mostFarNodeIndexInPaths && nodeIndex === path.length - 1) {
+                blankNodes = getBlankNodes(longestPathLength - path.length, path[nodeIndex].status);
+                path[nodeIndex].targets = [blankNodes[0].id];
+                path.splice(nodeIndex + 1, 0, ...blankNodes);
+                return;
+            }
+        });
+        processedPaths.push(path);
+    });
+    return processedPaths;
+}
+/** Try to get blank nodes from already processed paths as paths may be the same within some part */
+function getBlankNodesAfterNode(node, paths) {
+    const blankNodes = [];
+    const pathWithBlankNodeAfter = paths.find((path) => {
+        const nodeIndex = path.indexOf(node);
+        return nodeIndex > -1 && path[nodeIndex + 1]?.blank;
+    });
+    if (pathWithBlankNodeAfter) {
+        const nodeIndex = pathWithBlankNodeAfter.indexOf(node) + 1;
+        const nextNotBlankNodeIndex = pathWithBlankNodeAfter.findIndex((_node, _index) => _index > nodeIndex && !_node.blank);
+        blankNodes.push(...pathWithBlankNodeAfter.slice(nodeIndex, nextNotBlankNodeIndex > 0 ? nextNotBlankNodeIndex : undefined));
     }
-    /** @hidden */
-    ngOnDestroy() {
-        this._killInterval();
-    }
-    /** @hidden */
-    _onSelect(event) {
-        this._selectedItems = event.selectedItems;
-        this.onSelectionChange.emit(this._getUsersFromSelectedItems(event.selectedItems));
+    return blankNodes;
+}
+/** Generate blank nodes sequential */
+function getBlankNodes(count, status) {
+    const nodes = [];
+    let node;
+    let nodeId;
+    for (let i = count; i > 0; i--) {
+        node = Object.assign({}, getBlankApprovalGraphNode(), { targets: nodeId ? [nodeId] : [], status });
+        nodeId = node.id;
+        nodes.unshift(node);
     }
-    /** @hidden */
-    _getUsersFromSelectedItems(items) {
-        return items
-            .map((item) => this.users.find((user) => `${this._idPrefix + user.id}` === item.itemEl.nativeElement.id))
-            .filter((u) => !!u);
+    return nodes;
+}
+/** Sort paths by their likeness (= count of the same nodes relatively to the other paths) between each other to avoid paths crossing */
+function sortPaths(paths) {
+    if (paths.length === 1) {
+        return paths;
     }
-    /** @hidden */
-    _collectDataProgressive() {
-        this._killInterval();
-        this._displayUsers = [];
-        if (!this.users?.length) {
-            return;
+    /** [pathIndex, relativeToPathIndex, sameNodesCount][] */
+    let similarities = [];
+    let pathSimilarity = 0;
+    paths.forEach((path, index) => {
+        for (let i = 0; i < paths.length; i++) {
+            if (index !== i && !similarities.some((likely) => index === likely[1] && i === likely[0])) {
+                pathSimilarity = 0;
+                for (let j = 0; j < path.length; j++) {
+                    if (path[j].id === paths[i][j].id) {
+                        pathSimilarity++;
+                    }
+                }
+                similarities.push([index, i, pathSimilarity]);
+            }
         }
-        const collectionTracker = { currentIndex: 0 };
-        this._userCollectorIntervalFn(collectionTracker);
-        this._intervalID = window.setInterval(this._userCollectorIntervalFn.bind(this), INTERVAL_IN_MS, collectionTracker);
+    });
+    similarities = similarities.sort((a, b) => (a[2] > b[2] ? -1 : 1));
+    const usedPathIndexes = [];
+    const processedPaths = [];
+    similarities.forEach((similarity) => {
+        if (!usedPathIndexes.some((i) => i === similarity[0])) {
+            processedPaths.push(paths[similarity[0]]);
+            usedPathIndexes.push(similarity[0]);
+        }
+        if (!usedPathIndexes.some((i) => i === similarity[1])) {
+            processedPaths.push(paths[similarity[1]]);
+            usedPathIndexes.push(similarity[1]);
+        }
+    });
+    return processedPaths;
+}
+/** Remove "duplicate" nodes in paths (make every unique node be present only once across all paths) */
+function removeDuplicateNodes(paths) {
+    const processedPaths = [];
+    paths.forEach((path, index) => {
+        path.forEach((node) => {
+            paths.forEach((_path, _index) => {
+                const isNodeInPath = _index !== index && _path.indexOf(node) > -1;
+                if (isNodeInPath) {
+                    /** Instead of node place space node */
+                    _path.splice(_path.indexOf(node), 1, getSpaceApprovalGraphNode());
+                }
+            });
+        });
+        processedPaths.push(path);
+    });
+    return processedPaths;
+}
+/** Remove empty paths (which contains only empty nodes) */
+function removeEmptyPaths(paths) {
+    return paths.reduce((acc, path) => {
+        if (!path.every((node) => node.space)) {
+            acc.push(path);
+        }
+        return acc;
+    }, []);
+}
+/** Transform paths into the columns (it's possible as they're all the same length) */
+function getColumnsFromPaths(paths) {
+    const columns = [];
+    let column = [];
+    for (let i = 0; i < paths[0].length; i++) {
+        column = [];
+        for (let v = 0; v < paths.length; v++) {
+            column.push(paths[v][i]);
+        }
+        columns.push(column);
     }
-    /** @hidden */
-    _userCollectorIntervalFn(tracker) {
-        const nextIndex = tracker.currentIndex + ITEMS_RENDERED_AT_ONCE;
-        const collectedUsers = [];
-        for (let i = tracker.currentIndex; i <= nextIndex; i++) {
-            if (i >= this.users.length) {
-                this._killInterval();
+    return columns;
+}
+/** Trim space nodes at the end of the columns. */
+function trimColumns(columns) {
+    const processedColumns = [];
+    columns.forEach((column) => {
+        let lastNotSpaceNodeIndex;
+        for (let i = column.length - 1; i >= 0; i--) {
+            if (!column[i].space) {
+                lastNotSpaceNodeIndex = i;
                 break;
             }
-            collectedUsers.push(this.users[i]);
         }
-        tracker.currentIndex += ITEMS_RENDERED_AT_ONCE;
-        this._displayUsers.push(...collectedUsers);
-        this._cdr.markForCheck();
+        if (lastNotSpaceNodeIndex < column.length) {
+            processedColumns.push(column.slice(0, lastNotSpaceNodeIndex + 1));
+        }
+        else {
+            processedColumns.push(column);
+        }
+    });
+    return processedColumns;
+}
+/** Remove empty columns (where every node is a blank node)  */
+function removeEmptyColumns(columns) {
+    const processedColumns = [];
+    columns.forEach((column) => {
+        const areAllNodesEmpty = column.every((node) => node.blank || node.space);
+        if (areAllNodesEmpty) {
+            column.forEach((node) => {
+                if (node.blank) {
+                    /** Connect previous column to the next column, omitting current column. */
+                    replaceTargets(node.id, node.targets, columns);
+                }
+            });
+        }
+        else {
+            processedColumns.push(column);
+        }
+    });
+    return processedColumns;
+}
+function replaceTargets(replaceId, replaceWithId, columns) {
+    columns.forEach((column) => {
+        column.forEach((n) => {
+            if (isNodeTargetsIncludeId(n, replaceId)) {
+                n.targets = n.targets.filter((_id) => _id !== replaceId);
+                n.targets.push(...replaceWithId);
+            }
+        });
+    });
+}
+/** Transform columns into the graph columns (with additional metadata). */
+function getGraphColumnsFromPaths(columns) {
+    const graphColumns = [];
+    columns.forEach((column, index) => {
+        column.forEach((node) => (node.colIndex = index));
+        graphColumns.push({
+            nodes: column,
+            index,
+            allNodesApproved: column.every((node) => isNodeApproved(node))
+        });
+    });
+    return graphColumns;
+}
+
+/**
+ * @deprecated
+ * ApprovalFlowTeamList component is deprecated since version 0.40.0
+ */
+class ApprovalFlowTeamListComponent {
+    constructor() {
+        /** Approval flow teams */
+        this.teams = [];
+        /** Whether in RTL mode */
+        this.isRtl = false;
+        /** Event emitted on team click */
+        this.onTeamClick = new EventEmitter();
+        /** Event emitted on team selection change */
+        this.onTeamRadioClick = new EventEmitter();
+        /** @hidden */
+        this._trackByFn = trackByFn;
     }
     /** @hidden */
-    _killInterval() {
-        if (this._intervalID) {
-            clearInterval(this._intervalID);
-        }
+    _showTeamDetails(team) {
+        this.onTeamClick.emit(team);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowUserListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowUserListComponent, isStandalone: true, selector: "fdp-approval-flow-user-list", inputs: { users: "users", selectedUsers: "selectedUsers", isSelectable: "isSelectable" }, outputs: { onUserClick: "onUserClick", onSelectionChange: "onSelectionChange" }, host: { classAttribute: "fdp-approval-flow-user-list" }, viewQueries: [{ propertyName: "list", first: true, predicate: ListComponent, descendants: true }, { propertyName: "listItems", predicate: StandardListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (_selectedItems.length) {\n    <div class=\"fdp-approval-flow-user-list__selected-count\">\n        @if (_selectedItems.length === 1) {\n            {{ 'platformApprovalFlow.userListSelectedItemsCountSingular' | fdTranslate }}\n        } @else {\n            {{\n                'platformApprovalFlow.userListSelectedItemsCountPlural' | fdTranslate: { count: _selectedItems.length }\n            }}\n        }\n    </div>\n}\n<fdp-list\n    [selectionMode]=\"isSelectable ? 'multi' : 'none'\"\n    [selection]=\"isSelectable\"\n    [navigationIndicator]=\"true\"\n    [hasByLine]=\"true\"\n    [(ngModel)]=\"_selectedItems\"\n    [selectedItems]=\"_selectedItems\"\n    (selectedItemChange)=\"_onSelect($event)\"\n>\n    @for (_user of _displayUsers; track _trackByFn($index, _user)) {\n        <fdp-standard-list-item\n            [attr.id]=\"_idPrefix + _user.id\"\n            [avatar]=\"{ image: _user.imgUrl, ariaLabel: _user.name }\"\n            [description]=\"_user.description\"\n            [ariaLabel]=\"_user.name\"\n            [title]=\"_user.name\"\n            (click)=\"$event.stopPropagation(); onUserClick.emit(_user)\"\n        ></fdp-standard-list-item>\n    }\n</fdp-list>\n", styles: [".fdp-approval-flow-user-list{display:block;margin-top:-1rem}.fdp-approval-flow-user-list__selected-count{line-height:2rem;margin:0 -1rem;padding:0 1rem;background:#f2f2f2;background:var(--sapList_HeaderBackground, #f2f2f2)}\n"], dependencies: [{ kind: "component", type: ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: StandardListItemComponent, selector: "fdp-standard-list-item" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowTeamListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowTeamListComponent, isStandalone: true, selector: "fdp-approval-flow-team-list", inputs: { teams: "teams", isRtl: "isRtl", selectedTeamId: "selectedTeamId" }, outputs: { onTeamClick: "onTeamClick", onTeamRadioClick: "onTeamRadioClick" }, host: { classAttribute: "fdp-approval-flow-team-list" }, ngImport: i0, template: "<fdp-list [hasByLine]=\"true\" fdCompact>\n    <fd-form-group>\n        @for (team of teams; track _trackByFn(i, team); let i = $index) {\n            <div fd-form-item>\n                <fd-radio-button\n                    [value]=\"team.id\"\n                    [attr.id]=\"'team-radio' + i\"\n                    [name]=\"'team-radio' + i\"\n                    [(ngModel)]=\"selectedTeamId\"\n                    (click)=\"onTeamRadioClick.emit(team)\"\n                >\n                </fd-radio-button>\n                <fdp-standard-list-item\n                    [attr.id]=\"'approval-team-' + team.id\"\n                    [avatar]=\"{ image: '', ariaLabel: team.name }\"\n                    [description]=\"team.description || team.members.length + ' members'\"\n                    [title]=\"team.name\"\n                    (click)=\"_showTeamDetails(team)\"\n                >\n                </fdp-standard-list-item>\n                <fd-icon [glyph]=\"'navigation-' + (isRtl ? 'left' : 'right') + '-arrow'\"></fd-icon>\n            </div>\n        }\n    </fd-form-group>\n</fdp-list>\n", styles: [".fdp-approval-flow-team-list .fd-form-item{position:relative;margin-bottom:0}.fdp-approval-flow-team-list .fd-form-item fd-radio-button{position:absolute;z-index:1;top:1.4rem}.fdp-approval-flow-team-list .fd-form-item .fd-list__item{padding-left:2rem!important;cursor:pointer}.fdp-approval-flow-team-list .fd-form-item fd-icon{position:absolute;right:1rem;top:2rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);cursor:pointer}.fdp-approval-flow-team-list .fd-form-item fd-avatar{color:#fff;color:var(--sapBaseColor, #fff)}[dir=rtl] .fdp-approval-flow-team-list .fd-form-item fd-icon,.fdp-approval-flow-team-list[dir=rtl] .fd-form-item fd-icon{right:auto;left:1rem}[dir=rtl] .fdp-approval-flow-team-list .fd-list__item,.fdp-approval-flow-team-list[dir=rtl] .fd-list__item{padding-right:2rem!important;padding-left:0!important}\n"], dependencies: [{ kind: "component", type: ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: FormGroupComponent, selector: "fd-form-group", inputs: ["isInline"] }, { kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: StandardListItemComponent, selector: "fdp-standard-list-item" }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowUserListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowTeamListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-approval-flow-user-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'fdp-approval-flow-user-list'
-                    }, standalone: true, imports: [ListComponent, FormsModule, StandardListItemComponent, FdTranslatePipe], template: "@if (_selectedItems.length) {\n    <div class=\"fdp-approval-flow-user-list__selected-count\">\n        @if (_selectedItems.length === 1) {\n            {{ 'platformApprovalFlow.userListSelectedItemsCountSingular' | fdTranslate }}\n        } @else {\n            {{\n                'platformApprovalFlow.userListSelectedItemsCountPlural' | fdTranslate: { count: _selectedItems.length }\n            }}\n        }\n    </div>\n}\n<fdp-list\n    [selectionMode]=\"isSelectable ? 'multi' : 'none'\"\n    [selection]=\"isSelectable\"\n    [navigationIndicator]=\"true\"\n    [hasByLine]=\"true\"\n    [(ngModel)]=\"_selectedItems\"\n    [selectedItems]=\"_selectedItems\"\n    (selectedItemChange)=\"_onSelect($event)\"\n>\n    @for (_user of _displayUsers; track _trackByFn($index, _user)) {\n        <fdp-standard-list-item\n            [attr.id]=\"_idPrefix + _user.id\"\n            [avatar]=\"{ image: _user.imgUrl, ariaLabel: _user.name }\"\n            [description]=\"_user.description\"\n            [ariaLabel]=\"_user.name\"\n            [title]=\"_user.name\"\n            (click)=\"$event.stopPropagation(); onUserClick.emit(_user)\"\n        ></fdp-standard-list-item>\n    }\n</fdp-list>\n", styles: [".fdp-approval-flow-user-list{display:block;margin-top:-1rem}.fdp-approval-flow-user-list__selected-count{line-height:2rem;margin:0 -1rem;padding:0 1rem;background:#f2f2f2;background:var(--sapList_HeaderBackground, #f2f2f2)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { users: [{
+            args: [{ selector: 'fdp-approval-flow-team-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fdp-approval-flow-team-list'
+                    }, standalone: true, imports: [
+                        ListComponent,
+                        ContentDensityDirective,
+                        FormGroupComponent,
+                        FormItemComponent,
+                        RadioButtonComponent,
+                        FormsModule,
+                        StandardListItemComponent,
+                        IconComponent
+                    ], template: "<fdp-list [hasByLine]=\"true\" fdCompact>\n    <fd-form-group>\n        @for (team of teams; track _trackByFn(i, team); let i = $index) {\n            <div fd-form-item>\n                <fd-radio-button\n                    [value]=\"team.id\"\n                    [attr.id]=\"'team-radio' + i\"\n                    [name]=\"'team-radio' + i\"\n                    [(ngModel)]=\"selectedTeamId\"\n                    (click)=\"onTeamRadioClick.emit(team)\"\n                >\n                </fd-radio-button>\n                <fdp-standard-list-item\n                    [attr.id]=\"'approval-team-' + team.id\"\n                    [avatar]=\"{ image: '', ariaLabel: team.name }\"\n                    [description]=\"team.description || team.members.length + ' members'\"\n                    [title]=\"team.name\"\n                    (click)=\"_showTeamDetails(team)\"\n                >\n                </fdp-standard-list-item>\n                <fd-icon [glyph]=\"'navigation-' + (isRtl ? 'left' : 'right') + '-arrow'\"></fd-icon>\n            </div>\n        }\n    </fd-form-group>\n</fdp-list>\n", styles: [".fdp-approval-flow-team-list .fd-form-item{position:relative;margin-bottom:0}.fdp-approval-flow-team-list .fd-form-item fd-radio-button{position:absolute;z-index:1;top:1.4rem}.fdp-approval-flow-team-list .fd-form-item .fd-list__item{padding-left:2rem!important;cursor:pointer}.fdp-approval-flow-team-list .fd-form-item fd-icon{position:absolute;right:1rem;top:2rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);cursor:pointer}.fdp-approval-flow-team-list .fd-form-item fd-avatar{color:#fff;color:var(--sapBaseColor, #fff)}[dir=rtl] .fdp-approval-flow-team-list .fd-form-item fd-icon,.fdp-approval-flow-team-list[dir=rtl] .fd-form-item fd-icon{right:auto;left:1rem}[dir=rtl] .fdp-approval-flow-team-list .fd-list__item,.fdp-approval-flow-team-list[dir=rtl] .fd-list__item{padding-right:2rem!important;padding-left:0!important}\n"] }]
+        }], propDecorators: { teams: [{
                 type: Input
-            }], selectedUsers: [{
+            }], isRtl: [{
                 type: Input
-            }], isSelectable: [{
+            }], selectedTeamId: [{
                 type: Input
             }], 
         // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-        onUserClick: [{
+        onTeamClick: [{
                 type: Output
             }], 
         // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-        onSelectionChange: [{
+        onTeamRadioClick: [{
                 type: Output
-            }], list: [{
-                type: ViewChild,
-                args: [ListComponent]
-            }], listItems: [{
-                type: ViewChildren,
-                args: [StandardListItemComponent]
             }] } });
 
-var VIEW_MODES;
-(function (VIEW_MODES) {
-    VIEW_MODES["SELECT_TEAM"] = "SELECT_TEAM";
-    VIEW_MODES["SELECT_USER"] = "SELECT_USER";
-    VIEW_MODES["VIEW_TEAM_MEMBERS"] = "VIEW_TEAM_MEMBERS";
-    VIEW_MODES["USER_DETAILS"] = "USER_DETAILS";
-})(VIEW_MODES || (VIEW_MODES = {}));
-class ApprovalFlowAddNodeViewService {
-    constructor() {
-        /** @hidden */
-        this.onViewChange = new EventEmitter();
-    }
-    /** @hidden */
-    get isUserDetailsMode() {
-        return this.currentView === VIEW_MODES.USER_DETAILS;
-    }
-    /** @hidden */
-    get isTeamMembersMode() {
-        return this.currentView === VIEW_MODES.VIEW_TEAM_MEMBERS;
-    }
-    /** @hidden */
-    get isSelectUserMode() {
-        return this.currentView === VIEW_MODES.SELECT_USER;
-    }
-    /** @hidden */
-    get isSelectTeamMode() {
-        return this.currentView === VIEW_MODES.SELECT_TEAM;
-    }
-    /** @hidden */
-    get team() {
-        return this.selectedTeam;
-    }
-    /** @hidden */
-    setCurrentView(view) {
-        this.currentView = view;
-        this.onViewChange.emit();
-    }
-    /** @hidden */
-    resetView() {
-        this.currentView = undefined;
-        this.onViewChange.emit();
-    }
-    /** @hidden */
-    selectTeam(team) {
-        this.selectedTeam = team;
-    }
-    /** @hidden */
-    resetTeam() {
-        this.selectedTeam = undefined;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowAddNodeViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowAddNodeViewService }); }
+/**
+ * @deprecated
+ * ApprovalFlowUserDetails component is deprecated since version 0.40.0
+ */
+class ApprovalFlowUserDetailsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowUserDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowUserDetailsComponent, isStandalone: true, selector: "fdp-approval-flow-user-details", inputs: { user: "user", details: "details", detailsTemplate: "detailsTemplate" }, host: { classAttribute: "fdp-approval-flow-user-details" }, ngImport: i0, template: "<div class=\"fdp-approval-flow-user-details__user-info\">\n    <fd-avatar [image]=\"user.imgUrl\" size=\"s\"> </fd-avatar>\n    <div>\n        <div class=\"fdp-approval-flow-user-details__name\">{{ user.name }}</div>\n        <div class=\"fdp-approval-flow-user-details__description\">{{ user.description }}</div>\n    </div>\n</div>\n@if (detailsTemplate) {\n    <ng-template [ngTemplateOutlet]=\"detailsTemplate\" [ngTemplateOutletContext]=\"{ data: details | async }\">\n    </ng-template>\n}\n", styles: [".fdp-approval-flow-user-details__user-info{display:flex;align-items:center;margin-bottom:1rem}.fdp-approval-flow-user-details__name{font-size:1rem}.fdp-approval-flow-user-details__description{color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowAddNodeViewService, decorators: [{
-            type: Injectable
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowUserDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fdp-approval-flow-user-details', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'fdp-approval-flow-user-details'
+                    }, standalone: true, imports: [AvatarComponent, NgTemplateOutlet, AsyncPipe], template: "<div class=\"fdp-approval-flow-user-details__user-info\">\n    <fd-avatar [image]=\"user.imgUrl\" size=\"s\"> </fd-avatar>\n    <div>\n        <div class=\"fdp-approval-flow-user-details__name\">{{ user.name }}</div>\n        <div class=\"fdp-approval-flow-user-details__description\">{{ user.description }}</div>\n    </div>\n</div>\n@if (detailsTemplate) {\n    <ng-template [ngTemplateOutlet]=\"detailsTemplate\" [ngTemplateOutletContext]=\"{ data: details | async }\">\n    </ng-template>\n}\n", styles: [".fdp-approval-flow-user-details__user-info{display:flex;align-items:center;margin-bottom:1rem}.fdp-approval-flow-user-details__name{font-size:1rem}.fdp-approval-flow-user-details__description{color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70)}\n"] }]
+        }], propDecorators: { user: [{
+                type: Input
+            }], details: [{
+                type: Input
+            }], detailsTemplate: [{
+                type: Input
+            }] } });
 
-var APPROVAL_FLOW_NODE_TYPES;
-(function (APPROVAL_FLOW_NODE_TYPES) {
-    APPROVAL_FLOW_NODE_TYPES["SERIAL"] = "SERIAL";
-    APPROVAL_FLOW_NODE_TYPES["PARALLEL"] = "PARALLEL";
-})(APPROVAL_FLOW_NODE_TYPES || (APPROVAL_FLOW_NODE_TYPES = {}));
-var APPROVAL_FLOW_APPROVER_TYPES;
-(function (APPROVAL_FLOW_APPROVER_TYPES) {
-    APPROVAL_FLOW_APPROVER_TYPES["SINGLE_USER"] = "SINGLE_USER";
-    APPROVAL_FLOW_APPROVER_TYPES["ANYONE"] = "ANYONE";
-    APPROVAL_FLOW_APPROVER_TYPES["EVERYONE"] = "EVERYONE";
-})(APPROVAL_FLOW_APPROVER_TYPES || (APPROVAL_FLOW_APPROVER_TYPES = {}));
+const ITEMS_RENDERED_AT_ONCE = 100;
+const INTERVAL_IN_MS = 10;
 /**
  * @deprecated
- * ApprovalFlowAddNode component is deprecated since version 0.40.0
+ * ApprovalFlowUserList component is deprecated since version 0.40.0
  */
-class ApprovalFlowAddNodeComponent {
-    /** @hidden */
-    constructor(dialogRef, viewService, _cdr) {
-        this.dialogRef = dialogRef;
-        this.viewService = viewService;
-        this._cdr = _cdr;
-        /** @hidden */
-        this._nodeType = APPROVAL_FLOW_NODE_TYPES.SERIAL;
-        /** @hidden */
-        this._nodeTypes = APPROVAL_FLOW_NODE_TYPES;
-        /** @hidden */
-        this._nodeTypesArray = Object.keys(APPROVAL_FLOW_NODE_TYPES);
-        /** @hidden */
-        this._approverType = APPROVAL_FLOW_APPROVER_TYPES.SINGLE_USER;
-        /** @hidden */
-        this._approverTypes = APPROVAL_FLOW_APPROVER_TYPES;
-        /** @hidden */
-        this._approverTypesArray = Object.keys(APPROVAL_FLOW_APPROVER_TYPES);
-        /** @hidden */
-        this._dueDate = FdDate.getNow();
-        /** @hidden */
-        this._selectMode = false;
-        /** @hidden */
-        this._approvers = [];
-        /** @hidden */
-        this._teams = [];
-        /** @hidden */
-        this._selectedApprovers = [];
-        /** @hidden */
-        this._selectedTeamArray = [];
-        /** @hidden */
-        this._selectedTeamMembers = [];
-        /** @hidden */
-        this._filteredTeamMembers = [];
-        /** @hidden */
-        this._checkDueDate = false;
-        /** @hidden */
-        this._displayUserFn = displayUserFn;
-        /** @hidden */
-        this._displayTeamFn = displayTeamFn;
-        /** @hidden */
-        this._trackByFn = trackByFn;
-        /** @hidden */
-        this._addToNextSerial = false;
-    }
-    /** @hidden */
-    get _data() {
-        return this.dialogRef.data;
-    }
-    /** @hidden */
-    get _isSingleUserMode() {
-        return this._approverType === this._approverTypes.SINGLE_USER;
-    }
-    /** @hidden */
-    get _isMainSubmitButtonDisabled() {
-        const approvers = this._isSingleUserMode ? this._selectedApprovers : this._selectedTeamArray;
-        return !approvers.length || (this._checkDueDate && !this._dueDate);
-    }
-    /** @hidden */
-    get _headerArrowGlyph() {
-        return 'navigation-' + (this._data.rtl ? 'right' : 'left') + '-arrow';
-    }
-    /** @hidden */
-    ngOnInit() {
-        // triggering initial loading of data in data sources.
-        this._data.teamDataSource.match();
-        this._data.userDataSource.match();
-        const teams$ = this._data.teamDataSource.open();
-        const approvers$ = this._data.userDataSource.open();
-        this._dataSourceSub = combineLatest([teams$, approvers$]).subscribe(([teams, approvers]) => {
-            this._teams = teams;
-            this._approvers = approvers;
-            if (this._data.isEdit) {
-                this._checkDueDate = !!this._data.checkDueDate;
-                if (this._checkDueDate && this._data.node?.dueDate) {
-                    this._dueDate = FdDate.getFdDateByDate(new Date(this._data.node.dueDate));
-                }
-                this._selectedApprovers = [...(this._data.node?.approvers ?? [])];
-                const team = this._data.node?.approvalTeamId &&
-                    this._teams.find((t) => t.id === this._data.node?.approvalTeamId);
-                if (team) {
-                    this.viewService.selectTeam(team);
-                    this._selectedTeam = team;
-                    this._selectedTeamArray = [team];
-                    this._approverType = this._data.node?.isEveryoneApprovalNeeded
-                        ? this._approverTypes.EVERYONE
-                        : this._approverTypes.ANYONE;
-                }
-            }
-            this._cdr.detectChanges();
-        });
-        this._viewChangeSub = this.viewService.onViewChange.subscribe(() => {
-            this._onSearchStringChange('');
+class ApprovalFlowUserListComponent {
+    /** @hidden */
+    constructor(_cdr) {
+        this._cdr = _cdr;
+        /** Approval flow users */
+        this.users = [];
+        /** Approval flow selected users */
+        this.selectedUsers = [];
+        /** Whether the list is selectable */
+        this.isSelectable = true;
+        /** Event emitted on user click */
+        this.onUserClick = new EventEmitter();
+        /** Event emitted on selection change */
+        this.onSelectionChange = new EventEmitter();
+        /** @hidden */
+        this._selectedItems = [];
+        /** @hidden */
+        this._idPrefix = 'approval-node-user-';
+        /** @hidden */
+        this._trackByFn = trackByFn;
+        /** @hidden */
+        this._displayUsers = [];
+    }
+    /** @hidden */
+    ngAfterViewInit() {
+        if (this.selectedUsers.length) {
+            const selectedApproversNames = this.selectedUsers.map((approver) => approver.name);
+            this._selectedItems = this.listItems.filter((item) => !!item.avatar?.ariaLabel && selectedApproversNames.includes(item.avatar.ariaLabel));
+            this._selectedItems.forEach((item) => {
+                item._selected = true;
+                this.list._selectItem(item);
+            });
             this._cdr.detectChanges();
-        });
-        switch (this._data.nodeTarget) {
-            case 'empty':
-            case 'before':
-            case 'after':
-                this._nodeType = this._nodeTypes.SERIAL;
-                break;
-            case 'parallel':
-                this._nodeType = this._nodeTypes.PARALLEL;
-                break;
         }
     }
     /** @hidden */
-    ngOnDestroy() {
-        this._viewChangeSub.unsubscribe();
-        this._dataSourceSub.unsubscribe();
-        this._data.userDataSource.close();
-        this._data.teamDataSource.close();
+    ngOnChanges(changes) {
+        if (changes.users) {
+            this._collectDataProgressive();
+        }
     }
     /** @hidden */
-    _goToSelectMode() {
-        this._selectMode = true;
-        this.viewService.setCurrentView(this._isSingleUserMode ? VIEW_MODES.SELECT_USER : VIEW_MODES.SELECT_TEAM);
-        this._cdr.detectChanges();
+    ngOnDestroy() {
+        this._killInterval();
     }
     /** @hidden */
-    _exitSelectMode() {
-        if (this._selectedApprovers.length && !this._data.node?.approvers.length) {
-            this._selectedApprovers = [];
-        }
-        if (!this._data.isEdit && !this._data.node?.approvalTeamId) {
-            this.viewService.resetTeam();
-        }
-        this._selectMode = false;
-        this.viewService.resetView();
-        this._cdr.detectChanges();
+    _onSelect(event) {
+        this._selectedItems = event.selectedItems;
+        this.onSelectionChange.emit(this._getUsersFromSelectedItems(event.selectedItems));
     }
     /** @hidden */
-    _setSelectedApprovers(approvers) {
-        this._selectedApprovers = approvers;
-        this._confirmSelectedApprovers();
+    _getUsersFromSelectedItems(items) {
+        return items
+            .map((item) => this.users.find((user) => `${this._idPrefix + user.id}` === item.itemEl.nativeElement.id))
+            .filter((u) => !!u);
     }
     /** @hidden */
-    _confirmSelectedApprovers() {
-        if (!this._data.node) {
+    _collectDataProgressive() {
+        this._killInterval();
+        this._displayUsers = [];
+        if (!this.users?.length) {
             return;
         }
-        this._data.node.approvers = this._selectedApprovers;
-        this._data.node.variousTeams = this._data.node.approvers.some((u) => u.teamId !== this._data.node.approvers[0].teamId);
-        this._data.node.description = this._data.node.variousTeams ? '' : this._selectedApprovers[0]?.description;
-        delete this._data.node.approvalTeamId;
-        delete this._data.node.isEveryoneApprovalNeeded;
-        this._exitSelectMode();
+        const collectionTracker = { currentIndex: 0 };
+        this._userCollectorIntervalFn(collectionTracker);
+        this._intervalID = window.setInterval(this._userCollectorIntervalFn.bind(this), INTERVAL_IN_MS, collectionTracker);
     }
     /** @hidden */
-    _setSelectedTeam(team) {
-        this.viewService.selectTeam(team);
+    _userCollectorIntervalFn(tracker) {
+        const nextIndex = tracker.currentIndex + ITEMS_RENDERED_AT_ONCE;
+        const collectedUsers = [];
+        for (let i = tracker.currentIndex; i <= nextIndex; i++) {
+            if (i >= this.users.length) {
+                this._killInterval();
+                break;
+            }
+            collectedUsers.push(this.users[i]);
+        }
+        tracker.currentIndex += ITEMS_RENDERED_AT_ONCE;
+        this._displayUsers.push(...collectedUsers);
+        this._cdr.markForCheck();
     }
     /** @hidden */
-    _confirmSelectedTeam() {
-        if (!this.viewService.team) {
-            return;
-        }
-        this._selectedTeam = this.viewService.team;
-        this._selectedTeamArray = [this.viewService.team];
-        if (this._data.node) {
-            this._data.node.variousTeams = false;
-            this._data.node.approvalTeamId = this.viewService.team.id;
-            this._data.node.description = this.viewService.team.name;
-            this._data.node.isEveryoneApprovalNeeded = this._approverType === APPROVAL_FLOW_APPROVER_TYPES.EVERYONE;
+    _killInterval() {
+        if (this._intervalID) {
+            clearInterval(this._intervalID);
         }
-        this._exitSelectMode();
     }
-    /** @hidden */
-    _seeUserDetails(user) {
-        this.viewService.setCurrentView(VIEW_MODES.USER_DETAILS);
-        this._userToShowDetails = user;
-        this._userToShowDetailsData$ = this._data.userDataSource.dataProvider.getOne(new Map([['id', user.id]]));
-        this._cdr.detectChanges();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowUserListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowUserListComponent, isStandalone: true, selector: "fdp-approval-flow-user-list", inputs: { users: "users", selectedUsers: "selectedUsers", isSelectable: "isSelectable" }, outputs: { onUserClick: "onUserClick", onSelectionChange: "onSelectionChange" }, host: { classAttribute: "fdp-approval-flow-user-list" }, viewQueries: [{ propertyName: "list", first: true, predicate: ListComponent, descendants: true }, { propertyName: "listItems", predicate: StandardListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (_selectedItems.length) {\n    <div class=\"fdp-approval-flow-user-list__selected-count\">\n        @if (_selectedItems.length === 1) {\n            {{ 'platformApprovalFlow.userListSelectedItemsCountSingular' | fdTranslate }}\n        } @else {\n            {{\n                'platformApprovalFlow.userListSelectedItemsCountPlural' | fdTranslate: { count: _selectedItems.length }\n            }}\n        }\n    </div>\n}\n<fdp-list\n    [selectionMode]=\"isSelectable ? 'multi' : 'none'\"\n    [selection]=\"isSelectable\"\n    [navigationIndicator]=\"true\"\n    [hasByLine]=\"true\"\n    [(ngModel)]=\"_selectedItems\"\n    [selectedItems]=\"_selectedItems\"\n    (selectedItemChange)=\"_onSelect($event)\"\n>\n    @for (_user of _displayUsers; track _trackByFn($index, _user)) {\n        <fdp-standard-list-item\n            [attr.id]=\"_idPrefix + _user.id\"\n            [avatar]=\"{ image: _user.imgUrl, ariaLabel: _user.name }\"\n            [description]=\"_user.description\"\n            [ariaLabel]=\"_user.name\"\n            [title]=\"_user.name\"\n            (click)=\"$event.stopPropagation(); onUserClick.emit(_user)\"\n        ></fdp-standard-list-item>\n    }\n</fdp-list>\n", styles: [".fdp-approval-flow-user-list{display:block;margin-top:-1rem}.fdp-approval-flow-user-list__selected-count{line-height:2rem;margin:0 -1rem;padding:0 1rem;background:#f2f2f2;background:var(--sapList_HeaderBackground, #f2f2f2)}\n"], dependencies: [{ kind: "component", type: ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: StandardListItemComponent, selector: "fdp-standard-list-item" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowUserListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fdp-approval-flow-user-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'fdp-approval-flow-user-list'
+                    }, standalone: true, imports: [ListComponent, FormsModule, StandardListItemComponent, FdTranslatePipe], template: "@if (_selectedItems.length) {\n    <div class=\"fdp-approval-flow-user-list__selected-count\">\n        @if (_selectedItems.length === 1) {\n            {{ 'platformApprovalFlow.userListSelectedItemsCountSingular' | fdTranslate }}\n        } @else {\n            {{\n                'platformApprovalFlow.userListSelectedItemsCountPlural' | fdTranslate: { count: _selectedItems.length }\n            }}\n        }\n    </div>\n}\n<fdp-list\n    [selectionMode]=\"isSelectable ? 'multi' : 'none'\"\n    [selection]=\"isSelectable\"\n    [navigationIndicator]=\"true\"\n    [hasByLine]=\"true\"\n    [(ngModel)]=\"_selectedItems\"\n    [selectedItems]=\"_selectedItems\"\n    (selectedItemChange)=\"_onSelect($event)\"\n>\n    @for (_user of _displayUsers; track _trackByFn($index, _user)) {\n        <fdp-standard-list-item\n            [attr.id]=\"_idPrefix + _user.id\"\n            [avatar]=\"{ image: _user.imgUrl, ariaLabel: _user.name }\"\n            [description]=\"_user.description\"\n            [ariaLabel]=\"_user.name\"\n            [title]=\"_user.name\"\n            (click)=\"$event.stopPropagation(); onUserClick.emit(_user)\"\n        ></fdp-standard-list-item>\n    }\n</fdp-list>\n", styles: [".fdp-approval-flow-user-list{display:block;margin-top:-1rem}.fdp-approval-flow-user-list__selected-count{line-height:2rem;margin:0 -1rem;padding:0 1rem;background:#f2f2f2;background:var(--sapList_HeaderBackground, #f2f2f2)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { users: [{
+                type: Input
+            }], selectedUsers: [{
+                type: Input
+            }], isSelectable: [{
+                type: Input
+            }], 
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        onUserClick: [{
+                type: Output
+            }], 
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        onSelectionChange: [{
+                type: Output
+            }], list: [{
+                type: ViewChild,
+                args: [ListComponent]
+            }], listItems: [{
+                type: ViewChildren,
+                args: [StandardListItemComponent]
+            }] } });
+
+var VIEW_MODES;
+(function (VIEW_MODES) {
+    VIEW_MODES["SELECT_TEAM"] = "SELECT_TEAM";
+    VIEW_MODES["SELECT_USER"] = "SELECT_USER";
+    VIEW_MODES["VIEW_TEAM_MEMBERS"] = "VIEW_TEAM_MEMBERS";
+    VIEW_MODES["USER_DETAILS"] = "USER_DETAILS";
+})(VIEW_MODES || (VIEW_MODES = {}));
+class ApprovalFlowAddNodeViewService {
+    constructor() {
+        /** @hidden */
+        this.onViewChange = new EventEmitter();
     }
     /** @hidden */
-    _exitUserDetailsMode() {
-        this.viewService.setCurrentView(this.viewService.team ? VIEW_MODES.VIEW_TEAM_MEMBERS : VIEW_MODES.SELECT_USER);
-        this._userToShowDetails = undefined;
-        this._userToShowDetailsData$ = undefined;
-        this._cdr.detectChanges();
+    get isUserDetailsMode() {
+        return this.currentView === VIEW_MODES.USER_DETAILS;
     }
     /** @hidden */
-    _viewTeamMembers(team) {
-        this.viewService.selectTeam(team);
-        this.viewService.setCurrentView(VIEW_MODES.VIEW_TEAM_MEMBERS);
-        this._selectedTeamMembers = team.members;
-        this._setFilteredTeamMembers(this._selectedTeamMembers); // applying local filtering
-        this._cdr.detectChanges();
+    get isTeamMembersMode() {
+        return this.currentView === VIEW_MODES.VIEW_TEAM_MEMBERS;
     }
     /** @hidden */
-    _exitTeamMembersMode() {
-        this.viewService.setCurrentView(VIEW_MODES.SELECT_TEAM);
-        this.viewService.resetTeam();
-        this._selectedTeamMembers = [];
-        this._cdr.detectChanges();
+    get isSelectUserMode() {
+        return this.currentView === VIEW_MODES.SELECT_USER;
     }
     /** @hidden */
-    _submit() {
-        if (this._data.node && !this._isSingleUserMode && this._selectedTeam) {
-            this._data.node.approvers = [...this._selectedTeam.members];
-        }
-        if (this._data.node && this._checkDueDate) {
-            this._data.node.dueDate = this._dueDate.toDate();
-        }
-        this.dialogRef.close({
-            node: this._data.node,
-            nodeType: this._nodeType,
-            toNextSerial: this._addToNextSerial
-        });
+    get isSelectTeamMode() {
+        return this.currentView === VIEW_MODES.SELECT_TEAM;
     }
     /** @hidden */
-    _onSearchStringChange(searchString = '') {
-        const params = new Map([['query', searchString]]);
-        if (this.viewService.isSelectUserMode) {
-            this._data.userDataSource.match(params);
-        }
-        else if (this.viewService.isSelectTeamMode) {
-            this._data.teamDataSource.match(params);
-        }
-        else if (this.viewService.isTeamMembersMode) {
-            this._setFilteredTeamMembers(this._selectedTeamMembers.filter((user) => filterByName(user, searchString)));
-        }
+    get team() {
+        return this.selectedTeam;
     }
     /** @hidden */
-    _setFilteredTeamMembers(users) {
-        this._filteredTeamMembers = [...users];
-        this._cdr.detectChanges();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowAddNodeComponent, deps: [{ token: i1$1.DialogRef }, { token: ApprovalFlowAddNodeViewService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowAddNodeComponent, isStandalone: true, selector: "fdp-approval-flow-add-node", host: { classAttribute: "fdp-approval-flow-dialog fdp-approval-flow-add-node" }, ngImport: i0, template: "<fd-dialog fdCompact>\n    <fd-dialog-header [class.show-search]=\"_selectMode && !_userToShowDetails\">\n        <ng-template fdkTemplate=\"header\">\n            <p>\n                @if (!_selectMode && !_data.isEdit) {\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderAddApprovers' | fdTranslate }}\n                }\n                @if (!_selectMode && _data.isEdit) {\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderEditApprover' | fdTranslate }}\n                }\n                @if (viewService.isSelectUserMode || viewService.isSelectTeamMode) {\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderAddApproverTeam' | fdTranslate }}\n                }\n                @if (viewService.isTeamMembersMode) {\n                    <fd-icon [glyph]=\"_headerArrowGlyph\" (click)=\"_exitTeamMembersMode()\"></fd-icon>\n                    {{ viewService.team?.name ?? '' }} ({{ viewService.team?.members?.length ?? 0 }})\n                }\n                @if (viewService.isUserDetailsMode) {\n                    <fd-icon [glyph]=\"_headerArrowGlyph\" (click)=\"_exitUserDetailsMode()\"></fd-icon>\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderDetail' | fdTranslate }}\n                }\n            </p>\n            @if (_selectMode && !_userToShowDetails) {\n                <fdp-search-field\n                    [placeholder]=\"'platformApprovalFlow.addNodeSearchPlaceholder' | fdTranslate\"\n                    [suggestions]=\"[]\"\n                    (inputChange)=\"_onSearchStringChange($event.text)\"\n                ></fdp-search-field>\n            }\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body [class.fd-dialog__body--auto-height]=\"viewService.isUserDetailsMode\">\n        @if (!_selectMode) {\n            @if (_data.showNodeTypeSelect) {\n                <div fd-form-item>\n                    <label fd-form-label>\n                        {{ 'platformApprovalFlow.addNodeDialogNodeType' | fdTranslate }}\n                    </label>\n                    <fd-select [(value)]=\"_nodeType\">\n                        @for (option of _nodeTypesArray; track option) {\n                            @switch (option) {\n                                @case (_nodeTypes.SERIAL) {\n                                    <li fd-option [value]=\"option\">\n                                        {{ 'platformApprovalFlow.addNodeDialogNodeTypeSerial' | fdTranslate }}\n                                    </li>\n                                }\n                                @case (_nodeTypes.PARALLEL) {\n                                    <li fd-option [value]=\"option\">\n                                        {{ 'platformApprovalFlow.addNodeDialogNodeTypeParallel' | fdTranslate }}\n                                    </li>\n                                }\n                            }\n                        }\n                    </fd-select>\n                </div>\n            }\n            <div fd-form-item>\n                <label fd-form-label>\n                    {{ 'platformApprovalFlow.addNodeDialogApproverType' | fdTranslate }}\n                </label>\n                <fd-select [(value)]=\"_approverType\">\n                    @for (option of _approverTypesArray; track option) {\n                        @switch (option) {\n                            @case (_approverTypes.SINGLE_USER) {\n                                <li fd-option [value]=\"option\">\n                                    {{ 'platformApprovalFlow.addNodeDialogApproverTypeUser' | fdTranslate }}\n                                </li>\n                            }\n                            @case (_approverTypes.ANYONE) {\n                                <li fd-option [value]=\"option\">\n                                    {{ 'platformApprovalFlow.addNodeDialogApproverTypeTeamAnyone' | fdTranslate }}\n                                </li>\n                            }\n                            @case (_approverTypes.EVERYONE) {\n                                <li fd-option [value]=\"option\">\n                                    {{ 'platformApprovalFlow.addNodeDialogApproverTypeTeamEveryone' | fdTranslate }}\n                                </li>\n                            }\n                        }\n                    }\n                </fd-select>\n            </div>\n            <div fd-form-item>\n                <label fd-form-label>{{ 'platformApprovalFlow.addNodeDialogUserOrTeam' | fdTranslate }}</label>\n                @if (_isSingleUserMode) {\n                    <fd-multi-input\n                        [showAllButton]=\"false\"\n                        [dropdownValues]=\"_selectedApprovers\"\n                        [(ngModel)]=\"_selectedApprovers\"\n                        [displayFn]=\"_displayUserFn\"\n                        (openChange)=\"_goToSelectMode()\"\n                        (selectedChange)=\"_setSelectedApprovers($event)\"\n                    ></fd-multi-input>\n                }\n                @if (!_isSingleUserMode) {\n                    <fd-multi-input\n                        [showAllButton]=\"false\"\n                        [dropdownValues]=\"_selectedTeamArray\"\n                        [(ngModel)]=\"_selectedTeamArray\"\n                        [displayFn]=\"_displayTeamFn\"\n                        (openChange)=\"_goToSelectMode()\"\n                    ></fd-multi-input>\n                }\n            </div>\n            @if (_nodeType === _nodeTypes.PARALLEL) {\n                <div fd-form-item>\n                    <fd-checkbox [(ngModel)]=\"_addToNextSerial\">\n                        {{ 'platformApprovalFlow.addNodeDialogAddToNext' | fdTranslate }}\n                    </fd-checkbox>\n                </div>\n            }\n            @if (_checkDueDate) {\n                <div fd-form-item>\n                    <label fd-form-label>{{ 'platformApprovalFlow.addNodeDialogDueDate' | fdTranslate }}</label>\n                    <fd-date-picker type=\"single\" [state]=\"!this._dueDate ? 'error' : null\" [(ngModel)]=\"_dueDate\">\n                    </fd-date-picker>\n                </div>\n            }\n        }\n        @if (_selectMode) {\n            @if (viewService.isSelectTeamMode) {\n                @if (!_data.teamDataSource.isDataLoading) {\n                    <fdp-approval-flow-team-list\n                        [isRtl]=\"_data.rtl\"\n                        [teams]=\"_teams\"\n                        [selectedTeamId]=\"_selectedTeam?.id\"\n                        (onTeamClick)=\"_viewTeamMembers($event)\"\n                        (onTeamRadioClick)=\"_setSelectedTeam($event)\"\n                    ></fdp-approval-flow-team-list>\n                } @else {\n                    <fd-busy-indicator [loading]=\"true\" [block]=\"true\"> </fd-busy-indicator>\n                }\n            }\n            @if (viewService.isSelectUserMode || viewService.isTeamMembersMode) {\n                @if (viewService.isSelectUserMode || !_data.userDataSource.isDataLoading) {\n                    <fdp-approval-flow-user-list\n                        [users]=\"viewService.isSelectUserMode ? _approvers : _filteredTeamMembers\"\n                        [isSelectable]=\"viewService.isSelectUserMode\"\n                        [selectedUsers]=\"_selectedApprovers\"\n                        (onUserClick)=\"_seeUserDetails($event)\"\n                        (onSelectionChange)=\"_selectedApprovers = $event\"\n                    ></fdp-approval-flow-user-list>\n                } @else {\n                    <fd-busy-indicator [loading]=\"true\" [block]=\"true\"> </fd-busy-indicator>\n                }\n            }\n            @if (viewService.isUserDetailsMode && _userToShowDetails) {\n                <fdp-approval-flow-user-details\n                    [user]=\"_userToShowDetails\"\n                    [detailsTemplate]=\"_data.userDetailsTemplate\"\n                    [details]=\"_userToShowDetailsData$\"\n                ></fdp-approval-flow-user-details>\n            }\n        }\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        @if (!_selectMode) {\n            <fd-button-bar\n                fdType=\"emphasized\"\n                [label]=\"'platformApprovalFlow.addNodeAddActionBtnLabel' | fdTranslate\"\n                [disabled]=\"_isMainSubmitButtonDisabled\"\n                (click)=\"_submit()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                fdkInitialFocus\n                fdType=\"transparent\"\n                [label]=\"'platformApprovalFlow.addNodeCancelActionBtnLabel' | fdTranslate\"\n                (click)=\"dialogRef.close()\"\n            ></fd-button-bar>\n        }\n        @if (_selectMode) {\n            @if (viewService.isSelectUserMode) {\n                <fd-button-bar\n                    fdType=\"emphasized\"\n                    [label]=\"'platformApprovalFlow.addNodeSelectApproverActionBtnLabel' | fdTranslate\"\n                    [disabled]=\"!_selectedApprovers.length\"\n                    (click)=\"_confirmSelectedApprovers()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitSelectMode()\"\n                ></fd-button-bar>\n            }\n            @if (viewService.isSelectTeamMode) {\n                <fd-button-bar\n                    fdType=\"emphasized\"\n                    [label]=\"'platformApprovalFlow.addNodeSelectApproverActionBtnLabel' | fdTranslate\"\n                    [disabled]=\"!_selectedTeam && !viewService.team\"\n                    (click)=\"_confirmSelectedTeam()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitSelectMode()\"\n                ></fd-button-bar>\n            }\n            @if (viewService.isTeamMembersMode) {\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitTeamMembersMode()\"\n                ></fd-button-bar>\n            }\n            @if (viewService.isUserDetailsMode) {\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitUserDetailsMode()\"\n                ></fd-button-bar>\n            }\n        }\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-approval-flow-dialog a{color:#0a6ed1;color:var(--sapLinkColor, #0a6ed1)}.fdp-approval-flow-dialog .fd-list--byline .fd-list__byline-left{width:100%}.fdp-approval-flow-dialog fd-popover{width:100%}.fdp-approval-flow-dialog fd-dialog fd-dialog-header{margin-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header .fd-bar--header{flex-direction:column;padding-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p{font-size:1rem;margin:.65rem 0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p fd-icon{font-size:.875rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);position:relative;cursor:pointer;margin-right:.75rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search{margin-bottom:0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search .fd-bar--header{min-height:2.5rem;height:auto}.fdp-approval-flow-dialog fd-dialog fd-avatar{margin-right:.652rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body{padding:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body fdp-list{display:block;margin-left:-1rem;margin-right:-1rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item .fd-checkbox__label{position:relative;left:.3125rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item fd-avatar{margin-left:.1875rem}.fdp-approval-flow-dialog .fd-form-item{margin-bottom:1rem}[dir=rtl] .fdp-approval-flow-dialog fd-dialog-header p fd-icon,.fdp-approval-flow-dialog[dir=rtl] fd-dialog-header p fd-icon{margin-right:0;margin-left:.75rem}[dir=rtl] .fdp-approval-flow-dialog fd-avatar,.fdp-approval-flow-dialog[dir=rtl] fd-avatar{margin-right:0;margin-left:.652rem}[dir=rtl] .fdp-approval-flow-dialog fdp-standard-list-item .fd-checkbox__label,.fdp-approval-flow-dialog[dir=rtl] fdp-standard-list-item .fd-checkbox__label{left:auto;right:.3125rem}\n", ".fdp-approval-flow-add-node .fd-dialog__body{width:20rem;height:27rem}.fdp-approval-flow-add-node .fd-dialog__body--auto-height{height:auto}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: MultiInputComponent, selector: "fd-multi-input", inputs: ["placeholder", "disabled", "required", "compactCollapse", "maxHeight", "glyph", "dropdownValues", "openDropdownOnAddOnClicked", "searchTerm", "inputId", "highlight", "selected", "class", "filterFn", "valueFn", "displayFn", "newTokenParseFn", "optionItemIdentifier", "newTokenValidateFn", "ariaLabel", "ariaLabelledBy", "fillControlMode", "state", "buttonFocusable", "allowNewTokens", "mobile", "showAllButton", "bodyMaxWidth", "mobileConfig", "includes", "itemTemplate", "title", "byline", "autoComplete", "open", "displayAddonButton", "tokenHiddenId"], outputs: ["searchTermChange", "selectedChange", "openChange", "addOnButtonClicked", "allItemsSelectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: DatePickerComponent, selector: "fd-date-picker", inputs: ["type", "placeholder", "inputId", "required", "message", "messageTriggers", "selectedDate", "selectedRangeDate", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "allowNull", "activeView", "placement", "appendTo", "disabled", "closeOnDateChoose", "showTodayButton", "todayButtonLabel", "previousButtonDisableFunction", "nextButtonDisableFunction", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "isOpen", "inline", "ariaLabelledBy", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedRangeDateChange", "activeViewChange"] }, { kind: "component", type: ApprovalFlowTeamListComponent, selector: "fdp-approval-flow-team-list", inputs: ["teams", "isRtl", "selectedTeamId"], outputs: ["onTeamClick", "onTeamRadioClick"] }, { kind: "component", type: ApprovalFlowUserListComponent, selector: "fdp-approval-flow-user-list", inputs: ["users", "selectedUsers", "isSelectable"], outputs: ["onUserClick", "onSelectionChange"] }, { kind: "component", type: ApprovalFlowUserDetailsComponent, selector: "fdp-approval-flow-user-details", inputs: ["user", "details", "detailsTemplate"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowAddNodeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fdp-approval-flow-add-node', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'fdp-approval-flow-dialog fdp-approval-flow-add-node'
-                    }, standalone: true, imports: [
-                        DialogComponent,
-                        ContentDensityDirective,
-                        DialogHeaderComponent,
-                        TemplateDirective,
-                        IconComponent,
-                        SearchFieldComponent,
-                        CdkScrollable,
-                        ScrollbarDirective,
-                        DialogBodyComponent,
-                        FormItemComponent,
-                        FormLabelComponent,
-                        SelectComponent,
-                        OptionComponent,
-                        MultiInputComponent,
-                        FormsModule,
-                        CheckboxComponent,
-                        DatePickerComponent,
-                        ApprovalFlowTeamListComponent,
-                        ApprovalFlowUserListComponent,
-                        ApprovalFlowUserDetailsComponent,
-                        DialogFooterComponent,
-                        ButtonBarComponent,
-                        BusyIndicatorComponent,
-                        FdTranslatePipe
-                    ], template: "<fd-dialog fdCompact>\n    <fd-dialog-header [class.show-search]=\"_selectMode && !_userToShowDetails\">\n        <ng-template fdkTemplate=\"header\">\n            <p>\n                @if (!_selectMode && !_data.isEdit) {\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderAddApprovers' | fdTranslate }}\n                }\n                @if (!_selectMode && _data.isEdit) {\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderEditApprover' | fdTranslate }}\n                }\n                @if (viewService.isSelectUserMode || viewService.isSelectTeamMode) {\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderAddApproverTeam' | fdTranslate }}\n                }\n                @if (viewService.isTeamMembersMode) {\n                    <fd-icon [glyph]=\"_headerArrowGlyph\" (click)=\"_exitTeamMembersMode()\"></fd-icon>\n                    {{ viewService.team?.name ?? '' }} ({{ viewService.team?.members?.length ?? 0 }})\n                }\n                @if (viewService.isUserDetailsMode) {\n                    <fd-icon [glyph]=\"_headerArrowGlyph\" (click)=\"_exitUserDetailsMode()\"></fd-icon>\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderDetail' | fdTranslate }}\n                }\n            </p>\n            @if (_selectMode && !_userToShowDetails) {\n                <fdp-search-field\n                    [placeholder]=\"'platformApprovalFlow.addNodeSearchPlaceholder' | fdTranslate\"\n                    [suggestions]=\"[]\"\n                    (inputChange)=\"_onSearchStringChange($event.text)\"\n                ></fdp-search-field>\n            }\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body [class.fd-dialog__body--auto-height]=\"viewService.isUserDetailsMode\">\n        @if (!_selectMode) {\n            @if (_data.showNodeTypeSelect) {\n                <div fd-form-item>\n                    <label fd-form-label>\n                        {{ 'platformApprovalFlow.addNodeDialogNodeType' | fdTranslate }}\n                    </label>\n                    <fd-select [(value)]=\"_nodeType\">\n                        @for (option of _nodeTypesArray; track option) {\n                            @switch (option) {\n                                @case (_nodeTypes.SERIAL) {\n                                    <li fd-option [value]=\"option\">\n                                        {{ 'platformApprovalFlow.addNodeDialogNodeTypeSerial' | fdTranslate }}\n                                    </li>\n                                }\n                                @case (_nodeTypes.PARALLEL) {\n                                    <li fd-option [value]=\"option\">\n                                        {{ 'platformApprovalFlow.addNodeDialogNodeTypeParallel' | fdTranslate }}\n                                    </li>\n                                }\n                            }\n                        }\n                    </fd-select>\n                </div>\n            }\n            <div fd-form-item>\n                <label fd-form-label>\n                    {{ 'platformApprovalFlow.addNodeDialogApproverType' | fdTranslate }}\n                </label>\n                <fd-select [(value)]=\"_approverType\">\n                    @for (option of _approverTypesArray; track option) {\n                        @switch (option) {\n                            @case (_approverTypes.SINGLE_USER) {\n                                <li fd-option [value]=\"option\">\n                                    {{ 'platformApprovalFlow.addNodeDialogApproverTypeUser' | fdTranslate }}\n                                </li>\n                            }\n                            @case (_approverTypes.ANYONE) {\n                                <li fd-option [value]=\"option\">\n                                    {{ 'platformApprovalFlow.addNodeDialogApproverTypeTeamAnyone' | fdTranslate }}\n                                </li>\n                            }\n                            @case (_approverTypes.EVERYONE) {\n                                <li fd-option [value]=\"option\">\n                                    {{ 'platformApprovalFlow.addNodeDialogApproverTypeTeamEveryone' | fdTranslate }}\n                                </li>\n                            }\n                        }\n                    }\n                </fd-select>\n            </div>\n            <div fd-form-item>\n                <label fd-form-label>{{ 'platformApprovalFlow.addNodeDialogUserOrTeam' | fdTranslate }}</label>\n                @if (_isSingleUserMode) {\n                    <fd-multi-input\n                        [showAllButton]=\"false\"\n                        [dropdownValues]=\"_selectedApprovers\"\n                        [(ngModel)]=\"_selectedApprovers\"\n                        [displayFn]=\"_displayUserFn\"\n                        (openChange)=\"_goToSelectMode()\"\n                        (selectedChange)=\"_setSelectedApprovers($event)\"\n                    ></fd-multi-input>\n                }\n                @if (!_isSingleUserMode) {\n                    <fd-multi-input\n                        [showAllButton]=\"false\"\n                        [dropdownValues]=\"_selectedTeamArray\"\n                        [(ngModel)]=\"_selectedTeamArray\"\n                        [displayFn]=\"_displayTeamFn\"\n                        (openChange)=\"_goToSelectMode()\"\n                    ></fd-multi-input>\n                }\n            </div>\n            @if (_nodeType === _nodeTypes.PARALLEL) {\n                <div fd-form-item>\n                    <fd-checkbox [(ngModel)]=\"_addToNextSerial\">\n                        {{ 'platformApprovalFlow.addNodeDialogAddToNext' | fdTranslate }}\n                    </fd-checkbox>\n                </div>\n            }\n            @if (_checkDueDate) {\n                <div fd-form-item>\n                    <label fd-form-label>{{ 'platformApprovalFlow.addNodeDialogDueDate' | fdTranslate }}</label>\n                    <fd-date-picker type=\"single\" [state]=\"!this._dueDate ? 'error' : null\" [(ngModel)]=\"_dueDate\">\n                    </fd-date-picker>\n                </div>\n            }\n        }\n        @if (_selectMode) {\n            @if (viewService.isSelectTeamMode) {\n                @if (!_data.teamDataSource.isDataLoading) {\n                    <fdp-approval-flow-team-list\n                        [isRtl]=\"_data.rtl\"\n                        [teams]=\"_teams\"\n                        [selectedTeamId]=\"_selectedTeam?.id\"\n                        (onTeamClick)=\"_viewTeamMembers($event)\"\n                        (onTeamRadioClick)=\"_setSelectedTeam($event)\"\n                    ></fdp-approval-flow-team-list>\n                } @else {\n                    <fd-busy-indicator [loading]=\"true\" [block]=\"true\"> </fd-busy-indicator>\n                }\n            }\n            @if (viewService.isSelectUserMode || viewService.isTeamMembersMode) {\n                @if (viewService.isSelectUserMode || !_data.userDataSource.isDataLoading) {\n                    <fdp-approval-flow-user-list\n                        [users]=\"viewService.isSelectUserMode ? _approvers : _filteredTeamMembers\"\n                        [isSelectable]=\"viewService.isSelectUserMode\"\n                        [selectedUsers]=\"_selectedApprovers\"\n                        (onUserClick)=\"_seeUserDetails($event)\"\n                        (onSelectionChange)=\"_selectedApprovers = $event\"\n                    ></fdp-approval-flow-user-list>\n                } @else {\n                    <fd-busy-indicator [loading]=\"true\" [block]=\"true\"> </fd-busy-indicator>\n                }\n            }\n            @if (viewService.isUserDetailsMode && _userToShowDetails) {\n                <fdp-approval-flow-user-details\n                    [user]=\"_userToShowDetails\"\n                    [detailsTemplate]=\"_data.userDetailsTemplate\"\n                    [details]=\"_userToShowDetailsData$\"\n                ></fdp-approval-flow-user-details>\n            }\n        }\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        @if (!_selectMode) {\n            <fd-button-bar\n                fdType=\"emphasized\"\n                [label]=\"'platformApprovalFlow.addNodeAddActionBtnLabel' | fdTranslate\"\n                [disabled]=\"_isMainSubmitButtonDisabled\"\n                (click)=\"_submit()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                fdkInitialFocus\n                fdType=\"transparent\"\n                [label]=\"'platformApprovalFlow.addNodeCancelActionBtnLabel' | fdTranslate\"\n                (click)=\"dialogRef.close()\"\n            ></fd-button-bar>\n        }\n        @if (_selectMode) {\n            @if (viewService.isSelectUserMode) {\n                <fd-button-bar\n                    fdType=\"emphasized\"\n                    [label]=\"'platformApprovalFlow.addNodeSelectApproverActionBtnLabel' | fdTranslate\"\n                    [disabled]=\"!_selectedApprovers.length\"\n                    (click)=\"_confirmSelectedApprovers()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitSelectMode()\"\n                ></fd-button-bar>\n            }\n            @if (viewService.isSelectTeamMode) {\n                <fd-button-bar\n                    fdType=\"emphasized\"\n                    [label]=\"'platformApprovalFlow.addNodeSelectApproverActionBtnLabel' | fdTranslate\"\n                    [disabled]=\"!_selectedTeam && !viewService.team\"\n                    (click)=\"_confirmSelectedTeam()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitSelectMode()\"\n                ></fd-button-bar>\n            }\n            @if (viewService.isTeamMembersMode) {\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitTeamMembersMode()\"\n                ></fd-button-bar>\n            }\n            @if (viewService.isUserDetailsMode) {\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitUserDetailsMode()\"\n                ></fd-button-bar>\n            }\n        }\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-approval-flow-dialog a{color:#0a6ed1;color:var(--sapLinkColor, #0a6ed1)}.fdp-approval-flow-dialog .fd-list--byline .fd-list__byline-left{width:100%}.fdp-approval-flow-dialog fd-popover{width:100%}.fdp-approval-flow-dialog fd-dialog fd-dialog-header{margin-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header .fd-bar--header{flex-direction:column;padding-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p{font-size:1rem;margin:.65rem 0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p fd-icon{font-size:.875rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);position:relative;cursor:pointer;margin-right:.75rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search{margin-bottom:0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search .fd-bar--header{min-height:2.5rem;height:auto}.fdp-approval-flow-dialog fd-dialog fd-avatar{margin-right:.652rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body{padding:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body fdp-list{display:block;margin-left:-1rem;margin-right:-1rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item .fd-checkbox__label{position:relative;left:.3125rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item fd-avatar{margin-left:.1875rem}.fdp-approval-flow-dialog .fd-form-item{margin-bottom:1rem}[dir=rtl] .fdp-approval-flow-dialog fd-dialog-header p fd-icon,.fdp-approval-flow-dialog[dir=rtl] fd-dialog-header p fd-icon{margin-right:0;margin-left:.75rem}[dir=rtl] .fdp-approval-flow-dialog fd-avatar,.fdp-approval-flow-dialog[dir=rtl] fd-avatar{margin-right:0;margin-left:.652rem}[dir=rtl] .fdp-approval-flow-dialog fdp-standard-list-item .fd-checkbox__label,.fdp-approval-flow-dialog[dir=rtl] fdp-standard-list-item .fd-checkbox__label{left:auto;right:.3125rem}\n", ".fdp-approval-flow-add-node .fd-dialog__body{width:20rem;height:27rem}.fdp-approval-flow-add-node .fd-dialog__body--auto-height{height:auto}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: ApprovalFlowAddNodeViewService }, { type: i0.ChangeDetectorRef }] });
+    setCurrentView(view) {
+        this.currentView = view;
+        this.onViewChange.emit();
+    }
+    /** @hidden */
+    resetView() {
+        this.currentView = undefined;
+        this.onViewChange.emit();
+    }
+    /** @hidden */
+    selectTeam(team) {
+        this.selectedTeam = team;
+    }
+    /** @hidden */
+    resetTeam() {
+        this.selectedTeam = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowAddNodeViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowAddNodeViewService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowAddNodeViewService, decorators: [{
+            type: Injectable
+        }] });
 
+var APPROVAL_FLOW_NODE_TYPES;
+(function (APPROVAL_FLOW_NODE_TYPES) {
+    APPROVAL_FLOW_NODE_TYPES["SERIAL"] = "SERIAL";
+    APPROVAL_FLOW_NODE_TYPES["PARALLEL"] = "PARALLEL";
+})(APPROVAL_FLOW_NODE_TYPES || (APPROVAL_FLOW_NODE_TYPES = {}));
+var APPROVAL_FLOW_APPROVER_TYPES;
+(function (APPROVAL_FLOW_APPROVER_TYPES) {
+    APPROVAL_FLOW_APPROVER_TYPES["SINGLE_USER"] = "SINGLE_USER";
+    APPROVAL_FLOW_APPROVER_TYPES["ANYONE"] = "ANYONE";
+    APPROVAL_FLOW_APPROVER_TYPES["EVERYONE"] = "EVERYONE";
+})(APPROVAL_FLOW_APPROVER_TYPES || (APPROVAL_FLOW_APPROVER_TYPES = {}));
 /**
  * @deprecated
- * ApprovalFlowApproverDetails component is deprecated since version 0.40.0
+ * ApprovalFlowAddNode component is deprecated since version 0.40.0
  */
-class ApprovalFlowApproverDetailsComponent {
+class ApprovalFlowAddNodeComponent {
     /** @hidden */
-    constructor(dialogRef, _cdr) {
+    constructor(dialogRef, viewService, _cdr) {
         this.dialogRef = dialogRef;
+        this.viewService = viewService;
         this._cdr = _cdr;
         /** @hidden */
-        this._isListMode = false;
+        this._nodeType = APPROVAL_FLOW_NODE_TYPES.SERIAL;
         /** @hidden */
-        this._listItems = [];
+        this._nodeTypes = APPROVAL_FLOW_NODE_TYPES;
         /** @hidden */
-        this._selectedUsers = [];
+        this._nodeTypesArray = Object.keys(APPROVAL_FLOW_NODE_TYPES);
+        /** @hidden */
+        this._approverType = APPROVAL_FLOW_APPROVER_TYPES.SINGLE_USER;
+        /** @hidden */
+        this._approverTypes = APPROVAL_FLOW_APPROVER_TYPES;
+        /** @hidden */
+        this._approverTypesArray = Object.keys(APPROVAL_FLOW_APPROVER_TYPES);
+        /** @hidden */
+        this._dueDate = FdDate.getNow();
+        /** @hidden */
+        this._selectMode = false;
+        /** @hidden */
+        this._approvers = [];
+        /** @hidden */
+        this._teams = [];
+        /** @hidden */
+        this._selectedApprovers = [];
+        /** @hidden */
+        this._selectedTeamArray = [];
+        /** @hidden */
+        this._selectedTeamMembers = [];
+        /** @hidden */
+        this._filteredTeamMembers = [];
+        /** @hidden */
+        this._checkDueDate = false;
+        /** @hidden */
+        this._displayUserFn = displayUserFn;
+        /** @hidden */
+        this._displayTeamFn = displayTeamFn;
+        /** @hidden */
+        this._trackByFn = trackByFn;
+        /** @hidden */
+        this._addToNextSerial = false;
     }
     /** @hidden */
     get _data() {
         return this.dialogRef.data;
     }
     /** @hidden */
-    ngOnInit() {
-        this._isListMode = (this._data.node?.approvers.length ?? 0) > 1;
-        if (this._isListMode) {
-            this._setListItems(this._data.node?.approvers ?? []);
-        }
-        else {
-            const user = this._data.watcher || this._data.node?.approvers[0];
-            if (user) {
-                this._seeUserDetails(user);
-            }
-            else {
-                this.dialogRef.close();
-            }
-        }
-    }
-    /** @hidden */
-    _setListItems(items = []) {
-        this._listItems = [...items];
-        this._cdr.detectChanges();
-    }
-    /** @hidden */
-    _exitUserDetailsMode() {
-        this._userToShowDetails = undefined;
-        this._isListMode = true;
+    get _isSingleUserMode() {
+        return this._approverType === this._approverTypes.SINGLE_USER;
     }
     /** @hidden */
-    _seeUserDetails(user) {
-        this._userToShowDetails = user;
-        this._userToShowDetailsData$ = this._data.userDataSource.dataProvider.getOne(new Map([['id', user.id]]));
-        this._isListMode = false;
-        this._selectedUsers = [];
-        this._cdr.detectChanges();
+    get _isMainSubmitButtonDisabled() {
+        const approvers = this._isSingleUserMode ? this._selectedApprovers : this._selectedTeamArray;
+        return !approvers.length || (this._checkDueDate && !this._dueDate);
     }
     /** @hidden */
-    _sendReminder() {
-        const reminderTargets = this._isListMode ? this._selectedUsers : this._data.node?.approvers;
-        this.dialogRef.close(reminderTargets);
+    get _headerArrowGlyph() {
+        return 'navigation-' + (this._data.rtl ? 'right' : 'left') + '-arrow';
     }
     /** @hidden */
-    _onSearchStringChange(searchString) {
-        if (!searchString) {
-            this._setListItems(this._data.node?.approvers);
-            return;
-        }
-        this._setListItems(this._data.node?.approvers.filter((user) => filterByName(user, searchString)));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowApproverDetailsComponent, deps: [{ token: i1$1.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowApproverDetailsComponent, isStandalone: true, selector: "fdp-approval-flow-approver-details", host: { classAttribute: "fdp-approval-flow-dialog fdp-approval-flow-approver-details" }, ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header [class.show-search]=\"!_userToShowDetails && _isListMode\">\n        <ng-template fdkTemplate=\"header\">\n            <p>\n                @if (_userToShowDetails && _data.node?.approvers && _data.node!.approvers!.length > 1) {\n                    <fd-icon\n                        [glyph]=\"'navigation-' + (_data.rtl ? 'right' : 'left') + '-arrow'\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        (click)=\"_exitUserDetailsMode()\"\n                        (keyup.space)=\"_exitUserDetailsMode()\"\n                        (keyup.enter)=\"_exitUserDetailsMode()\"\n                    ></fd-icon>\n                }\n                @if (_isListMode && !_userToShowDetails) {\n                    {{ _data.node?.description }} ({{ _data.node?.approvers?.length ?? 0 }})\n                } @else {\n                    {{ 'platformApprovalFlow.userDetailsHeader' | fdTranslate }}\n                }\n            </p>\n            @if (!_userToShowDetails && _isListMode) {\n                <fdp-search-field\n                    [placeholder]=\"'platformApprovalFlow.addNodeSearchPlaceholder' | fdTranslate\"\n                    fdCompact\n                    [suggestions]=\"[]\"\n                    (inputChange)=\"_onSearchStringChange($event.text)\"\n                ></fdp-search-field>\n            }\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body>\n        @if (_userToShowDetails) {\n            <fdp-approval-flow-user-details\n                [user]=\"_userToShowDetails\"\n                [detailsTemplate]=\"_data.userDetailsTemplate\"\n                [details]=\"_userToShowDetailsData$\"\n            ></fdp-approval-flow-user-details>\n        }\n        @if (_isListMode) {\n            <fdp-approval-flow-user-list\n                [users]=\"_listItems\"\n                (onUserClick)=\"_seeUserDetails($event)\"\n                (onSelectionChange)=\"_selectedUsers = $event\"\n            ></fdp-approval-flow-user-list>\n        }\n    </fd-dialog-body>\n    <fd-dialog-footer fdCompact>\n        @if (_isListMode || (_userToShowDetails && _data.node?.approvers?.length === 1)) {\n            <fd-button-bar\n                fdType=\"emphasized\"\n                [label]=\"'platformApprovalFlow.userDetailsSendReminderBtnLabel' | fdTranslate\"\n                [disabled]=\"!_data.allowSendReminder || (_isListMode && !_selectedUsers.length)\"\n                (click)=\"_sendReminder()\"\n            ></fd-button-bar>\n        }\n        <fd-button-bar\n            fdkInitialFocus\n            fdType=\"transparent\"\n            [label]=\"'platformApprovalFlow.userDetailsCancelBtnLabel' | fdTranslate\"\n            (click)=\"dialogRef.close('Cancel')\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-approval-flow-dialog a{color:#0a6ed1;color:var(--sapLinkColor, #0a6ed1)}.fdp-approval-flow-dialog .fd-list--byline .fd-list__byline-left{width:100%}.fdp-approval-flow-dialog fd-popover{width:100%}.fdp-approval-flow-dialog fd-dialog fd-dialog-header{margin-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header .fd-bar--header{flex-direction:column;padding-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p{font-size:1rem;margin:.65rem 0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p fd-icon{font-size:.875rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);position:relative;cursor:pointer;margin-right:.75rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search{margin-bottom:0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search .fd-bar--header{min-height:2.5rem;height:auto}.fdp-approval-flow-dialog fd-dialog fd-avatar{margin-right:.652rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body{padding:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body fdp-list{display:block;margin-left:-1rem;margin-right:-1rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item .fd-checkbox__label{position:relative;left:.3125rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item fd-avatar{margin-left:.1875rem}.fdp-approval-flow-dialog .fd-form-item{margin-bottom:1rem}[dir=rtl] .fdp-approval-flow-dialog fd-dialog-header p fd-icon,.fdp-approval-flow-dialog[dir=rtl] fd-dialog-header p fd-icon{margin-right:0;margin-left:.75rem}[dir=rtl] .fdp-approval-flow-dialog fd-avatar,.fdp-approval-flow-dialog[dir=rtl] fd-avatar{margin-right:0;margin-left:.652rem}[dir=rtl] .fdp-approval-flow-dialog fdp-standard-list-item .fd-checkbox__label,.fdp-approval-flow-dialog[dir=rtl] fdp-standard-list-item .fd-checkbox__label{left:auto;right:.3125rem}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: ApprovalFlowUserDetailsComponent, selector: "fdp-approval-flow-user-details", inputs: ["user", "details", "detailsTemplate"] }, { kind: "component", type: ApprovalFlowUserListComponent, selector: "fdp-approval-flow-user-list", inputs: ["users", "selectedUsers", "isSelectable"], outputs: ["onUserClick", "onSelectionChange"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowApproverDetailsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fdp-approval-flow-approver-details', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'fdp-approval-flow-dialog fdp-approval-flow-approver-details'
-                    }, standalone: true, imports: [
-                        DialogComponent,
-                        DialogHeaderComponent,
-                        TemplateDirective,
-                        IconComponent,
-                        SearchFieldComponent,
-                        ContentDensityDirective,
-                        CdkScrollable,
-                        ScrollbarDirective,
-                        DialogBodyComponent,
-                        ApprovalFlowUserDetailsComponent,
-                        ApprovalFlowUserListComponent,
-                        DialogFooterComponent,
-                        ButtonBarComponent,
-                        FdTranslatePipe
-                    ], template: "<fd-dialog>\n    <fd-dialog-header [class.show-search]=\"!_userToShowDetails && _isListMode\">\n        <ng-template fdkTemplate=\"header\">\n            <p>\n                @if (_userToShowDetails && _data.node?.approvers && _data.node!.approvers!.length > 1) {\n                    <fd-icon\n                        [glyph]=\"'navigation-' + (_data.rtl ? 'right' : 'left') + '-arrow'\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        (click)=\"_exitUserDetailsMode()\"\n                        (keyup.space)=\"_exitUserDetailsMode()\"\n                        (keyup.enter)=\"_exitUserDetailsMode()\"\n                    ></fd-icon>\n                }\n                @if (_isListMode && !_userToShowDetails) {\n                    {{ _data.node?.description }} ({{ _data.node?.approvers?.length ?? 0 }})\n                } @else {\n                    {{ 'platformApprovalFlow.userDetailsHeader' | fdTranslate }}\n                }\n            </p>\n            @if (!_userToShowDetails && _isListMode) {\n                <fdp-search-field\n                    [placeholder]=\"'platformApprovalFlow.addNodeSearchPlaceholder' | fdTranslate\"\n                    fdCompact\n                    [suggestions]=\"[]\"\n                    (inputChange)=\"_onSearchStringChange($event.text)\"\n                ></fdp-search-field>\n            }\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body>\n        @if (_userToShowDetails) {\n            <fdp-approval-flow-user-details\n                [user]=\"_userToShowDetails\"\n                [detailsTemplate]=\"_data.userDetailsTemplate\"\n                [details]=\"_userToShowDetailsData$\"\n            ></fdp-approval-flow-user-details>\n        }\n        @if (_isListMode) {\n            <fdp-approval-flow-user-list\n                [users]=\"_listItems\"\n                (onUserClick)=\"_seeUserDetails($event)\"\n                (onSelectionChange)=\"_selectedUsers = $event\"\n            ></fdp-approval-flow-user-list>\n        }\n    </fd-dialog-body>\n    <fd-dialog-footer fdCompact>\n        @if (_isListMode || (_userToShowDetails && _data.node?.approvers?.length === 1)) {\n            <fd-button-bar\n                fdType=\"emphasized\"\n                [label]=\"'platformApprovalFlow.userDetailsSendReminderBtnLabel' | fdTranslate\"\n                [disabled]=\"!_data.allowSendReminder || (_isListMode && !_selectedUsers.length)\"\n                (click)=\"_sendReminder()\"\n            ></fd-button-bar>\n        }\n        <fd-button-bar\n            fdkInitialFocus\n            fdType=\"transparent\"\n            [label]=\"'platformApprovalFlow.userDetailsCancelBtnLabel' | fdTranslate\"\n            (click)=\"dialogRef.close('Cancel')\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-approval-flow-dialog a{color:#0a6ed1;color:var(--sapLinkColor, #0a6ed1)}.fdp-approval-flow-dialog .fd-list--byline .fd-list__byline-left{width:100%}.fdp-approval-flow-dialog fd-popover{width:100%}.fdp-approval-flow-dialog fd-dialog fd-dialog-header{margin-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header .fd-bar--header{flex-direction:column;padding-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p{font-size:1rem;margin:.65rem 0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p fd-icon{font-size:.875rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);position:relative;cursor:pointer;margin-right:.75rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search{margin-bottom:0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search .fd-bar--header{min-height:2.5rem;height:auto}.fdp-approval-flow-dialog fd-dialog fd-avatar{margin-right:.652rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body{padding:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body fdp-list{display:block;margin-left:-1rem;margin-right:-1rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item .fd-checkbox__label{position:relative;left:.3125rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item fd-avatar{margin-left:.1875rem}.fdp-approval-flow-dialog .fd-form-item{margin-bottom:1rem}[dir=rtl] .fdp-approval-flow-dialog fd-dialog-header p fd-icon,.fdp-approval-flow-dialog[dir=rtl] fd-dialog-header p fd-icon{margin-right:0;margin-left:.75rem}[dir=rtl] .fdp-approval-flow-dialog fd-avatar,.fdp-approval-flow-dialog[dir=rtl] fd-avatar{margin-right:0;margin-left:.652rem}[dir=rtl] .fdp-approval-flow-dialog fdp-standard-list-item .fd-checkbox__label,.fdp-approval-flow-dialog[dir=rtl] fdp-standard-list-item .fd-checkbox__label{left:auto;right:.3125rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: i0.ChangeDetectorRef }] });
-
-/** Algorithm in short:
- * 1. Find all possible paths (longest path length = amount of the columns in the graph)
- * 2. Trim paths (remove blank nodes at the end of the paths)
- * 3. Make all paths the same length (= longest path length) to make every unique node be present at the same index across all paths
- * 4. Sort paths by their likeness between each other to avoid paths crossing
- * 5. Remove "duplicate" nodes in paths (make every unique node be present only once across all paths)
- * 6. Remove empty paths
- * 7. Transform paths into the columns
- * 8. Trim columns (remove space nodes at the end of columns)
- * 9. Remove columns which contain only blank and empty nodes
- * 10. Transform columns into the graph columns
- */
-function generateApprovalFlowGraph(nodes) {
-    const graph = { columns: [], errors: false };
-    if (!nodes.length) {
-        return graph;
-    }
-    const rootNodes = findRootNodes(nodes);
-    const finalNodes = findFinalNodes(nodes);
-    if (!rootNodes.length || !finalNodes.length) {
-        console.warn(`Err: Not possible to build graph because root or final nodes aren't present!`);
-        graph.errors = true;
-        return graph;
-    }
-    const paths = getPaths(rootNodes, nodes);
-    if (!paths.length) {
-        console.warn('Err: Not possible to build graph!');
-        graph.errors = true;
-        return graph;
-    }
-    const trimmedPaths = trimPaths(paths);
-    const sameLengthPaths = makePathsSameLength(trimmedPaths);
-    const pathsBySimilarity = sortPaths(sameLengthPaths);
-    const pathsWithUniqueNodes = removeDuplicateNodes(pathsBySimilarity);
-    const notEmptyPaths = removeEmptyPaths(pathsWithUniqueNodes);
-    const columns = getColumnsFromPaths(notEmptyPaths);
-    const trimmedColumns = trimColumns(columns);
-    const notEmptyColumns = removeEmptyColumns(trimmedColumns);
-    graph.columns = getGraphColumnsFromPaths(notEmptyColumns);
-    return graph;
-}
-/** Generate graph metadata */
-function generateApprovalFlowGraphMetadata(graph) {
-    const nodes = getGraphNodes(graph);
-    const metadata = {};
-    graph.columns.forEach((column, columnIndex) => {
-        column.nodes.forEach((node, nodeIndex) => {
-            const parents = getParentNodes(node, nodes);
-            const parentsApproved = parents.length ? parents.every((_node) => isNodeApproved(_node)) : false;
-            const isRoot = !parents.length && !node.space;
-            const isFinal = !node.targets.length && !node.space;
-            const parallelEnd = parents.length > 1;
-            const firstOfMultipleRootNodes = columnIndex === 0 && column.nodes.length > 1 && nodeIndex === 0;
-            const firstOfMultipleFinalNodes = columnIndex === graph.columns.length - 1 && column.nodes.length > 1 && nodeIndex === 0;
-            metadata[node.id] = {
-                parents,
-                isRoot,
-                isFinal,
-                parallelStart: node.targets.length > 1,
-                parallelEnd,
-                columnIndex,
-                nodeIndex,
-                canAddNodeBefore: !isNodeStarted(node) && !parentsApproved,
-                canAddNodeBeforeAll: isRoot && firstOfMultipleRootNodes,
-                canAddNodeAfter: !isNodeApproved(node),
-                canAddNodeAfterAll: !isNodeApproved(node) && ((isFinal && firstOfMultipleFinalNodes) || (parallelEnd && node.blank)),
-                canAddParallel: !isNodeApproved(node),
-                isVerticalLineBeforeSolid: node.space && graph.columns[columnIndex - 1]?.allNodesApproved,
-                isVerticalLineAfterSolid: node.space && column.allNodesApproved,
-                firstOfMultipleRootNodes,
-                firstOfMultipleFinalNodes,
-                rootNodesApproved: columnIndex === 0 && column.allNodesApproved
-            };
-        });
-    });
-    /* Some flags can be calculated only on the second run, when all nodes already have base metadata */
-    graph.columns.forEach((column) => {
-        column.nodes.forEach((node, nodeIndex) => {
-            const nodeMetadata = metadata[node.id];
-            nodeMetadata.isLastInParallel = metadata[node.targets[0]]?.parallelEnd;
-            nodeMetadata.isFirstInParallel = metadata[nodeMetadata.parents[0]?.id]?.parallelStart;
-            const columnIndex = column.index;
-            const graphPrevColumn = columnIndex ? graph.columns[columnIndex - 1] : undefined;
-            const graphNextColumn = columnIndex ? graph.columns[columnIndex + 1] : undefined;
-            const prevHNode = graphPrevColumn?.nodes[nodeIndex];
-            const nextHNode = graphNextColumn?.nodes[nodeIndex];
-            nodeMetadata.renderAddNodeAfterButton =
-                nodeMetadata.canAddNodeAfter &&
-                    (nodeMetadata.isFinal ||
-                        nodeMetadata.parallelStart ||
-                        nodeMetadata.isLastInParallel ||
-                        nextHNode?.blank);
-            const nextColumnNodes = graphNextColumn?.nodes;
-            if (nodeMetadata.parallelStart && nextColumnNodes) {
-                const children = nextColumnNodes.filter((_node) => node.targets.includes(_node.id));
-                const firstChildIndex = nextColumnNodes.findIndex((_node) => _node.id === children[0].id);
-                const lastChildIndex = nextColumnNodes.findIndex((_node) => _node.id === children[children.length - 1].id);
-                for (let i = firstChildIndex + 1; i <= lastChildIndex; i++) {
-                    metadata[nextColumnNodes[i].id].renderVerticalLineBefore = true;
+    ngOnInit() {
+        // triggering initial loading of data in data sources.
+        this._data.teamDataSource.match();
+        this._data.userDataSource.match();
+        const teams$ = this._data.teamDataSource.open();
+        const approvers$ = this._data.userDataSource.open();
+        this._dataSourceSub = combineLatest([teams$, approvers$]).subscribe(([teams, approvers]) => {
+            this._teams = teams;
+            this._approvers = approvers;
+            if (this._data.isEdit) {
+                this._checkDueDate = !!this._data.checkDueDate;
+                if (this._checkDueDate && this._data.node?.dueDate) {
+                    this._dueDate = FdDate.getFdDateByDate(new Date(this._data.node.dueDate));
                 }
-            }
-            const prevColumnNodes = graphPrevColumn?.nodes;
-            if (nodeMetadata.parallelEnd && prevColumnNodes) {
-                const firstParentIndex = prevColumnNodes.findIndex((_node) => _node.id === nodeMetadata.parents[0].id);
-                const lastParentIndex = prevColumnNodes.findIndex((_node) => _node.id === nodeMetadata.parents[nodeMetadata.parents.length - 1].id);
-                for (let i = firstParentIndex + 1; i <= lastParentIndex; i++) {
-                    metadata[prevColumnNodes[i].id].renderVerticalLineAfter = true;
+                this._selectedApprovers = [...(this._data.node?.approvers ?? [])];
+                const team = this._data.node?.approvalTeamId &&
+                    this._teams.find((t) => t.id === this._data.node?.approvalTeamId);
+                if (team) {
+                    this.viewService.selectTeam(team);
+                    this._selectedTeam = team;
+                    this._selectedTeamArray = [team];
+                    this._approverType = this._data.node?.isEveryoneApprovalNeeded
+                        ? this._approverTypes.EVERYONE
+                        : this._approverTypes.ANYONE;
                 }
             }
-            nodeMetadata.renderVerticalLineBefore = !nodeMetadata.renderVerticalLineBefore
-                ? nodeIndex > 0 && !prevHNode
-                : true;
-            nodeMetadata.renderVerticalLineAfter = !nodeMetadata.renderVerticalLineAfter
-                ? nodeIndex > 0 && !nextHNode
-                : true;
+            this._cdr.detectChanges();
         });
-    });
-    return metadata;
-}
-function findRootNodes(nodes) {
-    return nodes.filter((node) => nodes.every((n) => !isNodeTargetsIncludeId(n, node.id)));
-}
-function findFinalNodes(nodes) {
-    return nodes.filter((node) => !node.targets.length);
-}
-/** Find all possible paths (longest path length = amount of the columns in the graph) */
-function getPaths(rootNodes, nodes) {
-    const paths = [];
-    const queue = [];
-    for (let i = 0; i < rootNodes.length; i++) {
-        queue.push([rootNodes[i]]);
-        while (queue.length) {
-            const path = queue.pop();
-            let lastNodeInPath;
-            if (path) {
-                lastNodeInPath = path[path.length - 1];
-            }
-            /** Indicates about an error */
-            if (!lastNodeInPath) {
-                return [];
-            }
-            if (!lastNodeInPath.targets.length) {
-                paths.push(path);
-            }
-            else {
-                lastNodeInPath.targets.forEach((targetId) => {
-                    const targetNode = nodes.find((node) => node.id === targetId);
-                    if (!targetNode) {
-                        return;
-                    }
-                    const newPath = [...path, targetNode];
-                    queue.push(newPath);
-                });
-            }
+        this._viewChangeSub = this.viewService.onViewChange.subscribe(() => {
+            this._onSearchStringChange('');
+            this._cdr.detectChanges();
+        });
+        switch (this._data.nodeTarget) {
+            case 'empty':
+            case 'before':
+            case 'after':
+                this._nodeType = this._nodeTypes.SERIAL;
+                break;
+            case 'parallel':
+                this._nodeType = this._nodeTypes.PARALLEL;
+                break;
         }
     }
-    return paths;
-}
-/** Trim paths (remove blank nodes at the end of the paths) */
-function trimPaths(paths) {
-    const processedPaths = [];
-    paths.forEach((path) => {
-        let indexToSlice = path.length - 1;
-        for (let i = path.length - 1; i > 0; --i) {
-            if (path[i].blank) {
-                indexToSlice = i - 1;
-            }
-            else {
-                break;
-            }
+    /** @hidden */
+    ngOnDestroy() {
+        this._viewChangeSub.unsubscribe();
+        this._dataSourceSub.unsubscribe();
+        this._data.userDataSource.close();
+        this._data.teamDataSource.close();
+    }
+    /** @hidden */
+    _goToSelectMode() {
+        this._selectMode = true;
+        this.viewService.setCurrentView(this._isSingleUserMode ? VIEW_MODES.SELECT_USER : VIEW_MODES.SELECT_TEAM);
+        this._cdr.detectChanges();
+    }
+    /** @hidden */
+    _exitSelectMode() {
+        if (this._selectedApprovers.length && !this._data.node?.approvers.length) {
+            this._selectedApprovers = [];
         }
-        path[indexToSlice].targets = [];
-        processedPaths.push(path.slice(0, indexToSlice + 1));
-    });
-    return processedPaths;
-}
-/** Make all paths the same length (= longest path length) to make every unique node be present at the same index across all paths */
-function makePathsSameLength(paths) {
-    const processedPaths = [];
-    const pathLengths = paths.map((path) => path.length);
-    const longestPathLength = Math.max(...pathLengths);
-    paths.forEach((path) => {
-        if (path.length === longestPathLength) {
-            processedPaths.push(path);
-            return;
+        if (!this._data.isEdit && !this._data.node?.approvalTeamId) {
+            this.viewService.resetTeam();
         }
-        path.forEach((node, nodeIndex) => {
-            /** Try to get blank nodes from already processed paths as paths may be the same within some part */
-            let blankNodes = getBlankNodesAfterNode(node, processedPaths);
-            if (blankNodes.length && blankNodes[0].id !== path[nodeIndex + 1]?.id) {
-                path.splice(nodeIndex + 1, 0, ...blankNodes);
-                return;
-            }
-            const nodeIndexInPaths = paths.map((_path) => _path.indexOf(node));
-            const mostFarNodeIndexInPaths = Math.max(...nodeIndexInPaths);
-            if (nodeIndex < mostFarNodeIndexInPaths) {
-                blankNodes = getBlankNodes(mostFarNodeIndexInPaths - nodeIndex, path[nodeIndex - 1].status);
-                blankNodes[blankNodes.length - 1].targets = [node.id];
-                path[nodeIndex - 1].targets = [blankNodes[0].id];
-                path.splice(nodeIndex, 0, ...blankNodes);
-                return;
-            }
-            if (nodeIndex === mostFarNodeIndexInPaths && nodeIndex === path.length - 1) {
-                blankNodes = getBlankNodes(longestPathLength - path.length, path[nodeIndex].status);
-                path[nodeIndex].targets = [blankNodes[0].id];
-                path.splice(nodeIndex + 1, 0, ...blankNodes);
-                return;
-            }
-        });
-        processedPaths.push(path);
-    });
-    return processedPaths;
-}
-/** Try to get blank nodes from already processed paths as paths may be the same within some part */
-function getBlankNodesAfterNode(node, paths) {
-    const blankNodes = [];
-    const pathWithBlankNodeAfter = paths.find((path) => {
-        const nodeIndex = path.indexOf(node);
-        return nodeIndex > -1 && path[nodeIndex + 1]?.blank;
-    });
-    if (pathWithBlankNodeAfter) {
-        const nodeIndex = pathWithBlankNodeAfter.indexOf(node) + 1;
-        const nextNotBlankNodeIndex = pathWithBlankNodeAfter.findIndex((_node, _index) => _index > nodeIndex && !_node.blank);
-        blankNodes.push(...pathWithBlankNodeAfter.slice(nodeIndex, nextNotBlankNodeIndex > 0 ? nextNotBlankNodeIndex : undefined));
+        this._selectMode = false;
+        this.viewService.resetView();
+        this._cdr.detectChanges();
     }
-    return blankNodes;
-}
-/** Generate blank nodes sequential */
-function getBlankNodes(count, status) {
-    const nodes = [];
-    let node;
-    let nodeId;
-    for (let i = count; i > 0; i--) {
-        node = Object.assign({}, getBlankApprovalGraphNode(), { targets: nodeId ? [nodeId] : [], status });
-        nodeId = node.id;
-        nodes.unshift(node);
+    /** @hidden */
+    _setSelectedApprovers(approvers) {
+        this._selectedApprovers = approvers;
+        this._confirmSelectedApprovers();
     }
-    return nodes;
-}
-/** Sort paths by their likeness (= count of the same nodes relatively to the other paths) between each other to avoid paths crossing */
-function sortPaths(paths) {
-    if (paths.length === 1) {
-        return paths;
+    /** @hidden */
+    _confirmSelectedApprovers() {
+        if (!this._data.node) {
+            return;
+        }
+        this._data.node.approvers = this._selectedApprovers;
+        this._data.node.variousTeams = this._data.node.approvers.some((u) => u.teamId !== this._data.node.approvers[0].teamId);
+        this._data.node.description = this._data.node.variousTeams ? '' : this._selectedApprovers[0]?.description;
+        delete this._data.node.approvalTeamId;
+        delete this._data.node.isEveryoneApprovalNeeded;
+        this._exitSelectMode();
     }
-    /** [pathIndex, relativeToPathIndex, sameNodesCount][] */
-    let similarities = [];
-    let pathSimilarity = 0;
-    paths.forEach((path, index) => {
-        for (let i = 0; i < paths.length; i++) {
-            if (index !== i && !similarities.some((likely) => index === likely[1] && i === likely[0])) {
-                pathSimilarity = 0;
-                for (let j = 0; j < path.length; j++) {
-                    if (path[j].id === paths[i][j].id) {
-                        pathSimilarity++;
-                    }
-                }
-                similarities.push([index, i, pathSimilarity]);
-            }
+    /** @hidden */
+    _setSelectedTeam(team) {
+        this.viewService.selectTeam(team);
+    }
+    /** @hidden */
+    _confirmSelectedTeam() {
+        if (!this.viewService.team) {
+            return;
         }
-    });
-    similarities = similarities.sort((a, b) => (a[2] > b[2] ? -1 : 1));
-    const usedPathIndexes = [];
-    const processedPaths = [];
-    similarities.forEach((similarity) => {
-        if (!usedPathIndexes.some((i) => i === similarity[0])) {
-            processedPaths.push(paths[similarity[0]]);
-            usedPathIndexes.push(similarity[0]);
+        this._selectedTeam = this.viewService.team;
+        this._selectedTeamArray = [this.viewService.team];
+        if (this._data.node) {
+            this._data.node.variousTeams = false;
+            this._data.node.approvalTeamId = this.viewService.team.id;
+            this._data.node.description = this.viewService.team.name;
+            this._data.node.isEveryoneApprovalNeeded = this._approverType === APPROVAL_FLOW_APPROVER_TYPES.EVERYONE;
+        }
+        this._exitSelectMode();
+    }
+    /** @hidden */
+    _seeUserDetails(user) {
+        this.viewService.setCurrentView(VIEW_MODES.USER_DETAILS);
+        this._userToShowDetails = user;
+        this._userToShowDetailsData$ = this._data.userDataSource.dataProvider.getOne(new Map([['id', user.id]]));
+        this._cdr.detectChanges();
+    }
+    /** @hidden */
+    _exitUserDetailsMode() {
+        this.viewService.setCurrentView(this.viewService.team ? VIEW_MODES.VIEW_TEAM_MEMBERS : VIEW_MODES.SELECT_USER);
+        this._userToShowDetails = undefined;
+        this._userToShowDetailsData$ = undefined;
+        this._cdr.detectChanges();
+    }
+    /** @hidden */
+    _viewTeamMembers(team) {
+        this.viewService.selectTeam(team);
+        this.viewService.setCurrentView(VIEW_MODES.VIEW_TEAM_MEMBERS);
+        this._selectedTeamMembers = team.members;
+        this._setFilteredTeamMembers(this._selectedTeamMembers); // applying local filtering
+        this._cdr.detectChanges();
+    }
+    /** @hidden */
+    _exitTeamMembersMode() {
+        this.viewService.setCurrentView(VIEW_MODES.SELECT_TEAM);
+        this.viewService.resetTeam();
+        this._selectedTeamMembers = [];
+        this._cdr.detectChanges();
+    }
+    /** @hidden */
+    _submit() {
+        if (this._data.node && !this._isSingleUserMode && this._selectedTeam) {
+            this._data.node.approvers = [...this._selectedTeam.members];
         }
-        if (!usedPathIndexes.some((i) => i === similarity[1])) {
-            processedPaths.push(paths[similarity[1]]);
-            usedPathIndexes.push(similarity[1]);
+        if (this._data.node && this._checkDueDate) {
+            this._data.node.dueDate = this._dueDate.toDate();
         }
-    });
-    return processedPaths;
-}
-/** Remove "duplicate" nodes in paths (make every unique node be present only once across all paths) */
-function removeDuplicateNodes(paths) {
-    const processedPaths = [];
-    paths.forEach((path, index) => {
-        path.forEach((node) => {
-            paths.forEach((_path, _index) => {
-                const isNodeInPath = _index !== index && _path.indexOf(node) > -1;
-                if (isNodeInPath) {
-                    /** Instead of node place space node */
-                    _path.splice(_path.indexOf(node), 1, getSpaceApprovalGraphNode());
-                }
-            });
+        this.dialogRef.close({
+            node: this._data.node,
+            nodeType: this._nodeType,
+            toNextSerial: this._addToNextSerial
         });
-        processedPaths.push(path);
-    });
-    return processedPaths;
-}
-/** Remove empty paths (which contains only empty nodes) */
-function removeEmptyPaths(paths) {
-    return paths.reduce((acc, path) => {
-        if (!path.every((node) => node.space)) {
-            acc.push(path);
-        }
-        return acc;
-    }, []);
-}
-/** Transform paths into the columns (it's possible as they're all the same length) */
-function getColumnsFromPaths(paths) {
-    const columns = [];
-    let column = [];
-    for (let i = 0; i < paths[0].length; i++) {
-        column = [];
-        for (let v = 0; v < paths.length; v++) {
-            column.push(paths[v][i]);
-        }
-        columns.push(column);
     }
-    return columns;
-}
-/** Trim space nodes at the end of the columns. */
-function trimColumns(columns) {
-    const processedColumns = [];
-    columns.forEach((column) => {
-        let lastNotSpaceNodeIndex;
-        for (let i = column.length - 1; i >= 0; i--) {
-            if (!column[i].space) {
-                lastNotSpaceNodeIndex = i;
-                break;
-            }
+    /** @hidden */
+    _onSearchStringChange(searchString = '') {
+        const params = new Map([['query', searchString]]);
+        if (this.viewService.isSelectUserMode) {
+            this._data.userDataSource.match(params);
         }
-        if (lastNotSpaceNodeIndex < column.length) {
-            processedColumns.push(column.slice(0, lastNotSpaceNodeIndex + 1));
+        else if (this.viewService.isSelectTeamMode) {
+            this._data.teamDataSource.match(params);
         }
-        else {
-            processedColumns.push(column);
+        else if (this.viewService.isTeamMembersMode) {
+            this._setFilteredTeamMembers(this._selectedTeamMembers.filter((user) => filterByName(user, searchString)));
         }
-    });
-    return processedColumns;
+    }
+    /** @hidden */
+    _setFilteredTeamMembers(users) {
+        this._filteredTeamMembers = [...users];
+        this._cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowAddNodeComponent, deps: [{ token: i1$1.DialogRef }, { token: ApprovalFlowAddNodeViewService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowAddNodeComponent, isStandalone: true, selector: "fdp-approval-flow-add-node", host: { classAttribute: "fdp-approval-flow-dialog fdp-approval-flow-add-node" }, ngImport: i0, template: "<fd-dialog fdCompact>\n    <fd-dialog-header [class.show-search]=\"_selectMode && !_userToShowDetails\">\n        <ng-template fdkTemplate=\"header\">\n            <p>\n                @if (!_selectMode && !_data.isEdit) {\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderAddApprovers' | fdTranslate }}\n                }\n                @if (!_selectMode && _data.isEdit) {\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderEditApprover' | fdTranslate }}\n                }\n                @if (viewService.isSelectUserMode || viewService.isSelectTeamMode) {\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderAddApproverTeam' | fdTranslate }}\n                }\n                @if (viewService.isTeamMembersMode) {\n                    <fd-icon [glyph]=\"_headerArrowGlyph\" (click)=\"_exitTeamMembersMode()\"></fd-icon>\n                    {{ viewService.team?.name ?? '' }} ({{ viewService.team?.members?.length ?? 0 }})\n                }\n                @if (viewService.isUserDetailsMode) {\n                    <fd-icon [glyph]=\"_headerArrowGlyph\" (click)=\"_exitUserDetailsMode()\"></fd-icon>\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderDetail' | fdTranslate }}\n                }\n            </p>\n            @if (_selectMode && !_userToShowDetails) {\n                <fdp-search-field\n                    [placeholder]=\"'platformApprovalFlow.addNodeSearchPlaceholder' | fdTranslate\"\n                    [suggestions]=\"[]\"\n                    (inputChange)=\"_onSearchStringChange($event.text)\"\n                ></fdp-search-field>\n            }\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body [class.fd-dialog__body--auto-height]=\"viewService.isUserDetailsMode\">\n        @if (!_selectMode) {\n            @if (_data.showNodeTypeSelect) {\n                <div fd-form-item>\n                    <label fd-form-label>\n                        {{ 'platformApprovalFlow.addNodeDialogNodeType' | fdTranslate }}\n                    </label>\n                    <fd-select [(value)]=\"_nodeType\">\n                        @for (option of _nodeTypesArray; track option) {\n                            @switch (option) {\n                                @case (_nodeTypes.SERIAL) {\n                                    <li fd-option [value]=\"option\">\n                                        {{ 'platformApprovalFlow.addNodeDialogNodeTypeSerial' | fdTranslate }}\n                                    </li>\n                                }\n                                @case (_nodeTypes.PARALLEL) {\n                                    <li fd-option [value]=\"option\">\n                                        {{ 'platformApprovalFlow.addNodeDialogNodeTypeParallel' | fdTranslate }}\n                                    </li>\n                                }\n                            }\n                        }\n                    </fd-select>\n                </div>\n            }\n            <div fd-form-item>\n                <label fd-form-label>\n                    {{ 'platformApprovalFlow.addNodeDialogApproverType' | fdTranslate }}\n                </label>\n                <fd-select [(value)]=\"_approverType\">\n                    @for (option of _approverTypesArray; track option) {\n                        @switch (option) {\n                            @case (_approverTypes.SINGLE_USER) {\n                                <li fd-option [value]=\"option\">\n                                    {{ 'platformApprovalFlow.addNodeDialogApproverTypeUser' | fdTranslate }}\n                                </li>\n                            }\n                            @case (_approverTypes.ANYONE) {\n                                <li fd-option [value]=\"option\">\n                                    {{ 'platformApprovalFlow.addNodeDialogApproverTypeTeamAnyone' | fdTranslate }}\n                                </li>\n                            }\n                            @case (_approverTypes.EVERYONE) {\n                                <li fd-option [value]=\"option\">\n                                    {{ 'platformApprovalFlow.addNodeDialogApproverTypeTeamEveryone' | fdTranslate }}\n                                </li>\n                            }\n                        }\n                    }\n                </fd-select>\n            </div>\n            <div fd-form-item>\n                <label fd-form-label>{{ 'platformApprovalFlow.addNodeDialogUserOrTeam' | fdTranslate }}</label>\n                @if (_isSingleUserMode) {\n                    <fd-multi-input\n                        [showAllButton]=\"false\"\n                        [dropdownValues]=\"_selectedApprovers\"\n                        [(ngModel)]=\"_selectedApprovers\"\n                        [displayFn]=\"_displayUserFn\"\n                        (openChange)=\"_goToSelectMode()\"\n                        (selectedChange)=\"_setSelectedApprovers($event)\"\n                    ></fd-multi-input>\n                }\n                @if (!_isSingleUserMode) {\n                    <fd-multi-input\n                        [showAllButton]=\"false\"\n                        [dropdownValues]=\"_selectedTeamArray\"\n                        [(ngModel)]=\"_selectedTeamArray\"\n                        [displayFn]=\"_displayTeamFn\"\n                        (openChange)=\"_goToSelectMode()\"\n                    ></fd-multi-input>\n                }\n            </div>\n            @if (_nodeType === _nodeTypes.PARALLEL) {\n                <div fd-form-item>\n                    <fd-checkbox [(ngModel)]=\"_addToNextSerial\">\n                        {{ 'platformApprovalFlow.addNodeDialogAddToNext' | fdTranslate }}\n                    </fd-checkbox>\n                </div>\n            }\n            @if (_checkDueDate) {\n                <div fd-form-item>\n                    <label fd-form-label>{{ 'platformApprovalFlow.addNodeDialogDueDate' | fdTranslate }}</label>\n                    <fd-date-picker type=\"single\" [state]=\"!this._dueDate ? 'error' : null\" [(ngModel)]=\"_dueDate\">\n                    </fd-date-picker>\n                </div>\n            }\n        }\n        @if (_selectMode) {\n            @if (viewService.isSelectTeamMode) {\n                @if (!_data.teamDataSource.isDataLoading) {\n                    <fdp-approval-flow-team-list\n                        [isRtl]=\"_data.rtl\"\n                        [teams]=\"_teams\"\n                        [selectedTeamId]=\"_selectedTeam?.id\"\n                        (onTeamClick)=\"_viewTeamMembers($event)\"\n                        (onTeamRadioClick)=\"_setSelectedTeam($event)\"\n                    ></fdp-approval-flow-team-list>\n                } @else {\n                    <fd-busy-indicator [loading]=\"true\" [block]=\"true\"> </fd-busy-indicator>\n                }\n            }\n            @if (viewService.isSelectUserMode || viewService.isTeamMembersMode) {\n                @if (viewService.isSelectUserMode || !_data.userDataSource.isDataLoading) {\n                    <fdp-approval-flow-user-list\n                        [users]=\"viewService.isSelectUserMode ? _approvers : _filteredTeamMembers\"\n                        [isSelectable]=\"viewService.isSelectUserMode\"\n                        [selectedUsers]=\"_selectedApprovers\"\n                        (onUserClick)=\"_seeUserDetails($event)\"\n                        (onSelectionChange)=\"_selectedApprovers = $event\"\n                    ></fdp-approval-flow-user-list>\n                } @else {\n                    <fd-busy-indicator [loading]=\"true\" [block]=\"true\"> </fd-busy-indicator>\n                }\n            }\n            @if (viewService.isUserDetailsMode && _userToShowDetails) {\n                <fdp-approval-flow-user-details\n                    [user]=\"_userToShowDetails\"\n                    [detailsTemplate]=\"_data.userDetailsTemplate\"\n                    [details]=\"_userToShowDetailsData$\"\n                ></fdp-approval-flow-user-details>\n            }\n        }\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        @if (!_selectMode) {\n            <fd-button-bar\n                fdType=\"emphasized\"\n                [label]=\"'platformApprovalFlow.addNodeAddActionBtnLabel' | fdTranslate\"\n                [disabled]=\"_isMainSubmitButtonDisabled\"\n                (click)=\"_submit()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                fdkInitialFocus\n                fdType=\"transparent\"\n                [label]=\"'platformApprovalFlow.addNodeCancelActionBtnLabel' | fdTranslate\"\n                (click)=\"dialogRef.close()\"\n            ></fd-button-bar>\n        }\n        @if (_selectMode) {\n            @if (viewService.isSelectUserMode) {\n                <fd-button-bar\n                    fdType=\"emphasized\"\n                    [label]=\"'platformApprovalFlow.addNodeSelectApproverActionBtnLabel' | fdTranslate\"\n                    [disabled]=\"!_selectedApprovers.length\"\n                    (click)=\"_confirmSelectedApprovers()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitSelectMode()\"\n                ></fd-button-bar>\n            }\n            @if (viewService.isSelectTeamMode) {\n                <fd-button-bar\n                    fdType=\"emphasized\"\n                    [label]=\"'platformApprovalFlow.addNodeSelectApproverActionBtnLabel' | fdTranslate\"\n                    [disabled]=\"!_selectedTeam && !viewService.team\"\n                    (click)=\"_confirmSelectedTeam()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitSelectMode()\"\n                ></fd-button-bar>\n            }\n            @if (viewService.isTeamMembersMode) {\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitTeamMembersMode()\"\n                ></fd-button-bar>\n            }\n            @if (viewService.isUserDetailsMode) {\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitUserDetailsMode()\"\n                ></fd-button-bar>\n            }\n        }\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-approval-flow-dialog a{color:#0a6ed1;color:var(--sapLinkColor, #0a6ed1)}.fdp-approval-flow-dialog .fd-list--byline .fd-list__byline-left{width:100%}.fdp-approval-flow-dialog fd-popover{width:100%}.fdp-approval-flow-dialog fd-dialog fd-dialog-header{margin-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header .fd-bar--header{flex-direction:column;padding-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p{font-size:1rem;margin:.65rem 0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p fd-icon{font-size:.875rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);position:relative;cursor:pointer;margin-right:.75rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search{margin-bottom:0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search .fd-bar--header{min-height:2.5rem;height:auto}.fdp-approval-flow-dialog fd-dialog fd-avatar{margin-right:.652rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body{padding:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body fdp-list{display:block;margin-left:-1rem;margin-right:-1rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item .fd-checkbox__label{position:relative;left:.3125rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item fd-avatar{margin-left:.1875rem}.fdp-approval-flow-dialog .fd-form-item{margin-bottom:1rem}[dir=rtl] .fdp-approval-flow-dialog fd-dialog-header p fd-icon,.fdp-approval-flow-dialog[dir=rtl] fd-dialog-header p fd-icon{margin-right:0;margin-left:.75rem}[dir=rtl] .fdp-approval-flow-dialog fd-avatar,.fdp-approval-flow-dialog[dir=rtl] fd-avatar{margin-right:0;margin-left:.652rem}[dir=rtl] .fdp-approval-flow-dialog fdp-standard-list-item .fd-checkbox__label,.fdp-approval-flow-dialog[dir=rtl] fdp-standard-list-item .fd-checkbox__label{left:auto;right:.3125rem}\n", ".fdp-approval-flow-add-node .fd-dialog__body{width:20rem;height:27rem}.fdp-approval-flow-add-node .fd-dialog__body--auto-height{height:auto}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: MultiInputComponent, selector: "fd-multi-input", inputs: ["placeholder", "disabled", "required", "compactCollapse", "maxHeight", "glyph", "glyphFont", "dropdownValues", "openDropdownOnAddOnClicked", "searchTerm", "inputId", "highlight", "selected", "class", "filterFn", "valueFn", "displayFn", "newTokenParseFn", "optionItemIdentifier", "newTokenValidateFn", "ariaLabel", "ariaLabelledBy", "fillControlMode", "state", "buttonFocusable", "allowNewTokens", "mobile", "showAllButton", "bodyMaxWidth", "mobileConfig", "includes", "itemTemplate", "title", "byline", "autoComplete", "open", "displayAddonButton", "tokenHiddenId"], outputs: ["searchTermChange", "selectedChange", "openChange", "addOnButtonClicked", "allItemsSelectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: DatePickerComponent, selector: "fd-date-picker", inputs: ["type", "placeholder", "inputId", "required", "message", "messageTriggers", "selectedDate", "selectedRangeDate", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "allowNull", "activeView", "placement", "appendTo", "disabled", "closeOnDateChoose", "showTodayButton", "todayButtonLabel", "previousButtonDisableFunction", "nextButtonDisableFunction", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "isOpen", "inline", "ariaLabelledBy", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedRangeDateChange", "activeViewChange"] }, { kind: "component", type: ApprovalFlowTeamListComponent, selector: "fdp-approval-flow-team-list", inputs: ["teams", "isRtl", "selectedTeamId"], outputs: ["onTeamClick", "onTeamRadioClick"] }, { kind: "component", type: ApprovalFlowUserListComponent, selector: "fdp-approval-flow-user-list", inputs: ["users", "selectedUsers", "isSelectable"], outputs: ["onUserClick", "onSelectionChange"] }, { kind: "component", type: ApprovalFlowUserDetailsComponent, selector: "fdp-approval-flow-user-details", inputs: ["user", "details", "detailsTemplate"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-/** Remove empty columns (where every node is a blank node)  */
-function removeEmptyColumns(columns) {
-    const processedColumns = [];
-    columns.forEach((column) => {
-        const areAllNodesEmpty = column.every((node) => node.blank || node.space);
-        if (areAllNodesEmpty) {
-            column.forEach((node) => {
-                if (node.blank) {
-                    /** Connect previous column to the next column, omitting current column. */
-                    replaceTargets(node.id, node.targets, columns);
-                }
-            });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowAddNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fdp-approval-flow-add-node', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'fdp-approval-flow-dialog fdp-approval-flow-add-node'
+                    }, standalone: true, imports: [
+                        DialogComponent,
+                        ContentDensityDirective,
+                        DialogHeaderComponent,
+                        TemplateDirective,
+                        IconComponent,
+                        SearchFieldComponent,
+                        CdkScrollable,
+                        ScrollbarDirective,
+                        DialogBodyComponent,
+                        FormItemComponent,
+                        FormLabelComponent,
+                        SelectComponent,
+                        OptionComponent,
+                        MultiInputComponent,
+                        FormsModule,
+                        CheckboxComponent,
+                        DatePickerComponent,
+                        ApprovalFlowTeamListComponent,
+                        ApprovalFlowUserListComponent,
+                        ApprovalFlowUserDetailsComponent,
+                        DialogFooterComponent,
+                        ButtonBarComponent,
+                        BusyIndicatorComponent,
+                        FdTranslatePipe
+                    ], template: "<fd-dialog fdCompact>\n    <fd-dialog-header [class.show-search]=\"_selectMode && !_userToShowDetails\">\n        <ng-template fdkTemplate=\"header\">\n            <p>\n                @if (!_selectMode && !_data.isEdit) {\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderAddApprovers' | fdTranslate }}\n                }\n                @if (!_selectMode && _data.isEdit) {\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderEditApprover' | fdTranslate }}\n                }\n                @if (viewService.isSelectUserMode || viewService.isSelectTeamMode) {\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderAddApproverTeam' | fdTranslate }}\n                }\n                @if (viewService.isTeamMembersMode) {\n                    <fd-icon [glyph]=\"_headerArrowGlyph\" (click)=\"_exitTeamMembersMode()\"></fd-icon>\n                    {{ viewService.team?.name ?? '' }} ({{ viewService.team?.members?.length ?? 0 }})\n                }\n                @if (viewService.isUserDetailsMode) {\n                    <fd-icon [glyph]=\"_headerArrowGlyph\" (click)=\"_exitUserDetailsMode()\"></fd-icon>\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderDetail' | fdTranslate }}\n                }\n            </p>\n            @if (_selectMode && !_userToShowDetails) {\n                <fdp-search-field\n                    [placeholder]=\"'platformApprovalFlow.addNodeSearchPlaceholder' | fdTranslate\"\n                    [suggestions]=\"[]\"\n                    (inputChange)=\"_onSearchStringChange($event.text)\"\n                ></fdp-search-field>\n            }\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body [class.fd-dialog__body--auto-height]=\"viewService.isUserDetailsMode\">\n        @if (!_selectMode) {\n            @if (_data.showNodeTypeSelect) {\n                <div fd-form-item>\n                    <label fd-form-label>\n                        {{ 'platformApprovalFlow.addNodeDialogNodeType' | fdTranslate }}\n                    </label>\n                    <fd-select [(value)]=\"_nodeType\">\n                        @for (option of _nodeTypesArray; track option) {\n                            @switch (option) {\n                                @case (_nodeTypes.SERIAL) {\n                                    <li fd-option [value]=\"option\">\n                                        {{ 'platformApprovalFlow.addNodeDialogNodeTypeSerial' | fdTranslate }}\n                                    </li>\n                                }\n                                @case (_nodeTypes.PARALLEL) {\n                                    <li fd-option [value]=\"option\">\n                                        {{ 'platformApprovalFlow.addNodeDialogNodeTypeParallel' | fdTranslate }}\n                                    </li>\n                                }\n                            }\n                        }\n                    </fd-select>\n                </div>\n            }\n            <div fd-form-item>\n                <label fd-form-label>\n                    {{ 'platformApprovalFlow.addNodeDialogApproverType' | fdTranslate }}\n                </label>\n                <fd-select [(value)]=\"_approverType\">\n                    @for (option of _approverTypesArray; track option) {\n                        @switch (option) {\n                            @case (_approverTypes.SINGLE_USER) {\n                                <li fd-option [value]=\"option\">\n                                    {{ 'platformApprovalFlow.addNodeDialogApproverTypeUser' | fdTranslate }}\n                                </li>\n                            }\n                            @case (_approverTypes.ANYONE) {\n                                <li fd-option [value]=\"option\">\n                                    {{ 'platformApprovalFlow.addNodeDialogApproverTypeTeamAnyone' | fdTranslate }}\n                                </li>\n                            }\n                            @case (_approverTypes.EVERYONE) {\n                                <li fd-option [value]=\"option\">\n                                    {{ 'platformApprovalFlow.addNodeDialogApproverTypeTeamEveryone' | fdTranslate }}\n                                </li>\n                            }\n                        }\n                    }\n                </fd-select>\n            </div>\n            <div fd-form-item>\n                <label fd-form-label>{{ 'platformApprovalFlow.addNodeDialogUserOrTeam' | fdTranslate }}</label>\n                @if (_isSingleUserMode) {\n                    <fd-multi-input\n                        [showAllButton]=\"false\"\n                        [dropdownValues]=\"_selectedApprovers\"\n                        [(ngModel)]=\"_selectedApprovers\"\n                        [displayFn]=\"_displayUserFn\"\n                        (openChange)=\"_goToSelectMode()\"\n                        (selectedChange)=\"_setSelectedApprovers($event)\"\n                    ></fd-multi-input>\n                }\n                @if (!_isSingleUserMode) {\n                    <fd-multi-input\n                        [showAllButton]=\"false\"\n                        [dropdownValues]=\"_selectedTeamArray\"\n                        [(ngModel)]=\"_selectedTeamArray\"\n                        [displayFn]=\"_displayTeamFn\"\n                        (openChange)=\"_goToSelectMode()\"\n                    ></fd-multi-input>\n                }\n            </div>\n            @if (_nodeType === _nodeTypes.PARALLEL) {\n                <div fd-form-item>\n                    <fd-checkbox [(ngModel)]=\"_addToNextSerial\">\n                        {{ 'platformApprovalFlow.addNodeDialogAddToNext' | fdTranslate }}\n                    </fd-checkbox>\n                </div>\n            }\n            @if (_checkDueDate) {\n                <div fd-form-item>\n                    <label fd-form-label>{{ 'platformApprovalFlow.addNodeDialogDueDate' | fdTranslate }}</label>\n                    <fd-date-picker type=\"single\" [state]=\"!this._dueDate ? 'error' : null\" [(ngModel)]=\"_dueDate\">\n                    </fd-date-picker>\n                </div>\n            }\n        }\n        @if (_selectMode) {\n            @if (viewService.isSelectTeamMode) {\n                @if (!_data.teamDataSource.isDataLoading) {\n                    <fdp-approval-flow-team-list\n                        [isRtl]=\"_data.rtl\"\n                        [teams]=\"_teams\"\n                        [selectedTeamId]=\"_selectedTeam?.id\"\n                        (onTeamClick)=\"_viewTeamMembers($event)\"\n                        (onTeamRadioClick)=\"_setSelectedTeam($event)\"\n                    ></fdp-approval-flow-team-list>\n                } @else {\n                    <fd-busy-indicator [loading]=\"true\" [block]=\"true\"> </fd-busy-indicator>\n                }\n            }\n            @if (viewService.isSelectUserMode || viewService.isTeamMembersMode) {\n                @if (viewService.isSelectUserMode || !_data.userDataSource.isDataLoading) {\n                    <fdp-approval-flow-user-list\n                        [users]=\"viewService.isSelectUserMode ? _approvers : _filteredTeamMembers\"\n                        [isSelectable]=\"viewService.isSelectUserMode\"\n                        [selectedUsers]=\"_selectedApprovers\"\n                        (onUserClick)=\"_seeUserDetails($event)\"\n                        (onSelectionChange)=\"_selectedApprovers = $event\"\n                    ></fdp-approval-flow-user-list>\n                } @else {\n                    <fd-busy-indicator [loading]=\"true\" [block]=\"true\"> </fd-busy-indicator>\n                }\n            }\n            @if (viewService.isUserDetailsMode && _userToShowDetails) {\n                <fdp-approval-flow-user-details\n                    [user]=\"_userToShowDetails\"\n                    [detailsTemplate]=\"_data.userDetailsTemplate\"\n                    [details]=\"_userToShowDetailsData$\"\n                ></fdp-approval-flow-user-details>\n            }\n        }\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        @if (!_selectMode) {\n            <fd-button-bar\n                fdType=\"emphasized\"\n                [label]=\"'platformApprovalFlow.addNodeAddActionBtnLabel' | fdTranslate\"\n                [disabled]=\"_isMainSubmitButtonDisabled\"\n                (click)=\"_submit()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                fdkInitialFocus\n                fdType=\"transparent\"\n                [label]=\"'platformApprovalFlow.addNodeCancelActionBtnLabel' | fdTranslate\"\n                (click)=\"dialogRef.close()\"\n            ></fd-button-bar>\n        }\n        @if (_selectMode) {\n            @if (viewService.isSelectUserMode) {\n                <fd-button-bar\n                    fdType=\"emphasized\"\n                    [label]=\"'platformApprovalFlow.addNodeSelectApproverActionBtnLabel' | fdTranslate\"\n                    [disabled]=\"!_selectedApprovers.length\"\n                    (click)=\"_confirmSelectedApprovers()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitSelectMode()\"\n                ></fd-button-bar>\n            }\n            @if (viewService.isSelectTeamMode) {\n                <fd-button-bar\n                    fdType=\"emphasized\"\n                    [label]=\"'platformApprovalFlow.addNodeSelectApproverActionBtnLabel' | fdTranslate\"\n                    [disabled]=\"!_selectedTeam && !viewService.team\"\n                    (click)=\"_confirmSelectedTeam()\"\n                ></fd-button-bar>\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitSelectMode()\"\n                ></fd-button-bar>\n            }\n            @if (viewService.isTeamMembersMode) {\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitTeamMembersMode()\"\n                ></fd-button-bar>\n            }\n            @if (viewService.isUserDetailsMode) {\n                <fd-button-bar\n                    fdkInitialFocus\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate\"\n                    (click)=\"_exitUserDetailsMode()\"\n                ></fd-button-bar>\n            }\n        }\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-approval-flow-dialog a{color:#0a6ed1;color:var(--sapLinkColor, #0a6ed1)}.fdp-approval-flow-dialog .fd-list--byline .fd-list__byline-left{width:100%}.fdp-approval-flow-dialog fd-popover{width:100%}.fdp-approval-flow-dialog fd-dialog fd-dialog-header{margin-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header .fd-bar--header{flex-direction:column;padding-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p{font-size:1rem;margin:.65rem 0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p fd-icon{font-size:.875rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);position:relative;cursor:pointer;margin-right:.75rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search{margin-bottom:0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search .fd-bar--header{min-height:2.5rem;height:auto}.fdp-approval-flow-dialog fd-dialog fd-avatar{margin-right:.652rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body{padding:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body fdp-list{display:block;margin-left:-1rem;margin-right:-1rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item .fd-checkbox__label{position:relative;left:.3125rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item fd-avatar{margin-left:.1875rem}.fdp-approval-flow-dialog .fd-form-item{margin-bottom:1rem}[dir=rtl] .fdp-approval-flow-dialog fd-dialog-header p fd-icon,.fdp-approval-flow-dialog[dir=rtl] fd-dialog-header p fd-icon{margin-right:0;margin-left:.75rem}[dir=rtl] .fdp-approval-flow-dialog fd-avatar,.fdp-approval-flow-dialog[dir=rtl] fd-avatar{margin-right:0;margin-left:.652rem}[dir=rtl] .fdp-approval-flow-dialog fdp-standard-list-item .fd-checkbox__label,.fdp-approval-flow-dialog[dir=rtl] fdp-standard-list-item .fd-checkbox__label{left:auto;right:.3125rem}\n", ".fdp-approval-flow-add-node .fd-dialog__body{width:20rem;height:27rem}.fdp-approval-flow-add-node .fd-dialog__body--auto-height{height:auto}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: ApprovalFlowAddNodeViewService }, { type: i0.ChangeDetectorRef }] });
+
+/**
+ * @deprecated
+ * ApprovalFlowApproverDetails component is deprecated since version 0.40.0
+ */
+class ApprovalFlowApproverDetailsComponent {
+    /** @hidden */
+    constructor(dialogRef, _cdr) {
+        this.dialogRef = dialogRef;
+        this._cdr = _cdr;
+        /** @hidden */
+        this._isListMode = false;
+        /** @hidden */
+        this._listItems = [];
+        /** @hidden */
+        this._selectedUsers = [];
+    }
+    /** @hidden */
+    get _data() {
+        return this.dialogRef.data;
+    }
+    /** @hidden */
+    ngOnInit() {
+        this._isListMode = (this._data.node?.approvers.length ?? 0) > 1;
+        if (this._isListMode) {
+            this._setListItems(this._data.node?.approvers ?? []);
         }
         else {
-            processedColumns.push(column);
-        }
-    });
-    return processedColumns;
-}
-function replaceTargets(replaceId, replaceWithId, columns) {
-    columns.forEach((column) => {
-        column.forEach((n) => {
-            if (isNodeTargetsIncludeId(n, replaceId)) {
-                n.targets = n.targets.filter((_id) => _id !== replaceId);
-                n.targets.push(...replaceWithId);
+            const user = this._data.watcher || this._data.node?.approvers[0];
+            if (user) {
+                this._seeUserDetails(user);
             }
-        });
-    });
-}
-/** Transform columns into the graph columns (with additional metadata). */
-function getGraphColumnsFromPaths(columns) {
-    const graphColumns = [];
-    columns.forEach((column, index) => {
-        column.forEach((node) => (node.colIndex = index));
-        graphColumns.push({
-            nodes: column,
-            index,
-            allNodesApproved: column.every((node) => isNodeApproved(node))
-        });
-    });
-    return graphColumns;
+            else {
+                this.dialogRef.close();
+            }
+        }
+    }
+    /** @hidden */
+    _setListItems(items = []) {
+        this._listItems = [...items];
+        this._cdr.detectChanges();
+    }
+    /** @hidden */
+    _exitUserDetailsMode() {
+        this._userToShowDetails = undefined;
+        this._isListMode = true;
+    }
+    /** @hidden */
+    _seeUserDetails(user) {
+        this._userToShowDetails = user;
+        this._userToShowDetailsData$ = this._data.userDataSource.dataProvider.getOne(new Map([['id', user.id]]));
+        this._isListMode = false;
+        this._selectedUsers = [];
+        this._cdr.detectChanges();
+    }
+    /** @hidden */
+    _sendReminder() {
+        const reminderTargets = this._isListMode ? this._selectedUsers : this._data.node?.approvers;
+        this.dialogRef.close(reminderTargets);
+    }
+    /** @hidden */
+    _onSearchStringChange(searchString) {
+        if (!searchString) {
+            this._setListItems(this._data.node?.approvers);
+            return;
+        }
+        this._setListItems(this._data.node?.approvers.filter((user) => filterByName(user, searchString)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowApproverDetailsComponent, deps: [{ token: i1$1.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowApproverDetailsComponent, isStandalone: true, selector: "fdp-approval-flow-approver-details", host: { classAttribute: "fdp-approval-flow-dialog fdp-approval-flow-approver-details" }, ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header [class.show-search]=\"!_userToShowDetails && _isListMode\">\n        <ng-template fdkTemplate=\"header\">\n            <p>\n                @if (_userToShowDetails && _data.node?.approvers && _data.node!.approvers!.length > 1) {\n                    <fd-icon\n                        [glyph]=\"'navigation-' + (_data.rtl ? 'right' : 'left') + '-arrow'\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        (click)=\"_exitUserDetailsMode()\"\n                        (keyup.space)=\"_exitUserDetailsMode()\"\n                        (keyup.enter)=\"_exitUserDetailsMode()\"\n                    ></fd-icon>\n                }\n                @if (_isListMode && !_userToShowDetails) {\n                    {{ _data.node?.description }} ({{ _data.node?.approvers?.length ?? 0 }})\n                } @else {\n                    {{ 'platformApprovalFlow.userDetailsHeader' | fdTranslate }}\n                }\n            </p>\n            @if (!_userToShowDetails && _isListMode) {\n                <fdp-search-field\n                    [placeholder]=\"'platformApprovalFlow.addNodeSearchPlaceholder' | fdTranslate\"\n                    fdCompact\n                    [suggestions]=\"[]\"\n                    (inputChange)=\"_onSearchStringChange($event.text)\"\n                ></fdp-search-field>\n            }\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body>\n        @if (_userToShowDetails) {\n            <fdp-approval-flow-user-details\n                [user]=\"_userToShowDetails\"\n                [detailsTemplate]=\"_data.userDetailsTemplate\"\n                [details]=\"_userToShowDetailsData$\"\n            ></fdp-approval-flow-user-details>\n        }\n        @if (_isListMode) {\n            <fdp-approval-flow-user-list\n                [users]=\"_listItems\"\n                (onUserClick)=\"_seeUserDetails($event)\"\n                (onSelectionChange)=\"_selectedUsers = $event\"\n            ></fdp-approval-flow-user-list>\n        }\n    </fd-dialog-body>\n    <fd-dialog-footer fdCompact>\n        @if (_isListMode || (_userToShowDetails && _data.node?.approvers?.length === 1)) {\n            <fd-button-bar\n                fdType=\"emphasized\"\n                [label]=\"'platformApprovalFlow.userDetailsSendReminderBtnLabel' | fdTranslate\"\n                [disabled]=\"!_data.allowSendReminder || (_isListMode && !_selectedUsers.length)\"\n                (click)=\"_sendReminder()\"\n            ></fd-button-bar>\n        }\n        <fd-button-bar\n            fdkInitialFocus\n            fdType=\"transparent\"\n            [label]=\"'platformApprovalFlow.userDetailsCancelBtnLabel' | fdTranslate\"\n            (click)=\"dialogRef.close('Cancel')\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-approval-flow-dialog a{color:#0a6ed1;color:var(--sapLinkColor, #0a6ed1)}.fdp-approval-flow-dialog .fd-list--byline .fd-list__byline-left{width:100%}.fdp-approval-flow-dialog fd-popover{width:100%}.fdp-approval-flow-dialog fd-dialog fd-dialog-header{margin-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header .fd-bar--header{flex-direction:column;padding-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p{font-size:1rem;margin:.65rem 0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p fd-icon{font-size:.875rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);position:relative;cursor:pointer;margin-right:.75rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search{margin-bottom:0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search .fd-bar--header{min-height:2.5rem;height:auto}.fdp-approval-flow-dialog fd-dialog fd-avatar{margin-right:.652rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body{padding:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body fdp-list{display:block;margin-left:-1rem;margin-right:-1rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item .fd-checkbox__label{position:relative;left:.3125rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item fd-avatar{margin-left:.1875rem}.fdp-approval-flow-dialog .fd-form-item{margin-bottom:1rem}[dir=rtl] .fdp-approval-flow-dialog fd-dialog-header p fd-icon,.fdp-approval-flow-dialog[dir=rtl] fd-dialog-header p fd-icon{margin-right:0;margin-left:.75rem}[dir=rtl] .fdp-approval-flow-dialog fd-avatar,.fdp-approval-flow-dialog[dir=rtl] fd-avatar{margin-right:0;margin-left:.652rem}[dir=rtl] .fdp-approval-flow-dialog fdp-standard-list-item .fd-checkbox__label,.fdp-approval-flow-dialog[dir=rtl] fdp-standard-list-item .fd-checkbox__label{left:auto;right:.3125rem}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: ApprovalFlowUserDetailsComponent, selector: "fdp-approval-flow-user-details", inputs: ["user", "details", "detailsTemplate"] }, { kind: "component", type: ApprovalFlowUserListComponent, selector: "fdp-approval-flow-user-list", inputs: ["users", "selectedUsers", "isSelectable"], outputs: ["onUserClick", "onSelectionChange"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowApproverDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fdp-approval-flow-approver-details', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fdp-approval-flow-dialog fdp-approval-flow-approver-details'
+                    }, standalone: true, imports: [
+                        DialogComponent,
+                        DialogHeaderComponent,
+                        TemplateDirective,
+                        IconComponent,
+                        SearchFieldComponent,
+                        ContentDensityDirective,
+                        CdkScrollable,
+                        ScrollbarDirective,
+                        DialogBodyComponent,
+                        ApprovalFlowUserDetailsComponent,
+                        ApprovalFlowUserListComponent,
+                        DialogFooterComponent,
+                        ButtonBarComponent,
+                        FdTranslatePipe
+                    ], template: "<fd-dialog>\n    <fd-dialog-header [class.show-search]=\"!_userToShowDetails && _isListMode\">\n        <ng-template fdkTemplate=\"header\">\n            <p>\n                @if (_userToShowDetails && _data.node?.approvers && _data.node!.approvers!.length > 1) {\n                    <fd-icon\n                        [glyph]=\"'navigation-' + (_data.rtl ? 'right' : 'left') + '-arrow'\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        (click)=\"_exitUserDetailsMode()\"\n                        (keyup.space)=\"_exitUserDetailsMode()\"\n                        (keyup.enter)=\"_exitUserDetailsMode()\"\n                    ></fd-icon>\n                }\n                @if (_isListMode && !_userToShowDetails) {\n                    {{ _data.node?.description }} ({{ _data.node?.approvers?.length ?? 0 }})\n                } @else {\n                    {{ 'platformApprovalFlow.userDetailsHeader' | fdTranslate }}\n                }\n            </p>\n            @if (!_userToShowDetails && _isListMode) {\n                <fdp-search-field\n                    [placeholder]=\"'platformApprovalFlow.addNodeSearchPlaceholder' | fdTranslate\"\n                    fdCompact\n                    [suggestions]=\"[]\"\n                    (inputChange)=\"_onSearchStringChange($event.text)\"\n                ></fdp-search-field>\n            }\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body>\n        @if (_userToShowDetails) {\n            <fdp-approval-flow-user-details\n                [user]=\"_userToShowDetails\"\n                [detailsTemplate]=\"_data.userDetailsTemplate\"\n                [details]=\"_userToShowDetailsData$\"\n            ></fdp-approval-flow-user-details>\n        }\n        @if (_isListMode) {\n            <fdp-approval-flow-user-list\n                [users]=\"_listItems\"\n                (onUserClick)=\"_seeUserDetails($event)\"\n                (onSelectionChange)=\"_selectedUsers = $event\"\n            ></fdp-approval-flow-user-list>\n        }\n    </fd-dialog-body>\n    <fd-dialog-footer fdCompact>\n        @if (_isListMode || (_userToShowDetails && _data.node?.approvers?.length === 1)) {\n            <fd-button-bar\n                fdType=\"emphasized\"\n                [label]=\"'platformApprovalFlow.userDetailsSendReminderBtnLabel' | fdTranslate\"\n                [disabled]=\"!_data.allowSendReminder || (_isListMode && !_selectedUsers.length)\"\n                (click)=\"_sendReminder()\"\n            ></fd-button-bar>\n        }\n        <fd-button-bar\n            fdkInitialFocus\n            fdType=\"transparent\"\n            [label]=\"'platformApprovalFlow.userDetailsCancelBtnLabel' | fdTranslate\"\n            (click)=\"dialogRef.close('Cancel')\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-approval-flow-dialog a{color:#0a6ed1;color:var(--sapLinkColor, #0a6ed1)}.fdp-approval-flow-dialog .fd-list--byline .fd-list__byline-left{width:100%}.fdp-approval-flow-dialog fd-popover{width:100%}.fdp-approval-flow-dialog fd-dialog fd-dialog-header{margin-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header .fd-bar--header{flex-direction:column;padding-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p{font-size:1rem;margin:.65rem 0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p fd-icon{font-size:.875rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);position:relative;cursor:pointer;margin-right:.75rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search{margin-bottom:0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search .fd-bar--header{min-height:2.5rem;height:auto}.fdp-approval-flow-dialog fd-dialog fd-avatar{margin-right:.652rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body{padding:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body fdp-list{display:block;margin-left:-1rem;margin-right:-1rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item .fd-checkbox__label{position:relative;left:.3125rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item fd-avatar{margin-left:.1875rem}.fdp-approval-flow-dialog .fd-form-item{margin-bottom:1rem}[dir=rtl] .fdp-approval-flow-dialog fd-dialog-header p fd-icon,.fdp-approval-flow-dialog[dir=rtl] fd-dialog-header p fd-icon{margin-right:0;margin-left:.75rem}[dir=rtl] .fdp-approval-flow-dialog fd-avatar,.fdp-approval-flow-dialog[dir=rtl] fd-avatar{margin-right:0;margin-left:.652rem}[dir=rtl] .fdp-approval-flow-dialog fdp-standard-list-item .fd-checkbox__label,.fdp-approval-flow-dialog[dir=rtl] fdp-standard-list-item .fd-checkbox__label{left:auto;right:.3125rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: i0.ChangeDetectorRef }] });
 
 /**
  * @deprecated
@@ -1392,7 +1392,7 @@ class ApprovalFlowNodeComponent {
             : NODE_STATUS_CLASS_MAP[this.node.status]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowNodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowNodeComponent, isStandalone: true, selector: "fdp-approval-flow-node", inputs: { node: "node", meta: "meta", renderArrow: "renderArrow", checkDueDate: "checkDueDate", dueDateThreshold: "dueDateThreshold", allNodesInColumnApproved: "allNodesInColumnApproved", approvalStatusTemplate: "approvalStatusTemplate", statusColorMapping: "statusColorMapping", isEdit: "isEdit", isNextNodeBlank: "isNextNodeBlank" }, outputs: { onAdd: "onAdd", onEdit: "onEdit", onDelete: "onDelete" }, host: { properties: { "class.fdp-approval-flow-node--first-root": "meta?.firstOfMultipleRootNodes", "class.fdp-approval-flow-node--first-final": "meta?.firstOfMultipleFinalNodes", "class.fdp-approval-flow-node--edit-mode": "this.isEdit", "class.fdp-approval-flow-node--next-blank": "this.isNextNodeBlank", "class.fdp-approval-flow-node--blank": "this._blank", "class.fdp-approval-flow-node--space": "this._space", "class.fdp-approval-flow-node--root": "this._isRoot", "class.fdp-approval-flow-node--final": "this._isFinal", "class.fdp-approval-flow-node--line-before": "this._renderLineBefore", "class.fdp-approval-flow-node--line-after": "this._renderLineAfter", "class.fdp-approval-flow-node--approved": "this._isApproved", "class.fdp-approval-flow-node--parent-approved": "this._isParentApproved", "class.fdp-approval-flow-node--selected": "this._isNodeSelected", "class.fdp-approval-flow-node--parallel-start": "this._isParallelStart", "class.fdp-approval-flow-node--parallel-end": "this._isParallelEnd", "class.fdp-approval-flow-node--first-in-parallel": "this._isFirstInParallel", "class.fdp-approval-flow-node--last-in-parallel": "this._isLastInParallel", "class.fdp-approval-flow-node--last-blank": "this._lastBlank" }, classAttribute: "fdp-approval-flow-node" }, queries: [{ propertyName: "_gridListItem", first: true, predicate: GridListItemComponent, descendants: true }], viewQueries: [{ propertyName: "_menu", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "_overflowMenuButton", first: true, predicate: ["overflowMenuButton"], descendants: true }, { propertyName: "_nodeContent", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "_dropZones", predicate: ApprovalFlowDropZoneDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (meta?.renderVerticalLineBefore) {\n    <div\n        class=\"fdp-approval-flow-node__vertical-line-before\"\n        [class.fdp-approval-flow-node__vertical-line-before-solid]=\"_isVerticalLineBeforeSolid\"\n    ></div>\n}\n@if (meta?.renderVerticalLineAfter) {\n    <div\n        class=\"fdp-approval-flow-node__vertical-line-after\"\n        [class.fdp-approval-flow-node__vertical-line-after-solid]=\"_isVerticalLineAfterSolid\"\n    ></div>\n}\n@if (!_blank && !_space) {\n    @if (renderArrow) {\n        <div class=\"fdp-approval-flow-node__arrow\"></div>\n    }\n    @if (_isRoot && meta?.nodeIndex === 0) {\n        <div class=\"fdp-approval-flow-node__carousel-start-marker\"></div>\n    }\n    @if (_isFinal && meta?.nodeIndex === 0) {\n        <div class=\"fdp-approval-flow-node__carousel-end-marker\"></div>\n    }\n    <ng-content></ng-content>\n}\n<ng-template #overflowMenuButton>\n    <!-- Actually just the fd-grid-item action button but with some hardcode to be used as menu trigger -->\n    @if (!node?.disableActions) {\n        <button\n            class=\"fdp-approval-flow-node__menu-button\"\n            fd-button\n            fdType=\"transparent\"\n            tabindex=\"0\"\n            glyph=\"overflow\"\n            [title]=\"'platformApprovalFlow.nodeMenuButtonTitle' | fdTranslate\"\n            fdCompact\n            [fdMenuTrigger]=\"menu\"\n            [disabled]=\"_isEditActionsAvailable\"\n            (click)=\"$event.stopPropagation()\"\n        ></button>\n    }\n</ng-template>\n<ng-template #nodeContent>\n    <div class=\"fdp-approval-flow-node__info\">\n        <div\n            class=\"fdp-approval-flow-node__name\"\n            [class.fdp-approval-flow-node__name--members-count]=\"node.approvers.length > 1\"\n            [id]=\"approvalFlowNodeId\"\n        >\n            @if (node.approvers.length === 1) {\n                {{ node.approvers[0].name }}\n            } @else {\n                {{ 'platformApprovalFlow.nodeMembersCount' | fdTranslate: { count: node.approvers.length } }}\n            }\n        </div>\n        <div class=\"fdp-approval-flow-node__description\">\n            @if (!node.variousTeams) {\n                {{\n                    node.approvers.length > 1\n                        ? node.description\n                        : node.approvers.length\n                          ? node.approvers[0].description\n                          : ''\n                }}\n            } @else {\n                {{ 'platformApprovalFlow.nodeVariousTeams' | fdTranslate }}\n            }\n            <ng-template #variousTeams> {{ 'platformApprovalFlow.nodeVariousTeams' | fdTranslate }} </ng-template>\n        </div>\n        <fdp-object-status [status]=\"_objectStatus\" [inverted]=\"true\">\n            <ng-template fdpObjectStatusText>\n                @if (approvalStatusTemplate) {\n                    @if (!checkDueDate || !_showDueDateWarning) {\n                        @if (approvalStatusTemplate) {\n                            <ng-template\n                                [ngTemplateOutlet]=\"approvalStatusTemplate\"\n                                [ngTemplateOutletContext]=\"{ node: node }\"\n                            >\n                            </ng-template>\n                        }\n                    }\n                } @else {\n                    @if (!checkDueDate || !_showDueDateWarning) {\n                        @switch (node.status) {\n                            @case ('approved') {\n                                {{ 'platformApprovalFlow.statusApproved' | fdTranslate }}\n                            }\n                            @case ('rejected') {\n                                {{ 'platformApprovalFlow.statusRejected' | fdTranslate }}\n                            }\n                            @case ('in progress') {\n                                {{ 'platformApprovalFlow.statusInProgress' | fdTranslate }}\n                            }\n                            @case ('not started') {\n                                {{ 'platformApprovalFlow.statusNotStarted' | fdTranslate }}\n                            }\n                        }\n                    }\n                }\n                @if (checkDueDate && _showDueDateWarning) {\n                    @if (_dueIn === dueDateThreshold) {\n                        {{ 'platformApprovalFlow.nodeStatusDueToday' | fdTranslate }}\n                    }\n                    @if (_dueIn < dueDateThreshold) {\n                        {{\n                            'platformApprovalFlow.nodeStatusDueInXDays'\n                                | fdTranslate: { count: dueDateThreshold - _dueIn }\n                        }}\n                    }\n                    @if (_dueIn > dueDateThreshold) {\n                        {{\n                            'platformApprovalFlow.nodeStatusXDaysOverdue'\n                                | fdTranslate: { count: _dueIn - dueDateThreshold }\n                        }}\n                    }\n                }\n            </ng-template>\n        </fdp-object-status>\n    </div>\n</ng-template>\n@if (_showAddButton && meta?.canAddNodeBeforeAll && !node?.actionsConfig?.disableAddBefore) {\n    <ng-template\n        [ngTemplateOutlet]=\"addNodeButton\"\n        [ngTemplateOutletContext]=\"{ placement: 'before-all' }\"\n    ></ng-template>\n}\n@if (_showAddButton && meta?.canAddNodeBefore && !node?.actionsConfig?.disableAddBefore) {\n    <ng-template [ngTemplateOutlet]=\"addNodeButton\" [ngTemplateOutletContext]=\"{ placement: 'before' }\"></ng-template>\n}\n@if (\n    _showAddButton && meta?.canAddNodeAfter && meta?.renderAddNodeAfterButton && !node?.actionsConfig?.disableAddAfter\n) {\n    <ng-template [ngTemplateOutlet]=\"addNodeButton\" [ngTemplateOutletContext]=\"{ placement: 'after' }\"></ng-template>\n}\n@if (\n    _showAfterAllAddButton &&\n    meta?.canAddNodeAfterAll &&\n    meta?.renderAddNodeAfterButton &&\n    !node?.actionsConfig?.disableAddAfter\n) {\n    <ng-template\n        [ngTemplateOutlet]=\"addNodeButton\"\n        [ngTemplateOutletContext]=\"{ placement: 'after-all' }\"\n    ></ng-template>\n}\n<ng-template #addNodeButton let-placement=\"placement\">\n    @if (node.status !== 'approved') {\n        <button\n            fd-button\n            glyph=\"add\"\n            [title]=\"'platformApprovalFlow.addNodeButtonTitle' | fdTranslate\"\n            fdCompact\n            class=\"fdp-approval-flow-node__add\"\n            [class.fdp-approval-flow-node__add--blank]=\"this._blank\"\n            [class.fdp-approval-flow-node__add--before]=\"\n                !this._blank && (placement === 'before' || placement === 'before-all')\n            \"\n            [class.fdp-approval-flow-node__add--before-all]=\"!this._blank && placement === 'before-all'\"\n            [class.fdp-approval-flow-node__add--after]=\"\n                !this._blank && (placement === 'after' || placement === 'after-all')\n            \"\n            [class.fdp-approval-flow-node__add--after-all]=\"placement === 'after-all'\"\n            [style.visibility]=\"dropZone.active ? 'hidden' : ''\"\n            (click)=\"onAdd.emit(placement)\"\n        ></button>\n    }\n    <div\n        #dropZone=\"fdp-approval-flow-drop-zone\"\n        fdp-approval-flow-drop-zone\n        [placement]=\"placement\"\n        class=\"fdp-approval-flow-node__drop-zone\"\n        [class.fdp-approval-flow-node__drop-zone--active]=\"dropZone.active\"\n        [class.fdp-approval-flow-node__drop-zone--blank]=\"isNextNodeBlank\"\n        [class.fdp-approval-flow-node__drop-zone--partial]=\"_dropZonePartial(placement)\"\n    ></div>\n</ng-template>\n<fd-menu #menu fdContentDensity placement=\"bottom-end\" (isOpenChange)=\"_onMenuOpen()\">\n    @if (meta?.canAddNodeBefore && !this.node?.actionsConfig?.disableAddBefore) {\n        <li fd-menu-item (click)=\"menu.close(); onAdd.emit('before')\">\n            <div fd-menu-interactive>\n                <span fd-menu-title>{{ 'platformApprovalFlow.nodeActionAddApproversBefore' | fdTranslate }}</span>\n            </div>\n        </li>\n    }\n    @if (meta?.canAddNodeAfter && !this.node?.actionsConfig?.disableAddAfter) {\n        <li fd-menu-item (click)=\"menu.close(); onAdd.emit('after')\">\n            <div fd-menu-interactive>\n                <span fd-menu-title>{{ 'platformApprovalFlow.nodeActionAddApproversAfter' | fdTranslate }}</span>\n            </div>\n        </li>\n    }\n    @if (meta?.canAddParallel && !this.node?.actionsConfig?.disableAddParallel) {\n        <li fd-menu-item (click)=\"menu.close(); onAdd.emit('parallel')\">\n            <div fd-menu-interactive>\n                <span fd-menu-title>{{ 'platformApprovalFlow.nodeActionAddApproversParallel' | fdTranslate }}</span>\n            </div>\n        </li>\n    }\n    @if (_isNotStarted && !this.node?.actionsConfig?.disableEdit) {\n        <li fd-menu-item (click)=\"menu.close(); onEdit.emit()\">\n            <div fd-menu-interactive>\n                <span fd-menu-title> {{ 'platformApprovalFlow.nodeActionEditApprover' | fdTranslate }}</span>\n            </div>\n        </li>\n    }\n    @if (!this.node?.actionsConfig?.disableRemove) {\n        <li fd-menu-item (click)=\"menu.close(); onDelete.emit()\">\n            <div fd-menu-interactive>\n                <span fd-menu-title> {{ 'platformApprovalFlow.nodeActionRemove' | fdTranslate }}</span>\n            </div>\n        </li>\n    }\n</fd-menu>\n", styles: [".fdp-approval-flow-node{display:block;box-sizing:border-box;position:relative;width:17.375rem;height:5.875rem;margin-bottom:1rem}.fdp-approval-flow-node.fdp-approval-flow-node--edit-mode{height:7.875rem}.fdp-approval-flow-node.fdp-approval-flow-node--edit-mode .fdp-approval-flow-node__vertical-line-before:before,.fdp-approval-flow-node.fdp-approval-flow-node--edit-mode .fdp-approval-flow-node__vertical-line-after:after{top:-4.9375rem;height:8.875rem}.fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-before:before,.fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-after:after{content:\"\";display:block;position:absolute;top:-3.9375rem;height:6.875rem}.fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-before:before{left:-2.0625rem;border-right:.125rem dashed #d9d9d9;border-right:.125rem dashed var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' width='2' height='2' fill='%23C4C4C4'/%3E%3C/svg%3E%0A\") 2 round}.fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-before-solid:before{border-right:.125rem solid #d9d9d9;border-right:.125rem solid var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:none}.fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-after:after{right:-2.0625rem;border-right:.125rem dashed #d9d9d9;border-right:.125rem dashed var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' width='2' height='2' fill='%23C4C4C4'/%3E%3C/svg%3E%0A\") 2 round}.fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-after-solid:after{border-right:.125rem solid #d9d9d9;border-right:.125rem solid var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:none}[dir=rtl] .fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-before:before,.fdp-approval-flow-node[dir=rtl] .fdp-approval-flow-node__vertical-line-before:before{left:auto;right:-2.0625rem}[dir=rtl] .fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-after:after,.fdp-approval-flow-node[dir=rtl] .fdp-approval-flow-node__vertical-line-after:after{right:auto;left:-2.0625rem}.fdp-approval-flow-node .fdp-approval-flow-node__add{position:absolute;z-index:10;margin:calc(3.4375rem - 1px) auto auto;inset:0;border-radius:100%;min-width:1rem;max-width:1rem;min-height:1rem;max-height:1rem}.fdp-approval-flow-node .fdp-approval-flow-node__add fd-icon{line-height:1rem;font-size:.7rem;font-weight:900}.fdp-approval-flow-node .fdp-approval-flow-node__add.fdp-approval-flow-node__add--before{left:-2.5rem;right:auto}.fdp-approval-flow-node .fdp-approval-flow-node__add.fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone{left:-2.8rem}.fdp-approval-flow-node .fdp-approval-flow-node__add.fdp-approval-flow-node__add--after{right:-2.5rem;left:auto}.fdp-approval-flow-node .fdp-approval-flow-node__add.fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone{right:-2.8rem;left:auto}.fdp-approval-flow-node .fdp-approval-flow-node__drop-zone{border-radius:.25rem;position:absolute;height:100%;z-index:1}.fdp-approval-flow-node .fdp-approval-flow-node__drop-zone.fdp-approval-flow-node__drop-zone--active{background:#e5f0fa;background:var(--sapList_SelectionBackgroundColor, #e5f0fa);border:.125rem solid #0854a0;border:.125rem solid var(--sapButton_IconColor, #0854a0)}.fdp-approval-flow-node .fdp-approval-flow-node__drop-zone.fdp-approval-flow-node__drop-zone--blank{width:100%;top:0}.fdp-approval-flow-node .fdp-approval-flow-node__drop-zone.fdp-approval-flow-node__drop-zone--partial{width:10%;left:0;top:0}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--blank{background:transparent;box-shadow:none;pointer-events:none;cursor:default}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--blank:before{content:\"\";display:block;position:absolute;width:calc(100% + 4rem);height:0;left:-2rem;top:calc(50% - .0625rem);border-top:.125rem dashed #d9d9d9;border-top:.125rem dashed var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' width='2' height='2' fill='%23C4C4C4'/%3E%3C/svg%3E%0A\") 2 round}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--blank.fdp-approval-flow-node--first-final:before{width:calc(100% + 2rem)}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--blank:not(.fdp-approval-flow-node--last-blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone{width:100%}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--line-before:before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--line-after:after{content:\"\";width:2rem;height:0;display:block;position:absolute;top:calc(50% - .0625rem);bottom:0;pointer-events:none;border-top:.125rem dashed #d9d9d9;border-top:.125rem dashed var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' width='2' height='2' fill='%23C4C4C4'/%3E%3C/svg%3E%0A\") 2 round}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--line-before:before{left:-2rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--line-after:after{right:-2rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--approved.fdp-approval-flow-node--line-after:after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--approved.fdp-approval-flow-node--blank:before{border-top:.125rem solid #d9d9d9;border-top:.125rem solid var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:none}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parent-approved.fdp-approval-flow-node--line-before:before{left:-2rem;border-top:.125rem solid #d9d9d9;border-top:.125rem solid var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:none}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--edit-mode.fdp-approval-flow-node--blank{pointer-events:auto}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--edit-mode .fdp-approval-flow-node__carousel-start-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--edit-mode .fdp-approval-flow-node__carousel-end-marker{top:3.4375rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--edit-mode .fdp-approval-flow-node__arrow{display:none}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final .fdp-approval-flow-node__add--after{right:-1.5rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone{right:-1.8rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all{right:-3.5rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone{right:-3.8rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before{left:-1.5rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone{left:-1.8rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before-all{left:-3.5rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone{left:-3.8rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-blank .fdp-approval-flow-node__add--after-all{left:19.875rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-blank .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone{left:calc(100% + 2rem)}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--next-blank .fdp-approval-flow-node__add--after{right:-12.6875rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--next-blank .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone{left:calc(100% + 4rem)}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-root.fdp-approval-flow-node--line-before:before{width:4rem;left:-4rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-root .fdp-approval-flow-node__carousel-start-marker{left:-4rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-final.fdp-approval-flow-node--line-after:after{width:4rem;right:-4rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-final .fdp-approval-flow-node__carousel-end-marker{right:-4rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging:before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging:after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging .fdp-approval-flow-node__add,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging .fdp-approval-flow-node__carousel-start-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging .fdp-approval-flow-node__carousel-end-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging .fdp-approval-flow-node__vertical-line-before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging .fdp-approval-flow-node__vertical-line-after{visibility:hidden}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__name{font-size:1rem;line-height:1.25rem;margin-bottom:.1rem;color:#32363a;color:var(--sapTextColor, #32363a)}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__description{font-size:.875rem;line-height:1rem;color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);margin-bottom:.4rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__arrow{width:0;height:0;border-style:solid;border-width:.375rem 0 .375rem .5rem;border-color:transparent transparent transparent #d9d9d9;border-color:transparent transparent transparent var(--sapGroup_TitleBorderColor, #d9d9d9);position:absolute;left:-.5rem;top:0;bottom:0;margin:auto}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__carousel-start-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__carousel-end-marker{z-index:1;background:#d9d9d9;background:var(--sapGroup_TitleBorderColor, #d9d9d9);display:block;position:absolute;width:.25rem;height:1rem;top:2.4375rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__carousel-start-marker{left:-2rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__carousel-end-marker{right:-2rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__arrow,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__arrow{left:auto;right:-.5rem;border-width:.375rem .5rem .375rem 0;border-color:transparent #d9d9d9 transparent transparent;border-color:transparent var(--sapGroup_TitleBorderColor, #d9d9d9) transparent transparent}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__carousel-start-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__carousel-start-marker{left:auto;right:-2rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__carousel-end-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__carousel-end-marker{right:auto;left:-2rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--line-before:before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--line-before:before{left:auto;right:-2rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--line-after:after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--line-after:after{right:auto;left:-2rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__name.fdp-approval-flow-node__name--members-count,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__name.fdp-approval-flow-node__name--members-count{direction:ltr;text-align:right}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__add--before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__add--before{right:-2.5rem;left:auto}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone{right:-2.8rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__add--after{left:-2.5rem;right:auto}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone{left:-2.8rem;right:auto}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel .fdp-approval-flow-node__add--after,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start .fdp-approval-flow-node__add--after,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--last-in-parallel .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-start .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--final .fdp-approval-flow-node__add--after{left:-1.5rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--last-in-parallel .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-start .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--final .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone{left:-1.8rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--last-in-parallel:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-start:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--final:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all{left:-3.5rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--last-in-parallel:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-start:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--final:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone{left:-3.8rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--root .fdp-approval-flow-node__add--before{right:-1.5rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--root .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone{right:-1.8rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before-all,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before-all,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--root .fdp-approval-flow-node__add--before-all{right:-3.5rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--root .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone{right:-3.8rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-blank .fdp-approval-flow-node__add--after-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--last-blank .fdp-approval-flow-node__add--after-all{right:19.875rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-blank .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--last-blank .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone{right:calc(100% + 2rem)}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--next-blank .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--next-blank .fdp-approval-flow-node__add--after{left:-12.6875rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--next-blank .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--next-blank .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone{right:calc(100% + 4rem)}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-root.fdp-approval-flow-node--line-before:before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-root.fdp-approval-flow-node--line-before:before{left:auto;right:-4rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-root .fdp-approval-flow-node__carousel-start-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-root .fdp-approval-flow-node__carousel-start-marker{left:auto;right:-4rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-final.fdp-approval-flow-node--line-after:after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-final.fdp-approval-flow-node--line-after:after{right:auto;left:-4rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-final .fdp-approval-flow-node__carousel-end-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-final .fdp-approval-flow-node__carousel-end-marker{right:auto;left:-4rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--blank.fdp-approval-flow-node--first-final:before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--blank.fdp-approval-flow-node--first-final:before{left:0}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: ObjectStatusComponent, selector: "fdp-object-status", inputs: ["status", "glyph", "indicationColor", "secondaryIndication", "clickable", "inverted", "large", "label", "ariaLabel", "title"], outputs: ["objectStatusClick"] }, { kind: "directive", type: PlatformObjectStatusTextDirective, selector: "[fdpObjectStatusText]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ApprovalFlowDropZoneDirective, selector: "[fdp-approval-flow-drop-zone]", inputs: ["placement"], exportAs: ["fdp-approval-flow-drop-zone"] }, { kind: "component", type: MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowNodeComponent, isStandalone: true, selector: "fdp-approval-flow-node", inputs: { node: "node", meta: "meta", renderArrow: "renderArrow", checkDueDate: "checkDueDate", dueDateThreshold: "dueDateThreshold", allNodesInColumnApproved: "allNodesInColumnApproved", approvalStatusTemplate: "approvalStatusTemplate", statusColorMapping: "statusColorMapping", isEdit: "isEdit", isNextNodeBlank: "isNextNodeBlank" }, outputs: { onAdd: "onAdd", onEdit: "onEdit", onDelete: "onDelete" }, host: { properties: { "class.fdp-approval-flow-node--first-root": "meta?.firstOfMultipleRootNodes", "class.fdp-approval-flow-node--first-final": "meta?.firstOfMultipleFinalNodes", "class.fdp-approval-flow-node--edit-mode": "this.isEdit", "class.fdp-approval-flow-node--next-blank": "this.isNextNodeBlank", "class.fdp-approval-flow-node--blank": "this._blank", "class.fdp-approval-flow-node--space": "this._space", "class.fdp-approval-flow-node--root": "this._isRoot", "class.fdp-approval-flow-node--final": "this._isFinal", "class.fdp-approval-flow-node--line-before": "this._renderLineBefore", "class.fdp-approval-flow-node--line-after": "this._renderLineAfter", "class.fdp-approval-flow-node--approved": "this._isApproved", "class.fdp-approval-flow-node--parent-approved": "this._isParentApproved", "class.fdp-approval-flow-node--selected": "this._isNodeSelected", "class.fdp-approval-flow-node--parallel-start": "this._isParallelStart", "class.fdp-approval-flow-node--parallel-end": "this._isParallelEnd", "class.fdp-approval-flow-node--first-in-parallel": "this._isFirstInParallel", "class.fdp-approval-flow-node--last-in-parallel": "this._isLastInParallel", "class.fdp-approval-flow-node--last-blank": "this._lastBlank" }, classAttribute: "fdp-approval-flow-node" }, queries: [{ propertyName: "_gridListItem", first: true, predicate: GridListItemComponent, descendants: true }], viewQueries: [{ propertyName: "_menu", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "_overflowMenuButton", first: true, predicate: ["overflowMenuButton"], descendants: true }, { propertyName: "_nodeContent", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "_dropZones", predicate: ApprovalFlowDropZoneDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (meta?.renderVerticalLineBefore) {\n    <div\n        class=\"fdp-approval-flow-node__vertical-line-before\"\n        [class.fdp-approval-flow-node__vertical-line-before-solid]=\"_isVerticalLineBeforeSolid\"\n    ></div>\n}\n@if (meta?.renderVerticalLineAfter) {\n    <div\n        class=\"fdp-approval-flow-node__vertical-line-after\"\n        [class.fdp-approval-flow-node__vertical-line-after-solid]=\"_isVerticalLineAfterSolid\"\n    ></div>\n}\n@if (!_blank && !_space) {\n    @if (renderArrow) {\n        <div class=\"fdp-approval-flow-node__arrow\"></div>\n    }\n    @if (_isRoot && meta?.nodeIndex === 0) {\n        <div class=\"fdp-approval-flow-node__carousel-start-marker\"></div>\n    }\n    @if (_isFinal && meta?.nodeIndex === 0) {\n        <div class=\"fdp-approval-flow-node__carousel-end-marker\"></div>\n    }\n    <ng-content></ng-content>\n}\n<ng-template #overflowMenuButton>\n    <!-- Actually just the fd-grid-item action button but with some hardcode to be used as menu trigger -->\n    @if (!node?.disableActions) {\n        <button\n            class=\"fdp-approval-flow-node__menu-button\"\n            fd-button\n            fdType=\"transparent\"\n            tabindex=\"0\"\n            glyph=\"overflow\"\n            [title]=\"'platformApprovalFlow.nodeMenuButtonTitle' | fdTranslate\"\n            fdCompact\n            [fdMenuTrigger]=\"menu\"\n            [disabled]=\"_isEditActionsAvailable\"\n            (click)=\"$event.stopPropagation()\"\n        ></button>\n    }\n</ng-template>\n<ng-template #nodeContent>\n    <div class=\"fdp-approval-flow-node__info\">\n        <div\n            class=\"fdp-approval-flow-node__name\"\n            [class.fdp-approval-flow-node__name--members-count]=\"node.approvers.length > 1\"\n            [id]=\"approvalFlowNodeId\"\n        >\n            @if (node.approvers.length === 1) {\n                {{ node.approvers[0].name }}\n            } @else {\n                {{ 'platformApprovalFlow.nodeMembersCount' | fdTranslate: { count: node.approvers.length } }}\n            }\n        </div>\n        <div class=\"fdp-approval-flow-node__description\">\n            @if (!node.variousTeams) {\n                {{\n                    node.approvers.length > 1\n                        ? node.description\n                        : node.approvers.length\n                          ? node.approvers[0].description\n                          : ''\n                }}\n            } @else {\n                {{ 'platformApprovalFlow.nodeVariousTeams' | fdTranslate }}\n            }\n            <ng-template #variousTeams> {{ 'platformApprovalFlow.nodeVariousTeams' | fdTranslate }} </ng-template>\n        </div>\n        <fdp-object-status [status]=\"_objectStatus\" [inverted]=\"true\">\n            <ng-template fdpObjectStatusText>\n                @if (approvalStatusTemplate) {\n                    @if (!checkDueDate || !_showDueDateWarning) {\n                        @if (approvalStatusTemplate) {\n                            <ng-template\n                                [ngTemplateOutlet]=\"approvalStatusTemplate\"\n                                [ngTemplateOutletContext]=\"{ node: node }\"\n                            >\n                            </ng-template>\n                        }\n                    }\n                } @else {\n                    @if (!checkDueDate || !_showDueDateWarning) {\n                        @switch (node.status) {\n                            @case ('approved') {\n                                {{ 'platformApprovalFlow.statusApproved' | fdTranslate }}\n                            }\n                            @case ('rejected') {\n                                {{ 'platformApprovalFlow.statusRejected' | fdTranslate }}\n                            }\n                            @case ('in progress') {\n                                {{ 'platformApprovalFlow.statusInProgress' | fdTranslate }}\n                            }\n                            @case ('not started') {\n                                {{ 'platformApprovalFlow.statusNotStarted' | fdTranslate }}\n                            }\n                        }\n                    }\n                }\n                @if (checkDueDate && _showDueDateWarning) {\n                    @if (_dueIn === dueDateThreshold) {\n                        {{ 'platformApprovalFlow.nodeStatusDueToday' | fdTranslate }}\n                    }\n                    @if (_dueIn < dueDateThreshold) {\n                        {{\n                            'platformApprovalFlow.nodeStatusDueInXDays'\n                                | fdTranslate: { count: dueDateThreshold - _dueIn }\n                        }}\n                    }\n                    @if (_dueIn > dueDateThreshold) {\n                        {{\n                            'platformApprovalFlow.nodeStatusXDaysOverdue'\n                                | fdTranslate: { count: _dueIn - dueDateThreshold }\n                        }}\n                    }\n                }\n            </ng-template>\n        </fdp-object-status>\n    </div>\n</ng-template>\n@if (_showAddButton && meta?.canAddNodeBeforeAll && !node?.actionsConfig?.disableAddBefore) {\n    <ng-template\n        [ngTemplateOutlet]=\"addNodeButton\"\n        [ngTemplateOutletContext]=\"{ placement: 'before-all' }\"\n    ></ng-template>\n}\n@if (_showAddButton && meta?.canAddNodeBefore && !node?.actionsConfig?.disableAddBefore) {\n    <ng-template [ngTemplateOutlet]=\"addNodeButton\" [ngTemplateOutletContext]=\"{ placement: 'before' }\"></ng-template>\n}\n@if (\n    _showAddButton && meta?.canAddNodeAfter && meta?.renderAddNodeAfterButton && !node?.actionsConfig?.disableAddAfter\n) {\n    <ng-template [ngTemplateOutlet]=\"addNodeButton\" [ngTemplateOutletContext]=\"{ placement: 'after' }\"></ng-template>\n}\n@if (\n    _showAfterAllAddButton &&\n    meta?.canAddNodeAfterAll &&\n    meta?.renderAddNodeAfterButton &&\n    !node?.actionsConfig?.disableAddAfter\n) {\n    <ng-template\n        [ngTemplateOutlet]=\"addNodeButton\"\n        [ngTemplateOutletContext]=\"{ placement: 'after-all' }\"\n    ></ng-template>\n}\n<ng-template #addNodeButton let-placement=\"placement\">\n    @if (node.status !== 'approved') {\n        <button\n            fd-button\n            glyph=\"add\"\n            [title]=\"'platformApprovalFlow.addNodeButtonTitle' | fdTranslate\"\n            fdCompact\n            class=\"fdp-approval-flow-node__add\"\n            [class.fdp-approval-flow-node__add--blank]=\"this._blank\"\n            [class.fdp-approval-flow-node__add--before]=\"\n                !this._blank && (placement === 'before' || placement === 'before-all')\n            \"\n            [class.fdp-approval-flow-node__add--before-all]=\"!this._blank && placement === 'before-all'\"\n            [class.fdp-approval-flow-node__add--after]=\"\n                !this._blank && (placement === 'after' || placement === 'after-all')\n            \"\n            [class.fdp-approval-flow-node__add--after-all]=\"placement === 'after-all'\"\n            [style.visibility]=\"dropZone.active ? 'hidden' : ''\"\n            (click)=\"onAdd.emit(placement)\"\n        ></button>\n    }\n    <div\n        #dropZone=\"fdp-approval-flow-drop-zone\"\n        fdp-approval-flow-drop-zone\n        [placement]=\"placement\"\n        class=\"fdp-approval-flow-node__drop-zone\"\n        [class.fdp-approval-flow-node__drop-zone--active]=\"dropZone.active\"\n        [class.fdp-approval-flow-node__drop-zone--blank]=\"isNextNodeBlank\"\n        [class.fdp-approval-flow-node__drop-zone--partial]=\"_dropZonePartial(placement)\"\n    ></div>\n</ng-template>\n<fd-menu #menu fdContentDensity placement=\"bottom-end\" (isOpenChange)=\"_onMenuOpen()\">\n    @if (meta?.canAddNodeBefore && !this.node?.actionsConfig?.disableAddBefore) {\n        <li fd-menu-item (click)=\"menu.close(); onAdd.emit('before')\">\n            <div fd-menu-interactive>\n                <span fd-menu-title>{{ 'platformApprovalFlow.nodeActionAddApproversBefore' | fdTranslate }}</span>\n            </div>\n        </li>\n    }\n    @if (meta?.canAddNodeAfter && !this.node?.actionsConfig?.disableAddAfter) {\n        <li fd-menu-item (click)=\"menu.close(); onAdd.emit('after')\">\n            <div fd-menu-interactive>\n                <span fd-menu-title>{{ 'platformApprovalFlow.nodeActionAddApproversAfter' | fdTranslate }}</span>\n            </div>\n        </li>\n    }\n    @if (meta?.canAddParallel && !this.node?.actionsConfig?.disableAddParallel) {\n        <li fd-menu-item (click)=\"menu.close(); onAdd.emit('parallel')\">\n            <div fd-menu-interactive>\n                <span fd-menu-title>{{ 'platformApprovalFlow.nodeActionAddApproversParallel' | fdTranslate }}</span>\n            </div>\n        </li>\n    }\n    @if (_isNotStarted && !this.node?.actionsConfig?.disableEdit) {\n        <li fd-menu-item (click)=\"menu.close(); onEdit.emit()\">\n            <div fd-menu-interactive>\n                <span fd-menu-title> {{ 'platformApprovalFlow.nodeActionEditApprover' | fdTranslate }}</span>\n            </div>\n        </li>\n    }\n    @if (!this.node?.actionsConfig?.disableRemove) {\n        <li fd-menu-item (click)=\"menu.close(); onDelete.emit()\">\n            <div fd-menu-interactive>\n                <span fd-menu-title> {{ 'platformApprovalFlow.nodeActionRemove' | fdTranslate }}</span>\n            </div>\n        </li>\n    }\n</fd-menu>\n", styles: [".fdp-approval-flow-node{display:block;box-sizing:border-box;position:relative;width:17.375rem;height:5.875rem;margin-bottom:1rem}.fdp-approval-flow-node.fdp-approval-flow-node--edit-mode{height:7.875rem}.fdp-approval-flow-node.fdp-approval-flow-node--edit-mode .fdp-approval-flow-node__vertical-line-before:before,.fdp-approval-flow-node.fdp-approval-flow-node--edit-mode .fdp-approval-flow-node__vertical-line-after:after{top:-4.9375rem;height:8.875rem}.fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-before:before,.fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-after:after{content:\"\";display:block;position:absolute;top:-3.9375rem;height:6.875rem}.fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-before:before{left:-2.0625rem;border-right:.125rem dashed #d9d9d9;border-right:.125rem dashed var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' width='2' height='2' fill='%23C4C4C4'/%3E%3C/svg%3E%0A\") 2 round}.fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-before-solid:before{border-right:.125rem solid #d9d9d9;border-right:.125rem solid var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:none}.fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-after:after{right:-2.0625rem;border-right:.125rem dashed #d9d9d9;border-right:.125rem dashed var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' width='2' height='2' fill='%23C4C4C4'/%3E%3C/svg%3E%0A\") 2 round}.fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-after-solid:after{border-right:.125rem solid #d9d9d9;border-right:.125rem solid var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:none}[dir=rtl] .fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-before:before,.fdp-approval-flow-node[dir=rtl] .fdp-approval-flow-node__vertical-line-before:before{left:auto;right:-2.0625rem}[dir=rtl] .fdp-approval-flow-node .fdp-approval-flow-node__vertical-line-after:after,.fdp-approval-flow-node[dir=rtl] .fdp-approval-flow-node__vertical-line-after:after{right:auto;left:-2.0625rem}.fdp-approval-flow-node .fdp-approval-flow-node__add{position:absolute;z-index:10;margin:calc(3.4375rem - 1px) auto auto;inset:0;border-radius:100%;min-width:1rem;max-width:1rem;min-height:1rem;max-height:1rem}.fdp-approval-flow-node .fdp-approval-flow-node__add fd-icon{line-height:1rem;font-size:.7rem;font-weight:900}.fdp-approval-flow-node .fdp-approval-flow-node__add.fdp-approval-flow-node__add--before{left:-2.5rem;right:auto}.fdp-approval-flow-node .fdp-approval-flow-node__add.fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone{left:-2.8rem}.fdp-approval-flow-node .fdp-approval-flow-node__add.fdp-approval-flow-node__add--after{right:-2.5rem;left:auto}.fdp-approval-flow-node .fdp-approval-flow-node__add.fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone{right:-2.8rem;left:auto}.fdp-approval-flow-node .fdp-approval-flow-node__drop-zone{border-radius:.25rem;position:absolute;height:100%;z-index:1}.fdp-approval-flow-node .fdp-approval-flow-node__drop-zone.fdp-approval-flow-node__drop-zone--active{background:#e5f0fa;background:var(--sapList_SelectionBackgroundColor, #e5f0fa);border:.125rem solid #0854a0;border:.125rem solid var(--sapButton_IconColor, #0854a0)}.fdp-approval-flow-node .fdp-approval-flow-node__drop-zone.fdp-approval-flow-node__drop-zone--blank{width:100%;top:0}.fdp-approval-flow-node .fdp-approval-flow-node__drop-zone.fdp-approval-flow-node__drop-zone--partial{width:10%;left:0;top:0}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--blank{background:transparent;box-shadow:none;pointer-events:none;cursor:default}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--blank:before{content:\"\";display:block;position:absolute;width:calc(100% + 4rem);height:0;left:-2rem;top:calc(50% - .0625rem);border-top:.125rem dashed #d9d9d9;border-top:.125rem dashed var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' width='2' height='2' fill='%23C4C4C4'/%3E%3C/svg%3E%0A\") 2 round}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--blank.fdp-approval-flow-node--first-final:before{width:calc(100% + 2rem)}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--blank:not(.fdp-approval-flow-node--last-blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone{width:100%}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--line-before:before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--line-after:after{content:\"\";width:2rem;height:0;display:block;position:absolute;top:calc(50% - .0625rem);bottom:0;pointer-events:none;border-top:.125rem dashed #d9d9d9;border-top:.125rem dashed var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' y='3' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='6' width='2' height='2' fill='%23C4C4C4'/%3E%3Crect x='3' width='2' height='2' fill='%23C4C4C4'/%3E%3C/svg%3E%0A\") 2 round}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--line-before:before{left:-2rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--line-after:after{right:-2rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--approved.fdp-approval-flow-node--line-after:after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--approved.fdp-approval-flow-node--blank:before{border-top:.125rem solid #d9d9d9;border-top:.125rem solid var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:none}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parent-approved.fdp-approval-flow-node--line-before:before{left:-2rem;border-top:.125rem solid #d9d9d9;border-top:.125rem solid var(--sapGroup_TitleBorderColor, #d9d9d9);border-image:none}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--edit-mode.fdp-approval-flow-node--blank{pointer-events:auto}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--edit-mode .fdp-approval-flow-node__carousel-start-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--edit-mode .fdp-approval-flow-node__carousel-end-marker{top:3.4375rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--edit-mode .fdp-approval-flow-node__arrow{display:none}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final .fdp-approval-flow-node__add--after{right:-1.5rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone{right:-1.8rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all{right:-3.5rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone{right:-3.8rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before{left:-1.5rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone{left:-1.8rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before-all{left:-3.5rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone{left:-3.8rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-blank .fdp-approval-flow-node__add--after-all{left:19.875rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-blank .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone{left:calc(100% + 2rem)}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--next-blank .fdp-approval-flow-node__add--after{right:-12.6875rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--next-blank .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone{left:calc(100% + 4rem)}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-root.fdp-approval-flow-node--line-before:before{width:4rem;left:-4rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-root .fdp-approval-flow-node__carousel-start-marker{left:-4rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-final.fdp-approval-flow-node--line-after:after{width:4rem;right:-4rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-final .fdp-approval-flow-node__carousel-end-marker{right:-4rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging:before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging:after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging .fdp-approval-flow-node__add,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging .fdp-approval-flow-node__carousel-start-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging .fdp-approval-flow-node__carousel-end-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging .fdp-approval-flow-node__vertical-line-before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space).cdk-drag-dragging .fdp-approval-flow-node__vertical-line-after{visibility:hidden}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__name{font-size:1rem;line-height:1.25rem;margin-bottom:.1rem;color:#32363a;color:var(--sapTextColor, #32363a)}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__description{font-size:.875rem;line-height:1rem;color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);margin-bottom:.4rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__arrow{width:0;height:0;border-style:solid;border-width:.375rem 0 .375rem .5rem;border-color:transparent transparent transparent #d9d9d9;border-color:transparent transparent transparent var(--sapGroup_TitleBorderColor, #d9d9d9);position:absolute;left:-.5rem;top:0;bottom:0;margin:auto}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__carousel-start-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__carousel-end-marker{z-index:1;background:#d9d9d9;background:var(--sapGroup_TitleBorderColor, #d9d9d9);display:block;position:absolute;width:.25rem;height:1rem;top:2.4375rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__carousel-start-marker{left:-2rem}.fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__carousel-end-marker{right:-2rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__arrow,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__arrow{left:auto;right:-.5rem;border-width:.375rem .5rem .375rem 0;border-color:transparent #d9d9d9 transparent transparent;border-color:transparent var(--sapGroup_TitleBorderColor, #d9d9d9) transparent transparent}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__carousel-start-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__carousel-start-marker{left:auto;right:-2rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__carousel-end-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__carousel-end-marker{right:auto;left:-2rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--line-before:before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--line-before:before{left:auto;right:-2rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--line-after:after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--line-after:after{right:auto;left:-2rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__name.fdp-approval-flow-node__name--members-count,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__name.fdp-approval-flow-node__name--members-count{direction:ltr;text-align:right}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__add--before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__add--before{right:-2.5rem;left:auto}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone{right:-2.8rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__add--after{left:-2.5rem;right:auto}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space) .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl] .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone{left:-2.8rem;right:auto}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel .fdp-approval-flow-node__add--after,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start .fdp-approval-flow-node__add--after,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--last-in-parallel .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-start .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--final .fdp-approval-flow-node__add--after{left:-1.5rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--last-in-parallel .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-start .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--final .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone{left:-1.8rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--last-in-parallel:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-start:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--final:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all{left:-3.5rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-in-parallel:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-start:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--final:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--last-in-parallel:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-start:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--final:not(.fdp-approval-flow-node--blank) .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone{left:-3.8rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--root .fdp-approval-flow-node__add--before{right:-1.5rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--root .fdp-approval-flow-node__add--before+.fdp-approval-flow-node__drop-zone{right:-1.8rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before-all,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before-all,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--root .fdp-approval-flow-node__add--before-all{right:-3.5rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--root .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-in-parallel .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--parallel-end .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--root .fdp-approval-flow-node__add--before-all+.fdp-approval-flow-node__drop-zone{right:-3.8rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-blank .fdp-approval-flow-node__add--after-all,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--last-blank .fdp-approval-flow-node__add--after-all{right:19.875rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--last-blank .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--last-blank .fdp-approval-flow-node__add--after-all+.fdp-approval-flow-node__drop-zone{right:calc(100% + 2rem)}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--next-blank .fdp-approval-flow-node__add--after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--next-blank .fdp-approval-flow-node__add--after{left:-12.6875rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--next-blank .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--next-blank .fdp-approval-flow-node__add--after+.fdp-approval-flow-node__drop-zone{right:calc(100% + 4rem)}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-root.fdp-approval-flow-node--line-before:before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-root.fdp-approval-flow-node--line-before:before{left:auto;right:-4rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-root .fdp-approval-flow-node__carousel-start-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-root .fdp-approval-flow-node__carousel-start-marker{left:auto;right:-4rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-final.fdp-approval-flow-node--line-after:after,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-final.fdp-approval-flow-node--line-after:after{right:auto;left:-4rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--first-final .fdp-approval-flow-node__carousel-end-marker,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--first-final .fdp-approval-flow-node__carousel-end-marker{right:auto;left:-4rem}[dir=rtl] .fdp-approval-flow-node:not(.fdp-approval-flow-node--space).fdp-approval-flow-node--blank.fdp-approval-flow-node--first-final:before,.fdp-approval-flow-node:not(.fdp-approval-flow-node--space)[dir=rtl].fdp-approval-flow-node--blank.fdp-approval-flow-node--first-final:before{left:0}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: ObjectStatusComponent, selector: "fdp-object-status", inputs: ["status", "glyph", "glyphFont", "indicationColor", "secondaryIndication", "clickable", "inverted", "large", "label", "ariaLabel", "title"], outputs: ["objectStatusClick"] }, { kind: "directive", type: PlatformObjectStatusTextDirective, selector: "[fdpObjectStatusText]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ApprovalFlowDropZoneDirective, selector: "[fdp-approval-flow-drop-zone]", inputs: ["placement"], exportAs: ["fdp-approval-flow-drop-zone"] }, { kind: "component", type: MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowNodeComponent, decorators: [{
             type: Component,
@@ -2385,7 +2385,7 @@ class ApprovalFlowComponent {
         this._subscriptions.add(sub);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowComponent, deps: [{ token: i1$1.DialogService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: DATA_PROVIDERS, optional: true }, { token: i1$2.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowComponent, isStandalone: true, selector: "fdp-approval-flow", inputs: { title: "title", value: "value", userDataSource: "userDataSource", watcherDataSource: "watcherDataSource", teamDataSource: "teamDataSource", userDetailsTemplate: "userDetailsTemplate", approvalStatusTemplate: "approvalStatusTemplate", statusColorMapping: "statusColorMapping", checkDueDate: "checkDueDate", dueDateThreshold: "dueDateThreshold", allowSendRemindersForStatuses: "allowSendRemindersForStatuses", isEditAvailable: "isEditAvailable", watchersLabel: "watchersLabel", allowAddParallelNodes: "allowAddParallelNodes", disableSaveButton: "disableSaveButton", disableExitButton: "disableExitButton", usersDataProviderEntityKey: "usersDataProviderEntityKey", teamsDataProviderEntityKey: "teamsDataProviderEntityKey", watchersDataProviderEntityKey: "watchersDataProviderEntityKey" }, outputs: { nodeClick: "nodeClick", afterNodeAdd: "afterNodeAdd", afterNodeEdit: "afterNodeEdit", valueChange: "valueChange", sendReminders: "sendReminders", onDataRequested: "onDataRequested", onDataReceived: "onDataReceived" }, providers: [ApprovalFlowAddNodeViewService], viewQueries: [{ propertyName: "_graphContainerEl", first: true, predicate: ["graphContainerEl"], descendants: true }, { propertyName: "_graphEl", first: true, predicate: ["graphEl"], descendants: true }, { propertyName: "_gridList", first: true, predicate: ["gridList"], descendants: true }, { propertyName: "_nodeComponents", predicate: ApprovalFlowNodeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container fdCompact>\n    <fdp-approval-flow-messages\n        [(messages)]=\"_messages\"\n        [undoLastActionAvailable]=\"!!_previousApprovalProcess\"\n        (undoLastAction)=\"_undoLastAction()\"\n    ></fdp-approval-flow-messages>\n    <fd-grid-list\n        #gridList\n        class=\"fdp-approval-flow__toolbar\"\n        [selectionMode]=\"_isEditMode ? 'multiSelect' : 'none'\"\n        (selectionChange)=\"_onNodeSelectionChange($event)\"\n    >\n        <fd-grid-list-title-bar [title]=\"title || ('platformApprovalFlow.defaultTitle' | fdTranslate)\">\n            <fd-grid-list-title-bar-spacer></fd-grid-list-title-bar-spacer>\n            @if (isEditAvailable) {\n                <fdp-approval-flow-toolbar-actions\n                    [graph]=\"_graph\"\n                    [selectedNodes]=\"_selectedNodes\"\n                    [graphMetadata]=\"_graphMetadata\"\n                    [isEditMode]=\"_isEditMode\"\n                    (enterEditMode)=\"_enterEditMode()\"\n                    (addNode)=\"_addNode($event.node, $event.target)\"\n                    (editSelectedNode)=\"_editNode($event)\"\n                    (deleteSelectedNodes)=\"_deleteSelectedNodes()\"\n                ></fdp-approval-flow-toolbar-actions>\n            }\n        </fd-grid-list-title-bar>\n        @if (_approvalProcess.watchers?.length || _isEditMode) {\n            <div class=\"fdp-approval-flow__watchers\" [attr.aria-label]=\"watchersLabel\">\n                <p class=\"fdp-approval-flow__watchers-title\">\n                    {{ watchersLabel || ('platformApprovalFlow.defaultWatchersLabel' | fdTranslate) }}\n                </p>\n                @if (!_isEditMode) {\n                    @for (watcher of _approvalProcess.watchers; track _trackByFn($index, watcher)) {\n                        <fd-avatar\n                            size=\"xs\"\n                            [image]=\"watcher.imgUrl || ''\"\n                            [label]=\"watcher.name\"\n                            [clickable]=\"true\"\n                            [circle]=\"true\"\n                            (avatarClicked)=\"_onWatcherClick(watcher, $event)\"\n                        ></fd-avatar>\n                    }\n                } @else {\n                    <div class=\"fdp-approval-flow__watchers-input-container\">\n                        <fd-multi-input\n                            [dropdownValues]=\"_usersForWatchersList\"\n                            [placeholder]=\"'platformApprovalFlow.watchersInputPlaceholder' | fdTranslate\"\n                            [displayFn]=\"_displayUserFn\"\n                            [valueFn]=\"_userValueFn\"\n                            [showAllButton]=\"true\"\n                            [(ngModel)]=\"_selectedWatcherIds\"\n                            (ngModelChange)=\"_watchersSelectionChanged($event)\"\n                        ></fd-multi-input>\n                    </div>\n                }\n            </div>\n        }\n        @if (!_graph.errors) {\n            @if (_graph.columns.length) {\n                <div\n                    class=\"fdp-approval-flow__container\"\n                    [class.fdp-approval-flow__container--extra-padding-start]=\"true\"\n                    [class.fdp-approval-flow__container--extra-padding-end]=\"true\"\n                >\n                    @if (_scrollDiff > 0) {\n                        <div\n                            class=\"fdp-approval-flow-carousel-controls\"\n                            [class.fdp-approval-flow-carousel-controls--edit-mode]=\"_isEditMode\"\n                        >\n                            @if (_carouselStepsLeft > 0) {\n                                <button\n                                    class=\"fdp-approval-flow-carousel-controls__button--prev-slide\"\n                                    [attr.aria-label]=\"'platformApprovalFlow.prevButtonAriaLabel' | fdTranslate\"\n                                    (click)=\"nextSlide(-1)\"\n                                >\n                                    <fd-icon [glyph]=\"'navigation-' + (_rtl ? 'right' : 'left') + '-arrow'\"></fd-icon>\n                                    {{ _carouselStepsLeft }}\n                                </button>\n                            }\n                            @if (_carouselStepsRight > 0) {\n                                <button\n                                    class=\"fdp-approval-flow-carousel-controls__button--next-slide\"\n                                    [attr.aria-label]=\"'platformApprovalFlow.nextButtonAriaLabel' | fdTranslate\"\n                                    (click)=\"nextSlide()\"\n                                >\n                                    {{ _carouselStepsRight }}\n                                    <fd-icon [glyph]=\"'navigation-' + (_rtl ? 'left' : 'right') + '-arrow'\"></fd-icon>\n                                </button>\n                            }\n                        </div>\n                    }\n                    <div\n                        class=\"fdp-approval-flow__graph-container\"\n                        [class.fdp-approval-flow__graph-container--multiple-root-nodes]=\"_multipleRootNodes\"\n                        [class.fdp-approval-flow__graph-container--multiple-final-nodes]=\"_multipleFinalNodes\"\n                        [class.fd-scrollbar]=\"true\"\n                        #graphContainerEl\n                    >\n                        <div\n                            class=\"fdp-approval-flow__graph\"\n                            #graphEl\n                            [class.fdp-approval-flow__graph--edit-mode]=\"_isEditMode\"\n                        >\n                            @for (column of _graph.columns; track column; let columnIndex = $index) {\n                                <div class=\"fdp-approval-flow__graph-column\">\n                                    @for (\n                                        node of column.nodes;\n                                        track _trackByFn(nodeIndex, node);\n                                        let nodeIndex = $index\n                                    ) {\n                                        <fdp-approval-flow-node\n                                            cdkDrag\n                                            #approvalFlowNode\n                                            [cdkDragDisabled]=\"_isCdkDragDisabled(node)\"\n                                            [node]=\"node\"\n                                            [meta]=\"_graphMetadata[node.id]\"\n                                            [isEdit]=\"_isEditMode\"\n                                            [isNextNodeBlank]=\"_isNextNodeBlank(node, columnIndex, nodeIndex)\"\n                                            [checkDueDate]=\"checkDueDate\"\n                                            [dueDateThreshold]=\"dueDateThreshold\"\n                                            [renderArrow]=\"columnIndex > 0\"\n                                            [allNodesInColumnApproved]=\"!!column.allNodesApproved\"\n                                            [approvalStatusTemplate]=\"approvalStatusTemplate\"\n                                            [statusColorMapping]=\"statusColorMapping\"\n                                            (onAdd)=\"_addNode(node, $event)\"\n                                            (onEdit)=\"_editNode(node)\"\n                                            (onDelete)=\"_onNodeDelete(node)\"\n                                            (keydown)=\"_onNodeKeyDown($event, node)\"\n                                            (cdkDragStarted)=\"_dragDropInProgress = true\"\n                                            (cdkDragReleased)=\"_onNodeDrop(node, $event.source)\"\n                                            (cdkDragMoved)=\"_onNodeDragMoved(node)\"\n                                        >\n                                            <!-- Trick with using projection to make grid list items visible for the grid list -->\n                                            <fd-grid-list-item\n                                                type=\"active\"\n                                                [value]=\"node\"\n                                                [selected]=\"!!node.selected\"\n                                                [ariaLabelledBy]=\"approvalFlowNode.approvalFlowNodeId\"\n                                                [disableToolbarClick]=\"true\"\n                                                class=\"fdp-approval-flow__graph-node-inner\"\n                                                [class.fdp-approval-flow__graph-node-inner--edit]=\"_isEditMode\"\n                                                (press)=\"_onNodeClick(node)\"\n                                            >\n                                                <fd-grid-list-item-toolbar>\n                                                    @if (_isEditMode) {\n                                                        <ng-template\n                                                            [ngTemplateOutlet]=\"approvalFlowNode._overflowMenuButton\"\n                                                        ></ng-template>\n                                                    }\n                                                </fd-grid-list-item-toolbar>\n                                                <fd-avatar\n                                                    fd-grid-list-item-image\n                                                    [image]=\"\n                                                        node.approvers.length === 1 ? node.approvers[0].imgUrl : null\n                                                    \"\n                                                    [label]=\"node.approvers.length > 1 ? node.description : null\"\n                                                    size=\"xs\"\n                                                    [circle]=\"true\"\n                                                ></fd-avatar>\n                                                <ng-template fd-grid-list-item-body>\n                                                    <ng-template\n                                                        [ngTemplateOutlet]=\"approvalFlowNode._nodeContent\"\n                                                    ></ng-template>\n                                                </ng-template>\n                                            </fd-grid-list-item>\n                                        </fdp-approval-flow-node>\n                                    }\n                                </div>\n                            }\n                        </div>\n                    </div>\n                </div>\n            } @else {\n                <figure fd-illustrated-message type=\"spot\" [svgConfig]=\"_emptyApprovalFlowSpotConfig\">\n                    <figcaption fd-illustrated-message-figcaption>\n                        <h3 fd-illustrated-message-title>\n                            {{ 'platformApprovalFlow.emptyTitle' | fdTranslate }}\n                        </h3>\n                        <p fd-illustrated-message-text>\n                            {{ 'platformApprovalFlow.emptyHint' | fdTranslate }}\n                        </p>\n                    </figcaption>\n                </figure>\n                <!-- TODO #5178: Replace with illustrated image component after it gets fixed -->\n                <div [style.display]=\"'none'\">\n                    <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        width=\"128\"\n                        height=\"128\"\n                        viewBox=\"0 0 128 128\"\n                        id=\"sapIllus-Spot-NoData\"\n                    >\n                        <path\n                            d=\"M41.6179,32.7174H84.6273a1,1,0,0,1,.723.3092l7.2445,7.5824,7.4817,7.8491a1,1,0,0,1,.2761.69l-.0046,55.6069a4.1038,4.1038,0,0,1-.8787,2.1212A4.0564,4.0564,0,0,1,98.1,107.9631l-56.3858.0313a2.6167,2.6167,0,0,1-3.0812-3.2309l-.0152-69.0594Z\"\n                            class=\"sapIllus_PatternShadow\"\n                            style=\"fill: var(--sapIllus_PatternShadow)\"\n                        ></path>\n                        <path\n                            d=\"M35.7928,27.4987H78.8022a1,1,0,0,1,.723.3092L86.77,35.39l7.4816,7.8492a1,1,0,0,1,.2762.69l-.0046,55.6069a3,3,0,0,1-3,3H35.808a2.9946,2.9946,0,0,1-3-2.9913c-.01-12.0564-.0423-57.0116-.0152-69.0595A2.9943,2.9943,0,0,1,35.7928,27.4987Z\"\n                            class=\"sapIllus_ObjectFillColor\"\n                            style=\"fill: var(--sapIllus_ObjectFillColor)\"\n                        ></path>\n                        <path\n                            d=\"M93.2978,44.5335H78.8208a.9925.9925,0,0,1-.974-1.01V28.5108a.97.97,0,0,1,1.6628-.7143L93.9865,42.8092A1.0151,1.0151,0,0,1,93.2978,44.5335Z\"\n                            class=\"sapIllus_BrandColorSecondary\"\n                            style=\"fill: var(--sapIllus_BrandColorSecondary)\"\n                        ></path>\n                        <path\n                            d=\"M104.608,38.9485l5.9157-1.7721c1.32-.3954.7584-2.5258-.5689-2.1282L104.0392,36.82c-1.32.3953-.7584,2.5258.5688,2.1282Z\"\n                            class=\"sapIllus_Layering1\"\n                            style=\"fill: var(--sapIllus_Layering1)\"\n                        ></path>\n                        <path\n                            d=\"M85.2973,21.2465l.9718-5.9331c.2154-1.3151-1.777-1.8807-1.9941-.5554l-.9718,5.9332c-.2155,1.3151,1.777,1.8807,1.9941.5553Z\"\n                            class=\"sapIllus_Layering1\"\n                            style=\"fill: var(--sapIllus_Layering1)\"\n                        ></path>\n                        <path\n                            d=\"M95.3034,29.0015a1.01,1.01,0,0,1-.6837-.267,1.0783,1.0783,0,0,1-.0864-1.4932l5.9511-6.8857a1.01,1.01,0,0,1,1.4538-.0884,1.0785,1.0785,0,0,1,.0865,1.4932l-5.9511,6.8858A1.0164,1.0164,0,0,1,95.3034,29.0015Z\"\n                            class=\"sapIllus_Layering1\"\n                            style=\"fill: var(--sapIllus_Layering1)\"\n                        ></path>\n                        <path\n                            d=\"M94.8747,42.8861,80.0855,27.4623a1.5152,1.5152,0,0,0-1.0885-.4636H35.807a3.509,3.509,0,0,0-3.5146,3.4836c-.0294,13.2857.0137,66.7559.0157,69.0257a3.5076,3.5076,0,0,0,3.5146,3.4894H91.7709a3.5106,3.5106,0,0,0,3.5146-3.4982l.005-55.5785A1.49,1.49,0,0,0,94.8747,42.8861Zm-16.21-14.8355a1.15,1.15,0,0,1,.2561-.0309,1.04,1.04,0,0,1,.51.2134l14.276,14.8837.0194.02a.5891.5891,0,0,1,.0968.6251c-.1016.1764-.4086.24-.69.24L78.8355,44a.6031.6031,0,0,1-.5472-.6131c-.0087-4.9588-.017-9.9015-.0035-14.8689A.5189.5189,0,0,1,78.6646,28.0506Zm13.1062,73.95H35.8188a2.5045,2.5045,0,0,1-2.5107-2.491c-.002-2.2694-.0451-55.74-.0157-69.0248a2.5054,2.5054,0,0,1,2.5107-2.4861H77.3684a1.49,1.49,0,0,0-.0976.5106V43.4934A1.5145,1.5145,0,0,0,78.7894,45H78.92L94.286,47.9749l-.0046,51.5269A2.5074,2.5074,0,0,1,91.7708,102.0006Z\"\n                            class=\"sapIllus_StrokeDetailColor\"\n                            style=\"fill: var(--sapIllus_StrokeDetailColor)\"\n                        ></path>\n                    </svg>\n                </div>\n            }\n        }\n    </fd-grid-list>\n    @if (_isEditMode) {\n        <div fd-bar>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button\n                        fd-button\n                        [label]=\"'platformApprovalFlow.editModeSaveButtonLabel' | fdTranslate\"\n                        fdType=\"emphasized\"\n                        [disabled]=\"disableSaveButton\"\n                        (click)=\"_saveEditModeChanges()\"\n                    ></button>\n                </fd-bar-element>\n                <fd-bar-element>\n                    <button\n                        fd-button\n                        [label]=\"'platformApprovalFlow.editModeExitButtonLabel' | fdTranslate\"\n                        fdType=\"transparent\"\n                        [disabled]=\"disableExitButton\"\n                        (click)=\"_exitEditMode()\"\n                    ></button>\n                </fd-bar-element>\n            </div>\n        </div>\n    }\n</ng-container>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-scrollbar{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:auto;padding:0;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-scrollbar:after,.fd-scrollbar:before{box-sizing:inherit;font-size:inherit}.fd-scrollbar.is-focus,.fd-scrollbar:focus{outline:none;z-index:5}.fd-scrollbar::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-scrollbar::-webkit-scrollbar-corner,.fd-scrollbar::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-scrollbar::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-scrollbar::-webkit-scrollbar-thumb:active,.fd-scrollbar::-webkit-scrollbar-thumb:hover{box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-scrollbar--container::-webkit-scrollbar-corner,.fd-scrollbar--container::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color);border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-scrollbar--container[dir=rtl]::-webkit-scrollbar-corner,.fd-scrollbar--container[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-scrollbar--container::-webkit-scrollbar-corner,[dir=rtl] .fd-scrollbar--container::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fdp-approval-flow__watchers{margin-bottom:.5rem;padding-left:.5rem}.fdp-approval-flow__watchers-title{font-size:.875em;color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);margin:1rem 0 .5rem}.fdp-approval-flow__watchers fd-avatar{margin-right:.5rem;cursor:pointer}.fdp-approval-flow__watchers fd-avatar:focus{outline-offset:.0625rem;outline-width:.0625rem;outline-style:dotted;outline-color:var(--sapContent_FocusColor, #0854a0)}.fdp-approval-flow__watchers .fdp-approval-flow__watchers-input-container{width:17.375rem}[dir=rtl] .fdp-approval-flow__watchers,.fdp-approval-flow__watchers[dir=rtl]{padding-right:.5rem}[dir=rtl] .fdp-approval-flow__watchers fd-avatar,.fdp-approval-flow__watchers[dir=rtl] fd-avatar{margin-left:.5rem;margin-right:0}.fdp-approval-flow__container{max-width:100%;position:relative;padding:0 .5rem}.fdp-approval-flow__container--extra-padding-start{padding-left:2rem}.fdp-approval-flow__container--extra-padding-end{padding-right:2rem}[dir=rtl] .fdp-approval-flow__container.fdp-approval-flow__container--extra-padding-start,.fdp-approval-flow__container[dir=rtl].fdp-approval-flow__container--extra-padding-start{padding-left:.5rem;padding-right:2rem}[dir=rtl] .fdp-approval-flow__container.fdp-approval-flow__container--extra-padding-end,.fdp-approval-flow__container[dir=rtl].fdp-approval-flow__container--extra-padding-end{padding-right:.5rem;padding-left:2rem}[dir=rtl] .fdp-approval-flow__container.fdp-approval-flow__container--extra-padding-start.fdp-approval-flow__container--extra-padding-end,.fdp-approval-flow__container[dir=rtl].fdp-approval-flow__container--extra-padding-start.fdp-approval-flow__container--extra-padding-end{padding-right:2rem;padding-left:2rem}.fdp-approval-flow__graph-container{position:relative;overflow:auto;padding-top:.5rem;padding-bottom:2rem;padding-left:2rem}.fdp-approval-flow__graph-container--multiple-root-nodes{padding-left:4rem}[dir=rtl] .fdp-approval-flow__graph-container--multiple-root-nodes,.fdp-approval-flow__graph-container--multiple-root-nodes[dir=rtl]{padding-right:2rem}[dir=rtl] .fdp-approval-flow__graph-container--multiple-final-nodes,.fdp-approval-flow__graph-container--multiple-final-nodes[dir=rtl]{padding-left:0}.fdp-approval-flow-carousel-controls{position:absolute;display:flex;align-items:center;width:100%;height:6.375rem;padding-top:.5rem;left:0}.fdp-approval-flow-carousel-controls--edit-mode{height:8.375rem}.fdp-approval-flow-carousel-controls__button--prev-slide,.fdp-approval-flow-carousel-controls__button--next-slide{position:absolute;border:none;background:transparent;color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);display:flex;justify-content:space-between;width:2rem;align-items:center;cursor:pointer}.fdp-approval-flow-carousel-controls__button--prev-slide fd-icon,.fdp-approval-flow-carousel-controls__button--next-slide fd-icon{font-size:.875rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);position:relative;top:.0625rem}.fdp-approval-flow-carousel-controls__button--prev-slide{left:0}[dir=rtl] .fdp-approval-flow-carousel-controls__button--prev-slide,.fdp-approval-flow-carousel-controls__button--prev-slide[dir=rtl]{left:auto;right:0}.fdp-approval-flow-carousel-controls__button--next-slide{right:0}[dir=rtl] .fdp-approval-flow-carousel-controls__button--next-slide,.fdp-approval-flow-carousel-controls__button--next-slide[dir=rtl]{left:0;right:auto}.fdp-approval-flow__graph{display:flex;align-items:flex-start;position:relative;left:0;transition:left .3s}.fdp-approval-flow__graph-column{margin-right:4rem;position:relative}[dir=rtl] .fdp-approval-flow__graph-column:first-child,.fdp-approval-flow__graph-column[dir=rtl]:first-child{margin-right:2rem}.fdp-approval-flow__graph fdp-approval-flow-node+fdp-approval-flow-node:not(:last-child){margin-bottom:1rem}.fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner{padding:0}.fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner .fd-grid-list__item-toolbar .fd-toolbar--extra-content{margin-left:auto}[dir=rtl] .fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner .fd-grid-list__item-toolbar .fd-toolbar--extra-content,.fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner .fd-grid-list__item-toolbar .fd-toolbar--extra-content[dir=rtl]{margin-left:0;margin-right:auto}.fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner .fd-grid-list__item-toolbar .fd-toolbar--actions{display:none}.fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner:not(.fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner--edit) .fd-toolbar.fd-grid-list__item-toolbar{display:none}.cdk-overlay-container{z-index:1002!important}\n"], dependencies: [{ kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: ApprovalFlowMessagesComponent, selector: "fdp-approval-flow-messages", inputs: ["messages", "undoLastActionAvailable"], outputs: ["messagesChange", "undoLastAction"] }, { kind: "component", type: GridListComponent, selector: "fd-grid-list", inputs: ["id", "width", "ariaLabel", "selectionMode", "layoutPattern"], outputs: ["selectionChange"] }, { kind: "component", type: GridListTitleBarComponent, selector: "fd-grid-list-title-bar", inputs: ["title"] }, { kind: "component", type: GridListTitleBarSpacerComponent, selector: "fd-grid-list-title-bar-spacer" }, { kind: "component", type: ApprovalFlowToolbarActionsComponent, selector: "fdp-approval-flow-toolbar-actions", inputs: ["graph", "graphMetadata", "selectedNodes", "isEditMode"], outputs: ["enterEditMode", "addNode", "editSelectedNode", "deleteSelectedNodes"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: MultiInputComponent, selector: "fd-multi-input", inputs: ["placeholder", "disabled", "required", "compactCollapse", "maxHeight", "glyph", "dropdownValues", "openDropdownOnAddOnClicked", "searchTerm", "inputId", "highlight", "selected", "class", "filterFn", "valueFn", "displayFn", "newTokenParseFn", "optionItemIdentifier", "newTokenValidateFn", "ariaLabel", "ariaLabelledBy", "fillControlMode", "state", "buttonFocusable", "allowNewTokens", "mobile", "showAllButton", "bodyMaxWidth", "mobileConfig", "includes", "itemTemplate", "title", "byline", "autoComplete", "open", "displayAddonButton", "tokenHiddenId"], outputs: ["searchTermChange", "selectedChange", "openChange", "addOnButtonClicked", "allItemsSelectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: ApprovalFlowNodeComponent, selector: "fdp-approval-flow-node", inputs: ["node", "meta", "renderArrow", "checkDueDate", "dueDateThreshold", "allNodesInColumnApproved", "approvalStatusTemplate", "statusColorMapping", "isEdit", "isNextNodeBlank"], outputs: ["onAdd", "onEdit", "onDelete"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: GridListItemComponent, selector: "fd-grid-list-item", inputs: ["id", "width", "layoutItemPattern", "status", "counter", "value", "disableToolbarClick", "selected", "noPadding", "ariaLabel", "ariaLabelledBy", "type", "state", "isNavigated", "title", "description"], outputs: ["press", "detail", "delete", "navigate", "draft", "locked"] }, { kind: "component", type: GridListItemToolbarComponent, selector: "fd-grid-list-item-toolbar" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: GridListItemImageDirective, selector: "[fd-grid-list-item-image]" }, { kind: "directive", type: GridListItemBodyDirective, selector: "[fd-grid-list-item-body]" }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: IllustratedMessageComponent, selector: "[fd-illustrated-message]", inputs: ["type", "svgConfig", "noSvg", "id", "class"] }, { kind: "component", type: IllustratedMessageFigcaptionComponent, selector: "[fd-illustrated-message-figcaption]" }, { kind: "directive", type: IllustratedMessageTitleDirective, selector: "[fd-illustrated-message-title]" }, { kind: "directive", type: IllustratedMessageTextDirective, selector: "[fd-illustrated-message-text]" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ApprovalFlowComponent, isStandalone: true, selector: "fdp-approval-flow", inputs: { title: "title", value: "value", userDataSource: "userDataSource", watcherDataSource: "watcherDataSource", teamDataSource: "teamDataSource", userDetailsTemplate: "userDetailsTemplate", approvalStatusTemplate: "approvalStatusTemplate", statusColorMapping: "statusColorMapping", checkDueDate: "checkDueDate", dueDateThreshold: "dueDateThreshold", allowSendRemindersForStatuses: "allowSendRemindersForStatuses", isEditAvailable: "isEditAvailable", watchersLabel: "watchersLabel", allowAddParallelNodes: "allowAddParallelNodes", disableSaveButton: "disableSaveButton", disableExitButton: "disableExitButton", usersDataProviderEntityKey: "usersDataProviderEntityKey", teamsDataProviderEntityKey: "teamsDataProviderEntityKey", watchersDataProviderEntityKey: "watchersDataProviderEntityKey" }, outputs: { nodeClick: "nodeClick", afterNodeAdd: "afterNodeAdd", afterNodeEdit: "afterNodeEdit", valueChange: "valueChange", sendReminders: "sendReminders", onDataRequested: "onDataRequested", onDataReceived: "onDataReceived" }, providers: [ApprovalFlowAddNodeViewService], viewQueries: [{ propertyName: "_graphContainerEl", first: true, predicate: ["graphContainerEl"], descendants: true }, { propertyName: "_graphEl", first: true, predicate: ["graphEl"], descendants: true }, { propertyName: "_gridList", first: true, predicate: ["gridList"], descendants: true }, { propertyName: "_nodeComponents", predicate: ApprovalFlowNodeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container fdCompact>\n    <fdp-approval-flow-messages\n        [(messages)]=\"_messages\"\n        [undoLastActionAvailable]=\"!!_previousApprovalProcess\"\n        (undoLastAction)=\"_undoLastAction()\"\n    ></fdp-approval-flow-messages>\n    <fd-grid-list\n        #gridList\n        class=\"fdp-approval-flow__toolbar\"\n        [selectionMode]=\"_isEditMode ? 'multiSelect' : 'none'\"\n        (selectionChange)=\"_onNodeSelectionChange($event)\"\n    >\n        <fd-grid-list-title-bar [title]=\"title || ('platformApprovalFlow.defaultTitle' | fdTranslate)\">\n            <fd-grid-list-title-bar-spacer></fd-grid-list-title-bar-spacer>\n            @if (isEditAvailable) {\n                <fdp-approval-flow-toolbar-actions\n                    [graph]=\"_graph\"\n                    [selectedNodes]=\"_selectedNodes\"\n                    [graphMetadata]=\"_graphMetadata\"\n                    [isEditMode]=\"_isEditMode\"\n                    (enterEditMode)=\"_enterEditMode()\"\n                    (addNode)=\"_addNode($event.node, $event.target)\"\n                    (editSelectedNode)=\"_editNode($event)\"\n                    (deleteSelectedNodes)=\"_deleteSelectedNodes()\"\n                ></fdp-approval-flow-toolbar-actions>\n            }\n        </fd-grid-list-title-bar>\n        @if (_approvalProcess.watchers?.length || _isEditMode) {\n            <div class=\"fdp-approval-flow__watchers\" [attr.aria-label]=\"watchersLabel\">\n                <p class=\"fdp-approval-flow__watchers-title\">\n                    {{ watchersLabel || ('platformApprovalFlow.defaultWatchersLabel' | fdTranslate) }}\n                </p>\n                @if (!_isEditMode) {\n                    @for (watcher of _approvalProcess.watchers; track _trackByFn($index, watcher)) {\n                        <fd-avatar\n                            size=\"xs\"\n                            [image]=\"watcher.imgUrl || ''\"\n                            [label]=\"watcher.name\"\n                            [clickable]=\"true\"\n                            [circle]=\"true\"\n                            (avatarClicked)=\"_onWatcherClick(watcher, $event)\"\n                        ></fd-avatar>\n                    }\n                } @else {\n                    <div class=\"fdp-approval-flow__watchers-input-container\">\n                        <fd-multi-input\n                            [dropdownValues]=\"_usersForWatchersList\"\n                            [placeholder]=\"'platformApprovalFlow.watchersInputPlaceholder' | fdTranslate\"\n                            [displayFn]=\"_displayUserFn\"\n                            [valueFn]=\"_userValueFn\"\n                            [showAllButton]=\"true\"\n                            [(ngModel)]=\"_selectedWatcherIds\"\n                            (ngModelChange)=\"_watchersSelectionChanged($event)\"\n                        ></fd-multi-input>\n                    </div>\n                }\n            </div>\n        }\n        @if (!_graph.errors) {\n            @if (_graph.columns.length) {\n                <div\n                    class=\"fdp-approval-flow__container\"\n                    [class.fdp-approval-flow__container--extra-padding-start]=\"true\"\n                    [class.fdp-approval-flow__container--extra-padding-end]=\"true\"\n                >\n                    @if (_scrollDiff > 0) {\n                        <div\n                            class=\"fdp-approval-flow-carousel-controls\"\n                            [class.fdp-approval-flow-carousel-controls--edit-mode]=\"_isEditMode\"\n                        >\n                            @if (_carouselStepsLeft > 0) {\n                                <button\n                                    class=\"fdp-approval-flow-carousel-controls__button--prev-slide\"\n                                    [attr.aria-label]=\"'platformApprovalFlow.prevButtonAriaLabel' | fdTranslate\"\n                                    (click)=\"nextSlide(-1)\"\n                                >\n                                    <fd-icon [glyph]=\"'navigation-' + (_rtl ? 'right' : 'left') + '-arrow'\"></fd-icon>\n                                    {{ _carouselStepsLeft }}\n                                </button>\n                            }\n                            @if (_carouselStepsRight > 0) {\n                                <button\n                                    class=\"fdp-approval-flow-carousel-controls__button--next-slide\"\n                                    [attr.aria-label]=\"'platformApprovalFlow.nextButtonAriaLabel' | fdTranslate\"\n                                    (click)=\"nextSlide()\"\n                                >\n                                    {{ _carouselStepsRight }}\n                                    <fd-icon [glyph]=\"'navigation-' + (_rtl ? 'left' : 'right') + '-arrow'\"></fd-icon>\n                                </button>\n                            }\n                        </div>\n                    }\n                    <div\n                        class=\"fdp-approval-flow__graph-container\"\n                        [class.fdp-approval-flow__graph-container--multiple-root-nodes]=\"_multipleRootNodes\"\n                        [class.fdp-approval-flow__graph-container--multiple-final-nodes]=\"_multipleFinalNodes\"\n                        [class.fd-scrollbar]=\"true\"\n                        #graphContainerEl\n                    >\n                        <div\n                            class=\"fdp-approval-flow__graph\"\n                            #graphEl\n                            [class.fdp-approval-flow__graph--edit-mode]=\"_isEditMode\"\n                        >\n                            @for (column of _graph.columns; track column; let columnIndex = $index) {\n                                <div class=\"fdp-approval-flow__graph-column\">\n                                    @for (\n                                        node of column.nodes;\n                                        track _trackByFn(nodeIndex, node);\n                                        let nodeIndex = $index\n                                    ) {\n                                        <fdp-approval-flow-node\n                                            cdkDrag\n                                            #approvalFlowNode\n                                            [cdkDragDisabled]=\"_isCdkDragDisabled(node)\"\n                                            [node]=\"node\"\n                                            [meta]=\"_graphMetadata[node.id]\"\n                                            [isEdit]=\"_isEditMode\"\n                                            [isNextNodeBlank]=\"_isNextNodeBlank(node, columnIndex, nodeIndex)\"\n                                            [checkDueDate]=\"checkDueDate\"\n                                            [dueDateThreshold]=\"dueDateThreshold\"\n                                            [renderArrow]=\"columnIndex > 0\"\n                                            [allNodesInColumnApproved]=\"!!column.allNodesApproved\"\n                                            [approvalStatusTemplate]=\"approvalStatusTemplate\"\n                                            [statusColorMapping]=\"statusColorMapping\"\n                                            (onAdd)=\"_addNode(node, $event)\"\n                                            (onEdit)=\"_editNode(node)\"\n                                            (onDelete)=\"_onNodeDelete(node)\"\n                                            (keydown)=\"_onNodeKeyDown($event, node)\"\n                                            (cdkDragStarted)=\"_dragDropInProgress = true\"\n                                            (cdkDragReleased)=\"_onNodeDrop(node, $event.source)\"\n                                            (cdkDragMoved)=\"_onNodeDragMoved(node)\"\n                                        >\n                                            <!-- Trick with using projection to make grid list items visible for the grid list -->\n                                            <fd-grid-list-item\n                                                type=\"active\"\n                                                [value]=\"node\"\n                                                [selected]=\"!!node.selected\"\n                                                [ariaLabelledBy]=\"approvalFlowNode.approvalFlowNodeId\"\n                                                [disableToolbarClick]=\"true\"\n                                                class=\"fdp-approval-flow__graph-node-inner\"\n                                                [class.fdp-approval-flow__graph-node-inner--edit]=\"_isEditMode\"\n                                                (press)=\"_onNodeClick(node)\"\n                                            >\n                                                <fd-grid-list-item-toolbar>\n                                                    @if (_isEditMode) {\n                                                        <ng-template\n                                                            [ngTemplateOutlet]=\"approvalFlowNode._overflowMenuButton\"\n                                                        ></ng-template>\n                                                    }\n                                                </fd-grid-list-item-toolbar>\n                                                <fd-avatar\n                                                    fd-grid-list-item-image\n                                                    [image]=\"\n                                                        node.approvers.length === 1 ? node.approvers[0].imgUrl : null\n                                                    \"\n                                                    [label]=\"node.approvers.length > 1 ? node.description : null\"\n                                                    size=\"xs\"\n                                                    [circle]=\"true\"\n                                                ></fd-avatar>\n                                                <ng-template fd-grid-list-item-body>\n                                                    <ng-template\n                                                        [ngTemplateOutlet]=\"approvalFlowNode._nodeContent\"\n                                                    ></ng-template>\n                                                </ng-template>\n                                            </fd-grid-list-item>\n                                        </fdp-approval-flow-node>\n                                    }\n                                </div>\n                            }\n                        </div>\n                    </div>\n                </div>\n            } @else {\n                <figure fd-illustrated-message type=\"spot\" [svgConfig]=\"_emptyApprovalFlowSpotConfig\">\n                    <figcaption fd-illustrated-message-figcaption>\n                        <h3 fd-illustrated-message-title>\n                            {{ 'platformApprovalFlow.emptyTitle' | fdTranslate }}\n                        </h3>\n                        <p fd-illustrated-message-text>\n                            {{ 'platformApprovalFlow.emptyHint' | fdTranslate }}\n                        </p>\n                    </figcaption>\n                </figure>\n                <!-- TODO #5178: Replace with illustrated image component after it gets fixed -->\n                <div [style.display]=\"'none'\">\n                    <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        width=\"128\"\n                        height=\"128\"\n                        viewBox=\"0 0 128 128\"\n                        id=\"sapIllus-Spot-NoData\"\n                    >\n                        <path\n                            d=\"M41.6179,32.7174H84.6273a1,1,0,0,1,.723.3092l7.2445,7.5824,7.4817,7.8491a1,1,0,0,1,.2761.69l-.0046,55.6069a4.1038,4.1038,0,0,1-.8787,2.1212A4.0564,4.0564,0,0,1,98.1,107.9631l-56.3858.0313a2.6167,2.6167,0,0,1-3.0812-3.2309l-.0152-69.0594Z\"\n                            class=\"sapIllus_PatternShadow\"\n                            style=\"fill: var(--sapIllus_PatternShadow)\"\n                        ></path>\n                        <path\n                            d=\"M35.7928,27.4987H78.8022a1,1,0,0,1,.723.3092L86.77,35.39l7.4816,7.8492a1,1,0,0,1,.2762.69l-.0046,55.6069a3,3,0,0,1-3,3H35.808a2.9946,2.9946,0,0,1-3-2.9913c-.01-12.0564-.0423-57.0116-.0152-69.0595A2.9943,2.9943,0,0,1,35.7928,27.4987Z\"\n                            class=\"sapIllus_ObjectFillColor\"\n                            style=\"fill: var(--sapIllus_ObjectFillColor)\"\n                        ></path>\n                        <path\n                            d=\"M93.2978,44.5335H78.8208a.9925.9925,0,0,1-.974-1.01V28.5108a.97.97,0,0,1,1.6628-.7143L93.9865,42.8092A1.0151,1.0151,0,0,1,93.2978,44.5335Z\"\n                            class=\"sapIllus_BrandColorSecondary\"\n                            style=\"fill: var(--sapIllus_BrandColorSecondary)\"\n                        ></path>\n                        <path\n                            d=\"M104.608,38.9485l5.9157-1.7721c1.32-.3954.7584-2.5258-.5689-2.1282L104.0392,36.82c-1.32.3953-.7584,2.5258.5688,2.1282Z\"\n                            class=\"sapIllus_Layering1\"\n                            style=\"fill: var(--sapIllus_Layering1)\"\n                        ></path>\n                        <path\n                            d=\"M85.2973,21.2465l.9718-5.9331c.2154-1.3151-1.777-1.8807-1.9941-.5554l-.9718,5.9332c-.2155,1.3151,1.777,1.8807,1.9941.5553Z\"\n                            class=\"sapIllus_Layering1\"\n                            style=\"fill: var(--sapIllus_Layering1)\"\n                        ></path>\n                        <path\n                            d=\"M95.3034,29.0015a1.01,1.01,0,0,1-.6837-.267,1.0783,1.0783,0,0,1-.0864-1.4932l5.9511-6.8857a1.01,1.01,0,0,1,1.4538-.0884,1.0785,1.0785,0,0,1,.0865,1.4932l-5.9511,6.8858A1.0164,1.0164,0,0,1,95.3034,29.0015Z\"\n                            class=\"sapIllus_Layering1\"\n                            style=\"fill: var(--sapIllus_Layering1)\"\n                        ></path>\n                        <path\n                            d=\"M94.8747,42.8861,80.0855,27.4623a1.5152,1.5152,0,0,0-1.0885-.4636H35.807a3.509,3.509,0,0,0-3.5146,3.4836c-.0294,13.2857.0137,66.7559.0157,69.0257a3.5076,3.5076,0,0,0,3.5146,3.4894H91.7709a3.5106,3.5106,0,0,0,3.5146-3.4982l.005-55.5785A1.49,1.49,0,0,0,94.8747,42.8861Zm-16.21-14.8355a1.15,1.15,0,0,1,.2561-.0309,1.04,1.04,0,0,1,.51.2134l14.276,14.8837.0194.02a.5891.5891,0,0,1,.0968.6251c-.1016.1764-.4086.24-.69.24L78.8355,44a.6031.6031,0,0,1-.5472-.6131c-.0087-4.9588-.017-9.9015-.0035-14.8689A.5189.5189,0,0,1,78.6646,28.0506Zm13.1062,73.95H35.8188a2.5045,2.5045,0,0,1-2.5107-2.491c-.002-2.2694-.0451-55.74-.0157-69.0248a2.5054,2.5054,0,0,1,2.5107-2.4861H77.3684a1.49,1.49,0,0,0-.0976.5106V43.4934A1.5145,1.5145,0,0,0,78.7894,45H78.92L94.286,47.9749l-.0046,51.5269A2.5074,2.5074,0,0,1,91.7708,102.0006Z\"\n                            class=\"sapIllus_StrokeDetailColor\"\n                            style=\"fill: var(--sapIllus_StrokeDetailColor)\"\n                        ></path>\n                    </svg>\n                </div>\n            }\n        }\n    </fd-grid-list>\n    @if (_isEditMode) {\n        <div fd-bar>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button\n                        fd-button\n                        [label]=\"'platformApprovalFlow.editModeSaveButtonLabel' | fdTranslate\"\n                        fdType=\"emphasized\"\n                        [disabled]=\"disableSaveButton\"\n                        (click)=\"_saveEditModeChanges()\"\n                    ></button>\n                </fd-bar-element>\n                <fd-bar-element>\n                    <button\n                        fd-button\n                        [label]=\"'platformApprovalFlow.editModeExitButtonLabel' | fdTranslate\"\n                        fdType=\"transparent\"\n                        [disabled]=\"disableExitButton\"\n                        (click)=\"_exitEditMode()\"\n                    ></button>\n                </fd-bar-element>\n            </div>\n        </div>\n    }\n</ng-container>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-scrollbar{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:auto;padding:0;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-scrollbar:after,.fd-scrollbar:before{box-sizing:inherit;font-size:inherit}.fd-scrollbar.is-focus,.fd-scrollbar:focus{outline:none;z-index:5}.fd-scrollbar::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-scrollbar::-webkit-scrollbar-corner,.fd-scrollbar::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-scrollbar::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-scrollbar::-webkit-scrollbar-thumb:active,.fd-scrollbar::-webkit-scrollbar-thumb:hover{box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-scrollbar--container::-webkit-scrollbar-corner,.fd-scrollbar--container::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color);border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-scrollbar--container[dir=rtl]::-webkit-scrollbar-corner,.fd-scrollbar--container[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-scrollbar--container::-webkit-scrollbar-corner,[dir=rtl] .fd-scrollbar--container::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fdp-approval-flow__watchers{margin-bottom:.5rem;padding-left:.5rem}.fdp-approval-flow__watchers-title{font-size:.875em;color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);margin:1rem 0 .5rem}.fdp-approval-flow__watchers fd-avatar{margin-right:.5rem;cursor:pointer}.fdp-approval-flow__watchers fd-avatar:focus{outline-offset:.0625rem;outline-width:.0625rem;outline-style:dotted;outline-color:var(--sapContent_FocusColor, #0854a0)}.fdp-approval-flow__watchers .fdp-approval-flow__watchers-input-container{width:17.375rem}[dir=rtl] .fdp-approval-flow__watchers,.fdp-approval-flow__watchers[dir=rtl]{padding-right:.5rem}[dir=rtl] .fdp-approval-flow__watchers fd-avatar,.fdp-approval-flow__watchers[dir=rtl] fd-avatar{margin-left:.5rem;margin-right:0}.fdp-approval-flow__container{max-width:100%;position:relative;padding:0 .5rem}.fdp-approval-flow__container--extra-padding-start{padding-left:2rem}.fdp-approval-flow__container--extra-padding-end{padding-right:2rem}[dir=rtl] .fdp-approval-flow__container.fdp-approval-flow__container--extra-padding-start,.fdp-approval-flow__container[dir=rtl].fdp-approval-flow__container--extra-padding-start{padding-left:.5rem;padding-right:2rem}[dir=rtl] .fdp-approval-flow__container.fdp-approval-flow__container--extra-padding-end,.fdp-approval-flow__container[dir=rtl].fdp-approval-flow__container--extra-padding-end{padding-right:.5rem;padding-left:2rem}[dir=rtl] .fdp-approval-flow__container.fdp-approval-flow__container--extra-padding-start.fdp-approval-flow__container--extra-padding-end,.fdp-approval-flow__container[dir=rtl].fdp-approval-flow__container--extra-padding-start.fdp-approval-flow__container--extra-padding-end{padding-right:2rem;padding-left:2rem}.fdp-approval-flow__graph-container{position:relative;overflow:auto;padding-top:.5rem;padding-bottom:2rem;padding-left:2rem}.fdp-approval-flow__graph-container--multiple-root-nodes{padding-left:4rem}[dir=rtl] .fdp-approval-flow__graph-container--multiple-root-nodes,.fdp-approval-flow__graph-container--multiple-root-nodes[dir=rtl]{padding-right:2rem}[dir=rtl] .fdp-approval-flow__graph-container--multiple-final-nodes,.fdp-approval-flow__graph-container--multiple-final-nodes[dir=rtl]{padding-left:0}.fdp-approval-flow-carousel-controls{position:absolute;display:flex;align-items:center;width:100%;height:6.375rem;padding-top:.5rem;left:0}.fdp-approval-flow-carousel-controls--edit-mode{height:8.375rem}.fdp-approval-flow-carousel-controls__button--prev-slide,.fdp-approval-flow-carousel-controls__button--next-slide{position:absolute;border:none;background:transparent;color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);display:flex;justify-content:space-between;width:2rem;align-items:center;cursor:pointer}.fdp-approval-flow-carousel-controls__button--prev-slide fd-icon,.fdp-approval-flow-carousel-controls__button--next-slide fd-icon{font-size:.875rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);position:relative;top:.0625rem}.fdp-approval-flow-carousel-controls__button--prev-slide{left:0}[dir=rtl] .fdp-approval-flow-carousel-controls__button--prev-slide,.fdp-approval-flow-carousel-controls__button--prev-slide[dir=rtl]{left:auto;right:0}.fdp-approval-flow-carousel-controls__button--next-slide{right:0}[dir=rtl] .fdp-approval-flow-carousel-controls__button--next-slide,.fdp-approval-flow-carousel-controls__button--next-slide[dir=rtl]{left:0;right:auto}.fdp-approval-flow__graph{display:flex;align-items:flex-start;position:relative;left:0;transition:left .3s}.fdp-approval-flow__graph-column{margin-right:4rem;position:relative}[dir=rtl] .fdp-approval-flow__graph-column:first-child,.fdp-approval-flow__graph-column[dir=rtl]:first-child{margin-right:2rem}.fdp-approval-flow__graph fdp-approval-flow-node+fdp-approval-flow-node:not(:last-child){margin-bottom:1rem}.fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner{padding:0}.fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner .fd-grid-list__item-toolbar .fd-toolbar--extra-content{margin-left:auto}[dir=rtl] .fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner .fd-grid-list__item-toolbar .fd-toolbar--extra-content,.fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner .fd-grid-list__item-toolbar .fd-toolbar--extra-content[dir=rtl]{margin-left:0;margin-right:auto}.fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner .fd-grid-list__item-toolbar .fd-toolbar--actions{display:none}.fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner:not(.fdp-approval-flow__graph .fdp-approval-flow__graph-node-inner--edit) .fd-toolbar.fd-grid-list__item-toolbar{display:none}.cdk-overlay-container{z-index:1002!important}\n"], dependencies: [{ kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: ApprovalFlowMessagesComponent, selector: "fdp-approval-flow-messages", inputs: ["messages", "undoLastActionAvailable"], outputs: ["messagesChange", "undoLastAction"] }, { kind: "component", type: GridListComponent, selector: "fd-grid-list", inputs: ["id", "width", "ariaLabel", "selectionMode", "layoutPattern"], outputs: ["selectionChange"] }, { kind: "component", type: GridListTitleBarComponent, selector: "fd-grid-list-title-bar", inputs: ["title"] }, { kind: "component", type: GridListTitleBarSpacerComponent, selector: "fd-grid-list-title-bar-spacer" }, { kind: "component", type: ApprovalFlowToolbarActionsComponent, selector: "fdp-approval-flow-toolbar-actions", inputs: ["graph", "graphMetadata", "selectedNodes", "isEditMode"], outputs: ["enterEditMode", "addNode", "editSelectedNode", "deleteSelectedNodes"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: MultiInputComponent, selector: "fd-multi-input", inputs: ["placeholder", "disabled", "required", "compactCollapse", "maxHeight", "glyph", "glyphFont", "dropdownValues", "openDropdownOnAddOnClicked", "searchTerm", "inputId", "highlight", "selected", "class", "filterFn", "valueFn", "displayFn", "newTokenParseFn", "optionItemIdentifier", "newTokenValidateFn", "ariaLabel", "ariaLabelledBy", "fillControlMode", "state", "buttonFocusable", "allowNewTokens", "mobile", "showAllButton", "bodyMaxWidth", "mobileConfig", "includes", "itemTemplate", "title", "byline", "autoComplete", "open", "displayAddonButton", "tokenHiddenId"], outputs: ["searchTermChange", "selectedChange", "openChange", "addOnButtonClicked", "allItemsSelectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: ApprovalFlowNodeComponent, selector: "fdp-approval-flow-node", inputs: ["node", "meta", "renderArrow", "checkDueDate", "dueDateThreshold", "allNodesInColumnApproved", "approvalStatusTemplate", "statusColorMapping", "isEdit", "isNextNodeBlank"], outputs: ["onAdd", "onEdit", "onDelete"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: GridListItemComponent, selector: "fd-grid-list-item", inputs: ["id", "width", "layoutItemPattern", "status", "counter", "value", "disableToolbarClick", "selected", "noPadding", "ariaLabel", "ariaLabelledBy", "type", "state", "isNavigated", "title", "description"], outputs: ["press", "detail", "delete", "navigate", "draft", "locked"] }, { kind: "component", type: GridListItemToolbarComponent, selector: "fd-grid-list-item-toolbar" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: GridListItemImageDirective, selector: "[fd-grid-list-item-image]" }, { kind: "directive", type: GridListItemBodyDirective, selector: "[fd-grid-list-item-body]" }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: IllustratedMessageComponent, selector: "[fd-illustrated-message]", inputs: ["type", "svgConfig", "noSvg", "id", "class"] }, { kind: "component", type: IllustratedMessageFigcaptionComponent, selector: "[fd-illustrated-message-figcaption]" }, { kind: "directive", type: IllustratedMessageTitleDirective, selector: "[fd-illustrated-message-title]" }, { kind: "directive", type: IllustratedMessageTextDirective, selector: "[fd-illustrated-message-text]" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ApprovalFlowComponent, decorators: [{
             type: Component,