@fundamental-ngx/core 0.62.2-rc.8 → 0.62.2
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.
- package/fesm2022/fundamental-ngx-core-action-bar.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-action-sheet.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-avatar.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-bar.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-busy-indicator.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-button.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-calendar.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-card.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-carousel.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-checkbox.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-combobox.mjs +2 -8
- package/fesm2022/fundamental-ngx-core-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dialog.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-dynamic-side-content.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-facets.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-feed-input.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-feed-list-item.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-file-uploader.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-fixed-card-layout.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-flexible-column-layout.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-form.mjs +16 -16
- package/fesm2022/fundamental-ngx-core-form.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-generic-tag.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-grid-list.mjs +22 -6
- package/fesm2022/fundamental-ngx-core-grid-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-icon.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-info-label.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-input-group.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-layout-grid.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-layout-panel.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-link.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-list.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-message-box.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-message-page.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-message-strip.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-message-toast.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-micro-process-flow.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-notification.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-attribute.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-identifier.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-marker.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-status.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-pagination.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-panel.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-popover.mjs +8 -5
- package/fesm2022/fundamental-ngx-core-popover.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-product-switch.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-progress-indicator.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-quick-view.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-radio.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-rating-indicator.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-resizable-card-layout.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs +3 -3
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-select.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-settings.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-shellbar.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-side-navigation.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-skeleton.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-slider.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-split-button.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-status-indicator.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-step-input.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-switch.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-switch.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-table.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-tabs.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-text.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-tile.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-time.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-title.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-token.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-toolbar.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-tree.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-upload-collection.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-vertical-navigation.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-wizard.mjs +2 -2
- package/package.json +4 -4
- package/types/fundamental-ngx-core-grid-list.d.ts +10 -1
- package/types/fundamental-ngx-core-popover.d.ts +1 -1
|
@@ -59,7 +59,7 @@ class MessageToastComponent extends BaseToastDurationDismissibleContainerCompone
|
|
|
59
59
|
super(inject(MessageToastConfig));
|
|
60
60
|
}
|
|
61
61
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MessageToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
62
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MessageToastComponent, isStandalone: true, selector: "fd-message-toast", host: { attributes: { "role": "alert", "tabindex": "-1" }, properties: { "style.width": "width", "style.min-width": "minWidth", "style.max-width": "maxWidth", "style.height": "height", "style.min-height": "minHeight", "style.max-height": "maxHeight", "attr.aria-label": "ariaLabel", "attr.aria-live": "\"polite\"", "attr.id": "id" }, classAttribute: "fd-message-toast" }, usesInheritance: true, ngImport: i0, template: `<ng-template cdkPortalOutlet></ng-template>`, isInline: true, styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors:active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-popover{background:none;border:none;padding:0;outline:0;overflow:visible;position:fixed;pointer-events:none;white-space:normal;color:inherit;text-decoration:none;width:100%;height:100%;inset:0 auto auto 0}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{position:fixed;z-index:auto}.fd-message-toast{background-color:var(--sapIndicationColor_9_Background);border:0;border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-shadow:var(--sapContent_Lite_Shadow);box-shadow:var(--sapContent_Lite_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_ContrastTextColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;max-width:15rem;padding-block:0;padding-block:1rem;padding-inline:0;padding-inline:1rem;text-align:center;width:auto}.fd-message-toast:after,.fd-message-toast:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}\n/*!\n * Fundamental Library Styles v0.41.
|
|
62
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MessageToastComponent, isStandalone: true, selector: "fd-message-toast", host: { attributes: { "role": "alert", "tabindex": "-1" }, properties: { "style.width": "width", "style.min-width": "minWidth", "style.max-width": "maxWidth", "style.height": "height", "style.min-height": "minHeight", "style.max-height": "maxHeight", "attr.aria-label": "ariaLabel", "attr.aria-live": "\"polite\"", "attr.id": "id" }, classAttribute: "fd-message-toast" }, usesInheritance: true, ngImport: i0, template: `<ng-template cdkPortalOutlet></ng-template>`, isInline: true, styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors:active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-popover{background:none;border:none;padding:0;outline:0;overflow:visible;position:fixed;pointer-events:none;white-space:normal;color:inherit;text-decoration:none;width:100%;height:100%;inset:0 auto auto 0}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{position:fixed;z-index:auto}.fd-message-toast{background-color:var(--sapIndicationColor_9_Background);border:0;border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-shadow:var(--sapContent_Lite_Shadow);box-shadow:var(--sapContent_Lite_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_ContrastTextColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;max-width:15rem;padding-block:0;padding-block:1rem;padding-inline:0;padding-inline:1rem;text-align:center;width:auto}.fd-message-toast:after,.fd-message-toast:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}\n/*!\n * Fundamental Library Styles v0.41.6\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"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
63
63
|
}
|
|
64
64
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MessageToastComponent, decorators: [{
|
|
65
65
|
type: Component,
|
|
@@ -76,7 +76,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
76
76
|
role: 'alert',
|
|
77
77
|
tabindex: '-1',
|
|
78
78
|
class: 'fd-message-toast'
|
|
79
|
-
}, imports: [PortalModule], styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors:active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-popover{background:none;border:none;padding:0;outline:0;overflow:visible;position:fixed;pointer-events:none;white-space:normal;color:inherit;text-decoration:none;width:100%;height:100%;inset:0 auto auto 0}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{position:fixed;z-index:auto}.fd-message-toast{background-color:var(--sapIndicationColor_9_Background);border:0;border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-shadow:var(--sapContent_Lite_Shadow);box-shadow:var(--sapContent_Lite_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_ContrastTextColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;max-width:15rem;padding-block:0;padding-block:1rem;padding-inline:0;padding-inline:1rem;text-align:center;width:auto}.fd-message-toast:after,.fd-message-toast:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}\n/*!\n * Fundamental Library Styles v0.41.
|
|
79
|
+
}, imports: [PortalModule], styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors:active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-popover{background:none;border:none;padding:0;outline:0;overflow:visible;position:fixed;pointer-events:none;white-space:normal;color:inherit;text-decoration:none;width:100%;height:100%;inset:0 auto auto 0}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{position:fixed;z-index:auto}.fd-message-toast{background-color:var(--sapIndicationColor_9_Background);border:0;border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-shadow:var(--sapContent_Lite_Shadow);box-shadow:var(--sapContent_Lite_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_ContrastTextColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;max-width:15rem;padding-block:0;padding-block:1rem;padding-inline:0;padding-inline:1rem;text-align:center;width:auto}.fd-message-toast:after,.fd-message-toast:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}\n/*!\n * Fundamental Library Styles v0.41.6\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"] }]
|
|
80
80
|
}], ctorParameters: () => [] });
|
|
81
81
|
|
|
82
82
|
class MessageToastService extends BaseDismissibleToastService {
|
|
@@ -382,7 +382,7 @@ class MicroProcessFlowComponent {
|
|
|
382
382
|
useExisting: MicroProcessFlowComponent
|
|
383
383
|
},
|
|
384
384
|
contentDensityObserverProviders()
|
|
385
|
-
], queries: [{ propertyName: "items", predicate: MicroProcessFlowItemComponent }, { propertyName: "focusableItems", predicate: MicroProcessFlowFocusableItemDirective, descendants: true }], viewQueries: [{ propertyName: "_wrapperContainer", first: true, predicate: ["wrapperContainer"], descendants: true }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true }, { propertyName: "_goNextButton", first: true, predicate: ["goNextButton"], descendants: true }], ngImport: i0, template: "@if (showPreviousButton) {\n <a\n tabindex=\"0\"\n class=\"fd-micro-process-flow__link-previous\"\n role=\"button\"\n type=\"button\"\n (click)=\"goBack()\"\n (keypress)=\"onKeypressHandler(-1, $event)\"\n >\n {{ previousItemsCount }}\n </a>\n}\n<div class=\"fd-micro-process-flow__overflow-container\" #container>\n <div\n class=\"fd-micro-process-flow__wrapper\"\n #wrapperContainer\n [style.transition-duration]=\"transitionSpeed + 'ms'\"\n [style.transition-timing-function]=\"transitionTimingFunction\"\n >\n <ng-content select=\"fd-micro-process-flow-item\"></ng-content>\n </div>\n</div>\n@if (showNextButton) {\n <a\n tabindex=\"0\"\n class=\"fd-micro-process-flow__link-next\"\n role=\"button\"\n type=\"button\"\n (click)=\"goNext()\"\n (keypress)=\"onKeypressHandler(1, $event)\"\n #goNextButton\n >\n {{ nextItemsCount }}\n </a>\n}\n", styles: [":root{--fdMicro_Process_Flow_Item_Background:var(--sapNeutralBackground);--fdMicro_Process_Flow_Item_Border_Color:var(--sapNeutralBorderColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--fdMicro_Process_Flow_Item_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--fdMicro_Process_Flow_Item_Border_Color);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Width:2.75rem;--fdMicro_Process_Flow_Item_Min_Width:1.875rem;--fdMicro_Process_Flow_Compact_Item_Width:2rem;--fdMicro_Process_Flow_Compact_Item_Min_Width:1.375rem;--fdMicro_Process_Flow_Connector_Width:1.125rem;--fdMicro_Process_Flow_Compact_Connector_Width:.625rem;--fdMicro_Process_Flow_Icon_Font_Size:var(--sapFontLargeSize);--fdMicro_Process_Flow_Visible_items:8;--fdMicro_Process_Flow_Max_Container_Width:calc(var(--fdMicro_Process_Flow_Item_Width)*(var(--fdMicro_Process_Flow_Visible_items) + 1) + .0625rem);--fdMicro_Process_Flow_Compact_Max_Container_Width:calc(var(--fdMicro_Process_Flow_Compact_Item_Width)*(var(--fdMicro_Process_Flow_Visible_items) + 1) + .0625rem)}.fd-micro-process-flow{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;max-width:var(--fdMicro_Process_Flow_Max_Container_Width)}.fd-micro-process-flow:after,.fd-micro-process-flow:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow--independent-steps .fd-micro-process-flow__connector:before{border-color:transparent}.fd-micro-process-flow__wrapper{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.fd-micro-process-flow__wrapper:after,.fd-micro-process-flow__wrapper:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__overflow-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;overflow:hidden;width:100%}.fd-micro-process-flow__overflow-container:after,.fd-micro-process-flow__overflow-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__link-next,.fd-micro-process-flow__link-previous{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-inline:0;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--sapGroup_TitleTextColor);cursor:pointer;font-size:var(--sapFontSize);padding-block:0;padding-inline:.313rem;text-shadow:var(--sapContent_TextShadow)}.fd-micro-process-flow__link-next:after,.fd-micro-process-flow__link-next:before,.fd-micro-process-flow__link-previous:after,.fd-micro-process-flow__link-previous:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__link-next.is-focus,.fd-micro-process-flow__link-next:focus,.fd-micro-process-flow__link-previous.is-focus,.fd-micro-process-flow__link-previous:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-micro-process-flow__link-next:after,.fd-micro-process-flow__link-next:before,.fd-micro-process-flow__link-previous:after,.fd-micro-process-flow__link-previous:before{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--sapButton_TextColor);font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-micro-process-flow__link-next.is-hover:after,.fd-micro-process-flow__link-next.is-hover:before,.fd-micro-process-flow__link-next:hover:after,.fd-micro-process-flow__link-next:hover:before,.fd-micro-process-flow__link-previous.is-hover:after,.fd-micro-process-flow__link-previous.is-hover:before,.fd-micro-process-flow__link-previous:hover:after,.fd-micro-process-flow__link-previous:hover:before{color:var(--sapButton_Hover_TextColor)}.fd-micro-process-flow__link-previous:before{content:\"\\e067\";-webkit-padding-end:.313rem;padding-inline-end:.313rem}.fd-micro-process-flow__link-previous[dir=rtl]:before,[dir=rtl] .fd-micro-process-flow__link-previous:before{content:\"\\e066\"}.fd-micro-process-flow__link-next{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-micro-process-flow__link-next:after{content:\"\\e066\";-webkit-padding-start:.313rem;padding-inline-start:.313rem}.fd-micro-process-flow__link-next[dir=rtl]:after,[dir=rtl] .fd-micro-process-flow__link-next:after{content:\"\\e067\"}.fd-micro-process-flow .fd-micro-process-flow__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-padding-start:.1875rem;margin-block:calc(var(--sapContent_FocusWidth) + var(--sapContent_FocusWidth));margin-inline:0;padding-inline-start:.1875rem;position:relative;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.fd-micro-process-flow .fd-micro-process-flow__item:after,.fd-micro-process-flow .fd-micro-process-flow__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow .fd-micro-process-flow__item--positive{--fdMicro_Process_Flow_Item_Background:var(--sapPositiveElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapPositiveElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Success_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Success_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--information{--fdMicro_Process_Flow_Item_Background:var(--sapInformativeElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapInformativeElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Information_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Information_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--negative{--fdMicro_Process_Flow_Item_Background:var(--sapNegativeElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapNegativeElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Negative_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Negative_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--critical{--fdMicro_Process_Flow_Item_Background:var(--sapCriticalElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapCriticalElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Critical_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Critical_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container.is-hover,.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container:hover{--fdMicro_Process_Flow_Icon_Color:var(--sapButton_Information_Hover_TextColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapInformationBorderColor)}.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container.is-active,.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container:active{--fdMicro_Process_Flow_Icon_Color:var(--sapContent_ContrastIconColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapContent_Selected_ForegroundColor)}.fd-micro-process-flow .fd-micro-process-flow__item .fd-status-indicator .fdstatus-indicator__svg{width:auto}.fd-micro-process-flow__focusable-item.is-focus,.fd-micro-process-flow__focusable-item:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:.0625rem}.fd-micro-process-flow .fd-micro-process-flow__icon-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fdMicro_Process_Flow_Item_Background);border:.0625rem solid var(--fdMicro_Process_Flow_Item_Border_Color);border-radius:50%;min-height:var(--fdMicro_Process_Flow_Item_Min_Width);min-width:var(--fdMicro_Process_Flow_Item_Min_Width)}.fd-micro-process-flow .fd-micro-process-flow__icon-container:after,.fd-micro-process-flow .fd-micro-process-flow__icon-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow .fd-micro-process-flow__icon-container .fd-micro-process-flow__icon{color:var(--fdMicro_Process_Flow_Icon_Color);font-size:var(--fdMicro_Process_Flow_Icon_Font_Size)}.fd-micro-process-flow .fd-micro-process-flow__icon-container.is-hover,.fd-micro-process-flow .fd-micro-process-flow__icon-container:hover{--fdMicro_Process_Flow_Item_Background:var(--fdMicro_Process_Flow_Item_Hover_Background);--fdMicro_Process_Flow_Item_Border_Color:var(--fdMicro_Process_Flow_Item_Hover_Border_Color)}.fd-micro-process-flow .fd-micro-process-flow__icon-container.is-active,.fd-micro-process-flow .fd-micro-process-flow__icon-container:active{--fdMicro_Process_Flow_Item_Background:var(--fdMicro_Process_Flow_Item_Active_Background);--fdMicro_Process_Flow_Item_Border_Color:var(--fdMicro_Process_Flow_Item_Active_Border_Color);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow__content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:var(--fdMicro_Process_Flow_Item_Min_Width);min-width:var(--fdMicro_Process_Flow_Item_Min_Width);width:100%}.fd-micro-process-flow__content:after,.fd-micro-process-flow__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__connector{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:100%;min-width:var(--fdMicro_Process_Flow_Connector_Width);position:relative;-webkit-margin-start:.1875rem;margin-inline-start:.1875rem}.fd-micro-process-flow__connector:after,.fd-micro-process-flow__connector:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__connector:before{border-bottom:.0625rem solid var(--sapContent_ForegroundBorderColor);content:\"\";display:block;position:absolute;width:100%;z-index:1}.fd-micro-process-flow__connector--intermediate:after{background:var(--sapNegativeElementColor);bottom:0;content:\"\";display:block;left:50%;position:absolute;top:0;width:.25rem;-webkit-margin-start:-.125rem;margin-inline-start:-.125rem;z-index:2}.fd-micro-process-flow__connector--intermediate[dir=rtl]:after,[dir=rtl] .fd-micro-process-flow__connector--intermediate:after{-webkit-margin-end:-.125rem;margin-inline-end:-.125rem}.fd-micro-process-flow__connector .fd-micro-process-flow__intermediary-item{line-height:1;position:relative;z-index:3}.fd-micro-process-flow[class*=-compact],.fd-micro-process-flow[class*=-condensed],[class*=-compact] .fd-micro-process-flow:not([class*=-cozy]),[class*=-condensed] .fd-micro-process-flow:not([class*=-cozy]){--fdMicro_Process_Flow_Item_Min_Width:var(--fdMicro_Process_Flow_Compact_Item_Min_Width);--fdMicro_Process_Flow_Connector_Width:var(--fdMicro_Process_Flow_Compact_Connector_Width);--fdMicro_Process_Flow_Icon_Font_Size:var(--sapFontSmallSize);--fdMicro_Process_Flow_Item_Width:var(--fdMicro_Process_Flow_Compact_Item_Width);--fdMicro_Process_Flow_Max_Container_Width:var(--fdMicro_Process_Flow_Compact_Max_Container_Width)}\n/*! Bundled license information:\n\nfundamental-styles/dist/micro-process-flow.css:\n (*!\n * Fundamental Library Styles v0.41.5\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
385
|
+
], queries: [{ propertyName: "items", predicate: MicroProcessFlowItemComponent }, { propertyName: "focusableItems", predicate: MicroProcessFlowFocusableItemDirective, descendants: true }], viewQueries: [{ propertyName: "_wrapperContainer", first: true, predicate: ["wrapperContainer"], descendants: true }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true }, { propertyName: "_goNextButton", first: true, predicate: ["goNextButton"], descendants: true }], ngImport: i0, template: "@if (showPreviousButton) {\n <a\n tabindex=\"0\"\n class=\"fd-micro-process-flow__link-previous\"\n role=\"button\"\n type=\"button\"\n (click)=\"goBack()\"\n (keypress)=\"onKeypressHandler(-1, $event)\"\n >\n {{ previousItemsCount }}\n </a>\n}\n<div class=\"fd-micro-process-flow__overflow-container\" #container>\n <div\n class=\"fd-micro-process-flow__wrapper\"\n #wrapperContainer\n [style.transition-duration]=\"transitionSpeed + 'ms'\"\n [style.transition-timing-function]=\"transitionTimingFunction\"\n >\n <ng-content select=\"fd-micro-process-flow-item\"></ng-content>\n </div>\n</div>\n@if (showNextButton) {\n <a\n tabindex=\"0\"\n class=\"fd-micro-process-flow__link-next\"\n role=\"button\"\n type=\"button\"\n (click)=\"goNext()\"\n (keypress)=\"onKeypressHandler(1, $event)\"\n #goNextButton\n >\n {{ nextItemsCount }}\n </a>\n}\n", styles: [":root{--fdMicro_Process_Flow_Item_Background:var(--sapNeutralBackground);--fdMicro_Process_Flow_Item_Border_Color:var(--sapNeutralBorderColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--fdMicro_Process_Flow_Item_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--fdMicro_Process_Flow_Item_Border_Color);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Width:2.75rem;--fdMicro_Process_Flow_Item_Min_Width:1.875rem;--fdMicro_Process_Flow_Compact_Item_Width:2rem;--fdMicro_Process_Flow_Compact_Item_Min_Width:1.375rem;--fdMicro_Process_Flow_Connector_Width:1.125rem;--fdMicro_Process_Flow_Compact_Connector_Width:.625rem;--fdMicro_Process_Flow_Icon_Font_Size:var(--sapFontLargeSize);--fdMicro_Process_Flow_Visible_items:8;--fdMicro_Process_Flow_Max_Container_Width:calc(var(--fdMicro_Process_Flow_Item_Width)*(var(--fdMicro_Process_Flow_Visible_items) + 1) + .0625rem);--fdMicro_Process_Flow_Compact_Max_Container_Width:calc(var(--fdMicro_Process_Flow_Compact_Item_Width)*(var(--fdMicro_Process_Flow_Visible_items) + 1) + .0625rem)}.fd-micro-process-flow{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;max-width:var(--fdMicro_Process_Flow_Max_Container_Width)}.fd-micro-process-flow:after,.fd-micro-process-flow:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow--independent-steps .fd-micro-process-flow__connector:before{border-color:transparent}.fd-micro-process-flow__wrapper{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.fd-micro-process-flow__wrapper:after,.fd-micro-process-flow__wrapper:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__overflow-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;overflow:hidden;width:100%}.fd-micro-process-flow__overflow-container:after,.fd-micro-process-flow__overflow-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__link-next,.fd-micro-process-flow__link-previous{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-inline:0;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--sapGroup_TitleTextColor);cursor:pointer;font-size:var(--sapFontSize);padding-block:0;padding-inline:.313rem;text-shadow:var(--sapContent_TextShadow)}.fd-micro-process-flow__link-next:after,.fd-micro-process-flow__link-next:before,.fd-micro-process-flow__link-previous:after,.fd-micro-process-flow__link-previous:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__link-next.is-focus,.fd-micro-process-flow__link-next:focus,.fd-micro-process-flow__link-previous.is-focus,.fd-micro-process-flow__link-previous:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-micro-process-flow__link-next:after,.fd-micro-process-flow__link-next:before,.fd-micro-process-flow__link-previous:after,.fd-micro-process-flow__link-previous:before{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--sapButton_TextColor);font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-micro-process-flow__link-next.is-hover:after,.fd-micro-process-flow__link-next.is-hover:before,.fd-micro-process-flow__link-next:hover:after,.fd-micro-process-flow__link-next:hover:before,.fd-micro-process-flow__link-previous.is-hover:after,.fd-micro-process-flow__link-previous.is-hover:before,.fd-micro-process-flow__link-previous:hover:after,.fd-micro-process-flow__link-previous:hover:before{color:var(--sapButton_Hover_TextColor)}.fd-micro-process-flow__link-previous:before{content:\"\\e067\";-webkit-padding-end:.313rem;padding-inline-end:.313rem}.fd-micro-process-flow__link-previous[dir=rtl]:before,[dir=rtl] .fd-micro-process-flow__link-previous:before{content:\"\\e066\"}.fd-micro-process-flow__link-next{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-micro-process-flow__link-next:after{content:\"\\e066\";-webkit-padding-start:.313rem;padding-inline-start:.313rem}.fd-micro-process-flow__link-next[dir=rtl]:after,[dir=rtl] .fd-micro-process-flow__link-next:after{content:\"\\e067\"}.fd-micro-process-flow .fd-micro-process-flow__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-padding-start:.1875rem;margin-block:calc(var(--sapContent_FocusWidth) + var(--sapContent_FocusWidth));margin-inline:0;padding-inline-start:.1875rem;position:relative;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.fd-micro-process-flow .fd-micro-process-flow__item:after,.fd-micro-process-flow .fd-micro-process-flow__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow .fd-micro-process-flow__item--positive{--fdMicro_Process_Flow_Item_Background:var(--sapPositiveElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapPositiveElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Success_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Success_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--information{--fdMicro_Process_Flow_Item_Background:var(--sapInformativeElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapInformativeElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Information_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Information_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--negative{--fdMicro_Process_Flow_Item_Background:var(--sapNegativeElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapNegativeElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Negative_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Negative_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--critical{--fdMicro_Process_Flow_Item_Background:var(--sapCriticalElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapCriticalElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Critical_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Critical_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container.is-hover,.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container:hover{--fdMicro_Process_Flow_Icon_Color:var(--sapButton_Information_Hover_TextColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapInformationBorderColor)}.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container.is-active,.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container:active{--fdMicro_Process_Flow_Icon_Color:var(--sapContent_ContrastIconColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapContent_Selected_ForegroundColor)}.fd-micro-process-flow .fd-micro-process-flow__item .fd-status-indicator .fdstatus-indicator__svg{width:auto}.fd-micro-process-flow__focusable-item.is-focus,.fd-micro-process-flow__focusable-item:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:.0625rem}.fd-micro-process-flow .fd-micro-process-flow__icon-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fdMicro_Process_Flow_Item_Background);border:.0625rem solid var(--fdMicro_Process_Flow_Item_Border_Color);border-radius:50%;min-height:var(--fdMicro_Process_Flow_Item_Min_Width);min-width:var(--fdMicro_Process_Flow_Item_Min_Width)}.fd-micro-process-flow .fd-micro-process-flow__icon-container:after,.fd-micro-process-flow .fd-micro-process-flow__icon-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow .fd-micro-process-flow__icon-container .fd-micro-process-flow__icon{color:var(--fdMicro_Process_Flow_Icon_Color);font-size:var(--fdMicro_Process_Flow_Icon_Font_Size)}.fd-micro-process-flow .fd-micro-process-flow__icon-container.is-hover,.fd-micro-process-flow .fd-micro-process-flow__icon-container:hover{--fdMicro_Process_Flow_Item_Background:var(--fdMicro_Process_Flow_Item_Hover_Background);--fdMicro_Process_Flow_Item_Border_Color:var(--fdMicro_Process_Flow_Item_Hover_Border_Color)}.fd-micro-process-flow .fd-micro-process-flow__icon-container.is-active,.fd-micro-process-flow .fd-micro-process-flow__icon-container:active{--fdMicro_Process_Flow_Item_Background:var(--fdMicro_Process_Flow_Item_Active_Background);--fdMicro_Process_Flow_Item_Border_Color:var(--fdMicro_Process_Flow_Item_Active_Border_Color);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow__content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:var(--fdMicro_Process_Flow_Item_Min_Width);min-width:var(--fdMicro_Process_Flow_Item_Min_Width);width:100%}.fd-micro-process-flow__content:after,.fd-micro-process-flow__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__connector{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:100%;min-width:var(--fdMicro_Process_Flow_Connector_Width);position:relative;-webkit-margin-start:.1875rem;margin-inline-start:.1875rem}.fd-micro-process-flow__connector:after,.fd-micro-process-flow__connector:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__connector:before{border-bottom:.0625rem solid var(--sapContent_ForegroundBorderColor);content:\"\";display:block;position:absolute;width:100%;z-index:1}.fd-micro-process-flow__connector--intermediate:after{background:var(--sapNegativeElementColor);bottom:0;content:\"\";display:block;left:50%;position:absolute;top:0;width:.25rem;-webkit-margin-start:-.125rem;margin-inline-start:-.125rem;z-index:2}.fd-micro-process-flow__connector--intermediate[dir=rtl]:after,[dir=rtl] .fd-micro-process-flow__connector--intermediate:after{-webkit-margin-end:-.125rem;margin-inline-end:-.125rem}.fd-micro-process-flow__connector .fd-micro-process-flow__intermediary-item{line-height:1;position:relative;z-index:3}.fd-micro-process-flow[class*=-compact],.fd-micro-process-flow[class*=-condensed],[class*=-compact] .fd-micro-process-flow:not([class*=-cozy]),[class*=-condensed] .fd-micro-process-flow:not([class*=-cozy]){--fdMicro_Process_Flow_Item_Min_Width:var(--fdMicro_Process_Flow_Compact_Item_Min_Width);--fdMicro_Process_Flow_Connector_Width:var(--fdMicro_Process_Flow_Compact_Connector_Width);--fdMicro_Process_Flow_Icon_Font_Size:var(--sapFontSmallSize);--fdMicro_Process_Flow_Item_Width:var(--fdMicro_Process_Flow_Compact_Item_Width);--fdMicro_Process_Flow_Max_Container_Width:var(--fdMicro_Process_Flow_Compact_Max_Container_Width)}\n/*! Bundled license information:\n\nfundamental-styles/dist/micro-process-flow.css:\n (*!\n * Fundamental Library Styles v0.41.6\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
386
386
|
}
|
|
387
387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MicroProcessFlowComponent, decorators: [{
|
|
388
388
|
type: Component,
|
|
@@ -396,7 +396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
396
396
|
useExisting: MicroProcessFlowComponent
|
|
397
397
|
},
|
|
398
398
|
contentDensityObserverProviders()
|
|
399
|
-
], imports: [], template: "@if (showPreviousButton) {\n <a\n tabindex=\"0\"\n class=\"fd-micro-process-flow__link-previous\"\n role=\"button\"\n type=\"button\"\n (click)=\"goBack()\"\n (keypress)=\"onKeypressHandler(-1, $event)\"\n >\n {{ previousItemsCount }}\n </a>\n}\n<div class=\"fd-micro-process-flow__overflow-container\" #container>\n <div\n class=\"fd-micro-process-flow__wrapper\"\n #wrapperContainer\n [style.transition-duration]=\"transitionSpeed + 'ms'\"\n [style.transition-timing-function]=\"transitionTimingFunction\"\n >\n <ng-content select=\"fd-micro-process-flow-item\"></ng-content>\n </div>\n</div>\n@if (showNextButton) {\n <a\n tabindex=\"0\"\n class=\"fd-micro-process-flow__link-next\"\n role=\"button\"\n type=\"button\"\n (click)=\"goNext()\"\n (keypress)=\"onKeypressHandler(1, $event)\"\n #goNextButton\n >\n {{ nextItemsCount }}\n </a>\n}\n", styles: [":root{--fdMicro_Process_Flow_Item_Background:var(--sapNeutralBackground);--fdMicro_Process_Flow_Item_Border_Color:var(--sapNeutralBorderColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--fdMicro_Process_Flow_Item_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--fdMicro_Process_Flow_Item_Border_Color);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Width:2.75rem;--fdMicro_Process_Flow_Item_Min_Width:1.875rem;--fdMicro_Process_Flow_Compact_Item_Width:2rem;--fdMicro_Process_Flow_Compact_Item_Min_Width:1.375rem;--fdMicro_Process_Flow_Connector_Width:1.125rem;--fdMicro_Process_Flow_Compact_Connector_Width:.625rem;--fdMicro_Process_Flow_Icon_Font_Size:var(--sapFontLargeSize);--fdMicro_Process_Flow_Visible_items:8;--fdMicro_Process_Flow_Max_Container_Width:calc(var(--fdMicro_Process_Flow_Item_Width)*(var(--fdMicro_Process_Flow_Visible_items) + 1) + .0625rem);--fdMicro_Process_Flow_Compact_Max_Container_Width:calc(var(--fdMicro_Process_Flow_Compact_Item_Width)*(var(--fdMicro_Process_Flow_Visible_items) + 1) + .0625rem)}.fd-micro-process-flow{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;max-width:var(--fdMicro_Process_Flow_Max_Container_Width)}.fd-micro-process-flow:after,.fd-micro-process-flow:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow--independent-steps .fd-micro-process-flow__connector:before{border-color:transparent}.fd-micro-process-flow__wrapper{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.fd-micro-process-flow__wrapper:after,.fd-micro-process-flow__wrapper:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__overflow-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;overflow:hidden;width:100%}.fd-micro-process-flow__overflow-container:after,.fd-micro-process-flow__overflow-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__link-next,.fd-micro-process-flow__link-previous{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-inline:0;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--sapGroup_TitleTextColor);cursor:pointer;font-size:var(--sapFontSize);padding-block:0;padding-inline:.313rem;text-shadow:var(--sapContent_TextShadow)}.fd-micro-process-flow__link-next:after,.fd-micro-process-flow__link-next:before,.fd-micro-process-flow__link-previous:after,.fd-micro-process-flow__link-previous:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__link-next.is-focus,.fd-micro-process-flow__link-next:focus,.fd-micro-process-flow__link-previous.is-focus,.fd-micro-process-flow__link-previous:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-micro-process-flow__link-next:after,.fd-micro-process-flow__link-next:before,.fd-micro-process-flow__link-previous:after,.fd-micro-process-flow__link-previous:before{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--sapButton_TextColor);font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-micro-process-flow__link-next.is-hover:after,.fd-micro-process-flow__link-next.is-hover:before,.fd-micro-process-flow__link-next:hover:after,.fd-micro-process-flow__link-next:hover:before,.fd-micro-process-flow__link-previous.is-hover:after,.fd-micro-process-flow__link-previous.is-hover:before,.fd-micro-process-flow__link-previous:hover:after,.fd-micro-process-flow__link-previous:hover:before{color:var(--sapButton_Hover_TextColor)}.fd-micro-process-flow__link-previous:before{content:\"\\e067\";-webkit-padding-end:.313rem;padding-inline-end:.313rem}.fd-micro-process-flow__link-previous[dir=rtl]:before,[dir=rtl] .fd-micro-process-flow__link-previous:before{content:\"\\e066\"}.fd-micro-process-flow__link-next{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-micro-process-flow__link-next:after{content:\"\\e066\";-webkit-padding-start:.313rem;padding-inline-start:.313rem}.fd-micro-process-flow__link-next[dir=rtl]:after,[dir=rtl] .fd-micro-process-flow__link-next:after{content:\"\\e067\"}.fd-micro-process-flow .fd-micro-process-flow__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-padding-start:.1875rem;margin-block:calc(var(--sapContent_FocusWidth) + var(--sapContent_FocusWidth));margin-inline:0;padding-inline-start:.1875rem;position:relative;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.fd-micro-process-flow .fd-micro-process-flow__item:after,.fd-micro-process-flow .fd-micro-process-flow__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow .fd-micro-process-flow__item--positive{--fdMicro_Process_Flow_Item_Background:var(--sapPositiveElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapPositiveElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Success_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Success_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--information{--fdMicro_Process_Flow_Item_Background:var(--sapInformativeElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapInformativeElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Information_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Information_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--negative{--fdMicro_Process_Flow_Item_Background:var(--sapNegativeElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapNegativeElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Negative_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Negative_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--critical{--fdMicro_Process_Flow_Item_Background:var(--sapCriticalElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapCriticalElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Critical_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Critical_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container.is-hover,.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container:hover{--fdMicro_Process_Flow_Icon_Color:var(--sapButton_Information_Hover_TextColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapInformationBorderColor)}.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container.is-active,.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container:active{--fdMicro_Process_Flow_Icon_Color:var(--sapContent_ContrastIconColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapContent_Selected_ForegroundColor)}.fd-micro-process-flow .fd-micro-process-flow__item .fd-status-indicator .fdstatus-indicator__svg{width:auto}.fd-micro-process-flow__focusable-item.is-focus,.fd-micro-process-flow__focusable-item:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:.0625rem}.fd-micro-process-flow .fd-micro-process-flow__icon-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fdMicro_Process_Flow_Item_Background);border:.0625rem solid var(--fdMicro_Process_Flow_Item_Border_Color);border-radius:50%;min-height:var(--fdMicro_Process_Flow_Item_Min_Width);min-width:var(--fdMicro_Process_Flow_Item_Min_Width)}.fd-micro-process-flow .fd-micro-process-flow__icon-container:after,.fd-micro-process-flow .fd-micro-process-flow__icon-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow .fd-micro-process-flow__icon-container .fd-micro-process-flow__icon{color:var(--fdMicro_Process_Flow_Icon_Color);font-size:var(--fdMicro_Process_Flow_Icon_Font_Size)}.fd-micro-process-flow .fd-micro-process-flow__icon-container.is-hover,.fd-micro-process-flow .fd-micro-process-flow__icon-container:hover{--fdMicro_Process_Flow_Item_Background:var(--fdMicro_Process_Flow_Item_Hover_Background);--fdMicro_Process_Flow_Item_Border_Color:var(--fdMicro_Process_Flow_Item_Hover_Border_Color)}.fd-micro-process-flow .fd-micro-process-flow__icon-container.is-active,.fd-micro-process-flow .fd-micro-process-flow__icon-container:active{--fdMicro_Process_Flow_Item_Background:var(--fdMicro_Process_Flow_Item_Active_Background);--fdMicro_Process_Flow_Item_Border_Color:var(--fdMicro_Process_Flow_Item_Active_Border_Color);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow__content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:var(--fdMicro_Process_Flow_Item_Min_Width);min-width:var(--fdMicro_Process_Flow_Item_Min_Width);width:100%}.fd-micro-process-flow__content:after,.fd-micro-process-flow__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__connector{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:100%;min-width:var(--fdMicro_Process_Flow_Connector_Width);position:relative;-webkit-margin-start:.1875rem;margin-inline-start:.1875rem}.fd-micro-process-flow__connector:after,.fd-micro-process-flow__connector:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__connector:before{border-bottom:.0625rem solid var(--sapContent_ForegroundBorderColor);content:\"\";display:block;position:absolute;width:100%;z-index:1}.fd-micro-process-flow__connector--intermediate:after{background:var(--sapNegativeElementColor);bottom:0;content:\"\";display:block;left:50%;position:absolute;top:0;width:.25rem;-webkit-margin-start:-.125rem;margin-inline-start:-.125rem;z-index:2}.fd-micro-process-flow__connector--intermediate[dir=rtl]:after,[dir=rtl] .fd-micro-process-flow__connector--intermediate:after{-webkit-margin-end:-.125rem;margin-inline-end:-.125rem}.fd-micro-process-flow__connector .fd-micro-process-flow__intermediary-item{line-height:1;position:relative;z-index:3}.fd-micro-process-flow[class*=-compact],.fd-micro-process-flow[class*=-condensed],[class*=-compact] .fd-micro-process-flow:not([class*=-cozy]),[class*=-condensed] .fd-micro-process-flow:not([class*=-cozy]){--fdMicro_Process_Flow_Item_Min_Width:var(--fdMicro_Process_Flow_Compact_Item_Min_Width);--fdMicro_Process_Flow_Connector_Width:var(--fdMicro_Process_Flow_Compact_Connector_Width);--fdMicro_Process_Flow_Icon_Font_Size:var(--sapFontSmallSize);--fdMicro_Process_Flow_Item_Width:var(--fdMicro_Process_Flow_Compact_Item_Width);--fdMicro_Process_Flow_Max_Container_Width:var(--fdMicro_Process_Flow_Compact_Max_Container_Width)}\n/*! Bundled license information:\n\nfundamental-styles/dist/micro-process-flow.css:\n (*!\n * Fundamental Library Styles v0.41.5\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"] }]
|
|
399
|
+
], imports: [], template: "@if (showPreviousButton) {\n <a\n tabindex=\"0\"\n class=\"fd-micro-process-flow__link-previous\"\n role=\"button\"\n type=\"button\"\n (click)=\"goBack()\"\n (keypress)=\"onKeypressHandler(-1, $event)\"\n >\n {{ previousItemsCount }}\n </a>\n}\n<div class=\"fd-micro-process-flow__overflow-container\" #container>\n <div\n class=\"fd-micro-process-flow__wrapper\"\n #wrapperContainer\n [style.transition-duration]=\"transitionSpeed + 'ms'\"\n [style.transition-timing-function]=\"transitionTimingFunction\"\n >\n <ng-content select=\"fd-micro-process-flow-item\"></ng-content>\n </div>\n</div>\n@if (showNextButton) {\n <a\n tabindex=\"0\"\n class=\"fd-micro-process-flow__link-next\"\n role=\"button\"\n type=\"button\"\n (click)=\"goNext()\"\n (keypress)=\"onKeypressHandler(1, $event)\"\n #goNextButton\n >\n {{ nextItemsCount }}\n </a>\n}\n", styles: [":root{--fdMicro_Process_Flow_Item_Background:var(--sapNeutralBackground);--fdMicro_Process_Flow_Item_Border_Color:var(--sapNeutralBorderColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--fdMicro_Process_Flow_Item_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--fdMicro_Process_Flow_Item_Border_Color);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Width:2.75rem;--fdMicro_Process_Flow_Item_Min_Width:1.875rem;--fdMicro_Process_Flow_Compact_Item_Width:2rem;--fdMicro_Process_Flow_Compact_Item_Min_Width:1.375rem;--fdMicro_Process_Flow_Connector_Width:1.125rem;--fdMicro_Process_Flow_Compact_Connector_Width:.625rem;--fdMicro_Process_Flow_Icon_Font_Size:var(--sapFontLargeSize);--fdMicro_Process_Flow_Visible_items:8;--fdMicro_Process_Flow_Max_Container_Width:calc(var(--fdMicro_Process_Flow_Item_Width)*(var(--fdMicro_Process_Flow_Visible_items) + 1) + .0625rem);--fdMicro_Process_Flow_Compact_Max_Container_Width:calc(var(--fdMicro_Process_Flow_Compact_Item_Width)*(var(--fdMicro_Process_Flow_Visible_items) + 1) + .0625rem)}.fd-micro-process-flow{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;max-width:var(--fdMicro_Process_Flow_Max_Container_Width)}.fd-micro-process-flow:after,.fd-micro-process-flow:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow--independent-steps .fd-micro-process-flow__connector:before{border-color:transparent}.fd-micro-process-flow__wrapper{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.fd-micro-process-flow__wrapper:after,.fd-micro-process-flow__wrapper:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__overflow-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;overflow:hidden;width:100%}.fd-micro-process-flow__overflow-container:after,.fd-micro-process-flow__overflow-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__link-next,.fd-micro-process-flow__link-previous{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-inline:0;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--sapGroup_TitleTextColor);cursor:pointer;font-size:var(--sapFontSize);padding-block:0;padding-inline:.313rem;text-shadow:var(--sapContent_TextShadow)}.fd-micro-process-flow__link-next:after,.fd-micro-process-flow__link-next:before,.fd-micro-process-flow__link-previous:after,.fd-micro-process-flow__link-previous:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__link-next.is-focus,.fd-micro-process-flow__link-next:focus,.fd-micro-process-flow__link-previous.is-focus,.fd-micro-process-flow__link-previous:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-micro-process-flow__link-next:after,.fd-micro-process-flow__link-next:before,.fd-micro-process-flow__link-previous:after,.fd-micro-process-flow__link-previous:before{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--sapButton_TextColor);font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-micro-process-flow__link-next.is-hover:after,.fd-micro-process-flow__link-next.is-hover:before,.fd-micro-process-flow__link-next:hover:after,.fd-micro-process-flow__link-next:hover:before,.fd-micro-process-flow__link-previous.is-hover:after,.fd-micro-process-flow__link-previous.is-hover:before,.fd-micro-process-flow__link-previous:hover:after,.fd-micro-process-flow__link-previous:hover:before{color:var(--sapButton_Hover_TextColor)}.fd-micro-process-flow__link-previous:before{content:\"\\e067\";-webkit-padding-end:.313rem;padding-inline-end:.313rem}.fd-micro-process-flow__link-previous[dir=rtl]:before,[dir=rtl] .fd-micro-process-flow__link-previous:before{content:\"\\e066\"}.fd-micro-process-flow__link-next{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-micro-process-flow__link-next:after{content:\"\\e066\";-webkit-padding-start:.313rem;padding-inline-start:.313rem}.fd-micro-process-flow__link-next[dir=rtl]:after,[dir=rtl] .fd-micro-process-flow__link-next:after{content:\"\\e067\"}.fd-micro-process-flow .fd-micro-process-flow__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-padding-start:.1875rem;margin-block:calc(var(--sapContent_FocusWidth) + var(--sapContent_FocusWidth));margin-inline:0;padding-inline-start:.1875rem;position:relative;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.fd-micro-process-flow .fd-micro-process-flow__item:after,.fd-micro-process-flow .fd-micro-process-flow__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow .fd-micro-process-flow__item--positive{--fdMicro_Process_Flow_Item_Background:var(--sapPositiveElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapPositiveElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Success_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Success_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--information{--fdMicro_Process_Flow_Item_Background:var(--sapInformativeElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapInformativeElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Information_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Information_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--negative{--fdMicro_Process_Flow_Item_Background:var(--sapNegativeElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapNegativeElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Negative_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Negative_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--critical{--fdMicro_Process_Flow_Item_Background:var(--sapCriticalElementColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapCriticalElementColor);--fdMicro_Process_Flow_Item_Hover_Background:var(--sapButton_Critical_Hover_Background);--fdMicro_Process_Flow_Item_Hover_Border_Color:var(--sapButton_Critical_Hover_Background);--fdMicro_Process_Flow_Item_Active_Background:var(--sapHighlightColor);--fdMicro_Process_Flow_Item_Active_Border_Color:var(--sapHighlightColor);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container.is-hover,.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container:hover{--fdMicro_Process_Flow_Icon_Color:var(--sapButton_Information_Hover_TextColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapInformationBorderColor)}.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container.is-active,.fd-micro-process-flow .fd-micro-process-flow__item--information .fd-micro-process-flow__icon-container:active{--fdMicro_Process_Flow_Icon_Color:var(--sapContent_ContrastIconColor);--fdMicro_Process_Flow_Item_Border_Color:var(--sapContent_Selected_ForegroundColor)}.fd-micro-process-flow .fd-micro-process-flow__item .fd-status-indicator .fdstatus-indicator__svg{width:auto}.fd-micro-process-flow__focusable-item.is-focus,.fd-micro-process-flow__focusable-item:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:.0625rem}.fd-micro-process-flow .fd-micro-process-flow__icon-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fdMicro_Process_Flow_Item_Background);border:.0625rem solid var(--fdMicro_Process_Flow_Item_Border_Color);border-radius:50%;min-height:var(--fdMicro_Process_Flow_Item_Min_Width);min-width:var(--fdMicro_Process_Flow_Item_Min_Width)}.fd-micro-process-flow .fd-micro-process-flow__icon-container:after,.fd-micro-process-flow .fd-micro-process-flow__icon-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow .fd-micro-process-flow__icon-container .fd-micro-process-flow__icon{color:var(--fdMicro_Process_Flow_Icon_Color);font-size:var(--fdMicro_Process_Flow_Icon_Font_Size)}.fd-micro-process-flow .fd-micro-process-flow__icon-container.is-hover,.fd-micro-process-flow .fd-micro-process-flow__icon-container:hover{--fdMicro_Process_Flow_Item_Background:var(--fdMicro_Process_Flow_Item_Hover_Background);--fdMicro_Process_Flow_Item_Border_Color:var(--fdMicro_Process_Flow_Item_Hover_Border_Color)}.fd-micro-process-flow .fd-micro-process-flow__icon-container.is-active,.fd-micro-process-flow .fd-micro-process-flow__icon-container:active{--fdMicro_Process_Flow_Item_Background:var(--fdMicro_Process_Flow_Item_Active_Background);--fdMicro_Process_Flow_Item_Border_Color:var(--fdMicro_Process_Flow_Item_Active_Border_Color);--fdMicro_Process_Flow_Icon_Color:var(--fdMicro_Process_Flow_Active_Icon_Color)}.fd-micro-process-flow__content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:var(--fdMicro_Process_Flow_Item_Min_Width);min-width:var(--fdMicro_Process_Flow_Item_Min_Width);width:100%}.fd-micro-process-flow__content:after,.fd-micro-process-flow__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__connector{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:100%;min-width:var(--fdMicro_Process_Flow_Connector_Width);position:relative;-webkit-margin-start:.1875rem;margin-inline-start:.1875rem}.fd-micro-process-flow__connector:after,.fd-micro-process-flow__connector:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-micro-process-flow__connector:before{border-bottom:.0625rem solid var(--sapContent_ForegroundBorderColor);content:\"\";display:block;position:absolute;width:100%;z-index:1}.fd-micro-process-flow__connector--intermediate:after{background:var(--sapNegativeElementColor);bottom:0;content:\"\";display:block;left:50%;position:absolute;top:0;width:.25rem;-webkit-margin-start:-.125rem;margin-inline-start:-.125rem;z-index:2}.fd-micro-process-flow__connector--intermediate[dir=rtl]:after,[dir=rtl] .fd-micro-process-flow__connector--intermediate:after{-webkit-margin-end:-.125rem;margin-inline-end:-.125rem}.fd-micro-process-flow__connector .fd-micro-process-flow__intermediary-item{line-height:1;position:relative;z-index:3}.fd-micro-process-flow[class*=-compact],.fd-micro-process-flow[class*=-condensed],[class*=-compact] .fd-micro-process-flow:not([class*=-cozy]),[class*=-condensed] .fd-micro-process-flow:not([class*=-cozy]){--fdMicro_Process_Flow_Item_Min_Width:var(--fdMicro_Process_Flow_Compact_Item_Min_Width);--fdMicro_Process_Flow_Connector_Width:var(--fdMicro_Process_Flow_Compact_Connector_Width);--fdMicro_Process_Flow_Icon_Font_Size:var(--sapFontSmallSize);--fdMicro_Process_Flow_Item_Width:var(--fdMicro_Process_Flow_Compact_Item_Width);--fdMicro_Process_Flow_Max_Container_Width:var(--fdMicro_Process_Flow_Compact_Max_Container_Width)}\n/*! Bundled license information:\n\nfundamental-styles/dist/micro-process-flow.css:\n (*!\n * Fundamental Library Styles v0.41.6\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"] }]
|
|
400
400
|
}], ctorParameters: () => [], propDecorators: { independentSteps: [{
|
|
401
401
|
type: Input
|
|
402
402
|
}], transitionSpeed: [{
|
|
@@ -1768,7 +1768,7 @@ class MultiComboboxComponent extends BaseMultiCombobox {
|
|
|
1768
1768
|
provide: MULTI_COMBOBOX_COMPONENT,
|
|
1769
1769
|
useExisting: MultiComboboxComponent
|
|
1770
1770
|
}
|
|
1771
|
-
], queries: [{ propertyName: "customTemplates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, isSignal: true }, { propertyName: "listComponent", first: true, predicate: FD_LIST_COMPONENT, descendants: true, isSignal: true }, { propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true, isSignal: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true, isSignal: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true, isSignal: true }, { propertyName: "_inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i2.CvaDirective, inputs: ["id", "inputId", "placeholder", "placeholder", "state", "state", "stateMessage", "stateMessage", "disabled", "disabled", "readonly", "readonly", "name", "name"] }, { directive: i3.DataSourceDirective, inputs: ["dataSource", "dataSource"], outputs: ["dataChanged", "dataChanged"] }], ngImport: i0, template: "<div class=\"fd-multi-combobox\">\n @if (mobile()) {\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n } @else {\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n [isOpen]=\"isOpen\"\n [triggers]=\"[]\"\n [disabled]=\"_cva.disabled\"\n [maxWidth]=\"_popoverMaxWidth\"\n [fillControlMode]=\"fillControlMode()\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [style.width.%]=\"!autoResize() && 100\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n }\n</div>\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n #inputGroup\n [id]=\"_cva.id + '-input-group-container'\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"buttonFocusable()\"\n [button]=\"!_cva.readonly\"\n [glyph]=\"!_cva.readonly ? 'navigation-down-arrow' : ' '\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile() && isOpen && _suggestions().length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_cva.ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)()\"\n [iconTitle]=\"addonIconTitle() || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)()\"\n (addOnButtonClicked)=\"_addOnClicked($event)\"\n (click)=\"mobile() && !isOpen && _onPrimaryButtonClick(false)\"\n (keydown)=\"_navigateByTokens($event)\"\n >\n <fd-tokenizer\n [tokenizerFocusable]=\"false\"\n [compactCollapse]=\"true\"\n [showOverflowPopover]=\"false\"\n #tokenizer\n class=\"fd-multi-combobox-tokenizer-custom\"\n (moreClickedEvent)=\"_moreClicked()\"\n fdMultiAnnouncer\n [multiAnnouncerOptions]=\"_suggestions()\"\n >\n @for (token of _selectedSuggestions(); track token.id) {\n <fd-token [readOnly]=\"_cva.disabled\" (onCloseClick)=\"_removeToken(token, $event)\">\n {{ token.label }}\n </fd-token>\n }\n <input\n #searchInputElement\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions()\"\n [inputText]=\"_inputText()\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)()\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete() && !mobile() ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete() && !mobile() ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete() && !mobile()\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [ngModel]=\"_inputText()\"\n (ngModelChange)=\"_setInputText($event); _searchTermChanged()\"\n [attr.placeholder]=\"_selectedSuggestions().length ? null : _cva.placeholder\"\n (focus)=\"tokenizer._showAllTokens()\"\n (blur)=\"!mobile() && _onBlur($event); tokenizer._hideTokens()\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [attr.aria-required]=\"_cva.required\"\n [displayFn]=\"_displayFn\"\n class=\"fd-tokenizer__input fd-input-group__input\"\n />\n </fd-tokenizer>\n </fd-input-group>\n @if (mobile() && isOpen ? false : !!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n </fd-form-input-message-group>\n</ng-template>\n<ng-template #mobileControlTemplate>\n <fd-input-group\n [id]=\"_cva.id + '-input-group-container'\"\n class=\"fd-multi-combobox-input-group-custom\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"false\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile() && isOpen && _suggestions().length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_cva.ariaLabel\"\n >\n <input\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions()\"\n [inputText]=\"_inputText()\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)()\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete() && !mobile() ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete() && !mobile() ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete() && !mobile()\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [ngModel]=\"_inputText()\"\n (ngModelChange)=\"_setInputText($event); _searchTermChanged()\"\n [placeholder]=\"_cva.placeholder\"\n (focus)=\"_cva.onTouched()\"\n (blur)=\"!mobile() && _onBlur($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [displayFn]=\"_displayFn\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n [byline]=\"byline()\"\n [selection]=\"byline()\"\n (focusEscapeList)=\"_handleListFocusEscape($event)\"\n class=\"fd-multi-combobox__list fd-list--multi-input\"\n [id]=\"_cva.id + '-result'\"\n role=\"listbox\"\n [style.max-height]=\"!mobile() && maxHeight()\"\n [style.min-width.px]=\"!mobile() && minWidth\"\n [style.max-width.px]=\"autoResize() && maxWidth\"\n [attr.aria-labelledby]=\"_cva.id + '-search'\"\n aria-multiselectable=\"true\"\n [tabindex]=\"0\"\n (keydown.tab)=\"close()\"\n (keydown.shift.tab)=\"close()\"\n (keydown.escape)=\"close()\"\n >\n @if (!!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n @if (showSelectAll()) {\n <fd-multi-combobox-select-all-toggler\n [selectAllHandler]=\"_handleSelectAllItems\"\n [valueChanges]=\"selectionChange$\"\n [selectedItems]=\"_selectedSuggestions()\"\n [flatItems]=\"_flatSuggestions()\"\n ></fd-multi-combobox-select-all-toggler>\n }\n <ng-content></ng-content>\n @if (isGroup()) {\n @for (group of _suggestions(); track group.label; let groupIndex = $index) {\n @if (!groupItemTemplate) {\n <li\n fd-list-item\n fd-list-group-header\n ariaRole=\"group\"\n [attr.aria-roledescription]=\"('coreMultiComboBox.listGroupHeader' | fdTranslate)()\"\n [attr.aria-owns]=\"_getGroupItemIds(groupIndex)\"\n [attr.aria-label]=\"group.label\"\n >\n <span fd-list-title>{{ group.label }}</span>\n </li>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-template>\n }\n @for (optionItem of group.children; track optionItem.id; let i = $index) {\n <li\n fd-list-item\n #item=\"fdListItem\"\n role=\"option\"\n (click)=\"!mobile() && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n [attr.aria-setsize]=\"group.children?.length\"\n [attr.aria-posinset]=\"i + 1\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (optionItem of _suggestions(); track optionItem.id; let i = $index) {\n <li\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (click)=\"!mobile() && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (optionItem.selected && !!selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(optionItem.selected && selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!optionItemTemplate) {\n <span\n fd-list-title\n [attr.title]=\"optionItem.label\"\n [innerHTML]=\"optionItem.label | highlight: _inputText()\"\n fdTruncatedTitle\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText()) {\n @if (!secondaryItemTemplate) {\n <span\n [style.text-align]=\"secondaryTextAlignment()\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight: _inputText()\"\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fd-margin--tiny{margin-block:.5rem;margin-inline:.5rem}.fd-margin--sm{margin-block:1rem;margin-inline:1rem}.fd-margin--md{margin-block:2rem;margin-inline:2rem}.fd-margin--lg{margin-block:3rem;margin-inline:3rem}.fd-margin--none{margin-block:0;margin-inline:0}.fd-margin-top--tiny{-webkit-margin-before:.5rem;margin-block-start:.5rem}.fd-margin-top--sm{-webkit-margin-before:1rem;margin-block-start:1rem}.fd-margin-top--md{-webkit-margin-before:2rem;margin-block-start:2rem}.fd-margin-top--lg{-webkit-margin-before:3rem;margin-block-start:3rem}.fd-margin-top--none{-webkit-margin-before:0;margin-block-start:0}.fd-margin-end--tiny{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-margin-end--sm{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-margin-end--md{-webkit-margin-end:2rem;margin-inline-end:2rem}.fd-margin-end--lg{-webkit-margin-end:3rem;margin-inline-end:3rem}.fd-margin-end--none{-webkit-margin-end:0;margin-inline-end:0}.fd-margin-bottom--tiny{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-margin-bottom--sm{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-margin-bottom--md{-webkit-margin-after:2rem;margin-block-end:2rem}.fd-margin-bottom--lg{-webkit-margin-after:3rem;margin-block-end:3rem}.fd-margin-bottom--none{-webkit-margin-after:0;margin-block-end:0}.fd-margin-begin--tiny{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-margin-begin--sm{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-margin-begin--md{-webkit-margin-start:2rem;margin-inline-start:2rem}.fd-margin-begin--lg{-webkit-margin-start:3rem;margin-inline-start:3rem}.fd-margin-begin--none{-webkit-margin-start:0;margin-inline-start:0}.fd-margin-top-bottom--tiny{margin-block:.5rem}.fd-margin-top-bottom--sm{margin-block:1rem}.fd-margin-top-bottom--md{margin-block:2rem}.fd-margin-top-bottom--lg{margin-block:3rem}.fd-margin-begin-end--tiny{margin-inline:.5rem}.fd-margin-begin-end--sm{margin-inline:1rem}.fd-margin-begin-end--md{margin-inline:2rem}.fd-margin-begin-end--lg{margin-inline:3rem}.fd-margin-responsive--sm{margin-block:0 1rem;margin-inline:0}.fd-margin-responsive--md{margin-block:1rem;margin-inline:1rem}.fd-margin-responsive--lg{margin-block:1rem;margin-inline:2rem}.fd-margin-responsive--xl{margin-block:1rem;margin-inline:3rem}.fd-margin-negative-begin-end--tiny{margin-block:0;margin-inline:-.5rem}.fd-margin-negative-begin-end--sm{margin-block:0;margin-inline:-1rem}.fd-margin-negative-begin-end--md{margin-block:0;margin-inline:-2rem}.fd-margin-negative-begin-end--lg{margin-block:0;margin-inline:-3rem}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=--cozy]):not([class*=--condensed]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{max-width:100%;border-radius:0!important}.fd-multi-combobox__list fd-form-message{position:relative;z-index:10}\n/*! Bundled license information:\n\nfundamental-styles/dist/margins.css:\n (*!\n * Fundamental Library Styles v0.41.5\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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "component", type: InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "glyphFont", "moreTerm", "open", "showOverflowPopover"], outputs: ["moreClickedEvent"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused", "selectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdkAutoComplete]", inputs: ["options", "inputText", "enable", "displayFn", "matcher"], outputs: ["onComplete"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: SelectAllTogglerComponent, selector: "fd-multi-combobox-select-all-toggler", inputs: ["selectAllHandler", "valueChanges", "selectedItems", "flatItems"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }, { kind: "directive", type: TruncatedTitleDirective, selector: "[fdkTruncatedTitle], [fdTruncatedTitle], [fd-truncate-title]" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1771
|
+
], queries: [{ propertyName: "customTemplates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, isSignal: true }, { propertyName: "listComponent", first: true, predicate: FD_LIST_COMPONENT, descendants: true, isSignal: true }, { propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true, isSignal: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true, isSignal: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true, isSignal: true }, { propertyName: "_inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i2.CvaDirective, inputs: ["id", "inputId", "placeholder", "placeholder", "state", "state", "stateMessage", "stateMessage", "disabled", "disabled", "readonly", "readonly", "name", "name"] }, { directive: i3.DataSourceDirective, inputs: ["dataSource", "dataSource"], outputs: ["dataChanged", "dataChanged"] }], ngImport: i0, template: "<div class=\"fd-multi-combobox\">\n @if (mobile()) {\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n } @else {\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n [isOpen]=\"isOpen\"\n [triggers]=\"[]\"\n [disabled]=\"_cva.disabled\"\n [maxWidth]=\"_popoverMaxWidth\"\n [fillControlMode]=\"fillControlMode()\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [style.width.%]=\"!autoResize() && 100\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n }\n</div>\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n #inputGroup\n [id]=\"_cva.id + '-input-group-container'\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"buttonFocusable()\"\n [button]=\"!_cva.readonly\"\n [glyph]=\"!_cva.readonly ? 'navigation-down-arrow' : ' '\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile() && isOpen && _suggestions().length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_cva.ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)()\"\n [iconTitle]=\"addonIconTitle() || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)()\"\n (addOnButtonClicked)=\"_addOnClicked($event)\"\n (click)=\"mobile() && !isOpen && _onPrimaryButtonClick(false)\"\n (keydown)=\"_navigateByTokens($event)\"\n >\n <fd-tokenizer\n [tokenizerFocusable]=\"false\"\n [compactCollapse]=\"true\"\n [showOverflowPopover]=\"false\"\n #tokenizer\n class=\"fd-multi-combobox-tokenizer-custom\"\n (moreClickedEvent)=\"_moreClicked()\"\n fdMultiAnnouncer\n [multiAnnouncerOptions]=\"_suggestions()\"\n >\n @for (token of _selectedSuggestions(); track token.id) {\n <fd-token [readOnly]=\"_cva.disabled\" (onCloseClick)=\"_removeToken(token, $event)\">\n {{ token.label }}\n </fd-token>\n }\n <input\n #searchInputElement\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions()\"\n [inputText]=\"_inputText()\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)()\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete() && !mobile() ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete() && !mobile() ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete() && !mobile()\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [ngModel]=\"_inputText()\"\n (ngModelChange)=\"_setInputText($event); _searchTermChanged()\"\n [attr.placeholder]=\"_selectedSuggestions().length ? null : _cva.placeholder\"\n (focus)=\"tokenizer._showAllTokens()\"\n (blur)=\"!mobile() && _onBlur($event); tokenizer._hideTokens()\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [attr.aria-required]=\"_cva.required\"\n [displayFn]=\"_displayFn\"\n class=\"fd-tokenizer__input fd-input-group__input\"\n />\n </fd-tokenizer>\n </fd-input-group>\n @if (mobile() && isOpen ? false : !!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n </fd-form-input-message-group>\n</ng-template>\n<ng-template #mobileControlTemplate>\n <fd-input-group\n [id]=\"_cva.id + '-input-group-container'\"\n class=\"fd-multi-combobox-input-group-custom\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"false\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile() && isOpen && _suggestions().length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_cva.ariaLabel\"\n >\n <input\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions()\"\n [inputText]=\"_inputText()\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)()\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete() && !mobile() ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete() && !mobile() ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete() && !mobile()\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [ngModel]=\"_inputText()\"\n (ngModelChange)=\"_setInputText($event); _searchTermChanged()\"\n [placeholder]=\"_cva.placeholder\"\n (focus)=\"_cva.onTouched()\"\n (blur)=\"!mobile() && _onBlur($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [displayFn]=\"_displayFn\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n [byline]=\"byline()\"\n [selection]=\"byline()\"\n (focusEscapeList)=\"_handleListFocusEscape($event)\"\n class=\"fd-multi-combobox__list fd-list--multi-input\"\n [id]=\"_cva.id + '-result'\"\n role=\"listbox\"\n [style.max-height]=\"!mobile() && maxHeight()\"\n [style.min-width.px]=\"!mobile() && minWidth\"\n [style.max-width.px]=\"autoResize() && maxWidth\"\n [attr.aria-labelledby]=\"_cva.id + '-search'\"\n aria-multiselectable=\"true\"\n [tabindex]=\"0\"\n (keydown.tab)=\"close()\"\n (keydown.shift.tab)=\"close()\"\n (keydown.escape)=\"close()\"\n >\n @if (!!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n @if (showSelectAll()) {\n <fd-multi-combobox-select-all-toggler\n [selectAllHandler]=\"_handleSelectAllItems\"\n [valueChanges]=\"selectionChange$\"\n [selectedItems]=\"_selectedSuggestions()\"\n [flatItems]=\"_flatSuggestions()\"\n ></fd-multi-combobox-select-all-toggler>\n }\n <ng-content></ng-content>\n @if (isGroup()) {\n @for (group of _suggestions(); track group.label; let groupIndex = $index) {\n @if (!groupItemTemplate) {\n <li\n fd-list-item\n fd-list-group-header\n ariaRole=\"group\"\n [attr.aria-roledescription]=\"('coreMultiComboBox.listGroupHeader' | fdTranslate)()\"\n [attr.aria-owns]=\"_getGroupItemIds(groupIndex)\"\n [attr.aria-label]=\"group.label\"\n >\n <span fd-list-title>{{ group.label }}</span>\n </li>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-template>\n }\n @for (optionItem of group.children; track optionItem.id; let i = $index) {\n <li\n fd-list-item\n #item=\"fdListItem\"\n role=\"option\"\n (click)=\"!mobile() && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n [attr.aria-setsize]=\"group.children?.length\"\n [attr.aria-posinset]=\"i + 1\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (optionItem of _suggestions(); track optionItem.id; let i = $index) {\n <li\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (click)=\"!mobile() && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (optionItem.selected && !!selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(optionItem.selected && selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!optionItemTemplate) {\n <span\n fd-list-title\n [attr.title]=\"optionItem.label\"\n [innerHTML]=\"optionItem.label | highlight: _inputText()\"\n fdTruncatedTitle\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText()) {\n @if (!secondaryItemTemplate) {\n <span\n [style.text-align]=\"secondaryTextAlignment()\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight: _inputText()\"\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fd-margin--tiny{margin-block:.5rem;margin-inline:.5rem}.fd-margin--sm{margin-block:1rem;margin-inline:1rem}.fd-margin--md{margin-block:2rem;margin-inline:2rem}.fd-margin--lg{margin-block:3rem;margin-inline:3rem}.fd-margin--none{margin-block:0;margin-inline:0}.fd-margin-top--tiny{-webkit-margin-before:.5rem;margin-block-start:.5rem}.fd-margin-top--sm{-webkit-margin-before:1rem;margin-block-start:1rem}.fd-margin-top--md{-webkit-margin-before:2rem;margin-block-start:2rem}.fd-margin-top--lg{-webkit-margin-before:3rem;margin-block-start:3rem}.fd-margin-top--none{-webkit-margin-before:0;margin-block-start:0}.fd-margin-end--tiny{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-margin-end--sm{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-margin-end--md{-webkit-margin-end:2rem;margin-inline-end:2rem}.fd-margin-end--lg{-webkit-margin-end:3rem;margin-inline-end:3rem}.fd-margin-end--none{-webkit-margin-end:0;margin-inline-end:0}.fd-margin-bottom--tiny{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-margin-bottom--sm{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-margin-bottom--md{-webkit-margin-after:2rem;margin-block-end:2rem}.fd-margin-bottom--lg{-webkit-margin-after:3rem;margin-block-end:3rem}.fd-margin-bottom--none{-webkit-margin-after:0;margin-block-end:0}.fd-margin-begin--tiny{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-margin-begin--sm{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-margin-begin--md{-webkit-margin-start:2rem;margin-inline-start:2rem}.fd-margin-begin--lg{-webkit-margin-start:3rem;margin-inline-start:3rem}.fd-margin-begin--none{-webkit-margin-start:0;margin-inline-start:0}.fd-margin-top-bottom--tiny{margin-block:.5rem}.fd-margin-top-bottom--sm{margin-block:1rem}.fd-margin-top-bottom--md{margin-block:2rem}.fd-margin-top-bottom--lg{margin-block:3rem}.fd-margin-begin-end--tiny{margin-inline:.5rem}.fd-margin-begin-end--sm{margin-inline:1rem}.fd-margin-begin-end--md{margin-inline:2rem}.fd-margin-begin-end--lg{margin-inline:3rem}.fd-margin-responsive--sm{margin-block:0 1rem;margin-inline:0}.fd-margin-responsive--md{margin-block:1rem;margin-inline:1rem}.fd-margin-responsive--lg{margin-block:1rem;margin-inline:2rem}.fd-margin-responsive--xl{margin-block:1rem;margin-inline:3rem}.fd-margin-negative-begin-end--tiny{margin-block:0;margin-inline:-.5rem}.fd-margin-negative-begin-end--sm{margin-block:0;margin-inline:-1rem}.fd-margin-negative-begin-end--md{margin-block:0;margin-inline:-2rem}.fd-margin-negative-begin-end--lg{margin-block:0;margin-inline:-3rem}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=--cozy]):not([class*=--condensed]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{max-width:100%;border-radius:0!important}.fd-multi-combobox__list fd-form-message{position:relative;z-index:10}\n/*! Bundled license information:\n\nfundamental-styles/dist/margins.css:\n (*!\n * Fundamental Library Styles v0.41.6\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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "component", type: InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "glyphFont", "moreTerm", "open", "showOverflowPopover"], outputs: ["moreClickedEvent"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused", "selectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdkAutoComplete]", inputs: ["options", "inputText", "enable", "displayFn", "matcher"], outputs: ["onComplete"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: SelectAllTogglerComponent, selector: "fd-multi-combobox-select-all-toggler", inputs: ["selectAllHandler", "valueChanges", "selectedItems", "flatItems"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }, { kind: "directive", type: TruncatedTitleDirective, selector: "[fdkTruncatedTitle], [fdTruncatedTitle], [fd-truncate-title]" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1772
1772
|
}
|
|
1773
1773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiComboboxComponent, decorators: [{
|
|
1774
1774
|
type: Component,
|
|
@@ -1820,7 +1820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1820
1820
|
SearchHighlightPipe,
|
|
1821
1821
|
MultiAnnouncerDirective,
|
|
1822
1822
|
TruncatedTitleDirective
|
|
1823
|
-
], template: "<div class=\"fd-multi-combobox\">\n @if (mobile()) {\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n } @else {\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n [isOpen]=\"isOpen\"\n [triggers]=\"[]\"\n [disabled]=\"_cva.disabled\"\n [maxWidth]=\"_popoverMaxWidth\"\n [fillControlMode]=\"fillControlMode()\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [style.width.%]=\"!autoResize() && 100\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n }\n</div>\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n #inputGroup\n [id]=\"_cva.id + '-input-group-container'\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"buttonFocusable()\"\n [button]=\"!_cva.readonly\"\n [glyph]=\"!_cva.readonly ? 'navigation-down-arrow' : ' '\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile() && isOpen && _suggestions().length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_cva.ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)()\"\n [iconTitle]=\"addonIconTitle() || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)()\"\n (addOnButtonClicked)=\"_addOnClicked($event)\"\n (click)=\"mobile() && !isOpen && _onPrimaryButtonClick(false)\"\n (keydown)=\"_navigateByTokens($event)\"\n >\n <fd-tokenizer\n [tokenizerFocusable]=\"false\"\n [compactCollapse]=\"true\"\n [showOverflowPopover]=\"false\"\n #tokenizer\n class=\"fd-multi-combobox-tokenizer-custom\"\n (moreClickedEvent)=\"_moreClicked()\"\n fdMultiAnnouncer\n [multiAnnouncerOptions]=\"_suggestions()\"\n >\n @for (token of _selectedSuggestions(); track token.id) {\n <fd-token [readOnly]=\"_cva.disabled\" (onCloseClick)=\"_removeToken(token, $event)\">\n {{ token.label }}\n </fd-token>\n }\n <input\n #searchInputElement\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions()\"\n [inputText]=\"_inputText()\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)()\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete() && !mobile() ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete() && !mobile() ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete() && !mobile()\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [ngModel]=\"_inputText()\"\n (ngModelChange)=\"_setInputText($event); _searchTermChanged()\"\n [attr.placeholder]=\"_selectedSuggestions().length ? null : _cva.placeholder\"\n (focus)=\"tokenizer._showAllTokens()\"\n (blur)=\"!mobile() && _onBlur($event); tokenizer._hideTokens()\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [attr.aria-required]=\"_cva.required\"\n [displayFn]=\"_displayFn\"\n class=\"fd-tokenizer__input fd-input-group__input\"\n />\n </fd-tokenizer>\n </fd-input-group>\n @if (mobile() && isOpen ? false : !!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n </fd-form-input-message-group>\n</ng-template>\n<ng-template #mobileControlTemplate>\n <fd-input-group\n [id]=\"_cva.id + '-input-group-container'\"\n class=\"fd-multi-combobox-input-group-custom\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"false\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile() && isOpen && _suggestions().length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_cva.ariaLabel\"\n >\n <input\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions()\"\n [inputText]=\"_inputText()\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)()\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete() && !mobile() ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete() && !mobile() ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete() && !mobile()\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [ngModel]=\"_inputText()\"\n (ngModelChange)=\"_setInputText($event); _searchTermChanged()\"\n [placeholder]=\"_cva.placeholder\"\n (focus)=\"_cva.onTouched()\"\n (blur)=\"!mobile() && _onBlur($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [displayFn]=\"_displayFn\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n [byline]=\"byline()\"\n [selection]=\"byline()\"\n (focusEscapeList)=\"_handleListFocusEscape($event)\"\n class=\"fd-multi-combobox__list fd-list--multi-input\"\n [id]=\"_cva.id + '-result'\"\n role=\"listbox\"\n [style.max-height]=\"!mobile() && maxHeight()\"\n [style.min-width.px]=\"!mobile() && minWidth\"\n [style.max-width.px]=\"autoResize() && maxWidth\"\n [attr.aria-labelledby]=\"_cva.id + '-search'\"\n aria-multiselectable=\"true\"\n [tabindex]=\"0\"\n (keydown.tab)=\"close()\"\n (keydown.shift.tab)=\"close()\"\n (keydown.escape)=\"close()\"\n >\n @if (!!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n @if (showSelectAll()) {\n <fd-multi-combobox-select-all-toggler\n [selectAllHandler]=\"_handleSelectAllItems\"\n [valueChanges]=\"selectionChange$\"\n [selectedItems]=\"_selectedSuggestions()\"\n [flatItems]=\"_flatSuggestions()\"\n ></fd-multi-combobox-select-all-toggler>\n }\n <ng-content></ng-content>\n @if (isGroup()) {\n @for (group of _suggestions(); track group.label; let groupIndex = $index) {\n @if (!groupItemTemplate) {\n <li\n fd-list-item\n fd-list-group-header\n ariaRole=\"group\"\n [attr.aria-roledescription]=\"('coreMultiComboBox.listGroupHeader' | fdTranslate)()\"\n [attr.aria-owns]=\"_getGroupItemIds(groupIndex)\"\n [attr.aria-label]=\"group.label\"\n >\n <span fd-list-title>{{ group.label }}</span>\n </li>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-template>\n }\n @for (optionItem of group.children; track optionItem.id; let i = $index) {\n <li\n fd-list-item\n #item=\"fdListItem\"\n role=\"option\"\n (click)=\"!mobile() && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n [attr.aria-setsize]=\"group.children?.length\"\n [attr.aria-posinset]=\"i + 1\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (optionItem of _suggestions(); track optionItem.id; let i = $index) {\n <li\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (click)=\"!mobile() && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (optionItem.selected && !!selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(optionItem.selected && selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!optionItemTemplate) {\n <span\n fd-list-title\n [attr.title]=\"optionItem.label\"\n [innerHTML]=\"optionItem.label | highlight: _inputText()\"\n fdTruncatedTitle\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText()) {\n @if (!secondaryItemTemplate) {\n <span\n [style.text-align]=\"secondaryTextAlignment()\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight: _inputText()\"\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fd-margin--tiny{margin-block:.5rem;margin-inline:.5rem}.fd-margin--sm{margin-block:1rem;margin-inline:1rem}.fd-margin--md{margin-block:2rem;margin-inline:2rem}.fd-margin--lg{margin-block:3rem;margin-inline:3rem}.fd-margin--none{margin-block:0;margin-inline:0}.fd-margin-top--tiny{-webkit-margin-before:.5rem;margin-block-start:.5rem}.fd-margin-top--sm{-webkit-margin-before:1rem;margin-block-start:1rem}.fd-margin-top--md{-webkit-margin-before:2rem;margin-block-start:2rem}.fd-margin-top--lg{-webkit-margin-before:3rem;margin-block-start:3rem}.fd-margin-top--none{-webkit-margin-before:0;margin-block-start:0}.fd-margin-end--tiny{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-margin-end--sm{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-margin-end--md{-webkit-margin-end:2rem;margin-inline-end:2rem}.fd-margin-end--lg{-webkit-margin-end:3rem;margin-inline-end:3rem}.fd-margin-end--none{-webkit-margin-end:0;margin-inline-end:0}.fd-margin-bottom--tiny{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-margin-bottom--sm{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-margin-bottom--md{-webkit-margin-after:2rem;margin-block-end:2rem}.fd-margin-bottom--lg{-webkit-margin-after:3rem;margin-block-end:3rem}.fd-margin-bottom--none{-webkit-margin-after:0;margin-block-end:0}.fd-margin-begin--tiny{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-margin-begin--sm{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-margin-begin--md{-webkit-margin-start:2rem;margin-inline-start:2rem}.fd-margin-begin--lg{-webkit-margin-start:3rem;margin-inline-start:3rem}.fd-margin-begin--none{-webkit-margin-start:0;margin-inline-start:0}.fd-margin-top-bottom--tiny{margin-block:.5rem}.fd-margin-top-bottom--sm{margin-block:1rem}.fd-margin-top-bottom--md{margin-block:2rem}.fd-margin-top-bottom--lg{margin-block:3rem}.fd-margin-begin-end--tiny{margin-inline:.5rem}.fd-margin-begin-end--sm{margin-inline:1rem}.fd-margin-begin-end--md{margin-inline:2rem}.fd-margin-begin-end--lg{margin-inline:3rem}.fd-margin-responsive--sm{margin-block:0 1rem;margin-inline:0}.fd-margin-responsive--md{margin-block:1rem;margin-inline:1rem}.fd-margin-responsive--lg{margin-block:1rem;margin-inline:2rem}.fd-margin-responsive--xl{margin-block:1rem;margin-inline:3rem}.fd-margin-negative-begin-end--tiny{margin-block:0;margin-inline:-.5rem}.fd-margin-negative-begin-end--sm{margin-block:0;margin-inline:-1rem}.fd-margin-negative-begin-end--md{margin-block:0;margin-inline:-2rem}.fd-margin-negative-begin-end--lg{margin-block:0;margin-inline:-3rem}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=--cozy]):not([class*=--condensed]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{max-width:100%;border-radius:0!important}.fd-multi-combobox__list fd-form-message{position:relative;z-index:10}\n/*! Bundled license information:\n\nfundamental-styles/dist/margins.css:\n (*!\n * Fundamental Library Styles v0.41.5\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"] }]
|
|
1823
|
+
], template: "<div class=\"fd-multi-combobox\">\n @if (mobile()) {\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n } @else {\n <fd-popover\n additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n [isOpen]=\"isOpen\"\n [triggers]=\"[]\"\n [disabled]=\"_cva.disabled\"\n [maxWidth]=\"_popoverMaxWidth\"\n [fillControlMode]=\"fillControlMode()\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [style.width.%]=\"!autoResize() && 100\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n }\n</div>\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n #inputGroup\n [id]=\"_cva.id + '-input-group-container'\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"buttonFocusable()\"\n [button]=\"!_cva.readonly\"\n [glyph]=\"!_cva.readonly ? 'navigation-down-arrow' : ' '\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile() && isOpen && _suggestions().length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_cva.ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)()\"\n [iconTitle]=\"addonIconTitle() || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)()\"\n (addOnButtonClicked)=\"_addOnClicked($event)\"\n (click)=\"mobile() && !isOpen && _onPrimaryButtonClick(false)\"\n (keydown)=\"_navigateByTokens($event)\"\n >\n <fd-tokenizer\n [tokenizerFocusable]=\"false\"\n [compactCollapse]=\"true\"\n [showOverflowPopover]=\"false\"\n #tokenizer\n class=\"fd-multi-combobox-tokenizer-custom\"\n (moreClickedEvent)=\"_moreClicked()\"\n fdMultiAnnouncer\n [multiAnnouncerOptions]=\"_suggestions()\"\n >\n @for (token of _selectedSuggestions(); track token.id) {\n <fd-token [readOnly]=\"_cva.disabled\" (onCloseClick)=\"_removeToken(token, $event)\">\n {{ token.label }}\n </fd-token>\n }\n <input\n #searchInputElement\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions()\"\n [inputText]=\"_inputText()\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)()\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete() && !mobile() ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete() && !mobile() ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete() && !mobile()\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [ngModel]=\"_inputText()\"\n (ngModelChange)=\"_setInputText($event); _searchTermChanged()\"\n [attr.placeholder]=\"_selectedSuggestions().length ? null : _cva.placeholder\"\n (focus)=\"tokenizer._showAllTokens()\"\n (blur)=\"!mobile() && _onBlur($event); tokenizer._hideTokens()\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [attr.aria-required]=\"_cva.required\"\n [displayFn]=\"_displayFn\"\n class=\"fd-tokenizer__input fd-input-group__input\"\n />\n </fd-tokenizer>\n </fd-input-group>\n @if (mobile() && isOpen ? false : !!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n </fd-form-input-message-group>\n</ng-template>\n<ng-template #mobileControlTemplate>\n <fd-input-group\n [id]=\"_cva.id + '-input-group-container'\"\n class=\"fd-multi-combobox-input-group-custom\"\n [state]=\"_cva.state\"\n [buttonFocusable]=\"false\"\n [isControl]=\"true\"\n [disabled]=\"_cva.disabled || _cva.readonly\"\n [isExpanded]=\"!mobile() && isOpen && _suggestions().length > 0\"\n [attr.aria-disabled]=\"_cva.disabled || _cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [glyphAriaLabel]=\"_cva.ariaLabel\"\n >\n <input\n fdkAutoComplete\n (onComplete)=\"_onCompleteTerm($event)\"\n [options]=\"_suggestions()\"\n [inputText]=\"_inputText()\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [ariaLabel]=\"('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)()\"\n [attr.aria-labelledby]=\"_cva.ariaLabelledBy\"\n [attr.aria-autocomplete]=\"autoComplete() && !mobile() ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete() && !mobile() ? _cva.id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete() && !mobile()\"\n fd-form-control\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"_cva.id\"\n [name]=\"_cva.name\"\n (keydown)=\"_onInputKeydownHandler($event)\"\n [disabled]=\"_cva.disabled\"\n [ngModel]=\"_inputText()\"\n (ngModelChange)=\"_setInputText($event); _searchTermChanged()\"\n [placeholder]=\"_cva.placeholder\"\n (focus)=\"_cva.onTouched()\"\n (blur)=\"!mobile() && _onBlur($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [readonly]=\"_cva.readonly\"\n [attr.aria-readonly]=\"_cva.readonly\"\n [displayFn]=\"_displayFn\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n [byline]=\"byline()\"\n [selection]=\"byline()\"\n (focusEscapeList)=\"_handleListFocusEscape($event)\"\n class=\"fd-multi-combobox__list fd-list--multi-input\"\n [id]=\"_cva.id + '-result'\"\n role=\"listbox\"\n [style.max-height]=\"!mobile() && maxHeight()\"\n [style.min-width.px]=\"!mobile() && minWidth\"\n [style.max-width.px]=\"autoResize() && maxWidth\"\n [attr.aria-labelledby]=\"_cva.id + '-search'\"\n aria-multiselectable=\"true\"\n [tabindex]=\"0\"\n (keydown.tab)=\"close()\"\n (keydown.shift.tab)=\"close()\"\n (keydown.escape)=\"close()\"\n >\n @if (!!_cva.stateMessage) {\n <fd-form-message [type]=\"_cva.state\" [innerHtml]=\"_cva.stateMessage\"></fd-form-message>\n }\n @if (showSelectAll()) {\n <fd-multi-combobox-select-all-toggler\n [selectAllHandler]=\"_handleSelectAllItems\"\n [valueChanges]=\"selectionChange$\"\n [selectedItems]=\"_selectedSuggestions()\"\n [flatItems]=\"_flatSuggestions()\"\n ></fd-multi-combobox-select-all-toggler>\n }\n <ng-content></ng-content>\n @if (isGroup()) {\n @for (group of _suggestions(); track group.label; let groupIndex = $index) {\n @if (!groupItemTemplate) {\n <li\n fd-list-item\n fd-list-group-header\n ariaRole=\"group\"\n [attr.aria-roledescription]=\"('coreMultiComboBox.listGroupHeader' | fdTranslate)()\"\n [attr.aria-owns]=\"_getGroupItemIds(groupIndex)\"\n [attr.aria-label]=\"group.label\"\n >\n <span fd-list-title>{{ group.label }}</span>\n </li>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-template>\n }\n @for (optionItem of group.children; track optionItem.id; let i = $index) {\n <li\n fd-list-item\n #item=\"fdListItem\"\n role=\"option\"\n (click)=\"!mobile() && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n [attr.aria-setsize]=\"group.children?.length\"\n [attr.aria-posinset]=\"i + 1\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (optionItem of _suggestions(); track optionItem.id; let i = $index) {\n <li\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (click)=\"!mobile() && _onOptionClicked($event, i)\"\n (keydown)=\"_onItemKeyDownHandler($event)\"\n [selected]=\"!!optionItem.selected\"\n >\n <fd-checkbox\n role=\"presentation\"\n (click)=\"_onOptionCheckboxClicked($event, i)\"\n (ngModelChange)=\"_toggleSelection(optionItem)\"\n [ngModel]=\"optionItem.selected\"\n >\n </fd-checkbox>\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (optionItem.selected && !!selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(optionItem.selected && selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!optionItemTemplate) {\n <span\n fd-list-title\n [attr.title]=\"optionItem.label\"\n [innerHTML]=\"optionItem.label | highlight: _inputText()\"\n fdTruncatedTitle\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText()) {\n @if (!secondaryItemTemplate) {\n <span\n [style.text-align]=\"secondaryTextAlignment()\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight: _inputText()\"\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fd-margin--tiny{margin-block:.5rem;margin-inline:.5rem}.fd-margin--sm{margin-block:1rem;margin-inline:1rem}.fd-margin--md{margin-block:2rem;margin-inline:2rem}.fd-margin--lg{margin-block:3rem;margin-inline:3rem}.fd-margin--none{margin-block:0;margin-inline:0}.fd-margin-top--tiny{-webkit-margin-before:.5rem;margin-block-start:.5rem}.fd-margin-top--sm{-webkit-margin-before:1rem;margin-block-start:1rem}.fd-margin-top--md{-webkit-margin-before:2rem;margin-block-start:2rem}.fd-margin-top--lg{-webkit-margin-before:3rem;margin-block-start:3rem}.fd-margin-top--none{-webkit-margin-before:0;margin-block-start:0}.fd-margin-end--tiny{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-margin-end--sm{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-margin-end--md{-webkit-margin-end:2rem;margin-inline-end:2rem}.fd-margin-end--lg{-webkit-margin-end:3rem;margin-inline-end:3rem}.fd-margin-end--none{-webkit-margin-end:0;margin-inline-end:0}.fd-margin-bottom--tiny{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-margin-bottom--sm{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-margin-bottom--md{-webkit-margin-after:2rem;margin-block-end:2rem}.fd-margin-bottom--lg{-webkit-margin-after:3rem;margin-block-end:3rem}.fd-margin-bottom--none{-webkit-margin-after:0;margin-block-end:0}.fd-margin-begin--tiny{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-margin-begin--sm{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-margin-begin--md{-webkit-margin-start:2rem;margin-inline-start:2rem}.fd-margin-begin--lg{-webkit-margin-start:3rem;margin-inline-start:3rem}.fd-margin-begin--none{-webkit-margin-start:0;margin-inline-start:0}.fd-margin-top-bottom--tiny{margin-block:.5rem}.fd-margin-top-bottom--sm{margin-block:1rem}.fd-margin-top-bottom--md{margin-block:2rem}.fd-margin-top-bottom--lg{margin-block:3rem}.fd-margin-begin-end--tiny{margin-inline:.5rem}.fd-margin-begin-end--sm{margin-inline:1rem}.fd-margin-begin-end--md{margin-inline:2rem}.fd-margin-begin-end--lg{margin-inline:3rem}.fd-margin-responsive--sm{margin-block:0 1rem;margin-inline:0}.fd-margin-responsive--md{margin-block:1rem;margin-inline:1rem}.fd-margin-responsive--lg{margin-block:1rem;margin-inline:2rem}.fd-margin-responsive--xl{margin-block:1rem;margin-inline:3rem}.fd-margin-negative-begin-end--tiny{margin-block:0;margin-inline:-.5rem}.fd-margin-negative-begin-end--sm{margin-block:0;margin-inline:-1rem}.fd-margin-negative-begin-end--md{margin-block:0;margin-inline:-2rem}.fd-margin-negative-begin-end--lg{margin-block:0;margin-inline:-3rem}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=--cozy]):not([class*=--condensed]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{max-width:100%;border-radius:0!important}.fd-multi-combobox__list fd-form-message{position:relative;z-index:10}\n/*! Bundled license information:\n\nfundamental-styles/dist/margins.css:\n (*!\n * Fundamental Library Styles v0.41.6\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"] }]
|
|
1824
1824
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1.DynamicComponentService }, { type: i1.FocusTrapService }], propDecorators: { mobileConfig: [{
|
|
1825
1825
|
type: Input
|
|
1826
1826
|
}], selectedItems: [{
|