npm - @fundamental-ngx/platform - Versions diffs - 0.65.0-rc.0 → 0.65.0-rc.10 - Mend

@fundamental-ngx/platform 0.65.0-rc.0 → 0.65.0-rc.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

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

@@ -2431,7 +2431,7 @@ class ApprovalFlowComponent {
         return filteredColumns;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ApprovalFlowComponent, deps: [{ token: i1$1.DialogService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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", removeSpaceNode: "removeSpaceNode" }, 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]=\"prevSlideArrowGlyph()\"></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]=\"nextSlideArrowGlyph()\"></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: [".fd-scrollbar{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:auto;padding-block:0;padding-inline:0;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-scrollbar:after,.fd-scrollbar:before{-webkit-box-sizing:inherit;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{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);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{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);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/*! Bundled license information:\n\nfundamental-styles/dist/scrollbar.css:\n  (*!\n   * Fundamental Library Styles v0.41.8\n   * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\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", "headingLevel"] }, { 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: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "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", "addonIconTitle", "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", "addOnButtonAriaLabel", "maxVisibleTokens", "placement"], 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", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { 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", "cdkDragScale"], 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", "titleLevel", "description", "autoHeight"], outputs: ["press", "detail", "delete", "navigate", "cardClick", "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: ["barDesign", "inPage", "inHomePage", "clear", "size", "initialSuggestionTitle", "initialSuggestionSubline", "role"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: IllustratedMessageComponent, selector: "[fd-illustrated-message]", inputs: ["type", "svgConfig", "svgAriaLabel", "noSvg", "id"] }, { 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: "22.0.5", 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", removeSpaceNode: "removeSpaceNode" }, 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]=\"prevSlideArrowGlyph()\"></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]=\"nextSlideArrowGlyph()\"></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: [".fd-scrollbar{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:auto;padding-block:0;padding-inline:0;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-scrollbar:after,.fd-scrollbar:before{-webkit-box-sizing:inherit;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{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);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{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);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/*! Bundled license information:\n\nfundamental-styles/dist/scrollbar.css:\n  (*!\n   * Fundamental Library Styles v0.41.9\n   * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\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", "headingLevel"] }, { 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: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "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", "addonIconTitle", "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", "addOnButtonAriaLabel", "maxVisibleTokens", "placement"], 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", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { 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", "cdkDragScale"], 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", "titleLevel", "description", "autoHeight"], outputs: ["press", "detail", "delete", "navigate", "cardClick", "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: ["barDesign", "inPage", "inHomePage", "clear", "size", "initialSuggestionTitle", "initialSuggestionSubline", "role"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: IllustratedMessageComponent, selector: "[fd-illustrated-message]", inputs: ["type", "svgConfig", "svgAriaLabel", "noSvg", "id"] }, { 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: "22.0.5", ngImport: i0, type: ApprovalFlowComponent, decorators: [{
             type: Component,
@@ -2462,7 +2462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         IllustratedMessageTitleDirective,
                         IllustratedMessageTextDirective,
                         FdTranslatePipe
-                    ], 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]=\"prevSlideArrowGlyph()\"></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]=\"nextSlideArrowGlyph()\"></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: [".fd-scrollbar{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:auto;padding-block:0;padding-inline:0;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-scrollbar:after,.fd-scrollbar:before{-webkit-box-sizing:inherit;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{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);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{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);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/*! Bundled license information:\n\nfundamental-styles/dist/scrollbar.css:\n  (*!\n   * Fundamental Library Styles v0.41.8\n   * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"] }]
+                    ], 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]=\"prevSlideArrowGlyph()\"></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]=\"nextSlideArrowGlyph()\"></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: [".fd-scrollbar{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:auto;padding-block:0;padding-inline:0;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-scrollbar:after,.fd-scrollbar:before{-webkit-box-sizing:inherit;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{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);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{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);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/*! Bundled license information:\n\nfundamental-styles/dist/scrollbar.css:\n  (*!\n   * Fundamental Library Styles v0.41.9\n   * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DialogService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }], propDecorators: { title: [{
                 type: Input
             }], value: [{

package/fesm2022/fundamental-ngx-platform-button.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, booleanAttribute, output, computed, effect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { InjectionToken, input, booleanAttribute, output, linkedSignal, computed, effect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { warnOnce } from '@fundamental-ngx/cdk/utils';
 import { ButtonComponent as ButtonComponent$1 } from '@fundamental-ngx/core/button';
 import { FD_DEFAULT_ICON_FONT_FAMILY } from '@fundamental-ngx/core/icon';
@@ -92,12 +92,18 @@ class ButtonComponent {
         ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         /** Event sent when button is clicked */
         this.buttonClicked = output();
+        /** @hidden Mutable disabled state for ButtonModel compatibility */
+        this.disabledState = linkedSignal(() => this.disabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        /** @hidden Mutable type state for ButtonModel compatibility */
+        this.fdTypeState = linkedSignal(() => this.buttonType() || this.fdType(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fdTypeState" }] : /* istanbul ignore next */ []));
         /** @hidden Computed to determine effective fdType (buttonType overrides fdType if provided) */
-        this._effectiveFdType = computed(() => this.buttonType() || this.fdType(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_effectiveFdType" }] : /* istanbul ignore next */ []));
+        this.effectiveFdType = computed(() => this.fdTypeState(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveFdType" }] : /* istanbul ignore next */ []));
         /** @hidden Computed to determine effective toggled state */
-        this._effectiveToggled = computed(() => this.toggled() || this.ariaPressed() || this.ariaSelected(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_effectiveToggled" }] : /* istanbul ignore next */ []));
+        this.effectiveToggled = computed(() => this.toggled() || this.ariaPressed() || this.ariaSelected(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveToggled" }] : /* istanbul ignore next */ []));
         /**
          * Computed accessible name for the button.
          * Follows ARIA accessible name computation priority:
@@ -128,14 +134,14 @@ class ButtonComponent {
      * Note: Cannot directly set signal inputs. This method exists for interface compatibility.
      */
     setDisabled(_value) {
-        console.warn('setDisabled() cannot modify signal input. Use template binding [disabled]="value" instead.');
+        this.disabledState.set(_value);
     }
     /**
      * Get the current disabled state.
      * Implements ButtonModel interface.
      */
     isDisabled() {
-        return this.disabled();
+        return this.disabledState();
     }
     /**
      * Programmatically set the button type.
@@ -143,14 +149,14 @@ class ButtonComponent {
      * Note: Cannot directly set signal inputs. This method exists for interface compatibility.
      */
     setFdType(_value) {
-        console.warn('setFdType() cannot modify signal input. Use template binding [fdType]="value" instead.');
+        this.fdTypeState.set(_value);
     }
     /**
      * Get the current button type.
      * Implements ButtonModel interface.
      */
     getFdType() {
-        return this._effectiveFdType();
+        return this.effectiveFdType();
     }
     /**
      * No-op method for interface compatibility.
@@ -172,7 +178,7 @@ class ButtonComponent {
                 provide: FDP_BUTTON,
                 useExisting: ButtonComponent
             }
-        ], ngImport: i0, template: "<button\n    #fdButton\n    fd-button\n    [attr.id]=\"id()\"\n    [attr.name]=\"name()\"\n    [ariaLabel]=\"accessibleName()\"\n    [attr.aria-controls]=\"ariaControlsId()\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-disabled]=\"ariaDisabled()\"\n    [attr.title]=\"!!glyph() && !label() ? title() : null\"\n    [attr.value]=\"value()\"\n    [glyphPosition]=\"glyphPosition()\"\n    [label]=\"label()\"\n    [type]=\"type()\"\n    [toggled]=\"_effectiveToggled()\"\n    [glyph]=\"glyph()\"\n    [glyphFont]=\"glyphFont()\"\n    [disabled]=\"disabled()\"\n    [fdType]=\"_effectiveFdType()\"\n    class=\"fd-ellipsis\"\n    [class.is-disabled]=\"ariaDisabled()\"\n    [style.width]=\"width()\"\n    (click)=\"onBtnClick($event)\"\n></button>\n", styles: [":host{display:inline-block}:host(:focus){outline:none}.fd-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent$1, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<button\n    #fdButton\n    fd-button\n    [attr.id]=\"id()\"\n    [attr.name]=\"name()\"\n    [ariaLabel]=\"accessibleName()\"\n    [attr.aria-controls]=\"ariaControlsId()\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-disabled]=\"ariaDisabled()\"\n    [attr.title]=\"!!glyph() && !label() ? title() : null\"\n    [attr.value]=\"value()\"\n    [glyphPosition]=\"glyphPosition()\"\n    [label]=\"label()\"\n    [type]=\"type()\"\n    [toggled]=\"effectiveToggled()\"\n    [glyph]=\"glyph()\"\n    [glyphFont]=\"glyphFont()\"\n    [disabled]=\"disabledState()\"\n    [fdType]=\"effectiveFdType()\"\n    class=\"fd-ellipsis\"\n    [class.is-disabled]=\"ariaDisabled()\"\n    [style.width]=\"width()\"\n    (click)=\"onBtnClick($event)\"\n></button>\n", styles: [":host{display:inline-block}:host(:focus){outline:none}.fd-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent$1, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -184,7 +190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], imports: [ButtonComponent$1], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'button',
                         '[attr.tabindex]': '-1'
-                    }, template: "<button\n    #fdButton\n    fd-button\n    [attr.id]=\"id()\"\n    [attr.name]=\"name()\"\n    [ariaLabel]=\"accessibleName()\"\n    [attr.aria-controls]=\"ariaControlsId()\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-disabled]=\"ariaDisabled()\"\n    [attr.title]=\"!!glyph() && !label() ? title() : null\"\n    [attr.value]=\"value()\"\n    [glyphPosition]=\"glyphPosition()\"\n    [label]=\"label()\"\n    [type]=\"type()\"\n    [toggled]=\"_effectiveToggled()\"\n    [glyph]=\"glyph()\"\n    [glyphFont]=\"glyphFont()\"\n    [disabled]=\"disabled()\"\n    [fdType]=\"_effectiveFdType()\"\n    class=\"fd-ellipsis\"\n    [class.is-disabled]=\"ariaDisabled()\"\n    [style.width]=\"width()\"\n    (click)=\"onBtnClick($event)\"\n></button>\n", styles: [":host{display:inline-block}:host(:focus){outline:none}.fd-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
+                    }, template: "<button\n    #fdButton\n    fd-button\n    [attr.id]=\"id()\"\n    [attr.name]=\"name()\"\n    [ariaLabel]=\"accessibleName()\"\n    [attr.aria-controls]=\"ariaControlsId()\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-disabled]=\"ariaDisabled()\"\n    [attr.title]=\"!!glyph() && !label() ? title() : null\"\n    [attr.value]=\"value()\"\n    [glyphPosition]=\"glyphPosition()\"\n    [label]=\"label()\"\n    [type]=\"type()\"\n    [toggled]=\"effectiveToggled()\"\n    [glyph]=\"glyph()\"\n    [glyphFont]=\"glyphFont()\"\n    [disabled]=\"disabledState()\"\n    [fdType]=\"effectiveFdType()\"\n    class=\"fd-ellipsis\"\n    [class.is-disabled]=\"ariaDisabled()\"\n    [style.width]=\"width()\"\n    (click)=\"onBtnClick($event)\"\n></button>\n", styles: [":host{display:inline-block}:host(:focus){outline:none}.fd-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], glyphPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyphPosition", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], glyphFont: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyphFont", required: false }] }], fdType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fdType", required: false }] }], buttonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonType", required: false }] }], toggled: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggled", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaSelected", required: false }] }], ariaDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDisabled", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaExpanded", required: false }] }], ariaControlsId: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControlsId", required: false }] }], ariaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaPressed", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }] } });
 class DeprecatedButtonAriaSelected {
     constructor() {

package/fesm2022/fundamental-ngx-platform-button.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fundamental-ngx-platform-button.mjs","sources":["../../../../libs/platform/button/tokens.ts","../../../../libs/platform/button/button.component.ts","../../../../libs/platform/button/button.component.html","../../../../libs/platform/button/button.module.ts","../../../../libs/platform/button/fundamental-ngx-platform-button.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const FDP_BUTTON = new InjectionToken('FdpButtonComponent');\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, input, output } from '@angular/core';\n\nimport { ModuleDeprecation, warnOnce } from '@fundamental-ngx/cdk/utils';\nimport { ButtonType, ButtonComponent as CoreButtonComponent, GlyphPosition } from '@fundamental-ngx/core/button';\nimport { FD_DEFAULT_ICON_FONT_FAMILY, IconFont } from '@fundamental-ngx/core/icon';\nimport { ButtonModel } from './button.model';\nimport { FDP_BUTTON } from './tokens';\n\nlet platformButtonId = 0;\n\n/*\n @deprecated\n * Button component is deprecated. Use `fd-button` from `@fundamental-ngx/core` instead.\n /\n@Component({\n selector: 'fdp-button',\n templateUrl: './button.component.html',\n styleUrl: './button.component.scss',\n providers: [\n {\n provide: FDP_BUTTON,\n useExisting: ButtonComponent\n }\n ],\n imports: [CoreButtonComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n role: 'button',\n '[attr.tabindex]': '-1'\n }\n})\nexport class ButtonComponent implements ButtonModel {\n /* Button ID - default value is provided if not set /\n readonly id = input(`fdp-button-${++platformButtonId}`);\n\n /* Name for the element /\n readonly name = input<string>();\n\n /* Width of the element /\n readonly width = input<string>();\n\n /* Disabled status of the element /\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /* Sets the `aria-label` attribute to the element /\n readonly ariaLabel = input<string>();\n\n /* Sets the `aria-labelledby` attribute to the element /\n readonly ariaLabelledBy = input<string>();\n\n /* Sets the `aria-describedby` attribute to the element /\n readonly ariaDescribedBy = input<string>();\n\n /* Position of glyph related to text /\n readonly glyphPosition = input<GlyphPosition>('before');\n\n /* Text rendered inside button component /\n readonly label = input<string>();\n\n /* The icon to include in the button. See the icon page for the list of icons /\n readonly glyph = input<string>();\n\n /* Glyph font family /\n readonly glyphFont = input<IconFont>(FD_DEFAULT_ICON_FONT_FAMILY);\n\n /* The type of the button. Types include:\n * 'standard' \| 'positive' \| 'negative' \| 'attention' \| 'half' \| 'ghost' \| 'transparent' \| 'emphasized' \| 'menu'.\n * Leave empty for default (Standard button).\n * Default value is set to 'standard'\n /\n readonly fdType = input<ButtonType>('standard');\n\n /\n @deprecated\n * Use `fdType` property.\n * The buttonType of the button. Types includes\n * 'standard','positive', 'negative', 'attention', 'ghost',\n * 'transparent', 'emphasized','menu'.\n * Leave empty for default (standard button).\n /\n readonly buttonType = input<ButtonType>();\n\n /* Whether button is in toggled state /\n readonly toggled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /* arialabel, tooltip for button, intended to be used when the button only contains an icon /\n readonly title = input<string>();\n\n /* @deprecated use toggled input property instead\n * aria-selected for accessibility to the native HTML button\n /\n readonly ariaSelected = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /* aria-disabled for accessibility to the native HTML button /\n readonly ariaDisabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /* propagate aria-expanded for accessibility to the native HTML button /\n readonly ariaExpanded = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /* propagate aria-controls for accessibility to the native HTML button /\n readonly ariaControlsId = input<string>();\n\n /* @deprecated use toggled input property instead\n * propagate aria-pressed for accessibility to the native HTML button\n /\n readonly ariaPressed = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /* Specifies the type to the native HTML button /\n readonly type = input<string>();\n\n /* Specifies an initial value to the native HTML button /\n readonly value = input<string>();\n\n /* Event sent when button is clicked /\n readonly buttonClicked = output<any>();\n\n /* @hidden Computed to determine effective fdType (buttonType overrides fdType if provided) /\n protected readonly _effectiveFdType = computed(() => this.buttonType() \|\| this.fdType());\n\n /* @hidden Computed to determine effective toggled state /\n protected readonly _effectiveToggled = computed(() => this.toggled() \|\| this.ariaPressed() \|\| this.ariaSelected());\n\n /\n Computed accessible name for the button.\n * Follows ARIA accessible name computation priority:\n * 1. aria-label input\n * 2. title input (commonly used for icon-only buttons)\n * 3. label input (visible text)\n * 4. glyph name as fallback (e.g., \"decline\" -> \"decline\")\n * @hidden\n /\n protected readonly accessibleName = computed(\n () => this.ariaLabel() \|\| this.title() \|\| this.label() \|\| this.glyph() \|\| null\n );\n\n /* @hidden /\n constructor() {\n warnOnce(\n \"Platform's ButtonComponent is deprecated and will be removed in the next major release. Consider using Core's ButtonComponent instead.\"\n );\n\n // Warn about deprecated inputs\n effect(() => {\n if (this.ariaSelected()) {\n warnOnce('Property ariaSelected is deprecated. Use `toggled` input property instead.');\n }\n });\n\n effect(() => {\n if (this.ariaPressed()) {\n warnOnce('Property ariaPressed is deprecated. Use `toggled` input property instead.');\n }\n });\n }\n\n /\n Programmatically set the disabled state.\n * Implements ButtonModel interface.\n * Note: Cannot directly set signal inputs. This method exists for interface compatibility.\n /\n setDisabled(_value: boolean): void {\n console.warn('setDisabled() cannot modify signal input. Use template binding [disabled]=\"value\" instead.');\n }\n\n /\n Get the current disabled state.\n * Implements ButtonModel interface.\n /\n isDisabled(): boolean {\n return this.disabled();\n }\n\n /\n Programmatically set the button type.\n * Implements ButtonModel interface.\n * Note: Cannot directly set signal inputs. This method exists for interface compatibility.\n /\n setFdType(_value: ButtonType): void {\n console.warn('setFdType() cannot modify signal input. Use template binding [fdType]=\"value\" instead.');\n }\n\n /\n Get the current button type.\n * Implements ButtonModel interface.\n /\n getFdType(): ButtonType {\n return this._effectiveFdType();\n }\n\n /\n No-op method for interface compatibility.\n * Implements ButtonModel interface.\n * Signal-based components don't need manual change detection.\n /\n markForCheck(): void {\n // No-op: signals automatically trigger change detection\n }\n\n /\n Handles button click\n /\n protected onBtnClick($event: any): void {\n this.buttonClicked.emit($event);\n }\n}\n\nexport class DeprecatedButtonAriaSelected implements ModuleDeprecation {\n /* @hidden /\n message = 'ariaSelected input property is deprecated.';\n\n /* @hidden /\n alternative = {\n name: 'Use [toggled] input property instead',\n link: ['/platform', 'button'],\n fragment: 'state'\n };\n}\n\nexport class DeprecatedButtonAriaPressed implements ModuleDeprecation {\n /* @hidden /\n message = 'ariaPressed input property is deprecated.';\n\n /* @hidden /\n alternative = {\n name: 'Use [toggled] input property instead',\n link: ['/platform', 'button'],\n fragment: 'state'\n };\n}\n","<button\n #fdButton\n fd-button\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [ariaLabel]=\"accessibleName()\"\n [attr.aria-controls]=\"ariaControlsId()\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n [attr.aria-disabled]=\"ariaDisabled()\"\n [attr.title]=\"!!glyph() && !label() ? title() : null\"\n [attr.value]=\"value()\"\n [glyphPosition]=\"glyphPosition()\"\n [label]=\"label()\"\n [type]=\"type()\"\n [toggled]=\"_effectiveToggled()\"\n [glyph]=\"glyph()\"\n [glyphFont]=\"glyphFont()\"\n [disabled]=\"disabled()\"\n [fdType]=\"_effectiveFdType()\"\n class=\"fd-ellipsis\"\n [class.is-disabled]=\"ariaDisabled()\"\n [style.width]=\"width()\"\n (click)=\"onBtnClick($event)\"\n></button>\n","import { NgModule } from '@angular/core';\n\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\nimport { ButtonComponent } from './button.component';\n\n/\n @deprecated\n * Use direct imports of components and directives.\n /\n@NgModule({\n imports: [ButtonComponent, ContentDensityModule],\n exports: [ButtonComponent, ContentDensityModule]\n})\nexport class PlatformButtonModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["CoreButtonComponent"],"mappings":"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"}
1	+ {"version":3,"file":"fundamental-ngx-platform-button.mjs","sources":["../../../../libs/platform/button/tokens.ts","../../../../libs/platform/button/button.component.ts","../../../../libs/platform/button/button.component.html","../../../../libs/platform/button/button.module.ts","../../../../libs/platform/button/fundamental-ngx-platform-button.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const FDP_BUTTON = new InjectionToken('FdpButtonComponent');\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n input,\n linkedSignal,\n output\n} from '@angular/core';\n\nimport { ModuleDeprecation, warnOnce } from '@fundamental-ngx/cdk/utils';\nimport { ButtonType, ButtonComponent as CoreButtonComponent, GlyphPosition } from '@fundamental-ngx/core/button';\nimport { FD_DEFAULT_ICON_FONT_FAMILY, IconFont } from '@fundamental-ngx/core/icon';\nimport { ButtonModel } from './button.model';\nimport { FDP_BUTTON } from './tokens';\n\nlet platformButtonId = 0;\n\n/*\n @deprecated\n * Button component is deprecated. Use `fd-button` from `@fundamental-ngx/core` instead.\n /\n@Component({\n selector: 'fdp-button',\n templateUrl: './button.component.html',\n styleUrl: './button.component.scss',\n providers: [\n {\n provide: FDP_BUTTON,\n useExisting: ButtonComponent\n }\n ],\n imports: [CoreButtonComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n role: 'button',\n '[attr.tabindex]': '-1'\n }\n})\nexport class ButtonComponent implements ButtonModel {\n /* Button ID - default value is provided if not set /\n readonly id = input(`fdp-button-${++platformButtonId}`);\n\n /* Name for the element /\n readonly name = input<string>();\n\n /* Width of the element /\n readonly width = input<string>();\n\n /* Disabled status of the element /\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /* Sets the `aria-label` attribute to the element /\n readonly ariaLabel = input<string>();\n\n /* Sets the `aria-labelledby` attribute to the element /\n readonly ariaLabelledBy = input<string>();\n\n /* Sets the `aria-describedby` attribute to the element /\n readonly ariaDescribedBy = input<string>();\n\n /* Position of glyph related to text /\n readonly glyphPosition = input<GlyphPosition>('before');\n\n /* Text rendered inside button component /\n readonly label = input<string>();\n\n /* The icon to include in the button. See the icon page for the list of icons /\n readonly glyph = input<string>();\n\n /* Glyph font family /\n readonly glyphFont = input<IconFont>(FD_DEFAULT_ICON_FONT_FAMILY);\n\n /* The type of the button. Types include:\n * 'standard' \| 'positive' \| 'negative' \| 'attention' \| 'half' \| 'ghost' \| 'transparent' \| 'emphasized' \| 'menu'.\n * Leave empty for default (Standard button).\n * Default value is set to 'standard'\n /\n readonly fdType = input<ButtonType>('standard');\n\n /\n @deprecated\n * Use `fdType` property.\n * The buttonType of the button. Types includes\n * 'standard','positive', 'negative', 'attention', 'ghost',\n * 'transparent', 'emphasized','menu'.\n * Leave empty for default (standard button).\n /\n readonly buttonType = input<ButtonType>();\n\n /* Whether button is in toggled state /\n readonly toggled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /* arialabel, tooltip for button, intended to be used when the button only contains an icon /\n readonly title = input<string>();\n\n /* @deprecated use toggled input property instead\n * aria-selected for accessibility to the native HTML button\n /\n readonly ariaSelected = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /* aria-disabled for accessibility to the native HTML button /\n readonly ariaDisabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /* propagate aria-expanded for accessibility to the native HTML button /\n readonly ariaExpanded = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /* propagate aria-controls for accessibility to the native HTML button /\n readonly ariaControlsId = input<string>();\n\n /* @deprecated use toggled input property instead\n * propagate aria-pressed for accessibility to the native HTML button\n /\n readonly ariaPressed = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /* Specifies the type to the native HTML button /\n readonly type = input<string>();\n\n /* Specifies an initial value to the native HTML button /\n readonly value = input<string>();\n\n /* Event sent when button is clicked /\n readonly buttonClicked = output<any>();\n\n /* @hidden Mutable disabled state for ButtonModel compatibility /\n protected readonly disabledState = linkedSignal(() => this.disabled());\n\n /* @hidden Mutable type state for ButtonModel compatibility /\n protected readonly fdTypeState = linkedSignal(() => this.buttonType() \|\| this.fdType());\n\n /* @hidden Computed to determine effective fdType (buttonType overrides fdType if provided) /\n protected readonly effectiveFdType = computed(() => this.fdTypeState());\n\n /* @hidden Computed to determine effective toggled state /\n protected readonly effectiveToggled = computed(() => this.toggled() \|\| this.ariaPressed() \|\| this.ariaSelected());\n\n /\n Computed accessible name for the button.\n * Follows ARIA accessible name computation priority:\n * 1. aria-label input\n * 2. title input (commonly used for icon-only buttons)\n * 3. label input (visible text)\n * 4. glyph name as fallback (e.g., \"decline\" -> \"decline\")\n * @hidden\n /\n protected readonly accessibleName = computed(\n () => this.ariaLabel() \|\| this.title() \|\| this.label() \|\| this.glyph() \|\| null\n );\n\n /* @hidden /\n constructor() {\n warnOnce(\n \"Platform's ButtonComponent is deprecated and will be removed in the next major release. Consider using Core's ButtonComponent instead.\"\n );\n\n // Warn about deprecated inputs\n effect(() => {\n if (this.ariaSelected()) {\n warnOnce('Property ariaSelected is deprecated. Use `toggled` input property instead.');\n }\n });\n\n effect(() => {\n if (this.ariaPressed()) {\n warnOnce('Property ariaPressed is deprecated. Use `toggled` input property instead.');\n }\n });\n }\n\n /\n Programmatically set the disabled state.\n * Implements ButtonModel interface.\n * Note: Cannot directly set signal inputs. This method exists for interface compatibility.\n /\n setDisabled(_value: boolean): void {\n this.disabledState.set(_value);\n }\n\n /\n Get the current disabled state.\n * Implements ButtonModel interface.\n /\n isDisabled(): boolean {\n return this.disabledState();\n }\n\n /\n Programmatically set the button type.\n * Implements ButtonModel interface.\n * Note: Cannot directly set signal inputs. This method exists for interface compatibility.\n /\n setFdType(_value: ButtonType): void {\n this.fdTypeState.set(_value);\n }\n\n /\n Get the current button type.\n * Implements ButtonModel interface.\n /\n getFdType(): ButtonType {\n return this.effectiveFdType();\n }\n\n /\n No-op method for interface compatibility.\n * Implements ButtonModel interface.\n * Signal-based components don't need manual change detection.\n /\n markForCheck(): void {\n // No-op: signals automatically trigger change detection\n }\n\n /\n Handles button click\n /\n protected onBtnClick($event: any): void {\n this.buttonClicked.emit($event);\n }\n}\n\nexport class DeprecatedButtonAriaSelected implements ModuleDeprecation {\n /* @hidden /\n message = 'ariaSelected input property is deprecated.';\n\n /* @hidden /\n alternative = {\n name: 'Use [toggled] input property instead',\n link: ['/platform', 'button'],\n fragment: 'state'\n };\n}\n\nexport class DeprecatedButtonAriaPressed implements ModuleDeprecation {\n /* @hidden /\n message = 'ariaPressed input property is deprecated.';\n\n /* @hidden /\n alternative = {\n name: 'Use [toggled] input property instead',\n link: ['/platform', 'button'],\n fragment: 'state'\n };\n}\n","<button\n #fdButton\n fd-button\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [ariaLabel]=\"accessibleName()\"\n [attr.aria-controls]=\"ariaControlsId()\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n [attr.aria-disabled]=\"ariaDisabled()\"\n [attr.title]=\"!!glyph() && !label() ? title() : null\"\n [attr.value]=\"value()\"\n [glyphPosition]=\"glyphPosition()\"\n [label]=\"label()\"\n [type]=\"type()\"\n [toggled]=\"effectiveToggled()\"\n [glyph]=\"glyph()\"\n [glyphFont]=\"glyphFont()\"\n [disabled]=\"disabledState()\"\n [fdType]=\"effectiveFdType()\"\n class=\"fd-ellipsis\"\n [class.is-disabled]=\"ariaDisabled()\"\n [style.width]=\"width()\"\n (click)=\"onBtnClick($event)\"\n></button>\n","import { NgModule } from '@angular/core';\n\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\nimport { ButtonComponent } from './button.component';\n\n/\n @deprecated\n * Use direct imports of components and directives.\n /\n@NgModule({\n imports: [ButtonComponent, ContentDensityModule],\n exports: [ButtonComponent, ContentDensityModule]\n})\nexport class PlatformButtonModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["CoreButtonComponent"],"mappings":"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"}