@fundamental-ngx/platform 0.57.4 → 0.57.5-rc.0

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 (20) hide show
  1. package/fesm2022/fundamental-ngx-platform-approval-flow.mjs +1 -1
  2. package/fesm2022/fundamental-ngx-platform-approval-flow.mjs.map +1 -1
  3. package/fesm2022/fundamental-ngx-platform-form.mjs +2 -2
  4. package/fesm2022/fundamental-ngx-platform-form.mjs.map +1 -1
  5. package/fesm2022/fundamental-ngx-platform-list.mjs +1 -1
  6. package/fesm2022/fundamental-ngx-platform-list.mjs.map +1 -1
  7. package/fesm2022/fundamental-ngx-platform-message-popover.mjs +2 -2
  8. package/fesm2022/fundamental-ngx-platform-message-popover.mjs.map +1 -1
  9. package/fesm2022/fundamental-ngx-platform-settings-generator.mjs +2 -2
  10. package/fesm2022/fundamental-ngx-platform-settings-generator.mjs.map +1 -1
  11. package/fesm2022/fundamental-ngx-platform-table.mjs +7 -7
  12. package/fesm2022/fundamental-ngx-platform-table.mjs.map +1 -1
  13. package/fesm2022/fundamental-ngx-platform-value-help-dialog.mjs +2 -2
  14. package/fesm2022/fundamental-ngx-platform-value-help-dialog.mjs.map +1 -1
  15. package/fesm2022/fundamental-ngx-platform-variant-management.mjs +1 -1
  16. package/fesm2022/fundamental-ngx-platform-variant-management.mjs.map +1 -1
  17. package/fesm2022/fundamental-ngx-platform-wizard-generator.mjs +1 -1
  18. package/fesm2022/fundamental-ngx-platform-wizard-generator.mjs.map +1 -1
  19. package/package.json +12 -12
  20. package/schematics/ng-add/index.js +1 -1
package/fesm2022/fundamental-ngx-platform-approval-flow.mjs CHANGED
@@ -2437,7 +2437,7 @@ class ApprovalFlowComponent {
2437
2437
  return filteredColumns;
2438
2438
  }
2439
2439
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ApprovalFlowComponent, deps: [{ token: i1$1.DialogService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: DATA_PROVIDERS, optional: true }, { token: i1$2.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
2440
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ApprovalFlowComponent, isStandalone: true, selector: "fdp-approval-flow", inputs: { title: "title", value: "value", userDataSource: "userDataSource", watcherDataSource: "watcherDataSource", teamDataSource: "teamDataSource", userDetailsTemplate: "userDetailsTemplate", approvalStatusTemplate: "approvalStatusTemplate", statusColorMapping: "statusColorMapping", checkDueDate: "checkDueDate", dueDateThreshold: "dueDateThreshold", allowSendRemindersForStatuses: "allowSendRemindersForStatuses", isEditAvailable: "isEditAvailable", watchersLabel: "watchersLabel", allowAddParallelNodes: "allowAddParallelNodes", disableSaveButton: "disableSaveButton", disableExitButton: "disableExitButton", usersDataProviderEntityKey: "usersDataProviderEntityKey", teamsDataProviderEntityKey: "teamsDataProviderEntityKey", watchersDataProviderEntityKey: "watchersDataProviderEntityKey", 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]=\"'navigation-' + (_rtl ? 'right' : 'left') + '-arrow'\"></fd-icon>\n {{ _carouselStepsLeft }}\n </button>\n }\n @if (_carouselStepsRight > 0) {\n <button\n class=\"fdp-approval-flow-carousel-controls__button--next-slide\"\n [attr.aria-label]=\"'platformApprovalFlow.nextButtonAriaLabel' | fdTranslate\"\n (click)=\"nextSlide()\"\n >\n {{ _carouselStepsRight }}\n <fd-icon [glyph]=\"'navigation-' + (_rtl ? 'left' : 'right') + '-arrow'\"></fd-icon>\n </button>\n }\n </div>\n }\n <div\n class=\"fdp-approval-flow__graph-container\"\n [class.fdp-approval-flow__graph-container--multiple-root-nodes]=\"_multipleRootNodes\"\n [class.fdp-approval-flow__graph-container--multiple-final-nodes]=\"_multipleFinalNodes\"\n [class.fd-scrollbar]=\"true\"\n #graphContainerEl\n >\n <div\n class=\"fdp-approval-flow__graph\"\n #graphEl\n [class.fdp-approval-flow__graph--edit-mode]=\"_isEditMode\"\n >\n @for (column of _graph.columns; track column; let columnIndex = $index) {\n <div class=\"fdp-approval-flow__graph-column\">\n @for (\n node of column.nodes;\n track _trackByFn(nodeIndex, node);\n let nodeIndex = $index\n ) {\n <fdp-approval-flow-node\n cdkDrag\n #approvalFlowNode\n [cdkDragDisabled]=\"_isCdkDragDisabled(node)\"\n [node]=\"node\"\n [meta]=\"_graphMetadata[node.id]\"\n [isEdit]=\"_isEditMode\"\n [isNextNodeBlank]=\"_isNextNodeBlank(node, columnIndex, nodeIndex)\"\n [checkDueDate]=\"checkDueDate\"\n [dueDateThreshold]=\"dueDateThreshold\"\n [renderArrow]=\"columnIndex > 0\"\n [allNodesInColumnApproved]=\"!!column.allNodesApproved\"\n [approvalStatusTemplate]=\"approvalStatusTemplate\"\n [statusColorMapping]=\"statusColorMapping\"\n (onAdd)=\"_addNode(node, $event)\"\n (onEdit)=\"_editNode(node)\"\n (onDelete)=\"_onNodeDelete(node)\"\n (keydown)=\"_onNodeKeyDown($event, node)\"\n (cdkDragStarted)=\"_dragDropInProgress = true\"\n (cdkDragReleased)=\"_onNodeDrop(node, $event.source)\"\n (cdkDragMoved)=\"_onNodeDragMoved(node)\"\n >\n <!-- Trick with using projection to make grid list items visible for the grid list -->\n <fd-grid-list-item\n type=\"active\"\n [value]=\"node\"\n [selected]=\"!!node.selected\"\n [ariaLabelledBy]=\"approvalFlowNode.approvalFlowNodeId\"\n [disableToolbarClick]=\"true\"\n class=\"fdp-approval-flow__graph-node-inner\"\n [class.fdp-approval-flow__graph-node-inner--edit]=\"_isEditMode\"\n (press)=\"_onNodeClick(node)\"\n >\n <fd-grid-list-item-toolbar>\n @if (_isEditMode) {\n <ng-template\n [ngTemplateOutlet]=\"approvalFlowNode._overflowMenuButton\"\n ></ng-template>\n }\n </fd-grid-list-item-toolbar>\n <fd-avatar\n fd-grid-list-item-image\n [image]=\"\n node.approvers.length === 1 ? node.approvers[0].imgUrl : null\n \"\n [label]=\"node.approvers.length > 1 ? node.description : null\"\n size=\"xs\"\n [circle]=\"true\"\n ></fd-avatar>\n <ng-template fd-grid-list-item-body>\n <ng-template\n [ngTemplateOutlet]=\"approvalFlowNode._nodeContent\"\n ></ng-template>\n </ng-template>\n </fd-grid-list-item>\n </fdp-approval-flow-node>\n }\n </div>\n }\n </div>\n </div>\n </div>\n } @else {\n <figure fd-illustrated-message type=\"spot\" [svgConfig]=\"_emptyApprovalFlowSpotConfig\">\n <figcaption fd-illustrated-message-figcaption>\n <h3 fd-illustrated-message-title>\n {{ 'platformApprovalFlow.emptyTitle' | fdTranslate }}\n </h3>\n <p fd-illustrated-message-text>\n {{ 'platformApprovalFlow.emptyHint' | fdTranslate }}\n </p>\n </figcaption>\n </figure>\n <!-- TODO #5178: Replace with illustrated image component after it gets fixed -->\n <div [style.display]=\"'none'\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n id=\"sapIllus-Spot-NoData\"\n >\n <path\n d=\"M41.6179,32.7174H84.6273a1,1,0,0,1,.723.3092l7.2445,7.5824,7.4817,7.8491a1,1,0,0,1,.2761.69l-.0046,55.6069a4.1038,4.1038,0,0,1-.8787,2.1212A4.0564,4.0564,0,0,1,98.1,107.9631l-56.3858.0313a2.6167,2.6167,0,0,1-3.0812-3.2309l-.0152-69.0594Z\"\n class=\"sapIllus_PatternShadow\"\n [style.fill]=\"'var(--sapIllus_PatternShadow)'\"\n ></path>\n <path\n d=\"M35.7928,27.4987H78.8022a1,1,0,0,1,.723.3092L86.77,35.39l7.4816,7.8492a1,1,0,0,1,.2762.69l-.0046,55.6069a3,3,0,0,1-3,3H35.808a2.9946,2.9946,0,0,1-3-2.9913c-.01-12.0564-.0423-57.0116-.0152-69.0595A2.9943,2.9943,0,0,1,35.7928,27.4987Z\"\n class=\"sapIllus_ObjectFillColor\"\n [style.fill]=\"'var(--sapIllus_ObjectFillColor)'\"\n ></path>\n <path\n d=\"M93.2978,44.5335H78.8208a.9925.9925,0,0,1-.974-1.01V28.5108a.97.97,0,0,1,1.6628-.7143L93.9865,42.8092A1.0151,1.0151,0,0,1,93.2978,44.5335Z\"\n class=\"sapIllus_BrandColorSecondary\"\n [style.fill]=\"'var(--sapIllus_BrandColorSecondary)'\"\n ></path>\n <path\n d=\"M104.608,38.9485l5.9157-1.7721c1.32-.3954.7584-2.5258-.5689-2.1282L104.0392,36.82c-1.32.3953-.7584,2.5258.5688,2.1282Z\"\n class=\"sapIllus_Layering1\"\n [style.fill]=\"'var(--sapIllus_Layering1)'\"\n ></path>\n <path\n d=\"M85.2973,21.2465l.9718-5.9331c.2154-1.3151-1.777-1.8807-1.9941-.5554l-.9718,5.9332c-.2155,1.3151,1.777,1.8807,1.9941.5553Z\"\n class=\"sapIllus_Layering1\"\n [style.fill]=\"'var(--sapIllus_Layering1)'\"\n ></path>\n <path\n d=\"M95.3034,29.0015a1.01,1.01,0,0,1-.6837-.267,1.0783,1.0783,0,0,1-.0864-1.4932l5.9511-6.8857a1.01,1.01,0,0,1,1.4538-.0884,1.0785,1.0785,0,0,1,.0865,1.4932l-5.9511,6.8858A1.0164,1.0164,0,0,1,95.3034,29.0015Z\"\n class=\"sapIllus_Layering1\"\n [style.fill]=\"'var(--sapIllus_Layering1)'\"\n ></path>\n <path\n d=\"M94.8747,42.8861,80.0855,27.4623a1.5152,1.5152,0,0,0-1.0885-.4636H35.807a3.509,3.509,0,0,0-3.5146,3.4836c-.0294,13.2857.0137,66.7559.0157,69.0257a3.5076,3.5076,0,0,0,3.5146,3.4894H91.7709a3.5106,3.5106,0,0,0,3.5146-3.4982l.005-55.5785A1.49,1.49,0,0,0,94.8747,42.8861Zm-16.21-14.8355a1.15,1.15,0,0,1,.2561-.0309,1.04,1.04,0,0,1,.51.2134l14.276,14.8837.0194.02a.5891.5891,0,0,1,.0968.6251c-.1016.1764-.4086.24-.69.24L78.8355,44a.6031.6031,0,0,1-.5472-.6131c-.0087-4.9588-.017-9.9015-.0035-14.8689A.5189.5189,0,0,1,78.6646,28.0506Zm13.1062,73.95H35.8188a2.5045,2.5045,0,0,1-2.5107-2.491c-.002-2.2694-.0451-55.74-.0157-69.0248a2.5054,2.5054,0,0,1,2.5107-2.4861H77.3684a1.49,1.49,0,0,0-.0976.5106V43.4934A1.5145,1.5145,0,0,0,78.7894,45H78.92L94.286,47.9749l-.0046,51.5269A2.5074,2.5074,0,0,1,91.7708,102.0006Z\"\n class=\"sapIllus_StrokeDetailColor\"\n [style.fill]=\"'var(--sapIllus_StrokeDetailColor)'\"\n ></path>\n </svg>\n </div>\n }\n }\n </fd-grid-list>\n @if (_isEditMode) {\n <div fd-bar>\n <div fd-bar-right>\n <fd-bar-element>\n <button\n fd-button\n [label]=\"'platformApprovalFlow.editModeSaveButtonLabel' | fdTranslate\"\n fdType=\"emphasized\"\n [disabled]=\"disableSaveButton\"\n (click)=\"_saveEditModeChanges()\"\n ></button>\n </fd-bar-element>\n <fd-bar-element>\n <button\n fd-button\n [label]=\"'platformApprovalFlow.editModeExitButtonLabel' | fdTranslate\"\n fdType=\"transparent\"\n [disabled]=\"disableExitButton\"\n (click)=\"_exitEditMode()\"\n ></button>\n </fd-bar-element>\n </div>\n </div>\n }\n</ng-container>\n", styles: [".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.40.1\n * Copyright (c) 2025 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"] }, { kind: "component", type: GridListTitleBarSpacerComponent, selector: "fd-grid-list-title-bar-spacer" }, { kind: "component", type: ApprovalFlowToolbarActionsComponent, selector: "fdp-approval-flow-toolbar-actions", inputs: ["graph", "graphMetadata", "selectedNodes", "isEditMode"], outputs: ["enterEditMode", "addNode", "editSelectedNode", "deleteSelectedNodes"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "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"], outputs: ["searchTermChange", "selectedChange", "openChange", "addOnButtonClicked", "allItemsSelectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: ApprovalFlowNodeComponent, selector: "fdp-approval-flow-node", inputs: ["node", "meta", "renderArrow", "checkDueDate", "dueDateThreshold", "allNodesInColumnApproved", "approvalStatusTemplate", "statusColorMapping", "isEdit", "isNextNodeBlank"], outputs: ["onAdd", "onEdit", "onDelete"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "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: ["class", "barDesign", "inPage", "inHomePage", "size", "role"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: IllustratedMessageComponent, selector: "[fd-illustrated-message]", inputs: ["type", "svgConfig", "svgAriaLabel", "noSvg", "id", "class"] }, { kind: "component", type: IllustratedMessageFigcaptionComponent, selector: "[fd-illustrated-message-figcaption]" }, { kind: "directive", type: IllustratedMessageTitleDirective, selector: "[fd-illustrated-message-title]" }, { kind: "directive", type: IllustratedMessageTextDirective, selector: "[fd-illustrated-message-text]" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2440
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ApprovalFlowComponent, isStandalone: true, selector: "fdp-approval-flow", inputs: { title: "title", value: "value", userDataSource: "userDataSource", watcherDataSource: "watcherDataSource", teamDataSource: "teamDataSource", userDetailsTemplate: "userDetailsTemplate", approvalStatusTemplate: "approvalStatusTemplate", statusColorMapping: "statusColorMapping", checkDueDate: "checkDueDate", dueDateThreshold: "dueDateThreshold", allowSendRemindersForStatuses: "allowSendRemindersForStatuses", isEditAvailable: "isEditAvailable", watchersLabel: "watchersLabel", allowAddParallelNodes: "allowAddParallelNodes", disableSaveButton: "disableSaveButton", disableExitButton: "disableExitButton", usersDataProviderEntityKey: "usersDataProviderEntityKey", teamsDataProviderEntityKey: "teamsDataProviderEntityKey", watchersDataProviderEntityKey: "watchersDataProviderEntityKey", 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]=\"'navigation-' + (_rtl ? 'right' : 'left') + '-arrow'\"></fd-icon>\n {{ _carouselStepsLeft }}\n </button>\n }\n @if (_carouselStepsRight > 0) {\n <button\n class=\"fdp-approval-flow-carousel-controls__button--next-slide\"\n [attr.aria-label]=\"'platformApprovalFlow.nextButtonAriaLabel' | fdTranslate\"\n (click)=\"nextSlide()\"\n >\n {{ _carouselStepsRight }}\n <fd-icon [glyph]=\"'navigation-' + (_rtl ? 'left' : 'right') + '-arrow'\"></fd-icon>\n </button>\n }\n </div>\n }\n <div\n class=\"fdp-approval-flow__graph-container\"\n [class.fdp-approval-flow__graph-container--multiple-root-nodes]=\"_multipleRootNodes\"\n [class.fdp-approval-flow__graph-container--multiple-final-nodes]=\"_multipleFinalNodes\"\n [class.fd-scrollbar]=\"true\"\n #graphContainerEl\n >\n <div\n class=\"fdp-approval-flow__graph\"\n #graphEl\n [class.fdp-approval-flow__graph--edit-mode]=\"_isEditMode\"\n >\n @for (column of _graph.columns; track column; let columnIndex = $index) {\n <div class=\"fdp-approval-flow__graph-column\">\n @for (\n node of column.nodes;\n track _trackByFn(nodeIndex, node);\n let nodeIndex = $index\n ) {\n <fdp-approval-flow-node\n cdkDrag\n #approvalFlowNode\n [cdkDragDisabled]=\"_isCdkDragDisabled(node)\"\n [node]=\"node\"\n [meta]=\"_graphMetadata[node.id]\"\n [isEdit]=\"_isEditMode\"\n [isNextNodeBlank]=\"_isNextNodeBlank(node, columnIndex, nodeIndex)\"\n [checkDueDate]=\"checkDueDate\"\n [dueDateThreshold]=\"dueDateThreshold\"\n [renderArrow]=\"columnIndex > 0\"\n [allNodesInColumnApproved]=\"!!column.allNodesApproved\"\n [approvalStatusTemplate]=\"approvalStatusTemplate\"\n [statusColorMapping]=\"statusColorMapping\"\n (onAdd)=\"_addNode(node, $event)\"\n (onEdit)=\"_editNode(node)\"\n (onDelete)=\"_onNodeDelete(node)\"\n (keydown)=\"_onNodeKeyDown($event, node)\"\n (cdkDragStarted)=\"_dragDropInProgress = true\"\n (cdkDragReleased)=\"_onNodeDrop(node, $event.source)\"\n (cdkDragMoved)=\"_onNodeDragMoved(node)\"\n >\n <!-- Trick with using projection to make grid list items visible for the grid list -->\n <fd-grid-list-item\n type=\"active\"\n [value]=\"node\"\n [selected]=\"!!node.selected\"\n [ariaLabelledBy]=\"approvalFlowNode.approvalFlowNodeId\"\n [disableToolbarClick]=\"true\"\n class=\"fdp-approval-flow__graph-node-inner\"\n [class.fdp-approval-flow__graph-node-inner--edit]=\"_isEditMode\"\n (press)=\"_onNodeClick(node)\"\n >\n <fd-grid-list-item-toolbar>\n @if (_isEditMode) {\n <ng-template\n [ngTemplateOutlet]=\"approvalFlowNode._overflowMenuButton\"\n ></ng-template>\n }\n </fd-grid-list-item-toolbar>\n <fd-avatar\n fd-grid-list-item-image\n [image]=\"\n node.approvers.length === 1 ? node.approvers[0].imgUrl : null\n \"\n [label]=\"node.approvers.length > 1 ? node.description : null\"\n size=\"xs\"\n [circle]=\"true\"\n ></fd-avatar>\n <ng-template fd-grid-list-item-body>\n <ng-template\n [ngTemplateOutlet]=\"approvalFlowNode._nodeContent\"\n ></ng-template>\n </ng-template>\n </fd-grid-list-item>\n </fdp-approval-flow-node>\n }\n </div>\n }\n </div>\n </div>\n </div>\n } @else {\n <figure fd-illustrated-message type=\"spot\" [svgConfig]=\"_emptyApprovalFlowSpotConfig\">\n <figcaption fd-illustrated-message-figcaption>\n <h3 fd-illustrated-message-title>\n {{ 'platformApprovalFlow.emptyTitle' | fdTranslate }}\n </h3>\n <p fd-illustrated-message-text>\n {{ 'platformApprovalFlow.emptyHint' | fdTranslate }}\n </p>\n </figcaption>\n </figure>\n <!-- TODO #5178: Replace with illustrated image component after it gets fixed -->\n <div [style.display]=\"'none'\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"128\"\n height=\"128\"\n viewBox=\"0 0 128 128\"\n id=\"sapIllus-Spot-NoData\"\n >\n <path\n d=\"M41.6179,32.7174H84.6273a1,1,0,0,1,.723.3092l7.2445,7.5824,7.4817,7.8491a1,1,0,0,1,.2761.69l-.0046,55.6069a4.1038,4.1038,0,0,1-.8787,2.1212A4.0564,4.0564,0,0,1,98.1,107.9631l-56.3858.0313a2.6167,2.6167,0,0,1-3.0812-3.2309l-.0152-69.0594Z\"\n class=\"sapIllus_PatternShadow\"\n [style.fill]=\"'var(--sapIllus_PatternShadow)'\"\n ></path>\n <path\n d=\"M35.7928,27.4987H78.8022a1,1,0,0,1,.723.3092L86.77,35.39l7.4816,7.8492a1,1,0,0,1,.2762.69l-.0046,55.6069a3,3,0,0,1-3,3H35.808a2.9946,2.9946,0,0,1-3-2.9913c-.01-12.0564-.0423-57.0116-.0152-69.0595A2.9943,2.9943,0,0,1,35.7928,27.4987Z\"\n class=\"sapIllus_ObjectFillColor\"\n [style.fill]=\"'var(--sapIllus_ObjectFillColor)'\"\n ></path>\n <path\n d=\"M93.2978,44.5335H78.8208a.9925.9925,0,0,1-.974-1.01V28.5108a.97.97,0,0,1,1.6628-.7143L93.9865,42.8092A1.0151,1.0151,0,0,1,93.2978,44.5335Z\"\n class=\"sapIllus_BrandColorSecondary\"\n [style.fill]=\"'var(--sapIllus_BrandColorSecondary)'\"\n ></path>\n <path\n d=\"M104.608,38.9485l5.9157-1.7721c1.32-.3954.7584-2.5258-.5689-2.1282L104.0392,36.82c-1.32.3953-.7584,2.5258.5688,2.1282Z\"\n class=\"sapIllus_Layering1\"\n [style.fill]=\"'var(--sapIllus_Layering1)'\"\n ></path>\n <path\n d=\"M85.2973,21.2465l.9718-5.9331c.2154-1.3151-1.777-1.8807-1.9941-.5554l-.9718,5.9332c-.2155,1.3151,1.777,1.8807,1.9941.5553Z\"\n class=\"sapIllus_Layering1\"\n [style.fill]=\"'var(--sapIllus_Layering1)'\"\n ></path>\n <path\n d=\"M95.3034,29.0015a1.01,1.01,0,0,1-.6837-.267,1.0783,1.0783,0,0,1-.0864-1.4932l5.9511-6.8857a1.01,1.01,0,0,1,1.4538-.0884,1.0785,1.0785,0,0,1,.0865,1.4932l-5.9511,6.8858A1.0164,1.0164,0,0,1,95.3034,29.0015Z\"\n class=\"sapIllus_Layering1\"\n [style.fill]=\"'var(--sapIllus_Layering1)'\"\n ></path>\n <path\n d=\"M94.8747,42.8861,80.0855,27.4623a1.5152,1.5152,0,0,0-1.0885-.4636H35.807a3.509,3.509,0,0,0-3.5146,3.4836c-.0294,13.2857.0137,66.7559.0157,69.0257a3.5076,3.5076,0,0,0,3.5146,3.4894H91.7709a3.5106,3.5106,0,0,0,3.5146-3.4982l.005-55.5785A1.49,1.49,0,0,0,94.8747,42.8861Zm-16.21-14.8355a1.15,1.15,0,0,1,.2561-.0309,1.04,1.04,0,0,1,.51.2134l14.276,14.8837.0194.02a.5891.5891,0,0,1,.0968.6251c-.1016.1764-.4086.24-.69.24L78.8355,44a.6031.6031,0,0,1-.5472-.6131c-.0087-4.9588-.017-9.9015-.0035-14.8689A.5189.5189,0,0,1,78.6646,28.0506Zm13.1062,73.95H35.8188a2.5045,2.5045,0,0,1-2.5107-2.491c-.002-2.2694-.0451-55.74-.0157-69.0248a2.5054,2.5054,0,0,1,2.5107-2.4861H77.3684a1.49,1.49,0,0,0-.0976.5106V43.4934A1.5145,1.5145,0,0,0,78.7894,45H78.92L94.286,47.9749l-.0046,51.5269A2.5074,2.5074,0,0,1,91.7708,102.0006Z\"\n class=\"sapIllus_StrokeDetailColor\"\n [style.fill]=\"'var(--sapIllus_StrokeDetailColor)'\"\n ></path>\n </svg>\n </div>\n }\n }\n </fd-grid-list>\n @if (_isEditMode) {\n <div fd-bar>\n <div fd-bar-right>\n <fd-bar-element>\n <button\n fd-button\n [label]=\"'platformApprovalFlow.editModeSaveButtonLabel' | fdTranslate\"\n fdType=\"emphasized\"\n [disabled]=\"disableSaveButton\"\n (click)=\"_saveEditModeChanges()\"\n ></button>\n </fd-bar-element>\n <fd-bar-element>\n <button\n fd-button\n [label]=\"'platformApprovalFlow.editModeExitButtonLabel' | fdTranslate\"\n fdType=\"transparent\"\n [disabled]=\"disableExitButton\"\n (click)=\"_exitEditMode()\"\n ></button>\n </fd-bar-element>\n </div>\n </div>\n }\n</ng-container>\n", styles: [".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.40.1\n * Copyright (c) 2025 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"] }, { kind: "component", type: GridListTitleBarSpacerComponent, selector: "fd-grid-list-title-bar-spacer" }, { kind: "component", type: ApprovalFlowToolbarActionsComponent, selector: "fdp-approval-flow-toolbar-actions", inputs: ["graph", "graphMetadata", "selectedNodes", "isEditMode"], outputs: ["enterEditMode", "addNode", "editSelectedNode", "deleteSelectedNodes"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "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"], outputs: ["searchTermChange", "selectedChange", "openChange", "addOnButtonClicked", "allItemsSelectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: ApprovalFlowNodeComponent, selector: "fdp-approval-flow-node", inputs: ["node", "meta", "renderArrow", "checkDueDate", "dueDateThreshold", "allNodesInColumnApproved", "approvalStatusTemplate", "statusColorMapping", "isEdit", "isNextNodeBlank"], outputs: ["onAdd", "onEdit", "onDelete"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "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: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: IllustratedMessageComponent, selector: "[fd-illustrated-message]", inputs: ["type", "svgConfig", "svgAriaLabel", "noSvg", "id", "class"] }, { kind: "component", type: IllustratedMessageFigcaptionComponent, selector: "[fd-illustrated-message-figcaption]" }, { kind: "directive", type: IllustratedMessageTitleDirective, selector: "[fd-illustrated-message-title]" }, { kind: "directive", type: IllustratedMessageTextDirective, selector: "[fd-illustrated-message-text]" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2441
2441
  }
2442
2442
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ApprovalFlowComponent, decorators: [{
2443
2443
  type: Component,