@fundamental-ngx/core 0.64.1-rc.9 → 0.64.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/fesm2022/fundamental-ngx-core-action-sheet.mjs +1 -1
  2. package/fesm2022/fundamental-ngx-core-action-sheet.mjs.map +1 -1
  3. package/fesm2022/fundamental-ngx-core-card.mjs +2 -2
  4. package/fesm2022/fundamental-ngx-core-card.mjs.map +1 -1
  5. package/fesm2022/fundamental-ngx-core-combobox.mjs +1 -1
  6. package/fesm2022/fundamental-ngx-core-combobox.mjs.map +1 -1
  7. package/fesm2022/fundamental-ngx-core-date-picker.mjs +1 -1
  8. package/fesm2022/fundamental-ngx-core-date-picker.mjs.map +1 -1
  9. package/fesm2022/fundamental-ngx-core-datetime-picker.mjs +1 -1
  10. package/fesm2022/fundamental-ngx-core-datetime-picker.mjs.map +1 -1
  11. package/fesm2022/fundamental-ngx-core-form.mjs +1 -1
  12. package/fesm2022/fundamental-ngx-core-form.mjs.map +1 -1
  13. package/fesm2022/fundamental-ngx-core-multi-combobox.mjs +1 -1
  14. package/fesm2022/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
  15. package/fesm2022/fundamental-ngx-core-multi-input.mjs +1 -1
  16. package/fesm2022/fundamental-ngx-core-multi-input.mjs.map +1 -1
  17. package/fesm2022/fundamental-ngx-core-nested-list.mjs +1 -1
  18. package/fesm2022/fundamental-ngx-core-nested-list.mjs.map +1 -1
  19. package/fesm2022/fundamental-ngx-core-popover.mjs +16 -4
  20. package/fesm2022/fundamental-ngx-core-popover.mjs.map +1 -1
  21. package/fesm2022/fundamental-ngx-core-product-switch.mjs +87 -10
  22. package/fesm2022/fundamental-ngx-core-product-switch.mjs.map +1 -1
  23. package/fesm2022/fundamental-ngx-core-progress-indicator.mjs +1 -1
  24. package/fesm2022/fundamental-ngx-core-progress-indicator.mjs.map +1 -1
  25. package/fesm2022/fundamental-ngx-core-select.mjs +1 -1
  26. package/fesm2022/fundamental-ngx-core-select.mjs.map +1 -1
  27. package/fesm2022/fundamental-ngx-core-time-picker.mjs +1 -1
  28. package/fesm2022/fundamental-ngx-core-time-picker.mjs.map +1 -1
  29. package/fesm2022/fundamental-ngx-core-token.mjs +1 -1
  30. package/fesm2022/fundamental-ngx-core-token.mjs.map +1 -1
  31. package/fesm2022/fundamental-ngx-core-toolbar.mjs +1 -1
  32. package/fesm2022/fundamental-ngx-core-toolbar.mjs.map +1 -1
  33. package/fesm2022/fundamental-ngx-core-user-menu.mjs +2 -2
  34. package/fesm2022/fundamental-ngx-core-user-menu.mjs.map +1 -1
  35. package/package.json +3 -3
  36. package/schematics/package.json +1 -1
  37. package/types/fundamental-ngx-core-popover.d.ts +9 -1
  38. package/types/fundamental-ngx-core-product-switch.d.ts +34 -3
package/fesm2022/fundamental-ngx-core-product-switch.mjs CHANGED
@@ -1,16 +1,16 @@
1
1
  import { TAB, ENTER, SPACE, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
2
2
  import * as i1 from '@angular/cdk/scrolling';
3
3
  import * as i0 from '@angular/core';
4
- import { EventEmitter, inject, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, InjectionToken, input, booleanAttribute, model, output, signal, contentChild, effect, NgModule } from '@angular/core';
4
+ import { EventEmitter, model, computed, inject, ElementRef, DestroyRef, effect, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, InjectionToken, input, booleanAttribute, output, signal, contentChild, NgModule } from '@angular/core';
5
5
  import { Subscription, Subject } from 'rxjs';
6
6
  import { RtlService, KeyUtil, DndItemDirective, DndListDirective } from '@fundamental-ngx/cdk/utils';
7
+ import { NgTemplateOutlet } from '@angular/common';
7
8
  import { AvatarComponent } from '@fundamental-ngx/core/avatar';
8
9
  import { FD_DEFAULT_ICON_FONT_FAMILY, IconComponent } from '@fundamental-ngx/core/icon';
9
- import { NgTemplateOutlet } from '@angular/common';
10
+ import { resolveTranslationSignalFn, FdTranslatePipe } from '@fundamental-ngx/i18n';
10
11
  import { ButtonComponent } from '@fundamental-ngx/core/button';
11
12
  import { ContentDensityMode, ContentDensityDirective } from '@fundamental-ngx/core/content-density';
12
13
  import { PopoverComponent, PopoverControlComponent, PopoverBodyComponent } from '@fundamental-ngx/core/popover';
13
- import { FdTranslatePipe } from '@fundamental-ngx/i18n';
14
14
 
15
15
  const containerWidthPxSmallMode = 588;
16
16
  const containerWidthPx = 776;
@@ -27,12 +27,58 @@ class ProductSwitchBodyComponent {
27
27
  this.productsChange = new EventEmitter();
28
28
  /** Event emitted on product click */
29
29
  this.itemClicked = new EventEmitter();
30
+ /** Whether the product switch body is open. When set to true, focuses the first item. */
31
+ this.isOpen = model(false, /* @ts-ignore */
32
+ ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
30
33
  /** @hidden */
31
34
  this.FD_DEFAULT_ICON_FONT_FAMILY = FD_DEFAULT_ICON_FONT_FAMILY;
35
+ /** @hidden Returns the accessible label for a product item. */
36
+ this._itemAriaLabel = computed(() => {
37
+ const targetLabels = this._targetLabels();
38
+ return (item) => {
39
+ const parts = [item.title];
40
+ if (item.subtitle) {
41
+ parts.push(item.subtitle);
42
+ }
43
+ if (item.target && item.target !== '_self') {
44
+ const label = targetLabels[item.target];
45
+ if (label) {
46
+ parts.push(label);
47
+ }
48
+ }
49
+ return parts.join(' ');
50
+ };
51
+ }, /* @ts-ignore */
52
+ ...(ngDevMode ? [{ debugName: "_itemAriaLabel" }] : /* istanbul ignore next */ []));
53
+ /** @hidden Resolves all target i18n strings once per change detection cycle. */
54
+ this._targetLabels = computed(() => ({
55
+ _blank: this._targetBlank(),
56
+ _parent: this._targetParent(),
57
+ _top: this._targetTop()
58
+ }), /* @ts-ignore */
59
+ ...(ngDevMode ? [{ debugName: "_targetLabels" }] : /* istanbul ignore next */ []));
60
+ /** @hidden */
61
+ this._translate = resolveTranslationSignalFn();
62
+ this._targetBlank = this._translate('coreProductSwitch.targetBlank');
63
+ this._targetParent = this._translate('coreProductSwitch.targetParent');
64
+ this._targetTop = this._translate('coreProductSwitch.targetTop');
32
65
  /** @hidden */
33
66
  this._subscriptions = new Subscription();
34
67
  /** @hidden */
35
68
  this._rtlService = inject(RtlService, { optional: true });
69
+ /** @hidden */
70
+ this._elementRef = inject(ElementRef);
71
+ /** @hidden */
72
+ this._destroyRef = inject(DestroyRef);
73
+ /** @hidden */
74
+ this._triggerElement = null;
75
+ /** @hidden */
76
+ this._lastFocusedIndex = -1;
77
+ effect(() => this._syncFocusWithOpenState());
78
+ const el = this._elementRef.nativeElement;
79
+ const onFocusIn = (event) => this._trackFocusedItem(event);
80
+ el.addEventListener('focusin', onFocusIn);
81
+ this._destroyRef.onDestroy(() => el.removeEventListener('focusin', onFocusIn));
36
82
  }
37
83
  /** @hidden */
38
84
  ngOnInit() {
@@ -67,7 +113,10 @@ class ProductSwitchBodyComponent {
67
113
  event.preventDefault();
68
114
  }
69
115
  if (KeyUtil.isKeyCode(event, [ENTER, SPACE])) {
70
- target.click();
116
+ // Click the inner <a> when one exists to triggers browser navigation (including target handling),
117
+ // while also bubbling up to the <li>'s (click) handler to update selected state and fire itemClicked.
118
+ const anchor = target.querySelector('a.fd-product-switch__link');
119
+ (anchor ?? target).click();
71
120
  }
72
121
  else if (!this._isListMode()) {
73
122
  const i = Array.from(target.parentElement?.children ?? []).indexOf(target);
@@ -85,6 +134,30 @@ class ProductSwitchBodyComponent {
85
134
  _isListMode() {
86
135
  return this._listMode || this.forceListMode;
87
136
  }
137
+ /** @hidden Focuses the appropriate item on open, or returns focus to the trigger on close. */
138
+ _syncFocusWithOpenState() {
139
+ if (this.isOpen()) {
140
+ this._triggerElement = document.activeElement;
141
+ this._focusItemAtIndex(this._lastFocusedIndex >= 0 ? this._lastFocusedIndex : 0);
142
+ }
143
+ else if (this._triggerElement) {
144
+ this._triggerElement.focus();
145
+ this._triggerElement = null;
146
+ }
147
+ }
148
+ /** @hidden Focuses the item at the given index within the list. */
149
+ _focusItemAtIndex(index) {
150
+ const items = this._elementRef.nativeElement.querySelectorAll('.fd-product-switch__item');
151
+ items[index]?.focus();
152
+ }
153
+ /** @hidden Records the index of the last focused product item so it can be restored on reopen. */
154
+ _trackFocusedItem(event) {
155
+ const items = Array.from(this._elementRef.nativeElement.querySelectorAll('.fd-product-switch__item'));
156
+ const index = items.indexOf(event.target);
157
+ if (index !== -1) {
158
+ this._lastFocusedIndex = index;
159
+ }
160
+ }
88
161
  /** @hidden */
89
162
  _checkSize(width) {
90
163
  if (this._isSmallMode()) {
@@ -166,11 +239,11 @@ class ProductSwitchBodyComponent {
166
239
  }
167
240
  }
168
241
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProductSwitchBodyComponent, deps: [{ token: i1.ViewportRuler }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
169
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ProductSwitchBodyComponent, isStandalone: true, selector: "fd-product-switch-body", inputs: { dragAndDropEnabled: "dragAndDropEnabled", products: "products", forceListMode: "forceListMode" }, outputs: { productsChange: "productsChange", itemClicked: "itemClicked" }, ngImport: i0, template: "<div\n class=\"fd-product-switch__body\"\n [class.fd-product-switch__body--col-3]=\"_isSmallMode() && !_isListMode()\"\n [class.fd-product-switch__body--mobile]=\"_isListMode()\"\n>\n <ul\n fd-dnd-list\n class=\"fd-product-switch__list\"\n [items]=\"products\"\n [gridMode]=\"!_isListMode()\"\n (itemDropped)=\"_productSwitchItemsChangeHandle($event)\"\n >\n @for (product of products; track product) {\n <li\n fd-dnd-item\n tabindex=\"0\"\n class=\"fd-product-switch__item\"\n [class.selected]=\"product.selected\"\n (keydown)=\"_keyDownHandle($event)\"\n (click)=\"_itemClick(product, $event)\"\n [draggable]=\"!product.disabledDragAndDrop && dragAndDropEnabled\"\n [stickInPlace]=\"!!product.stickToPosition\"\n >\n @if (product.avatar) {\n <fd-avatar\n size=\"s\"\n [glyph]=\"product.avatar.glyph ?? null\"\n [label]=\"product.avatar.label ?? null\"\n [circle]=\"!!product.avatar.circle\"\n [image]=\"product.avatar.image ?? null\"\n [contain]=\"!!product.avatar.contain\"\n [transparent]=\"!!product.avatar.transparent\"\n [placeholder]=\"!!product.avatar.placeholder\"\n [tile]=\"!!product.avatar.tile\"\n [colorAccent]=\"product.avatar.colorAccent\"\n [colorIndication]=\"product.avatar.colorIndication\"\n [border]=\"!!product.avatar.border\"\n [alterIcon]=\"product.avatar.alterIcon ?? null\"\n [backupImage]=\"product.avatar.backupImage ?? null\"\n [ariaLabel]=\"product.avatar.ariaLabel ?? null\"\n >\n </fd-avatar>\n } @else {\n <fd-icon\n [font]=\"product.font || FD_DEFAULT_ICON_FONT_FAMILY\"\n role=\"presentation\"\n class=\"fd-product-switch__icon\"\n [glyph]=\"product.icon\"\n ></fd-icon>\n }\n\n <div class=\"fd-product-switch__text\">\n <div class=\"fd-product-switch__title\">{{ product.title }}</div>\n @if (product.subtitle) {\n <div class=\"fd-product-switch__subtitle\">{{ product.subtitle }}</div>\n }\n </div>\n </li>\n }\n </ul>\n</div>\n", styles: [".drag-placeholder{opacity:.3;position:absolute}.fd-product-switch{--fdProduct_Switch_Item_Border_Color:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-product-switch:after,.fd-product-switch:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__list{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;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:.5rem;width:46.5rem}.fd-product-switch__list:after,.fd-product-switch__list:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__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;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:11.25rem;min-height:7.375rem;text-align:center;-webkit-box-flex:1;background-color:var(--sapList_Background);border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-shadow:var(--fdProductSwitch_Shadow);box-shadow:var(--fdProductSwitch_Shadow);-ms-flex:1 0 25%;flex:1 0 25%;outline:.125rem solid var(--fdProduct_Switch_Item_Border_Color);outline-offset:-.125rem;padding-block:1rem;padding-inline:.5rem}.fd-product-switch__item:after,.fd-product-switch__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__item .fd-product-switch__title:not(:last-child){white-space:normal}.fd-product-switch__item .fd-product-switch__title:after,.fd-product-switch__item .fd-product-switch__title:before{background-color:var(--sapList_Background)}.fd-product-switch__item.is-hover,.fd-product-switch__item:hover{background-color:var(--sapList_Hover_Background);cursor:pointer}.fd-product-switch__item.is-hover .fd-product-switch__title:after,.fd-product-switch__item.is-hover .fd-product-switch__title:before,.fd-product-switch__item:hover .fd-product-switch__title:after,.fd-product-switch__item:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_Background)}.fd-product-switch__item.is-active,.fd-product-switch__item:active{--fdProduct_Switch_Item_Border_Color:var(--sapContent_FocusColor);background-color:var(--sapList_Active_Background)}.fd-product-switch__item.is-active.is-focus,.fd-product-switch__item.is-active:focus,.fd-product-switch__item:active.is-focus,.fd-product-switch__item:active:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-offset:-.1875rem}.fd-product-switch__item.is-active .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item.is-active .fd-product-switch__icon[class*=sap-icon],.fd-product-switch__item.is-active .fd-product-switch__subtitle,.fd-product-switch__item.is-active .fd-product-switch__title,.fd-product-switch__item:active .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item:active .fd-product-switch__icon[class*=sap-icon],.fd-product-switch__item:active .fd-product-switch__subtitle,.fd-product-switch__item:active .fd-product-switch__title{color:var(--sapList_Active_TextColor)}.fd-product-switch__item.is-active .fd-product-switch__title:after,.fd-product-switch__item.is-active .fd-product-switch__title:before,.fd-product-switch__item.is-active.is-hover .fd-product-switch__title:after,.fd-product-switch__item.is-active.is-hover .fd-product-switch__title:before,.fd-product-switch__item.is-active:hover .fd-product-switch__title:after,.fd-product-switch__item.is-active:hover .fd-product-switch__title:before,.fd-product-switch__item:active .fd-product-switch__title:after,.fd-product-switch__item:active .fd-product-switch__title:before,.fd-product-switch__item:active.is-hover .fd-product-switch__title:after,.fd-product-switch__item:active.is-hover .fd-product-switch__title:before,.fd-product-switch__item:active:hover .fd-product-switch__title:after,.fd-product-switch__item:active:hover .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__item.selected{--fdProduct_Switch_Item_Border_Color:var(--sapContent_FocusColor)}.fd-product-switch__item.selected,.fd-product-switch__item.selected .fd-product-switch__title:after,.fd-product-switch__item.selected .fd-product-switch__title:before{background-color:var(--sapList_SelectionBackgroundColor)}.fd-product-switch__item.selected.is-hover,.fd-product-switch__item.selected.is-hover .fd-product-switch__title:after,.fd-product-switch__item.selected.is-hover .fd-product-switch__title:before,.fd-product-switch__item.selected:hover,.fd-product-switch__item.selected:hover .fd-product-switch__title:after,.fd-product-switch__item.selected:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_SelectionBackground)}.fd-product-switch__item.selected.is-active,.fd-product-switch__item.selected.is-active .fd-product-switch__title:after,.fd-product-switch__item.selected.is-active .fd-product-switch__title:before,.fd-product-switch__item.selected:active,.fd-product-switch__item.selected:active .fd-product-switch__title:after,.fd-product-switch__item.selected:active .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__item.is-focus,.fd-product-switch__item:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-product-switch__item.dragged{-webkit-box-shadow:var(--sapContent_Shadow2);box-shadow:var(--sapContent_Shadow2);cursor:-webkit-grabbing;cursor:grabbing}.fd-product-switch__item.dragged,.fd-product-switch__item.dragged:active,.fd-product-switch__item.dragged:hover{background-color:var(--sapList_Background)}.fd-product-switch__item.dragged:active .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item.dragged:active .fd-product-switch__icon[class*=sap-icon],.fd-product-switch__item.dragged:hover .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item.dragged:hover .fd-product-switch__icon[class*=sap-icon]{color:var(--sapContent_IconColor)}.fd-product-switch__item.dragged:active .fd-product-switch__title,.fd-product-switch__item.dragged:hover .fd-product-switch__title{color:var(--sapGroup_TitleTextColor)}.fd-product-switch__item.dragged:active .fd-product-switch__subtitle,.fd-product-switch__item.dragged:hover .fd-product-switch__subtitle{color:var(--sapContent_LabelColor)}.fd-product-switch__item.dragged.selected{border:none;-webkit-box-shadow:var(--sapContent_Shadow2);box-shadow:var(--sapContent_Shadow2)}.fd-product-switch__item.dragged.is-hover,.fd-product-switch__item.dragged:hover{outline:none}.fd-product-switch__icon [class*=sap-icon],.fd-product-switch__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;color:var(--sapContent_IconColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:inherit;font-size:1.5rem;line-height:1;min-height:3rem;min-width:3rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-product-switch__text{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:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem;text-shadow:var(--fdProductSwitch_Text_Shadow);width:100%}.fd-product-switch__text:after,.fd-product-switch__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapTitleColor);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;white-space:normal;z-index:1}.fd-product-switch__title:after,.fd-product-switch__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__title:before{left:9.4rem;width:1rem;z-index:2}.fd-product-switch__title:after{left:9.4rem;width:1rem;z-index:3}.fd-product-switch__subtitle{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;white-space:normal}.fd-product-switch__subtitle:after,.fd-product-switch__subtitle:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__body{background-color:var(--sapList_Background);border:0;border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;max-height:calc(100vh - 76px);overflow-y:auto;padding-block:0;padding-block:1.5rem;padding-inline:0;padding-inline:1rem;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-product-switch__body:after,.fd-product-switch__body:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__body.is-focus,.fd-product-switch__body:focus{outline:none;z-index:5}.fd-product-switch__body::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-product-switch__body::-webkit-scrollbar-corner,.fd-product-switch__body::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-product-switch__body::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-product-switch__body::-webkit-scrollbar-thumb:active,.fd-product-switch__body::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-product-switch__body--col-3 .fd-product-switch__list{width:34.75rem}.fd-product-switch__body--mobile{border-radius:0;max-height:100vh;max-width:353px;overflow-x:hidden;padding-block:1rem;padding-inline:1rem;width:100%}.fd-product-switch__body--mobile .fd-product-switch__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:0;width:100%}.fd-product-switch__body--mobile .fd-product-switch__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;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;border-radius:var(--sapElement_BorderCornerRadius);-ms-flex-direction:row;flex-direction:row;gap:.75rem;max-width:100%;min-height:5rem;padding-block:1rem;padding-inline:1rem;text-align:left;-webkit-box-flex:1;-ms-flex:auto;flex:auto}.fd-product-switch__body--mobile .fd-product-switch__item:after,.fd-product-switch__body--mobile .fd-product-switch__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:before{background-color:var(--sapTile_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.is-hover .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item:hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.is-active .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item:active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item:active .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-active.is-focus,.fd-product-switch__body--mobile .fd-product-switch__item.is-active:focus,.fd-product-switch__body--mobile .fd-product-switch__item:active.is-focus,.fd-product-switch__body--mobile .fd-product-switch__item:active:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-offset:-.1875rem}.fd-product-switch__body--mobile .fd-product-switch__item.selected .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected .fd-product-switch__title:before{background-color:var(--sapList_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-hover .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item.selected:hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_SelectionBackground)}.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-active .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item.selected:active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected:active .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-focus,.fd-product-switch__body--mobile .fd-product-switch__item:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:before{left:21.7rem;width:1rem;z-index:2}.fd-product-switch__body--mobile .fd-product-switch__text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;height:100%;justify-content:space-between}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text .fd-product-switch__title:not(:last-child),[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text .fd-product-switch__title:not(:last-child){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text .fd-product-switch__title:not(:last-child):after,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text .fd-product-switch__title:not(:last-child):after{display:none}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text .fd-product-switch__title:not(:last-child):before,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text .fd-product-switch__title:not(:last-child):before{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__title:before,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:before{right:21.8rem;width:2rem}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__subtitle,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__subtitle:before,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__subtitle:before{right:21.8rem;text-align:right;width:2rem;z-index:2}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__subtitle:after,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__subtitle:after{display:none;z-index:3}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item.is-active .fd-product-switch__subtitle,.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item:active .fd-product-switch__subtitle,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item.is-active .fd-product-switch__subtitle,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item:active .fd-product-switch__subtitle{color:var(--sapList_Active_TextColor)}.fd-product-switch__list{position:relative}.fd-product-switch__item.cdk-drag-dragging{outline:none;cursor:grabbing;box-shadow:0 0 0 .0625rem #00000026,0 .625rem 1.875rem #0000004d}.fd-product-switch__body--mobile .fd-product-switch__item.cdk-drag-dragging{outline:none;box-shadow:0 0 0 .0625rem #00000026,0 .625rem 1.875rem #0000004d}.fd-dnd-item{position:relative}.fd-dnd-item.fd-dnd-on-drag{background-color:#fff;background-color:var(--sapList_Background, #fff);z-index:15}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__title:before,.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__title:after{background-color:#fff;background-color:var(--sapList_Background, #fff)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__icon{color:#0854a0;color:var(--sapContent_IconColor, #0854a0)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__title{color:#32363a;color:var(--sapGroup_TitleTextColor, #32363a)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__subtitle{color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item:active,.fd-dnd-item.fd-dnd-on-drag.selected{background-color:#fff;background-color:var(--sapList_Background, #fff)}[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__title,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__subtitle{text-align:right}.fd-product-switch__item{--fdProduct_Switch_Item_Border_Color: transparent;gap:.5rem}.fd-product-switch__icon [class*=sap-icon],.fd-product-switch__icon[class*=sap-icon]{margin-block-end:0}.fd-product-switch__body.fd-product-switch__body--mobile .fd-product-switch__item{gap:.75rem}.fd-product-switch__body.fd-product-switch__body--mobile .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__body.fd-product-switch__body--mobile .fd-product-switch__icon[class*=sap-icon]{margin-inline:0}\n/*! Bundled license information:\n\nfundamental-styles/dist/product-switch.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n", ".cdk-drag-dragging{z-index:15;background-color:#fff;background-color:var(--sapList_Background, #fff);opacity:.8;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.fd-replace-indicator{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;border-width:.125rem;border-style:solid;background-color:transparent;border-color:#0854a0;border-color:var(--sapContent_DragAndDropActiveColor)}.fd-replace-indicator:before{content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#0854a0;background-color:var(--sapContent_DragAndDropActiveColor, #0854a0);opacity:.5}.cdk-drag{cursor:grab}.cdk-drag.cdk-drag-dragging{cursor:grabbing}.cdk-drag-dragging{outline:none;cursor:grabbing;box-shadow:0 0 0 .0625rem #00000026,0 .625rem 1.875rem #0000004d}.cdk-drag-disabled{cursor:default}.fd-dnd-placeholder{top:0;left:0;position:absolute;opacity:.3;z-index:-1}.fd-dnd-item{position:relative;cursor:grab}.fd-dnd-item.fd-dnd-on-drag{background-color:#fff;background-color:var(--sapList_Background, #fff);z-index:15;cursor:grabbing}.drop-area__line{z-index:9999;position:absolute;background:#0854a0;background:var(--sapContent_DragAndDropActiveColor, #0854a0)}.drop-area__line--vertical{top:0;height:calc(100% - .5rem);width:2px}.drop-area__line--vertical.after{right:.2rem}.drop-area__line--vertical.before{left:-.3rem}.drop-area__line--vertical:before{background-color:#fff;background-color:var(--sapList_Background, #fff);content:\"\";position:absolute;left:-.2rem;top:-.5rem;border-radius:50%;width:.5rem;height:.5rem;border-width:.125rem;border-style:solid;border-color:#0854a0;border-color:var(--sapContent_DragAndDropActiveColor, #0854a0)}.drop-area__line--horizontal{left:0;width:100%;height:2px}.drop-area__line--horizontal.before{top:0}.drop-area__line--horizontal.after{bottom:0}.drop-area__line--horizontal:before{background-color:#fff;background-color:var(--sapList_Background, #fff);content:\"\";position:absolute;left:0;top:-.2rem;border-radius:50%;width:.5rem;height:.5rem;border-width:.125rem;border-style:solid;border-color:#0854a0;border-color:var(--sapContent_DragAndDropActiveColor, #0854a0)}.fd-dnd-list{position:relative}\n"], dependencies: [{ kind: "directive", type: DndItemDirective, selector: "[fdkDndItem], [fd-dnd-item]", inputs: ["fdkDndItem", "applyDragItemClass", "containerSelector", "stickInPlace", "draggable", "classWhenElementDragged"], outputs: ["moved", "released", "started"] }, { kind: "directive", type: DndListDirective, selector: "[fdkDndList], [fd-dnd-list]", inputs: ["gridMode", "dropMode", "threshold", "items", "draggable", "dropPredicate", "dragoverPredicate"], outputs: ["dropPredicateCalculating", "itemsChange", "itemDropped", "dropCancelled"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
242
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ProductSwitchBodyComponent, isStandalone: true, selector: "fd-product-switch-body", inputs: { dragAndDropEnabled: { classPropertyName: "dragAndDropEnabled", publicName: "dragAndDropEnabled", isSignal: false, isRequired: false, transformFunction: null }, products: { classPropertyName: "products", publicName: "products", isSignal: false, isRequired: false, transformFunction: null }, forceListMode: { classPropertyName: "forceListMode", publicName: "forceListMode", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productsChange: "productsChange", itemClicked: "itemClicked", isOpen: "isOpenChange" }, ngImport: i0, template: "<div\n class=\"fd-product-switch__body\"\n [class.fd-product-switch__body--col-3]=\"_isSmallMode() && !_isListMode()\"\n [class.fd-product-switch__body--mobile]=\"_isListMode()\"\n>\n <ul\n fd-dnd-list\n role=\"menu\"\n class=\"fd-product-switch__list\"\n [items]=\"products\"\n [gridMode]=\"!_isListMode()\"\n (itemDropped)=\"_productSwitchItemsChangeHandle($event)\"\n >\n @for (product of products; track product; let i = $index) {\n <li\n fd-dnd-item\n tabindex=\"0\"\n role=\"menuitem\"\n class=\"fd-product-switch__item\"\n [class.selected]=\"product.selected\"\n [attr.aria-label]=\"_itemAriaLabel()(product)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"products.length\"\n (keydown)=\"_keyDownHandle($event)\"\n (click)=\"_itemClick(product, $event)\"\n [draggable]=\"!product.disabledDragAndDrop && dragAndDropEnabled\"\n [stickInPlace]=\"!!product.stickToPosition\"\n >\n @if (product.url) {\n <a\n class=\"fd-product-switch__link\"\n [href]=\"product.url\"\n [target]=\"product.target || '_self'\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <ng-container *ngTemplateOutlet=\"itemContent; context: { $implicit: product }\"></ng-container>\n </a>\n } @else {\n <ng-container *ngTemplateOutlet=\"itemContent; context: { $implicit: product }\"></ng-container>\n }\n </li>\n }\n </ul>\n</div>\n\n<ng-template #itemContent let-product>\n @if (product.avatar) {\n <fd-avatar\n size=\"s\"\n [glyph]=\"product.avatar.glyph ?? null\"\n [label]=\"product.avatar.label ?? null\"\n [circle]=\"!!product.avatar.circle\"\n [image]=\"product.avatar.image ?? null\"\n [contain]=\"!!product.avatar.contain\"\n [transparent]=\"!!product.avatar.transparent\"\n [placeholder]=\"!!product.avatar.placeholder\"\n [tile]=\"!!product.avatar.tile\"\n [colorAccent]=\"product.avatar.colorAccent\"\n [colorIndication]=\"product.avatar.colorIndication\"\n [border]=\"!!product.avatar.border\"\n [alterIcon]=\"product.avatar.alterIcon ?? null\"\n [backupImage]=\"product.avatar.backupImage ?? null\"\n [ariaLabel]=\"product.avatar.ariaLabel ?? null\"\n >\n </fd-avatar>\n } @else {\n <fd-icon\n [font]=\"product.font || FD_DEFAULT_ICON_FONT_FAMILY\"\n role=\"presentation\"\n class=\"fd-product-switch__icon\"\n [glyph]=\"product.icon\"\n ></fd-icon>\n }\n\n <div class=\"fd-product-switch__text\">\n <div class=\"fd-product-switch__title\">{{ product.title }}</div>\n @if (product.subtitle) {\n <div class=\"fd-product-switch__subtitle\">{{ product.subtitle }}</div>\n }\n </div>\n</ng-template>\n", styles: [".drag-placeholder{opacity:.3;position:absolute}.fd-product-switch{--fdProduct_Switch_Item_Border_Color:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-product-switch:after,.fd-product-switch:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__list{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;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:.5rem;width:46.5rem}.fd-product-switch__list:after,.fd-product-switch__list:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__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;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:11.25rem;min-height:7.375rem;text-align:center;-webkit-box-flex:1;background-color:var(--sapList_Background);border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-shadow:var(--fdProductSwitch_Shadow);box-shadow:var(--fdProductSwitch_Shadow);-ms-flex:1 0 25%;flex:1 0 25%;outline:.125rem solid var(--fdProduct_Switch_Item_Border_Color);outline-offset:-.125rem;padding-block:1rem;padding-inline:.5rem}.fd-product-switch__item:after,.fd-product-switch__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__item .fd-product-switch__title:not(:last-child){white-space:normal}.fd-product-switch__item .fd-product-switch__title:after,.fd-product-switch__item .fd-product-switch__title:before{background-color:var(--sapList_Background)}.fd-product-switch__item.is-hover,.fd-product-switch__item:hover{background-color:var(--sapList_Hover_Background);cursor:pointer}.fd-product-switch__item.is-hover .fd-product-switch__title:after,.fd-product-switch__item.is-hover .fd-product-switch__title:before,.fd-product-switch__item:hover .fd-product-switch__title:after,.fd-product-switch__item:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_Background)}.fd-product-switch__item.is-active,.fd-product-switch__item:active{--fdProduct_Switch_Item_Border_Color:var(--sapContent_FocusColor);background-color:var(--sapList_Active_Background)}.fd-product-switch__item.is-active.is-focus,.fd-product-switch__item.is-active:focus,.fd-product-switch__item:active.is-focus,.fd-product-switch__item:active:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-offset:-.1875rem}.fd-product-switch__item.is-active .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item.is-active .fd-product-switch__icon[class*=sap-icon],.fd-product-switch__item.is-active .fd-product-switch__subtitle,.fd-product-switch__item.is-active .fd-product-switch__title,.fd-product-switch__item:active .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item:active .fd-product-switch__icon[class*=sap-icon],.fd-product-switch__item:active .fd-product-switch__subtitle,.fd-product-switch__item:active .fd-product-switch__title{color:var(--sapList_Active_TextColor)}.fd-product-switch__item.is-active .fd-product-switch__title:after,.fd-product-switch__item.is-active .fd-product-switch__title:before,.fd-product-switch__item.is-active.is-hover .fd-product-switch__title:after,.fd-product-switch__item.is-active.is-hover .fd-product-switch__title:before,.fd-product-switch__item.is-active:hover .fd-product-switch__title:after,.fd-product-switch__item.is-active:hover .fd-product-switch__title:before,.fd-product-switch__item:active .fd-product-switch__title:after,.fd-product-switch__item:active .fd-product-switch__title:before,.fd-product-switch__item:active.is-hover .fd-product-switch__title:after,.fd-product-switch__item:active.is-hover .fd-product-switch__title:before,.fd-product-switch__item:active:hover .fd-product-switch__title:after,.fd-product-switch__item:active:hover .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__item.selected{--fdProduct_Switch_Item_Border_Color:var(--sapContent_FocusColor)}.fd-product-switch__item.selected,.fd-product-switch__item.selected .fd-product-switch__title:after,.fd-product-switch__item.selected .fd-product-switch__title:before{background-color:var(--sapList_SelectionBackgroundColor)}.fd-product-switch__item.selected.is-hover,.fd-product-switch__item.selected.is-hover .fd-product-switch__title:after,.fd-product-switch__item.selected.is-hover .fd-product-switch__title:before,.fd-product-switch__item.selected:hover,.fd-product-switch__item.selected:hover .fd-product-switch__title:after,.fd-product-switch__item.selected:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_SelectionBackground)}.fd-product-switch__item.selected.is-active,.fd-product-switch__item.selected.is-active .fd-product-switch__title:after,.fd-product-switch__item.selected.is-active .fd-product-switch__title:before,.fd-product-switch__item.selected:active,.fd-product-switch__item.selected:active .fd-product-switch__title:after,.fd-product-switch__item.selected:active .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__item.is-focus,.fd-product-switch__item:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-product-switch__item.dragged{-webkit-box-shadow:var(--sapContent_Shadow2);box-shadow:var(--sapContent_Shadow2);cursor:-webkit-grabbing;cursor:grabbing}.fd-product-switch__item.dragged,.fd-product-switch__item.dragged:active,.fd-product-switch__item.dragged:hover{background-color:var(--sapList_Background)}.fd-product-switch__item.dragged:active .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item.dragged:active .fd-product-switch__icon[class*=sap-icon],.fd-product-switch__item.dragged:hover .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item.dragged:hover .fd-product-switch__icon[class*=sap-icon]{color:var(--sapContent_IconColor)}.fd-product-switch__item.dragged:active .fd-product-switch__title,.fd-product-switch__item.dragged:hover .fd-product-switch__title{color:var(--sapGroup_TitleTextColor)}.fd-product-switch__item.dragged:active .fd-product-switch__subtitle,.fd-product-switch__item.dragged:hover .fd-product-switch__subtitle{color:var(--sapContent_LabelColor)}.fd-product-switch__item.dragged.selected{border:none;-webkit-box-shadow:var(--sapContent_Shadow2);box-shadow:var(--sapContent_Shadow2)}.fd-product-switch__item.dragged.is-hover,.fd-product-switch__item.dragged:hover{outline:none}.fd-product-switch__icon [class*=sap-icon],.fd-product-switch__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;color:var(--sapContent_IconColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:inherit;font-size:1.5rem;line-height:1;min-height:3rem;min-width:3rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-product-switch__text{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:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem;text-shadow:var(--fdProductSwitch_Text_Shadow);width:100%}.fd-product-switch__text:after,.fd-product-switch__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapTitleColor);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;white-space:normal;z-index:1}.fd-product-switch__title:after,.fd-product-switch__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__title:before{left:9.4rem;width:1rem;z-index:2}.fd-product-switch__title:after{left:9.4rem;width:1rem;z-index:3}.fd-product-switch__subtitle{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;white-space:normal}.fd-product-switch__subtitle:after,.fd-product-switch__subtitle:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__body{background-color:var(--sapList_Background);border:0;border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;max-height:calc(100vh - 76px);overflow-y:auto;padding-block:0;padding-block:1.5rem;padding-inline:0;padding-inline:1rem;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-product-switch__body:after,.fd-product-switch__body:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__body.is-focus,.fd-product-switch__body:focus{outline:none;z-index:5}.fd-product-switch__body::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-product-switch__body::-webkit-scrollbar-corner,.fd-product-switch__body::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-product-switch__body::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-product-switch__body::-webkit-scrollbar-thumb:active,.fd-product-switch__body::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-product-switch__body--col-3 .fd-product-switch__list{width:34.75rem}.fd-product-switch__body--mobile{border-radius:0;max-height:100vh;max-width:353px;overflow-x:hidden;padding-block:1rem;padding-inline:1rem;width:100%}.fd-product-switch__body--mobile .fd-product-switch__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:0;width:100%}.fd-product-switch__body--mobile .fd-product-switch__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;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;border-radius:var(--sapElement_BorderCornerRadius);-ms-flex-direction:row;flex-direction:row;gap:.75rem;max-width:100%;min-height:5rem;padding-block:1rem;padding-inline:1rem;text-align:left;-webkit-box-flex:1;-ms-flex:auto;flex:auto}.fd-product-switch__body--mobile .fd-product-switch__item:after,.fd-product-switch__body--mobile .fd-product-switch__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:before{background-color:var(--sapTile_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.is-hover .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item:hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.is-active .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item:active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item:active .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-active.is-focus,.fd-product-switch__body--mobile .fd-product-switch__item.is-active:focus,.fd-product-switch__body--mobile .fd-product-switch__item:active.is-focus,.fd-product-switch__body--mobile .fd-product-switch__item:active:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-offset:-.1875rem}.fd-product-switch__body--mobile .fd-product-switch__item.selected .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected .fd-product-switch__title:before{background-color:var(--sapList_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-hover .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item.selected:hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_SelectionBackground)}.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-active .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item.selected:active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected:active .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-focus,.fd-product-switch__body--mobile .fd-product-switch__item:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:before{left:21.7rem;width:1rem;z-index:2}.fd-product-switch__body--mobile .fd-product-switch__text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;height:100%;justify-content:space-between}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text .fd-product-switch__title:not(:last-child),[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text .fd-product-switch__title:not(:last-child){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text .fd-product-switch__title:not(:last-child):after,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text .fd-product-switch__title:not(:last-child):after{display:none}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text .fd-product-switch__title:not(:last-child):before,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text .fd-product-switch__title:not(:last-child):before{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__title:before,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:before{right:21.8rem;width:2rem}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__subtitle,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__subtitle:before,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__subtitle:before{right:21.8rem;text-align:right;width:2rem;z-index:2}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__subtitle:after,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__subtitle:after{display:none;z-index:3}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item.is-active .fd-product-switch__subtitle,.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item:active .fd-product-switch__subtitle,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item.is-active .fd-product-switch__subtitle,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item:active .fd-product-switch__subtitle{color:var(--sapList_Active_TextColor)}.fd-product-switch__list{position:relative}.fd-product-switch__link{display:contents;color:inherit;text-decoration:none}.fd-product-switch__item.cdk-drag-dragging{outline:none;cursor:grabbing;box-shadow:0 0 0 .0625rem #00000026,0 .625rem 1.875rem #0000004d}.fd-product-switch__body--mobile .fd-product-switch__item.cdk-drag-dragging{outline:none;box-shadow:0 0 0 .0625rem #00000026,0 .625rem 1.875rem #0000004d}.fd-dnd-item{position:relative}.fd-dnd-item.fd-dnd-on-drag{background-color:#fff;background-color:var(--sapList_Background, #fff);z-index:15}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__title:before,.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__title:after{background-color:#fff;background-color:var(--sapList_Background, #fff)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__icon{color:#0854a0;color:var(--sapContent_IconColor, #0854a0)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__title{color:#32363a;color:var(--sapGroup_TitleTextColor, #32363a)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__subtitle{color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item:active,.fd-dnd-item.fd-dnd-on-drag.selected{background-color:#fff;background-color:var(--sapList_Background, #fff)}[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__title,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__subtitle{text-align:right}\n/*! Bundled license information:\n\nfundamental-styles/dist/product-switch.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n", ".cdk-drag-dragging{z-index:15;background-color:#fff;background-color:var(--sapList_Background, #fff);opacity:.8;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.fd-replace-indicator{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;border-width:.125rem;border-style:solid;background-color:transparent;border-color:#0854a0;border-color:var(--sapContent_DragAndDropActiveColor)}.fd-replace-indicator:before{content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#0854a0;background-color:var(--sapContent_DragAndDropActiveColor, #0854a0);opacity:.5}.cdk-drag{cursor:grab}.cdk-drag.cdk-drag-dragging{cursor:grabbing}.cdk-drag-dragging{outline:none;cursor:grabbing;box-shadow:0 0 0 .0625rem #00000026,0 .625rem 1.875rem #0000004d}.cdk-drag-disabled{cursor:default}.fd-dnd-placeholder{top:0;left:0;position:absolute;opacity:.3;z-index:-1}.fd-dnd-item{position:relative;cursor:grab}.fd-dnd-item.fd-dnd-on-drag{background-color:#fff;background-color:var(--sapList_Background, #fff);z-index:15;cursor:grabbing}.drop-area__line{z-index:9999;position:absolute;background:#0854a0;background:var(--sapContent_DragAndDropActiveColor, #0854a0)}.drop-area__line--vertical{top:0;height:calc(100% - .5rem);width:2px}.drop-area__line--vertical.after{right:.2rem}.drop-area__line--vertical.before{left:-.3rem}.drop-area__line--vertical:before{background-color:#fff;background-color:var(--sapList_Background, #fff);content:\"\";position:absolute;left:-.2rem;top:-.5rem;border-radius:50%;width:.5rem;height:.5rem;border-width:.125rem;border-style:solid;border-color:#0854a0;border-color:var(--sapContent_DragAndDropActiveColor, #0854a0)}.drop-area__line--horizontal{left:0;width:100%;height:2px}.drop-area__line--horizontal.before{top:0}.drop-area__line--horizontal.after{bottom:0}.drop-area__line--horizontal:before{background-color:#fff;background-color:var(--sapList_Background, #fff);content:\"\";position:absolute;left:0;top:-.2rem;border-radius:50%;width:.5rem;height:.5rem;border-width:.125rem;border-style:solid;border-color:#0854a0;border-color:var(--sapContent_DragAndDropActiveColor, #0854a0)}.fd-dnd-list{position:relative}\n"], dependencies: [{ kind: "directive", type: DndItemDirective, selector: "[fdkDndItem], [fd-dnd-item]", inputs: ["fdkDndItem", "applyDragItemClass", "containerSelector", "stickInPlace", "draggable", "classWhenElementDragged"], outputs: ["moved", "released", "started"] }, { kind: "directive", type: DndListDirective, selector: "[fdkDndList], [fd-dnd-list]", inputs: ["gridMode", "dropMode", "threshold", "items", "draggable", "dropPredicate", "dragoverPredicate"], outputs: ["dropPredicateCalculating", "itemsChange", "itemDropped", "dropCancelled"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
170
243
  }
171
244
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProductSwitchBodyComponent, decorators: [{
172
245
  type: Component,
173
- args: [{ selector: 'fd-product-switch-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [DndItemDirective, DndListDirective, IconComponent, AvatarComponent], template: "<div\n class=\"fd-product-switch__body\"\n [class.fd-product-switch__body--col-3]=\"_isSmallMode() && !_isListMode()\"\n [class.fd-product-switch__body--mobile]=\"_isListMode()\"\n>\n <ul\n fd-dnd-list\n class=\"fd-product-switch__list\"\n [items]=\"products\"\n [gridMode]=\"!_isListMode()\"\n (itemDropped)=\"_productSwitchItemsChangeHandle($event)\"\n >\n @for (product of products; track product) {\n <li\n fd-dnd-item\n tabindex=\"0\"\n class=\"fd-product-switch__item\"\n [class.selected]=\"product.selected\"\n (keydown)=\"_keyDownHandle($event)\"\n (click)=\"_itemClick(product, $event)\"\n [draggable]=\"!product.disabledDragAndDrop && dragAndDropEnabled\"\n [stickInPlace]=\"!!product.stickToPosition\"\n >\n @if (product.avatar) {\n <fd-avatar\n size=\"s\"\n [glyph]=\"product.avatar.glyph ?? null\"\n [label]=\"product.avatar.label ?? null\"\n [circle]=\"!!product.avatar.circle\"\n [image]=\"product.avatar.image ?? null\"\n [contain]=\"!!product.avatar.contain\"\n [transparent]=\"!!product.avatar.transparent\"\n [placeholder]=\"!!product.avatar.placeholder\"\n [tile]=\"!!product.avatar.tile\"\n [colorAccent]=\"product.avatar.colorAccent\"\n [colorIndication]=\"product.avatar.colorIndication\"\n [border]=\"!!product.avatar.border\"\n [alterIcon]=\"product.avatar.alterIcon ?? null\"\n [backupImage]=\"product.avatar.backupImage ?? null\"\n [ariaLabel]=\"product.avatar.ariaLabel ?? null\"\n >\n </fd-avatar>\n } @else {\n <fd-icon\n [font]=\"product.font || FD_DEFAULT_ICON_FONT_FAMILY\"\n role=\"presentation\"\n class=\"fd-product-switch__icon\"\n [glyph]=\"product.icon\"\n ></fd-icon>\n }\n\n <div class=\"fd-product-switch__text\">\n <div class=\"fd-product-switch__title\">{{ product.title }}</div>\n @if (product.subtitle) {\n <div class=\"fd-product-switch__subtitle\">{{ product.subtitle }}</div>\n }\n </div>\n </li>\n }\n </ul>\n</div>\n", styles: [".drag-placeholder{opacity:.3;position:absolute}.fd-product-switch{--fdProduct_Switch_Item_Border_Color:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-product-switch:after,.fd-product-switch:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__list{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;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:.5rem;width:46.5rem}.fd-product-switch__list:after,.fd-product-switch__list:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__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;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:11.25rem;min-height:7.375rem;text-align:center;-webkit-box-flex:1;background-color:var(--sapList_Background);border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-shadow:var(--fdProductSwitch_Shadow);box-shadow:var(--fdProductSwitch_Shadow);-ms-flex:1 0 25%;flex:1 0 25%;outline:.125rem solid var(--fdProduct_Switch_Item_Border_Color);outline-offset:-.125rem;padding-block:1rem;padding-inline:.5rem}.fd-product-switch__item:after,.fd-product-switch__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__item .fd-product-switch__title:not(:last-child){white-space:normal}.fd-product-switch__item .fd-product-switch__title:after,.fd-product-switch__item .fd-product-switch__title:before{background-color:var(--sapList_Background)}.fd-product-switch__item.is-hover,.fd-product-switch__item:hover{background-color:var(--sapList_Hover_Background);cursor:pointer}.fd-product-switch__item.is-hover .fd-product-switch__title:after,.fd-product-switch__item.is-hover .fd-product-switch__title:before,.fd-product-switch__item:hover .fd-product-switch__title:after,.fd-product-switch__item:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_Background)}.fd-product-switch__item.is-active,.fd-product-switch__item:active{--fdProduct_Switch_Item_Border_Color:var(--sapContent_FocusColor);background-color:var(--sapList_Active_Background)}.fd-product-switch__item.is-active.is-focus,.fd-product-switch__item.is-active:focus,.fd-product-switch__item:active.is-focus,.fd-product-switch__item:active:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-offset:-.1875rem}.fd-product-switch__item.is-active .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item.is-active .fd-product-switch__icon[class*=sap-icon],.fd-product-switch__item.is-active .fd-product-switch__subtitle,.fd-product-switch__item.is-active .fd-product-switch__title,.fd-product-switch__item:active .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item:active .fd-product-switch__icon[class*=sap-icon],.fd-product-switch__item:active .fd-product-switch__subtitle,.fd-product-switch__item:active .fd-product-switch__title{color:var(--sapList_Active_TextColor)}.fd-product-switch__item.is-active .fd-product-switch__title:after,.fd-product-switch__item.is-active .fd-product-switch__title:before,.fd-product-switch__item.is-active.is-hover .fd-product-switch__title:after,.fd-product-switch__item.is-active.is-hover .fd-product-switch__title:before,.fd-product-switch__item.is-active:hover .fd-product-switch__title:after,.fd-product-switch__item.is-active:hover .fd-product-switch__title:before,.fd-product-switch__item:active .fd-product-switch__title:after,.fd-product-switch__item:active .fd-product-switch__title:before,.fd-product-switch__item:active.is-hover .fd-product-switch__title:after,.fd-product-switch__item:active.is-hover .fd-product-switch__title:before,.fd-product-switch__item:active:hover .fd-product-switch__title:after,.fd-product-switch__item:active:hover .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__item.selected{--fdProduct_Switch_Item_Border_Color:var(--sapContent_FocusColor)}.fd-product-switch__item.selected,.fd-product-switch__item.selected .fd-product-switch__title:after,.fd-product-switch__item.selected .fd-product-switch__title:before{background-color:var(--sapList_SelectionBackgroundColor)}.fd-product-switch__item.selected.is-hover,.fd-product-switch__item.selected.is-hover .fd-product-switch__title:after,.fd-product-switch__item.selected.is-hover .fd-product-switch__title:before,.fd-product-switch__item.selected:hover,.fd-product-switch__item.selected:hover .fd-product-switch__title:after,.fd-product-switch__item.selected:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_SelectionBackground)}.fd-product-switch__item.selected.is-active,.fd-product-switch__item.selected.is-active .fd-product-switch__title:after,.fd-product-switch__item.selected.is-active .fd-product-switch__title:before,.fd-product-switch__item.selected:active,.fd-product-switch__item.selected:active .fd-product-switch__title:after,.fd-product-switch__item.selected:active .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__item.is-focus,.fd-product-switch__item:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-product-switch__item.dragged{-webkit-box-shadow:var(--sapContent_Shadow2);box-shadow:var(--sapContent_Shadow2);cursor:-webkit-grabbing;cursor:grabbing}.fd-product-switch__item.dragged,.fd-product-switch__item.dragged:active,.fd-product-switch__item.dragged:hover{background-color:var(--sapList_Background)}.fd-product-switch__item.dragged:active .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item.dragged:active .fd-product-switch__icon[class*=sap-icon],.fd-product-switch__item.dragged:hover .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item.dragged:hover .fd-product-switch__icon[class*=sap-icon]{color:var(--sapContent_IconColor)}.fd-product-switch__item.dragged:active .fd-product-switch__title,.fd-product-switch__item.dragged:hover .fd-product-switch__title{color:var(--sapGroup_TitleTextColor)}.fd-product-switch__item.dragged:active .fd-product-switch__subtitle,.fd-product-switch__item.dragged:hover .fd-product-switch__subtitle{color:var(--sapContent_LabelColor)}.fd-product-switch__item.dragged.selected{border:none;-webkit-box-shadow:var(--sapContent_Shadow2);box-shadow:var(--sapContent_Shadow2)}.fd-product-switch__item.dragged.is-hover,.fd-product-switch__item.dragged:hover{outline:none}.fd-product-switch__icon [class*=sap-icon],.fd-product-switch__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;color:var(--sapContent_IconColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:inherit;font-size:1.5rem;line-height:1;min-height:3rem;min-width:3rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-product-switch__text{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:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem;text-shadow:var(--fdProductSwitch_Text_Shadow);width:100%}.fd-product-switch__text:after,.fd-product-switch__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapTitleColor);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;white-space:normal;z-index:1}.fd-product-switch__title:after,.fd-product-switch__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__title:before{left:9.4rem;width:1rem;z-index:2}.fd-product-switch__title:after{left:9.4rem;width:1rem;z-index:3}.fd-product-switch__subtitle{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;white-space:normal}.fd-product-switch__subtitle:after,.fd-product-switch__subtitle:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__body{background-color:var(--sapList_Background);border:0;border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;max-height:calc(100vh - 76px);overflow-y:auto;padding-block:0;padding-block:1.5rem;padding-inline:0;padding-inline:1rem;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-product-switch__body:after,.fd-product-switch__body:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__body.is-focus,.fd-product-switch__body:focus{outline:none;z-index:5}.fd-product-switch__body::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-product-switch__body::-webkit-scrollbar-corner,.fd-product-switch__body::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-product-switch__body::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-product-switch__body::-webkit-scrollbar-thumb:active,.fd-product-switch__body::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-product-switch__body--col-3 .fd-product-switch__list{width:34.75rem}.fd-product-switch__body--mobile{border-radius:0;max-height:100vh;max-width:353px;overflow-x:hidden;padding-block:1rem;padding-inline:1rem;width:100%}.fd-product-switch__body--mobile .fd-product-switch__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:0;width:100%}.fd-product-switch__body--mobile .fd-product-switch__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;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;border-radius:var(--sapElement_BorderCornerRadius);-ms-flex-direction:row;flex-direction:row;gap:.75rem;max-width:100%;min-height:5rem;padding-block:1rem;padding-inline:1rem;text-align:left;-webkit-box-flex:1;-ms-flex:auto;flex:auto}.fd-product-switch__body--mobile .fd-product-switch__item:after,.fd-product-switch__body--mobile .fd-product-switch__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:before{background-color:var(--sapTile_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.is-hover .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item:hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.is-active .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item:active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item:active .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-active.is-focus,.fd-product-switch__body--mobile .fd-product-switch__item.is-active:focus,.fd-product-switch__body--mobile .fd-product-switch__item:active.is-focus,.fd-product-switch__body--mobile .fd-product-switch__item:active:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-offset:-.1875rem}.fd-product-switch__body--mobile .fd-product-switch__item.selected .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected .fd-product-switch__title:before{background-color:var(--sapList_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-hover .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item.selected:hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_SelectionBackground)}.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-active .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item.selected:active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected:active .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-focus,.fd-product-switch__body--mobile .fd-product-switch__item:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:before{left:21.7rem;width:1rem;z-index:2}.fd-product-switch__body--mobile .fd-product-switch__text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;height:100%;justify-content:space-between}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text .fd-product-switch__title:not(:last-child),[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text .fd-product-switch__title:not(:last-child){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text .fd-product-switch__title:not(:last-child):after,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text .fd-product-switch__title:not(:last-child):after{display:none}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text .fd-product-switch__title:not(:last-child):before,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text .fd-product-switch__title:not(:last-child):before{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__title:before,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:before{right:21.8rem;width:2rem}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__subtitle,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__subtitle:before,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__subtitle:before{right:21.8rem;text-align:right;width:2rem;z-index:2}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__subtitle:after,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__subtitle:after{display:none;z-index:3}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item.is-active .fd-product-switch__subtitle,.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item:active .fd-product-switch__subtitle,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item.is-active .fd-product-switch__subtitle,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item:active .fd-product-switch__subtitle{color:var(--sapList_Active_TextColor)}.fd-product-switch__list{position:relative}.fd-product-switch__item.cdk-drag-dragging{outline:none;cursor:grabbing;box-shadow:0 0 0 .0625rem #00000026,0 .625rem 1.875rem #0000004d}.fd-product-switch__body--mobile .fd-product-switch__item.cdk-drag-dragging{outline:none;box-shadow:0 0 0 .0625rem #00000026,0 .625rem 1.875rem #0000004d}.fd-dnd-item{position:relative}.fd-dnd-item.fd-dnd-on-drag{background-color:#fff;background-color:var(--sapList_Background, #fff);z-index:15}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__title:before,.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__title:after{background-color:#fff;background-color:var(--sapList_Background, #fff)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__icon{color:#0854a0;color:var(--sapContent_IconColor, #0854a0)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__title{color:#32363a;color:var(--sapGroup_TitleTextColor, #32363a)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__subtitle{color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item:active,.fd-dnd-item.fd-dnd-on-drag.selected{background-color:#fff;background-color:var(--sapList_Background, #fff)}[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__title,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__subtitle{text-align:right}.fd-product-switch__item{--fdProduct_Switch_Item_Border_Color: transparent;gap:.5rem}.fd-product-switch__icon [class*=sap-icon],.fd-product-switch__icon[class*=sap-icon]{margin-block-end:0}.fd-product-switch__body.fd-product-switch__body--mobile .fd-product-switch__item{gap:.75rem}.fd-product-switch__body.fd-product-switch__body--mobile .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__body.fd-product-switch__body--mobile .fd-product-switch__icon[class*=sap-icon]{margin-inline:0}\n/*! Bundled license information:\n\nfundamental-styles/dist/product-switch.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n", ".cdk-drag-dragging{z-index:15;background-color:#fff;background-color:var(--sapList_Background, #fff);opacity:.8;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.fd-replace-indicator{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;border-width:.125rem;border-style:solid;background-color:transparent;border-color:#0854a0;border-color:var(--sapContent_DragAndDropActiveColor)}.fd-replace-indicator:before{content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#0854a0;background-color:var(--sapContent_DragAndDropActiveColor, #0854a0);opacity:.5}.cdk-drag{cursor:grab}.cdk-drag.cdk-drag-dragging{cursor:grabbing}.cdk-drag-dragging{outline:none;cursor:grabbing;box-shadow:0 0 0 .0625rem #00000026,0 .625rem 1.875rem #0000004d}.cdk-drag-disabled{cursor:default}.fd-dnd-placeholder{top:0;left:0;position:absolute;opacity:.3;z-index:-1}.fd-dnd-item{position:relative;cursor:grab}.fd-dnd-item.fd-dnd-on-drag{background-color:#fff;background-color:var(--sapList_Background, #fff);z-index:15;cursor:grabbing}.drop-area__line{z-index:9999;position:absolute;background:#0854a0;background:var(--sapContent_DragAndDropActiveColor, #0854a0)}.drop-area__line--vertical{top:0;height:calc(100% - .5rem);width:2px}.drop-area__line--vertical.after{right:.2rem}.drop-area__line--vertical.before{left:-.3rem}.drop-area__line--vertical:before{background-color:#fff;background-color:var(--sapList_Background, #fff);content:\"\";position:absolute;left:-.2rem;top:-.5rem;border-radius:50%;width:.5rem;height:.5rem;border-width:.125rem;border-style:solid;border-color:#0854a0;border-color:var(--sapContent_DragAndDropActiveColor, #0854a0)}.drop-area__line--horizontal{left:0;width:100%;height:2px}.drop-area__line--horizontal.before{top:0}.drop-area__line--horizontal.after{bottom:0}.drop-area__line--horizontal:before{background-color:#fff;background-color:var(--sapList_Background, #fff);content:\"\";position:absolute;left:0;top:-.2rem;border-radius:50%;width:.5rem;height:.5rem;border-width:.125rem;border-style:solid;border-color:#0854a0;border-color:var(--sapContent_DragAndDropActiveColor, #0854a0)}.fd-dnd-list{position:relative}\n"] }]
246
+ args: [{ selector: 'fd-product-switch-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [DndItemDirective, DndListDirective, IconComponent, AvatarComponent, NgTemplateOutlet], template: "<div\n class=\"fd-product-switch__body\"\n [class.fd-product-switch__body--col-3]=\"_isSmallMode() && !_isListMode()\"\n [class.fd-product-switch__body--mobile]=\"_isListMode()\"\n>\n <ul\n fd-dnd-list\n role=\"menu\"\n class=\"fd-product-switch__list\"\n [items]=\"products\"\n [gridMode]=\"!_isListMode()\"\n (itemDropped)=\"_productSwitchItemsChangeHandle($event)\"\n >\n @for (product of products; track product; let i = $index) {\n <li\n fd-dnd-item\n tabindex=\"0\"\n role=\"menuitem\"\n class=\"fd-product-switch__item\"\n [class.selected]=\"product.selected\"\n [attr.aria-label]=\"_itemAriaLabel()(product)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"products.length\"\n (keydown)=\"_keyDownHandle($event)\"\n (click)=\"_itemClick(product, $event)\"\n [draggable]=\"!product.disabledDragAndDrop && dragAndDropEnabled\"\n [stickInPlace]=\"!!product.stickToPosition\"\n >\n @if (product.url) {\n <a\n class=\"fd-product-switch__link\"\n [href]=\"product.url\"\n [target]=\"product.target || '_self'\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <ng-container *ngTemplateOutlet=\"itemContent; context: { $implicit: product }\"></ng-container>\n </a>\n } @else {\n <ng-container *ngTemplateOutlet=\"itemContent; context: { $implicit: product }\"></ng-container>\n }\n </li>\n }\n </ul>\n</div>\n\n<ng-template #itemContent let-product>\n @if (product.avatar) {\n <fd-avatar\n size=\"s\"\n [glyph]=\"product.avatar.glyph ?? null\"\n [label]=\"product.avatar.label ?? null\"\n [circle]=\"!!product.avatar.circle\"\n [image]=\"product.avatar.image ?? null\"\n [contain]=\"!!product.avatar.contain\"\n [transparent]=\"!!product.avatar.transparent\"\n [placeholder]=\"!!product.avatar.placeholder\"\n [tile]=\"!!product.avatar.tile\"\n [colorAccent]=\"product.avatar.colorAccent\"\n [colorIndication]=\"product.avatar.colorIndication\"\n [border]=\"!!product.avatar.border\"\n [alterIcon]=\"product.avatar.alterIcon ?? null\"\n [backupImage]=\"product.avatar.backupImage ?? null\"\n [ariaLabel]=\"product.avatar.ariaLabel ?? null\"\n >\n </fd-avatar>\n } @else {\n <fd-icon\n [font]=\"product.font || FD_DEFAULT_ICON_FONT_FAMILY\"\n role=\"presentation\"\n class=\"fd-product-switch__icon\"\n [glyph]=\"product.icon\"\n ></fd-icon>\n }\n\n <div class=\"fd-product-switch__text\">\n <div class=\"fd-product-switch__title\">{{ product.title }}</div>\n @if (product.subtitle) {\n <div class=\"fd-product-switch__subtitle\">{{ product.subtitle }}</div>\n }\n </div>\n</ng-template>\n", styles: [".drag-placeholder{opacity:.3;position:absolute}.fd-product-switch{--fdProduct_Switch_Item_Border_Color:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-product-switch:after,.fd-product-switch:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__list{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;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:.5rem;width:46.5rem}.fd-product-switch__list:after,.fd-product-switch__list:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__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;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:11.25rem;min-height:7.375rem;text-align:center;-webkit-box-flex:1;background-color:var(--sapList_Background);border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-shadow:var(--fdProductSwitch_Shadow);box-shadow:var(--fdProductSwitch_Shadow);-ms-flex:1 0 25%;flex:1 0 25%;outline:.125rem solid var(--fdProduct_Switch_Item_Border_Color);outline-offset:-.125rem;padding-block:1rem;padding-inline:.5rem}.fd-product-switch__item:after,.fd-product-switch__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__item .fd-product-switch__title:not(:last-child){white-space:normal}.fd-product-switch__item .fd-product-switch__title:after,.fd-product-switch__item .fd-product-switch__title:before{background-color:var(--sapList_Background)}.fd-product-switch__item.is-hover,.fd-product-switch__item:hover{background-color:var(--sapList_Hover_Background);cursor:pointer}.fd-product-switch__item.is-hover .fd-product-switch__title:after,.fd-product-switch__item.is-hover .fd-product-switch__title:before,.fd-product-switch__item:hover .fd-product-switch__title:after,.fd-product-switch__item:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_Background)}.fd-product-switch__item.is-active,.fd-product-switch__item:active{--fdProduct_Switch_Item_Border_Color:var(--sapContent_FocusColor);background-color:var(--sapList_Active_Background)}.fd-product-switch__item.is-active.is-focus,.fd-product-switch__item.is-active:focus,.fd-product-switch__item:active.is-focus,.fd-product-switch__item:active:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-offset:-.1875rem}.fd-product-switch__item.is-active .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item.is-active .fd-product-switch__icon[class*=sap-icon],.fd-product-switch__item.is-active .fd-product-switch__subtitle,.fd-product-switch__item.is-active .fd-product-switch__title,.fd-product-switch__item:active .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item:active .fd-product-switch__icon[class*=sap-icon],.fd-product-switch__item:active .fd-product-switch__subtitle,.fd-product-switch__item:active .fd-product-switch__title{color:var(--sapList_Active_TextColor)}.fd-product-switch__item.is-active .fd-product-switch__title:after,.fd-product-switch__item.is-active .fd-product-switch__title:before,.fd-product-switch__item.is-active.is-hover .fd-product-switch__title:after,.fd-product-switch__item.is-active.is-hover .fd-product-switch__title:before,.fd-product-switch__item.is-active:hover .fd-product-switch__title:after,.fd-product-switch__item.is-active:hover .fd-product-switch__title:before,.fd-product-switch__item:active .fd-product-switch__title:after,.fd-product-switch__item:active .fd-product-switch__title:before,.fd-product-switch__item:active.is-hover .fd-product-switch__title:after,.fd-product-switch__item:active.is-hover .fd-product-switch__title:before,.fd-product-switch__item:active:hover .fd-product-switch__title:after,.fd-product-switch__item:active:hover .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__item.selected{--fdProduct_Switch_Item_Border_Color:var(--sapContent_FocusColor)}.fd-product-switch__item.selected,.fd-product-switch__item.selected .fd-product-switch__title:after,.fd-product-switch__item.selected .fd-product-switch__title:before{background-color:var(--sapList_SelectionBackgroundColor)}.fd-product-switch__item.selected.is-hover,.fd-product-switch__item.selected.is-hover .fd-product-switch__title:after,.fd-product-switch__item.selected.is-hover .fd-product-switch__title:before,.fd-product-switch__item.selected:hover,.fd-product-switch__item.selected:hover .fd-product-switch__title:after,.fd-product-switch__item.selected:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_SelectionBackground)}.fd-product-switch__item.selected.is-active,.fd-product-switch__item.selected.is-active .fd-product-switch__title:after,.fd-product-switch__item.selected.is-active .fd-product-switch__title:before,.fd-product-switch__item.selected:active,.fd-product-switch__item.selected:active .fd-product-switch__title:after,.fd-product-switch__item.selected:active .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__item.is-focus,.fd-product-switch__item:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-product-switch__item.dragged{-webkit-box-shadow:var(--sapContent_Shadow2);box-shadow:var(--sapContent_Shadow2);cursor:-webkit-grabbing;cursor:grabbing}.fd-product-switch__item.dragged,.fd-product-switch__item.dragged:active,.fd-product-switch__item.dragged:hover{background-color:var(--sapList_Background)}.fd-product-switch__item.dragged:active .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item.dragged:active .fd-product-switch__icon[class*=sap-icon],.fd-product-switch__item.dragged:hover .fd-product-switch__icon [class*=sap-icon],.fd-product-switch__item.dragged:hover .fd-product-switch__icon[class*=sap-icon]{color:var(--sapContent_IconColor)}.fd-product-switch__item.dragged:active .fd-product-switch__title,.fd-product-switch__item.dragged:hover .fd-product-switch__title{color:var(--sapGroup_TitleTextColor)}.fd-product-switch__item.dragged:active .fd-product-switch__subtitle,.fd-product-switch__item.dragged:hover .fd-product-switch__subtitle{color:var(--sapContent_LabelColor)}.fd-product-switch__item.dragged.selected{border:none;-webkit-box-shadow:var(--sapContent_Shadow2);box-shadow:var(--sapContent_Shadow2)}.fd-product-switch__item.dragged.is-hover,.fd-product-switch__item.dragged:hover{outline:none}.fd-product-switch__icon [class*=sap-icon],.fd-product-switch__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;color:var(--sapContent_IconColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:inherit;font-size:1.5rem;line-height:1;min-height:3rem;min-width:3rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-product-switch__text{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:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem;text-shadow:var(--fdProductSwitch_Text_Shadow);width:100%}.fd-product-switch__text:after,.fd-product-switch__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapTitleColor);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;white-space:normal;z-index:1}.fd-product-switch__title:after,.fd-product-switch__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__title:before{left:9.4rem;width:1rem;z-index:2}.fd-product-switch__title:after{left:9.4rem;width:1rem;z-index:3}.fd-product-switch__subtitle{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;white-space:normal}.fd-product-switch__subtitle:after,.fd-product-switch__subtitle:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__body{background-color:var(--sapList_Background);border:0;border-radius:var(--sapElement_BorderCornerRadius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;max-height:calc(100vh - 76px);overflow-y:auto;padding-block:0;padding-block:1.5rem;padding-inline:0;padding-inline:1rem;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-product-switch__body:after,.fd-product-switch__body:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__body.is-focus,.fd-product-switch__body:focus{outline:none;z-index:5}.fd-product-switch__body::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-product-switch__body::-webkit-scrollbar-corner,.fd-product-switch__body::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-product-switch__body::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-product-switch__body::-webkit-scrollbar-thumb:active,.fd-product-switch__body::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-product-switch__body--col-3 .fd-product-switch__list{width:34.75rem}.fd-product-switch__body--mobile{border-radius:0;max-height:100vh;max-width:353px;overflow-x:hidden;padding-block:1rem;padding-inline:1rem;width:100%}.fd-product-switch__body--mobile .fd-product-switch__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:0;width:100%}.fd-product-switch__body--mobile .fd-product-switch__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;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;border-radius:var(--sapElement_BorderCornerRadius);-ms-flex-direction:row;flex-direction:row;gap:.75rem;max-width:100%;min-height:5rem;padding-block:1rem;padding-inline:1rem;text-align:left;-webkit-box-flex:1;-ms-flex:auto;flex:auto}.fd-product-switch__body--mobile .fd-product-switch__item:after,.fd-product-switch__body--mobile .fd-product-switch__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:before{background-color:var(--sapTile_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.is-hover .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item:hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.is-active .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item:active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item:active .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-active.is-focus,.fd-product-switch__body--mobile .fd-product-switch__item.is-active:focus,.fd-product-switch__body--mobile .fd-product-switch__item:active.is-focus,.fd-product-switch__body--mobile .fd-product-switch__item:active:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-offset:-.1875rem}.fd-product-switch__body--mobile .fd-product-switch__item.selected .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected .fd-product-switch__title:before{background-color:var(--sapList_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-hover .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item.selected:hover .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected:hover .fd-product-switch__title:before{background-color:var(--sapList_Hover_SelectionBackground)}.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected.is-active .fd-product-switch__title:before,.fd-product-switch__body--mobile .fd-product-switch__item.selected:active .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item.selected:active .fd-product-switch__title:before{background-color:var(--sapList_Active_Background)}.fd-product-switch__body--mobile .fd-product-switch__item.is-focus,.fd-product-switch__body--mobile .fd-product-switch__item:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:after,.fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:before{left:21.7rem;width:1rem;z-index:2}.fd-product-switch__body--mobile .fd-product-switch__text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;height:100%;justify-content:space-between}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text .fd-product-switch__title:not(:last-child),[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text .fd-product-switch__title:not(:last-child){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text .fd-product-switch__title:not(:last-child):after,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text .fd-product-switch__title:not(:last-child):after{display:none}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__text .fd-product-switch__title:not(:last-child):before,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__text .fd-product-switch__title:not(:last-child):before{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__title:before,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__title:before{right:21.8rem;width:2rem}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__subtitle,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__subtitle:before,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__subtitle:before{right:21.8rem;text-align:right;width:2rem;z-index:2}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item .fd-product-switch__subtitle:after,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item .fd-product-switch__subtitle:after{display:none;z-index:3}.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item.is-active .fd-product-switch__subtitle,.fd-product-switch__body--mobile[dir=rtl] .fd-product-switch__item:active .fd-product-switch__subtitle,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item.is-active .fd-product-switch__subtitle,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__item:active .fd-product-switch__subtitle{color:var(--sapList_Active_TextColor)}.fd-product-switch__list{position:relative}.fd-product-switch__link{display:contents;color:inherit;text-decoration:none}.fd-product-switch__item.cdk-drag-dragging{outline:none;cursor:grabbing;box-shadow:0 0 0 .0625rem #00000026,0 .625rem 1.875rem #0000004d}.fd-product-switch__body--mobile .fd-product-switch__item.cdk-drag-dragging{outline:none;box-shadow:0 0 0 .0625rem #00000026,0 .625rem 1.875rem #0000004d}.fd-dnd-item{position:relative}.fd-dnd-item.fd-dnd-on-drag{background-color:#fff;background-color:var(--sapList_Background, #fff);z-index:15}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__title:before,.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__title:after{background-color:#fff;background-color:var(--sapList_Background, #fff)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__icon{color:#0854a0;color:var(--sapContent_IconColor, #0854a0)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__title{color:#32363a;color:var(--sapGroup_TitleTextColor, #32363a)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item .fd-product-switch__subtitle{color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70)}.fd-dnd-item.fd-dnd-on-drag.fd-product-switch__item:active,.fd-dnd-item.fd-dnd-on-drag.selected{background-color:#fff;background-color:var(--sapList_Background, #fff)}[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__title,[dir=rtl] .fd-product-switch__body--mobile .fd-product-switch__subtitle{text-align:right}\n/*! Bundled license information:\n\nfundamental-styles/dist/product-switch.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n", ".cdk-drag-dragging{z-index:15;background-color:#fff;background-color:var(--sapList_Background, #fff);opacity:.8;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.fd-replace-indicator{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;border-width:.125rem;border-style:solid;background-color:transparent;border-color:#0854a0;border-color:var(--sapContent_DragAndDropActiveColor)}.fd-replace-indicator:before{content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#0854a0;background-color:var(--sapContent_DragAndDropActiveColor, #0854a0);opacity:.5}.cdk-drag{cursor:grab}.cdk-drag.cdk-drag-dragging{cursor:grabbing}.cdk-drag-dragging{outline:none;cursor:grabbing;box-shadow:0 0 0 .0625rem #00000026,0 .625rem 1.875rem #0000004d}.cdk-drag-disabled{cursor:default}.fd-dnd-placeholder{top:0;left:0;position:absolute;opacity:.3;z-index:-1}.fd-dnd-item{position:relative;cursor:grab}.fd-dnd-item.fd-dnd-on-drag{background-color:#fff;background-color:var(--sapList_Background, #fff);z-index:15;cursor:grabbing}.drop-area__line{z-index:9999;position:absolute;background:#0854a0;background:var(--sapContent_DragAndDropActiveColor, #0854a0)}.drop-area__line--vertical{top:0;height:calc(100% - .5rem);width:2px}.drop-area__line--vertical.after{right:.2rem}.drop-area__line--vertical.before{left:-.3rem}.drop-area__line--vertical:before{background-color:#fff;background-color:var(--sapList_Background, #fff);content:\"\";position:absolute;left:-.2rem;top:-.5rem;border-radius:50%;width:.5rem;height:.5rem;border-width:.125rem;border-style:solid;border-color:#0854a0;border-color:var(--sapContent_DragAndDropActiveColor, #0854a0)}.drop-area__line--horizontal{left:0;width:100%;height:2px}.drop-area__line--horizontal.before{top:0}.drop-area__line--horizontal.after{bottom:0}.drop-area__line--horizontal:before{background-color:#fff;background-color:var(--sapList_Background, #fff);content:\"\";position:absolute;left:0;top:-.2rem;border-radius:50%;width:.5rem;height:.5rem;border-width:.125rem;border-style:solid;border-color:#0854a0;border-color:var(--sapContent_DragAndDropActiveColor, #0854a0)}.fd-dnd-list{position:relative}\n"] }]
174
247
  }], ctorParameters: () => [{ type: i1.ViewportRuler }, { type: i0.ChangeDetectorRef }], propDecorators: { dragAndDropEnabled: [{
175
248
  type: Input
176
249
  }], products: [{
@@ -181,7 +254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
181
254
  type: Output
182
255
  }], itemClicked: [{
183
256
  type: Output
184
- }] } });
257
+ }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }] } });
185
258
 
186
259
  class ProductSwitchButtonDirective {
187
260
  /** @hidden */
@@ -237,10 +310,14 @@ class ProductSwitchComponent {
237
310
  /** @hidden */
238
311
  this.customProductSwitchButton = contentChild(ProductSwitchButtonDirective, /* @ts-ignore */
239
312
  ...(ngDevMode ? [{ debugName: "customProductSwitchButton" }] : /* istanbul ignore next */ []));
313
+ /** @hidden */
314
+ this._productSwitchBody = contentChild(ProductSwitchBodyComponent, /* @ts-ignore */
315
+ ...(ngDevMode ? [{ debugName: "_productSwitchBody" }] : /* istanbul ignore next */ []));
240
316
  let previousIsOpen = false;
241
317
  effect(() => {
242
318
  const openState = this.isOpen();
243
319
  if (openState !== previousIsOpen) {
320
+ this._productSwitchBody()?.isOpen.set(openState);
244
321
  this.isOpenChange.next(openState);
245
322
  }
246
323
  previousIsOpen = openState;
@@ -252,7 +329,7 @@ class ProductSwitchComponent {
252
329
  provide: FD_PRODUCT_SWITCH_COMPONENT,
253
330
  useExisting: ProductSwitchComponent
254
331
  }
255
- ], queries: [{ propertyName: "customProductSwitchButton", first: true, predicate: ProductSwitchButtonDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fd-product-switch\">\n <fd-popover\n [placement]=\"placement()\"\n [closeOnEscapeKey]=\"closeOnEscapeKey()\"\n [closeOnOutsideClick]=\"closeOnOutsideClick()\"\n [(isOpen)]=\"isOpen\"\n [disabled]=\"disabled()\"\n [triggers]=\"triggers()\"\n [focusTrapped]=\"focusTrapped()\"\n [focusAutoCapture]=\"focusAutoCapture()\"\n [noArrow]=\"noArrow()\"\n [disableScrollbar]=\"disableScrollbar()\"\n (beforeOpen)=\"beforeOpen.emit()\"\n >\n <fd-popover-control>\n @if (!customProductSwitchButton()) {\n <button\n fd-button\n [attr.aria-label]=\"('coreProductSwitch.ariaLabel' | fdTranslate)()\"\n [attr.title]=\"('coreProductSwitch.ariaLabel' | fdTranslate)()\"\n class=\"fd-shellbar__button\"\n glyph=\"grid\"\n fdType=\"transparent\"\n [fdContentDensity]=\"contentDensity()\"\n ></button>\n } @else {\n <ng-template [ngTemplateOutlet]=\"customProductSwitchButton()!.templateRef\"></ng-template>\n }\n </fd-popover-control>\n <fd-popover-body>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</div>\n", dependencies: [{ 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", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]), [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]), [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]), [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
332
+ ], queries: [{ propertyName: "customProductSwitchButton", first: true, predicate: ProductSwitchButtonDirective, descendants: true, isSignal: true }, { propertyName: "_productSwitchBody", first: true, predicate: ProductSwitchBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fd-product-switch\">\n <fd-popover\n [placement]=\"placement()\"\n [closeOnEscapeKey]=\"closeOnEscapeKey()\"\n [closeOnOutsideClick]=\"closeOnOutsideClick()\"\n [(isOpen)]=\"isOpen\"\n [disabled]=\"disabled()\"\n [triggers]=\"triggers()\"\n [focusTrapped]=\"focusTrapped()\"\n [focusAutoCapture]=\"focusAutoCapture()\"\n [noArrow]=\"noArrow()\"\n [disableScrollbar]=\"disableScrollbar()\"\n (beforeOpen)=\"beforeOpen.emit()\"\n >\n <fd-popover-control>\n @if (!customProductSwitchButton()) {\n <button\n fd-button\n [attr.aria-label]=\"('coreProductSwitch.ariaLabel' | fdTranslate)()\"\n [attr.title]=\"('coreProductSwitch.ariaLabel' | fdTranslate)()\"\n aria-haspopup=\"menu\"\n class=\"fd-shellbar__button\"\n glyph=\"grid\"\n fdType=\"transparent\"\n [fdContentDensity]=\"contentDensity()\"\n ></button>\n } @else {\n <ng-template [ngTemplateOutlet]=\"customProductSwitchButton()!.templateRef\"></ng-template>\n }\n </fd-popover-control>\n <fd-popover-body [ariaModal]=\"false\">\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</div>\n", dependencies: [{ 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", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight", "ariaModal"], outputs: ["onClose"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]), [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]), [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]), [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
256
333
  }
257
334
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProductSwitchComponent, decorators: [{
258
335
  type: Component,
@@ -271,8 +348,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
271
348
  ContentDensityDirective
272
349
  ], host: {
273
350
  '[class.fd-popover-custom--disabled]': 'disabled()'
274
- }, template: "<div class=\"fd-product-switch\">\n <fd-popover\n [placement]=\"placement()\"\n [closeOnEscapeKey]=\"closeOnEscapeKey()\"\n [closeOnOutsideClick]=\"closeOnOutsideClick()\"\n [(isOpen)]=\"isOpen\"\n [disabled]=\"disabled()\"\n [triggers]=\"triggers()\"\n [focusTrapped]=\"focusTrapped()\"\n [focusAutoCapture]=\"focusAutoCapture()\"\n [noArrow]=\"noArrow()\"\n [disableScrollbar]=\"disableScrollbar()\"\n (beforeOpen)=\"beforeOpen.emit()\"\n >\n <fd-popover-control>\n @if (!customProductSwitchButton()) {\n <button\n fd-button\n [attr.aria-label]=\"('coreProductSwitch.ariaLabel' | fdTranslate)()\"\n [attr.title]=\"('coreProductSwitch.ariaLabel' | fdTranslate)()\"\n class=\"fd-shellbar__button\"\n glyph=\"grid\"\n fdType=\"transparent\"\n [fdContentDensity]=\"contentDensity()\"\n ></button>\n } @else {\n <ng-template [ngTemplateOutlet]=\"customProductSwitchButton()!.templateRef\"></ng-template>\n }\n </fd-popover-control>\n <fd-popover-body>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</div>\n" }]
275
- }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnEscapeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscapeKey", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], noArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "noArrow", required: false }] }], disableScrollbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableScrollbar", required: false }] }], triggers: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggers", required: false }] }], focusTrapped: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusTrapped", required: false }] }], focusAutoCapture: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAutoCapture", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], beforeOpen: [{ type: i0.Output, args: ["beforeOpen"] }], customProductSwitchButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ProductSwitchButtonDirective), { isSignal: true }] }] } });
351
+ }, template: "<div class=\"fd-product-switch\">\n <fd-popover\n [placement]=\"placement()\"\n [closeOnEscapeKey]=\"closeOnEscapeKey()\"\n [closeOnOutsideClick]=\"closeOnOutsideClick()\"\n [(isOpen)]=\"isOpen\"\n [disabled]=\"disabled()\"\n [triggers]=\"triggers()\"\n [focusTrapped]=\"focusTrapped()\"\n [focusAutoCapture]=\"focusAutoCapture()\"\n [noArrow]=\"noArrow()\"\n [disableScrollbar]=\"disableScrollbar()\"\n (beforeOpen)=\"beforeOpen.emit()\"\n >\n <fd-popover-control>\n @if (!customProductSwitchButton()) {\n <button\n fd-button\n [attr.aria-label]=\"('coreProductSwitch.ariaLabel' | fdTranslate)()\"\n [attr.title]=\"('coreProductSwitch.ariaLabel' | fdTranslate)()\"\n aria-haspopup=\"menu\"\n class=\"fd-shellbar__button\"\n glyph=\"grid\"\n fdType=\"transparent\"\n [fdContentDensity]=\"contentDensity()\"\n ></button>\n } @else {\n <ng-template [ngTemplateOutlet]=\"customProductSwitchButton()!.templateRef\"></ng-template>\n }\n </fd-popover-control>\n <fd-popover-body [ariaModal]=\"false\">\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</div>\n" }]
352
+ }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnEscapeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscapeKey", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], noArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "noArrow", required: false }] }], disableScrollbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableScrollbar", required: false }] }], triggers: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggers", required: false }] }], focusTrapped: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusTrapped", required: false }] }], focusAutoCapture: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAutoCapture", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], beforeOpen: [{ type: i0.Output, args: ["beforeOpen"] }], customProductSwitchButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ProductSwitchButtonDirective), { isSignal: true }] }], _productSwitchBody: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ProductSwitchBodyComponent), { isSignal: true }] }] } });
276
353
 
277
354
  /**
278
355
  * @deprecated