@fundamental-ngx/core 0.59.1-rc.9 → 0.59.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.
- package/fesm2022/fundamental-ngx-core-avatar-group-legacy.mjs +33 -50
- package/fesm2022/fundamental-ngx-core-avatar-group-legacy.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs +9 -11
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar.mjs +206 -293
- package/fesm2022/fundamental-ngx-core-avatar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs +25 -12
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-calendar.mjs +11 -14
- package/fesm2022/fundamental-ngx-core-calendar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-card.mjs +13 -26
- package/fesm2022/fundamental-ngx-core-card.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-carousel.mjs +11 -11
- package/fesm2022/fundamental-ngx-core-carousel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-combobox.mjs +33 -7
- package/fesm2022/fundamental-ngx-core-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dialog.mjs +13 -17
- package/fesm2022/fundamental-ngx-core-dialog.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs +32 -24
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-fixed-card-layout.mjs +28 -30
- package/fesm2022/fundamental-ngx-core-fixed-card-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-grid-list.mjs +12 -10
- package/fesm2022/fundamental-ngx-core-grid-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-illustrated-message.mjs +202 -100
- package/fesm2022/fundamental-ngx-core-illustrated-message.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-layout-panel.mjs +72 -231
- package/fesm2022/fundamental-ngx-core-layout-panel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-list.mjs +12 -12
- package/fesm2022/fundamental-ngx-core-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-menu.mjs +28 -28
- package/fesm2022/fundamental-ngx-core-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-strip.mjs +85 -84
- package/fesm2022/fundamental-ngx-core-message-strip.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-micro-process-flow.mjs +21 -24
- package/fesm2022/fundamental-ngx-core-micro-process-flow.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs +19 -12
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-multi-input.mjs +46 -39
- package/fesm2022/fundamental-ngx-core-multi-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-nested-list.mjs +66 -103
- package/fesm2022/fundamental-ngx-core-nested-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-notification.mjs +10 -12
- package/fesm2022/fundamental-ngx-core-notification.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-marker.mjs +69 -59
- package/fesm2022/fundamental-ngx-core-object-marker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-status.mjs +92 -118
- package/fesm2022/fundamental-ngx-core-object-status.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs +27 -29
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-pagination.mjs +17 -18
- package/fesm2022/fundamental-ngx-core-pagination.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-panel.mjs +7 -9
- package/fesm2022/fundamental-ngx-core-panel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-popover.mjs +10 -15
- package/fesm2022/fundamental-ngx-core-popover.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-product-switch.mjs +12 -15
- package/fesm2022/fundamental-ngx-core-product-switch.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-resizable-card-layout.mjs +18 -20
- package/fesm2022/fundamental-ngx-core-resizable-card-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs +8 -11
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-select.mjs +6 -8
- package/fesm2022/fundamental-ngx-core-select.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-settings.mjs +9 -12
- package/fesm2022/fundamental-ngx-core-settings.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-shellbar.mjs +48 -34
- package/fesm2022/fundamental-ngx-core-shellbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-slider.mjs +30 -31
- package/fesm2022/fundamental-ngx-core-slider.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-status-indicator.mjs +137 -131
- package/fesm2022/fundamental-ngx-core-status-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tabs.mjs +21 -17
- package/fesm2022/fundamental-ngx-core-tabs.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tile.mjs +375 -631
- package/fesm2022/fundamental-ngx-core-tile.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-time.mjs +7 -9
- package/fesm2022/fundamental-ngx-core-time.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-token.mjs +11 -13
- package/fesm2022/fundamental-ngx-core-token.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-toolbar.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-toolbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tree.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-tree.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-user-menu.mjs +63 -21
- package/fesm2022/fundamental-ngx-core-user-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-wizard.mjs +1 -1
- package/fesm2022/fundamental-ngx-core-wizard.mjs.map +1 -1
- package/package.json +4 -4
- package/types/fundamental-ngx-core-avatar-group-legacy.d.ts +15 -17
- package/types/fundamental-ngx-core-avatar-group.d.ts +1 -1
- package/types/fundamental-ngx-core-avatar.d.ts +66 -86
- package/types/fundamental-ngx-core-breadcrumb.d.ts +13 -5
- package/types/fundamental-ngx-core-calendar.d.ts +3 -4
- package/types/fundamental-ngx-core-card.d.ts +4 -11
- package/types/fundamental-ngx-core-carousel.d.ts +3 -3
- package/types/fundamental-ngx-core-combobox.d.ts +8 -1
- package/types/fundamental-ngx-core-dialog.d.ts +2 -4
- package/types/fundamental-ngx-core-dynamic-page.d.ts +0 -6
- package/types/fundamental-ngx-core-fixed-card-layout.d.ts +7 -7
- package/types/fundamental-ngx-core-grid-list.d.ts +6 -4
- package/types/fundamental-ngx-core-illustrated-message.d.ts +165 -31
- package/types/fundamental-ngx-core-layout-panel.d.ts +19 -131
- package/types/fundamental-ngx-core-list.d.ts +8 -6
- package/types/fundamental-ngx-core-menu.d.ts +16 -13
- package/types/fundamental-ngx-core-message-strip.d.ts +5 -2
- package/types/fundamental-ngx-core-micro-process-flow.d.ts +8 -6
- package/types/fundamental-ngx-core-multi-combobox.d.ts +8 -5
- package/types/fundamental-ngx-core-multi-input.d.ts +24 -16
- package/types/fundamental-ngx-core-nested-list.d.ts +19 -33
- package/types/fundamental-ngx-core-notification.d.ts +2 -2
- package/types/fundamental-ngx-core-object-marker.d.ts +47 -27
- package/types/fundamental-ngx-core-object-status.d.ts +49 -48
- package/types/fundamental-ngx-core-overflow-layout.d.ts +10 -10
- package/types/fundamental-ngx-core-pagination.d.ts +7 -8
- package/types/fundamental-ngx-core-panel.d.ts +2 -4
- package/types/fundamental-ngx-core-popover.d.ts +7 -5
- package/types/fundamental-ngx-core-product-switch.d.ts +5 -4
- package/types/fundamental-ngx-core-resizable-card-layout.d.ts +10 -8
- package/types/fundamental-ngx-core-segmented-button.d.ts +5 -4
- package/types/fundamental-ngx-core-select.d.ts +4 -5
- package/types/fundamental-ngx-core-settings.d.ts +7 -10
- package/types/fundamental-ngx-core-shellbar.d.ts +23 -14
- package/types/fundamental-ngx-core-slider.d.ts +18 -13
- package/types/fundamental-ngx-core-status-indicator.d.ts +42 -58
- package/types/fundamental-ngx-core-tabs.d.ts +9 -7
- package/types/fundamental-ngx-core-tile.d.ts +114 -243
- package/types/fundamental-ngx-core-time.d.ts +5 -4
- package/types/fundamental-ngx-core-token.d.ts +5 -4
- package/types/fundamental-ngx-core-tree.d.ts +1 -1
- package/types/fundamental-ngx-core-user-menu.d.ts +25 -21
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Pipe, InjectionToken,
|
|
3
|
-
import {
|
|
4
|
-
import { getRandomColorAccent, ANY_LANGUAGE_LETTERS_REGEX, applyCssClass } from '@fundamental-ngx/cdk/utils';
|
|
2
|
+
import { Pipe, InjectionToken, input, booleanAttribute, output, viewChild, signal, computed, inject, ElementRef, Renderer2, HostAttributeToken, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
|
|
3
|
+
import { getRandomColorAccent, ANY_LANGUAGE_LETTERS_REGEX } from '@fundamental-ngx/cdk/utils';
|
|
5
4
|
import { FD_DEFAULT_ICON_FONT_FAMILY, IconComponent } from '@fundamental-ngx/core/icon';
|
|
6
5
|
|
|
7
6
|
class AvatarIconPipe {
|
|
@@ -51,185 +50,176 @@ const ALTER_ICON_OPTIONS = {
|
|
|
51
50
|
DEFAULT_ICON: 'default-icon'
|
|
52
51
|
};
|
|
53
52
|
class AvatarComponent {
|
|
54
|
-
/** Localized text for label */
|
|
55
|
-
set label(value) {
|
|
56
|
-
this.ariaLabel = value || null;
|
|
57
|
-
this.abbreviate = this._getAbbreviate(value);
|
|
58
|
-
}
|
|
59
|
-
/** Background image resource: url or base64. */
|
|
60
|
-
set image(value) {
|
|
61
|
-
this._setImage(value);
|
|
62
|
-
}
|
|
63
|
-
get image() {
|
|
64
|
-
return this._image;
|
|
65
|
-
}
|
|
66
|
-
/** Backup options to use when image hasn't been loaded successfully.
|
|
67
|
-
* Options separated with "|" symbol.
|
|
68
|
-
* Possible options: content, alt, backup, default-icon
|
|
69
|
-
*/
|
|
70
|
-
set alterIcon(value) {
|
|
71
|
-
this._alterIcon = value;
|
|
72
|
-
}
|
|
73
|
-
get alterIcon() {
|
|
74
|
-
return this._alterIcon;
|
|
75
|
-
}
|
|
76
|
-
/** Backup image to load when image hasn't been loaded successfully.
|
|
77
|
-
* Only applicable when using alterIcon input property.
|
|
78
|
-
*/
|
|
79
|
-
set backupImage(value) {
|
|
80
|
-
this._backupImage = value;
|
|
81
|
-
}
|
|
82
|
-
get backupImage() {
|
|
83
|
-
return this._backupImage;
|
|
84
|
-
}
|
|
85
|
-
/**
|
|
86
|
-
* @hidden
|
|
87
|
-
*/
|
|
88
|
-
set bgImage(image) {
|
|
89
|
-
this._bgImage = image;
|
|
90
|
-
this._renderer.setStyle(this.elementRef.nativeElement, 'background-image', image);
|
|
91
|
-
}
|
|
92
|
-
get bgImage() {
|
|
93
|
-
return this._bgImage;
|
|
94
|
-
}
|
|
95
53
|
/** @hidden */
|
|
96
|
-
|
|
97
|
-
return this.zoomGlyph ? 'button' : 'img';
|
|
98
|
-
}
|
|
99
|
-
/** @hidden */
|
|
100
|
-
set content(value) {
|
|
101
|
-
this._content = value;
|
|
102
|
-
}
|
|
103
|
-
/** @hidden */
|
|
104
|
-
get _tabindex() {
|
|
105
|
-
if (this.hostTabindex != null) {
|
|
106
|
-
return this.hostTabindex;
|
|
107
|
-
}
|
|
108
|
-
return this.clickable ? 0 : null;
|
|
109
|
-
}
|
|
110
|
-
/** If a default placeholder should be displayed */
|
|
111
|
-
get showDefault() {
|
|
112
|
-
return !this.abbreviate && !this._image && !this.glyph;
|
|
113
|
-
}
|
|
114
|
-
/** @hidden */
|
|
115
|
-
constructor(elementRef, _cdr, _renderer, hostTabindex) {
|
|
116
|
-
this.elementRef = elementRef;
|
|
117
|
-
this._cdr = _cdr;
|
|
118
|
-
this._renderer = _renderer;
|
|
119
|
-
this.hostTabindex = hostTabindex;
|
|
54
|
+
constructor() {
|
|
120
55
|
/** Id of the Avatar. */
|
|
121
|
-
this.id =
|
|
56
|
+
this.id = input('fd-avatar-' + ++avatarUniqueId, ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
122
57
|
/** Aria-label for Avatar. */
|
|
123
|
-
this.ariaLabel = null;
|
|
58
|
+
this.ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
124
59
|
/** Aria-Labelledby for element describing Avatar. */
|
|
125
|
-
this.ariaLabelledby = null;
|
|
60
|
+
this.ariaLabelledby = input(null, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
|
|
61
|
+
/** Localized text for label */
|
|
62
|
+
this.label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
126
63
|
/** The size of the Avatar. Options include: *xs*, *s*, *m*, *l* and *xl*. */
|
|
127
|
-
this.size = 'l';
|
|
64
|
+
this.size = input('l', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
128
65
|
/** Font family of the icon. */
|
|
129
|
-
this.font = FD_DEFAULT_ICON_FONT_FAMILY;
|
|
66
|
+
this.font = input(FD_DEFAULT_ICON_FONT_FAMILY, ...(ngDevMode ? [{ debugName: "font" }] : []));
|
|
130
67
|
/** The glyph name. */
|
|
131
|
-
this.glyph = null;
|
|
68
|
+
this.glyph = input(null, ...(ngDevMode ? [{ debugName: "glyph" }] : []));
|
|
132
69
|
/** The glyph name for zoom icon. */
|
|
133
|
-
this.zoomGlyph = null;
|
|
70
|
+
this.zoomGlyph = input(null, ...(ngDevMode ? [{ debugName: "zoomGlyph" }] : []));
|
|
134
71
|
/** Whether to apply a circle style to the Avatar. */
|
|
135
|
-
this.circle = false;
|
|
72
|
+
this.circle = input(false, { ...(ngDevMode ? { debugName: "circle" } : {}), transform: booleanAttribute });
|
|
136
73
|
/** Whether the Avatar should be interactive. */
|
|
137
|
-
this.interactive = false;
|
|
74
|
+
this.interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : {}), transform: booleanAttribute });
|
|
138
75
|
/** Whether to apply a transparent style to the Avatar. */
|
|
139
|
-
this.transparent = false;
|
|
76
|
+
this.transparent = input(false, { ...(ngDevMode ? { debugName: "transparent" } : {}), transform: booleanAttribute });
|
|
140
77
|
/** Whether to apply background size contain style to the Avatar */
|
|
141
|
-
this.contain = false;
|
|
78
|
+
this.contain = input(false, { ...(ngDevMode ? { debugName: "contain" } : {}), transform: booleanAttribute });
|
|
142
79
|
/** Whether to apply a placeholder background style to the Avatar. */
|
|
143
|
-
this.placeholder = false;
|
|
80
|
+
this.placeholder = input(false, { ...(ngDevMode ? { debugName: "placeholder" } : {}), transform: booleanAttribute });
|
|
144
81
|
/** Whether to apply a tile background style to the Avatar. */
|
|
145
|
-
this.tile = false;
|
|
82
|
+
this.tile = input(false, { ...(ngDevMode ? { debugName: "tile" } : {}), transform: booleanAttribute });
|
|
146
83
|
/** Whether to apply a border to the Avatar. */
|
|
147
|
-
this.border = false;
|
|
84
|
+
this.border = input(false, { ...(ngDevMode ? { debugName: "border" } : {}), transform: booleanAttribute });
|
|
148
85
|
/** A number from 1 to 10 representing the background color of the Avatar.
|
|
149
86
|
* This property will override the colorIndication property.
|
|
150
87
|
*/
|
|
151
|
-
this.colorAccent = null;
|
|
88
|
+
this.colorAccent = input(null, ...(ngDevMode ? [{ debugName: "colorAccent" }] : []));
|
|
152
89
|
/** A number from 1 to 10 representing the background color of the Avatar using the Indication Colors. */
|
|
153
|
-
this.colorIndication = null;
|
|
90
|
+
this.colorIndication = input(null, ...(ngDevMode ? [{ debugName: "colorIndication" }] : []));
|
|
154
91
|
/** Whether to apply random background color to the Avatar. */
|
|
155
|
-
this.random = false;
|
|
92
|
+
this.random = input(false, { ...(ngDevMode ? { debugName: "random" } : {}), transform: booleanAttribute });
|
|
156
93
|
/** Whether component should be focusable & clicable */
|
|
157
|
-
this.clickable = false;
|
|
94
|
+
this.clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : {}), transform: booleanAttribute });
|
|
95
|
+
/** Value state of the Avatar. */
|
|
96
|
+
this.valueState = input(null, ...(ngDevMode ? [{ debugName: "valueState" }] : []));
|
|
97
|
+
/** Background image resource: url or base64. */
|
|
98
|
+
this.image = input(null, ...(ngDevMode ? [{ debugName: "image" }] : []));
|
|
99
|
+
/** Backup options to use when image hasn't been loaded successfully.
|
|
100
|
+
* Options separated with "|" symbol.
|
|
101
|
+
* Possible options: content, alt, backup, default-icon
|
|
102
|
+
*/
|
|
103
|
+
this.alterIcon = input(null, ...(ngDevMode ? [{ debugName: "alterIcon" }] : []));
|
|
104
|
+
/** Backup image to load when image hasn't been loaded successfully.
|
|
105
|
+
* Only applicable when using alterIcon input property.
|
|
106
|
+
*/
|
|
107
|
+
this.backupImage = input(null, ...(ngDevMode ? [{ debugName: "backupImage" }] : []));
|
|
158
108
|
/** Event emitted when avatar clicked. Only fires if clickable input property set to true. */
|
|
159
|
-
this.avatarClicked =
|
|
109
|
+
this.avatarClicked = output();
|
|
160
110
|
/** Event emitted when zoom icon clicked. Only fires if zoomGlyph input property is set. */
|
|
161
|
-
this.zoomGlyphClicked =
|
|
111
|
+
this.zoomGlyphClicked = output();
|
|
162
112
|
/** @hidden */
|
|
163
|
-
this.
|
|
164
|
-
/** @hidden */
|
|
165
|
-
this.
|
|
166
|
-
/** @hidden */
|
|
167
|
-
this.
|
|
113
|
+
this.content = viewChild('content', ...(ngDevMode ? [{ debugName: "content" }] : []));
|
|
114
|
+
/** @hidden Internal state for background image */
|
|
115
|
+
this.bgImage = signal(null, ...(ngDevMode ? [{ debugName: "bgImage" }] : []));
|
|
116
|
+
/** @hidden Internal state for computed abbreviation */
|
|
117
|
+
this.abbreviate = signal(null, ...(ngDevMode ? [{ debugName: "abbreviate" }] : []));
|
|
118
|
+
/** @hidden Computed tabindex based on clickable state */
|
|
119
|
+
this.tabindex = computed(() => {
|
|
120
|
+
if (this._hostTabindex != null) {
|
|
121
|
+
return this._hostTabindex;
|
|
122
|
+
}
|
|
123
|
+
return this.clickable() ? 0 : null;
|
|
124
|
+
}, ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
|
|
125
|
+
/** @hidden Computed role attribute */
|
|
126
|
+
this.role = computed(() => (this.zoomGlyph() || this.clickable() ? 'button' : 'img'), ...(ngDevMode ? [{ debugName: "role" }] : []));
|
|
127
|
+
/** @hidden If a default placeholder should be displayed */
|
|
128
|
+
this.showDefault = computed(() =>
|
|
129
|
+
// Show default if explicitly requested OR if no content is available
|
|
130
|
+
this._shouldShowDefaultIcon() ||
|
|
131
|
+
(!this.abbreviate() && !this._imageLoaded() && !this.glyph() && !this.image()), ...(ngDevMode ? [{ debugName: "showDefault" }] : []));
|
|
132
|
+
/** @hidden Computed CSS classes */
|
|
133
|
+
this.cssClass = computed(() => {
|
|
134
|
+
const colorAccentValue = this.colorAccent();
|
|
135
|
+
const randomValue = this.random();
|
|
136
|
+
const colorIndicationValue = this.colorIndication();
|
|
137
|
+
return [
|
|
138
|
+
'fd-avatar',
|
|
139
|
+
this.size() ? `fd-avatar--${this.size()}` : '',
|
|
140
|
+
colorAccentValue && !randomValue ? `fd-avatar--accent-color-${colorAccentValue}` : '',
|
|
141
|
+
randomValue ? `fd-avatar--accent-color-${this._randomColorAccent()}` : '',
|
|
142
|
+
colorIndicationValue && colorAccentValue === null && !randomValue
|
|
143
|
+
? `fd-avatar--indication-color-${colorIndicationValue}`
|
|
144
|
+
: '',
|
|
145
|
+
this.circle() ? 'fd-avatar--circle' : '',
|
|
146
|
+
this.border() ? 'fd-avatar--border' : '',
|
|
147
|
+
this.interactive() ? 'fd-avatar--interactive' : '',
|
|
148
|
+
this.transparent() ? 'fd-avatar--transparent' : '',
|
|
149
|
+
this.contain() ? 'fd-avatar--background-contain' : '',
|
|
150
|
+
this.placeholder() ? 'fd-avatar--placeholder' : '',
|
|
151
|
+
this.tile() ? 'fd-avatar--tile' : ''
|
|
152
|
+
]
|
|
153
|
+
.filter(Boolean)
|
|
154
|
+
.join(' ');
|
|
155
|
+
}, ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
156
|
+
/** @hidden Internal state tracking if image loaded successfully */
|
|
157
|
+
this._imageLoaded = signal(false, ...(ngDevMode ? [{ debugName: "_imageLoaded" }] : []));
|
|
158
|
+
/** @hidden Explicitly track when to show default icon (for failed images with no fallback) */
|
|
159
|
+
this._shouldShowDefaultIcon = signal(false, ...(ngDevMode ? [{ debugName: "_shouldShowDefaultIcon" }] : []));
|
|
160
|
+
/** @hidden Stored random color accent to prevent regeneration */
|
|
161
|
+
this._randomColorAccent = signal(getRandomColorAccent(), ...(ngDevMode ? [{ debugName: "_randomColorAccent" }] : []));
|
|
168
162
|
/** @hidden */
|
|
169
|
-
this.
|
|
163
|
+
this._elementRef = inject(ElementRef);
|
|
170
164
|
/** @hidden */
|
|
171
|
-
this.
|
|
165
|
+
this._renderer = inject(Renderer2);
|
|
172
166
|
/** @hidden */
|
|
173
|
-
this.
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
this.
|
|
197
|
-
|
|
167
|
+
this._hostTabindex = inject(new HostAttributeToken('tabindex'), { optional: true });
|
|
168
|
+
// Effect to handle image changes
|
|
169
|
+
effect(() => {
|
|
170
|
+
const imageValue = this.image();
|
|
171
|
+
if (imageValue) {
|
|
172
|
+
this._imageLoaded.set(false);
|
|
173
|
+
this._shouldShowDefaultIcon.set(false); // Reset default icon flag
|
|
174
|
+
this._verifyImageUrl(imageValue, this._onErrorCallback.bind(this));
|
|
175
|
+
}
|
|
176
|
+
else {
|
|
177
|
+
this._imageLoaded.set(false);
|
|
178
|
+
this._shouldShowDefaultIcon.set(false);
|
|
179
|
+
this._setBgImage(null);
|
|
180
|
+
}
|
|
181
|
+
});
|
|
182
|
+
// Effect to handle label changes and compute abbreviation
|
|
183
|
+
effect(() => {
|
|
184
|
+
const labelValue = this.label();
|
|
185
|
+
// Only generate abbreviation from label if there's no successful image
|
|
186
|
+
if (labelValue && !this._imageLoaded()) {
|
|
187
|
+
const abbreviation = this._generateAbbreviation(labelValue);
|
|
188
|
+
this.abbreviate.set(abbreviation);
|
|
189
|
+
}
|
|
190
|
+
else if (!labelValue && !this._imageLoaded()) {
|
|
191
|
+
// Clear abbreviation when label is removed (if no image)
|
|
192
|
+
this.abbreviate.set(null);
|
|
193
|
+
}
|
|
194
|
+
});
|
|
195
|
+
// Effect to regenerate random color when random property changes
|
|
196
|
+
effect(() => {
|
|
197
|
+
if (this.random()) {
|
|
198
|
+
this._randomColorAccent.set(getRandomColorAccent());
|
|
199
|
+
}
|
|
200
|
+
});
|
|
201
|
+
// Effect to apply background image to DOM
|
|
202
|
+
effect(() => {
|
|
203
|
+
const bgImage = this.bgImage();
|
|
204
|
+
this._renderer.setStyle(this._elementRef.nativeElement, 'background-image', bgImage);
|
|
205
|
+
});
|
|
198
206
|
}
|
|
199
207
|
/** @hidden */
|
|
200
|
-
|
|
201
|
-
if (!this.clickable) {
|
|
208
|
+
onClick(event) {
|
|
209
|
+
if (!this.clickable()) {
|
|
202
210
|
return;
|
|
203
211
|
}
|
|
204
212
|
event.preventDefault();
|
|
205
213
|
this.avatarClicked.emit(event);
|
|
206
|
-
if (this.zoomGlyph) {
|
|
207
|
-
this.zoomGlyphClicked.
|
|
214
|
+
if (this.zoomGlyph()) {
|
|
215
|
+
this.zoomGlyphClicked.emit();
|
|
208
216
|
}
|
|
209
217
|
}
|
|
210
218
|
/** @hidden */
|
|
211
|
-
ngOnInit() {
|
|
212
|
-
this.buildComponentCssClass();
|
|
213
|
-
}
|
|
214
|
-
/** @hidden */
|
|
215
|
-
ngOnChanges() {
|
|
216
|
-
if (this.zoomGlyph) {
|
|
217
|
-
this.clickable = true;
|
|
218
|
-
}
|
|
219
|
-
this.buildComponentCssClass();
|
|
220
|
-
}
|
|
221
|
-
/** @hidden */
|
|
222
219
|
zoomClicked(event) {
|
|
223
220
|
event.preventDefault();
|
|
224
|
-
this.
|
|
225
|
-
this.zoomGlyphClicked.
|
|
226
|
-
}
|
|
227
|
-
/** @hidden Get an abbreviate from the label or return null if not fit requirements */
|
|
228
|
-
_getAbbreviate(label) {
|
|
229
|
-
if (!label || this._image) {
|
|
230
|
-
return null;
|
|
231
|
-
}
|
|
232
|
-
return this._generateAbbreviation(label);
|
|
221
|
+
this._elementRef.nativeElement.focus();
|
|
222
|
+
this.zoomGlyphClicked.emit();
|
|
233
223
|
}
|
|
234
224
|
/** @hidden Get the abbreviation string */
|
|
235
225
|
_generateAbbreviation(label) {
|
|
@@ -237,105 +227,101 @@ class AvatarComponent {
|
|
|
237
227
|
return null;
|
|
238
228
|
}
|
|
239
229
|
const maxLettersCount = 3;
|
|
240
|
-
const
|
|
241
|
-
|
|
242
|
-
if (firstLetters.length > maxLettersCount || !abbreviate.match(ANY_LANGUAGE_LETTERS_REGEX)) {
|
|
230
|
+
const words = label.split(' ').filter((word) => word.length > 0);
|
|
231
|
+
if (words.length === 0 || words.length > maxLettersCount) {
|
|
243
232
|
return null;
|
|
244
233
|
}
|
|
245
|
-
|
|
234
|
+
const abbreviate = words.map((word) => word[0]).join('');
|
|
235
|
+
return abbreviate.match(ANY_LANGUAGE_LETTERS_REGEX) ? abbreviate : null;
|
|
246
236
|
}
|
|
247
237
|
/** @hidden */
|
|
248
|
-
|
|
249
|
-
this.
|
|
250
|
-
if (value) {
|
|
251
|
-
this._verifyImageUrl(value, () => { }, this._onErrorCallback);
|
|
252
|
-
}
|
|
253
|
-
else {
|
|
254
|
-
this.bgImage = null;
|
|
255
|
-
}
|
|
238
|
+
_setBgImage(srcValue) {
|
|
239
|
+
this.bgImage.set(srcValue ? `url(${srcValue})` : null);
|
|
256
240
|
}
|
|
257
241
|
/** @hidden */
|
|
258
|
-
_verifyImageUrl(srcValue,
|
|
259
|
-
|
|
260
|
-
if
|
|
242
|
+
_verifyImageUrl(srcValue, onErrorCallback) {
|
|
243
|
+
const newBgImage = `url(${srcValue})`;
|
|
244
|
+
// Don't load the same image if it's already loaded successfully
|
|
245
|
+
if (this.bgImage() === newBgImage && this._imageLoaded()) {
|
|
261
246
|
return;
|
|
262
247
|
}
|
|
263
248
|
const img = new Image();
|
|
264
|
-
img.onload =
|
|
265
|
-
|
|
249
|
+
img.onload = () => {
|
|
250
|
+
// Only set background if image loads successfully
|
|
251
|
+
this._setBgImage(srcValue);
|
|
252
|
+
this._imageLoaded.set(true);
|
|
253
|
+
};
|
|
254
|
+
img.onerror = onErrorCallback;
|
|
266
255
|
img.src = srcValue;
|
|
267
|
-
this._assignBgImage(srcValue);
|
|
268
|
-
}
|
|
269
|
-
/** @hidden */
|
|
270
|
-
_assignBgImage(srcValue) {
|
|
271
|
-
this.bgImage = srcValue ? `url(${srcValue})` : null;
|
|
272
256
|
}
|
|
273
257
|
/** @hidden */
|
|
274
258
|
_onErrorCallback() {
|
|
275
|
-
|
|
259
|
+
const alterIconValue = this.alterIcon();
|
|
260
|
+
if (!alterIconValue) {
|
|
276
261
|
this._showDefaultIcon();
|
|
277
262
|
return;
|
|
278
263
|
}
|
|
279
|
-
const options =
|
|
280
|
-
for (
|
|
281
|
-
const option = options[i];
|
|
264
|
+
const options = alterIconValue.split('|');
|
|
265
|
+
for (const option of options) {
|
|
282
266
|
if (option === ALTER_ICON_OPTIONS.CONTENT) {
|
|
283
|
-
const contentValue = this.
|
|
284
|
-
if (contentValue) {
|
|
285
|
-
|
|
286
|
-
break;
|
|
267
|
+
const contentValue = this.content()?.nativeElement.textContent;
|
|
268
|
+
if (this._trySetAbbreviation(contentValue)) {
|
|
269
|
+
return;
|
|
287
270
|
}
|
|
288
|
-
continue;
|
|
289
271
|
}
|
|
290
|
-
if (option === ALTER_ICON_OPTIONS.ALT) {
|
|
291
|
-
const altValue = this.
|
|
292
|
-
if (altValue) {
|
|
293
|
-
|
|
294
|
-
break;
|
|
272
|
+
else if (option === ALTER_ICON_OPTIONS.ALT) {
|
|
273
|
+
const altValue = this._elementRef.nativeElement.getAttribute('alt');
|
|
274
|
+
if (this._trySetAbbreviation(altValue)) {
|
|
275
|
+
return;
|
|
295
276
|
}
|
|
296
|
-
continue;
|
|
297
277
|
}
|
|
298
|
-
if (option === ALTER_ICON_OPTIONS.BACKUP) {
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
this._assignBgImage(this._backupImage);
|
|
304
|
-
}, () => {
|
|
305
|
-
this._showDefaultIcon();
|
|
306
|
-
});
|
|
307
|
-
break;
|
|
278
|
+
else if (option === ALTER_ICON_OPTIONS.BACKUP) {
|
|
279
|
+
const backupImageValue = this.backupImage();
|
|
280
|
+
if (backupImageValue) {
|
|
281
|
+
this._verifyImageUrl(backupImageValue, () => this._showDefaultIcon());
|
|
282
|
+
return;
|
|
308
283
|
}
|
|
309
|
-
continue;
|
|
310
284
|
}
|
|
311
|
-
if (option === ALTER_ICON_OPTIONS.DEFAULT_ICON) {
|
|
285
|
+
else if (option === ALTER_ICON_OPTIONS.DEFAULT_ICON) {
|
|
312
286
|
this._showDefaultIcon();
|
|
313
|
-
|
|
287
|
+
return;
|
|
314
288
|
}
|
|
315
|
-
this._showDefaultIcon();
|
|
316
289
|
}
|
|
290
|
+
// Fallback if no valid option matched
|
|
291
|
+
this._showDefaultIcon();
|
|
292
|
+
}
|
|
293
|
+
/** @hidden Helper to try setting abbreviation from text */
|
|
294
|
+
_trySetAbbreviation(text) {
|
|
295
|
+
if (!text) {
|
|
296
|
+
return false;
|
|
297
|
+
}
|
|
298
|
+
const trimmedText = text.trim();
|
|
299
|
+
if (!trimmedText) {
|
|
300
|
+
return false;
|
|
301
|
+
}
|
|
302
|
+
const abbreviation = this._generateAbbreviation(trimmedText);
|
|
303
|
+
if (abbreviation) {
|
|
304
|
+
this.abbreviate.set(abbreviation);
|
|
305
|
+
this._setBgImage(null); // Clear background image when using abbreviation
|
|
306
|
+
return true;
|
|
307
|
+
}
|
|
308
|
+
return false;
|
|
317
309
|
}
|
|
318
310
|
/** @hidden */
|
|
319
311
|
_showDefaultIcon() {
|
|
320
|
-
this.abbreviate
|
|
321
|
-
this.
|
|
322
|
-
this.
|
|
323
|
-
this.
|
|
312
|
+
this.abbreviate.set(null);
|
|
313
|
+
this._setBgImage(null);
|
|
314
|
+
this._imageLoaded.set(false);
|
|
315
|
+
this._shouldShowDefaultIcon.set(true);
|
|
324
316
|
}
|
|
325
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AvatarComponent, deps: [
|
|
326
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AvatarComponent, isStandalone: true, selector: "fd-avatar", inputs: {
|
|
317
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
318
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AvatarComponent, isStandalone: true, selector: "fd-avatar", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, zoomGlyph: { classPropertyName: "zoomGlyph", publicName: "zoomGlyph", isSignal: true, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, contain: { classPropertyName: "contain", publicName: "contain", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, tile: { classPropertyName: "tile", publicName: "tile", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, colorAccent: { classPropertyName: "colorAccent", publicName: "colorAccent", isSignal: true, isRequired: false, transformFunction: null }, colorIndication: { classPropertyName: "colorIndication", publicName: "colorIndication", isSignal: true, isRequired: false, transformFunction: null }, random: { classPropertyName: "random", publicName: "random", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, valueState: { classPropertyName: "valueState", publicName: "valueState", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, alterIcon: { classPropertyName: "alterIcon", publicName: "alterIcon", isSignal: true, isRequired: false, transformFunction: null }, backupImage: { classPropertyName: "backupImage", publicName: "backupImage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { avatarClicked: "avatarClicked", zoomGlyphClicked: "zoomGlyphClicked" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)" }, properties: { "class": "cssClass()", "attr.tabindex": "tabindex()", "attr.id": "id()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "attr.alt": "ariaLabel()", "attr.role": "role()" } }, providers: [
|
|
327
319
|
{
|
|
328
320
|
provide: FD_AVATAR_COMPONENT,
|
|
329
321
|
useExisting: AvatarComponent
|
|
330
322
|
}
|
|
331
|
-
], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (abbreviate) {\n {{ abbreviate }}\n}\n@if (zoomGlyph || valueState) {\n <i\n role=\"presentation\"\n class=\"fd-avatar__zoom-icon\"\n [class]=\"valueState | fdAvatarIcon: zoomGlyph\"\n (mousedown)=\"zoomClicked($event)\"\n >\n </i>\n}\n@if (glyph || showDefault) {\n <fd-icon\n class=\"fd-avatar__icon\"\n role=\"presentation\"\n [font]=\"font\"\n [glyph]=\"glyph || 'person-placeholder'\"\n ></fd-icon>\n}\n<div #content [style.display]=\"'none'\">\n <ng-content></ng-content>\n</div>\n", styles: [".fd-avatar{--fdAvatarZoomIconPosition:0;background-color:var(--fdAvatarBackgroundColor);background-position:50%;background-repeat:no-repeat;background-size:var(--fdAvatarBackgroundSize);border:0;border:var(--fdAvatarBorderWidth,.0625rem) solid var(--fdAvatarBorderColor);border-radius:var(--fdAvatarBorderRadius);-webkit-box-shadow:var(--fdAvatarBoxShadow);box-shadow:var(--fdAvatarBoxShadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdAvatarColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdAvatarFontSize);font-stretch:var(--fdAvatarFontStretch);font-weight:400;forced-color-adjust:none;height:var(--fdAvatarRatio);line-height:normal;margin-block:0;margin-inline:0;max-height:var(--fdAvatarRatio);max-width:var(--fdAvatarRatio);min-height:var(--fdAvatarRatio);min-width:var(--fdAvatarRatio);padding-block:0;padding-inline:0;position:relative;text-shadow:var(--fdAvatarTextShadow);vertical-align:middle;width:var(--fdAvatarRatio)}.fd-avatar:after,.fd-avatar:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-avatar.is-focus,.fd-avatar:focus{outline:none}.fd-avatar.is-focus:after,.fd-avatar:focus:after{border-color:var(--sapContent_FocusColor);border-radius:var(--fdAvatar_Focus_Outline_Radius);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset);pointer-events:none;position:absolute}.fd-avatar--interactive,.fd-avatar[role=button],.fd-avatar[tabindex=\"0\"]{cursor:pointer}.fd-avatar--interactive.is-hover,.fd-avatar--interactive:hover,.fd-avatar[role=button].is-hover,.fd-avatar[role=button]:hover,.fd-avatar[tabindex=\"0\"].is-hover,.fd-avatar[tabindex=\"0\"]:hover{--fdAvatarBorderColor:var(--fdAvatarBorderHoverColor,var(--sapAvatar_Hover_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarHoverBackgroundColor,var(--sapAvatar_6_Hover_Background))}.fd-avatar--interactive.is-disabled,.fd-avatar--interactive:disabled,.fd-avatar--interactive[aria-disabled=true],.fd-avatar[role=button].is-disabled,.fd-avatar[role=button]:disabled,.fd-avatar[role=button][aria-disabled=true],.fd-avatar[tabindex=\"0\"].is-disabled,.fd-avatar[tabindex=\"0\"]:disabled,.fd-avatar[tabindex=\"0\"][aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-avatar--interactive.is-active,.fd-avatar--interactive:active,.fd-avatar[role=button].is-active,.fd-avatar[role=button]:active,.fd-avatar[tabindex=\"0\"].is-active,.fd-avatar[tabindex=\"0\"]:active{--fdAvatarBorderColor:var(--fdAvatarBorderActiveColor,var(--sapButton_Active_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveColor,var(--sapButton_Active_Background));--fdAvatarColor:var(--fdAvatarActiveColor,var(--sapButton_Active_TextColor))}.fd-avatar--interactive.is-active.is-hover,.fd-avatar--interactive.is-active:hover,.fd-avatar--interactive:active.is-hover,.fd-avatar--interactive:active:hover,.fd-avatar[role=button].is-active.is-hover,.fd-avatar[role=button].is-active:hover,.fd-avatar[role=button]:active.is-hover,.fd-avatar[role=button]:active:hover,.fd-avatar[tabindex=\"0\"].is-active.is-hover,.fd-avatar[tabindex=\"0\"].is-active:hover,.fd-avatar[tabindex=\"0\"]:active.is-hover,.fd-avatar[tabindex=\"0\"]:active:hover{--fdAvatarBorderColor:var(--fdAvatarBorderActiveHoverColor,var(--sapButton_Selected_Hover_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveHoverColor,var(--sapButton_Selected_Hover_Background));--fdAvatarColor:var(--fdAvatarActiveHoverColor,var(--sapButton_Selected_TextColor))}.fd-avatar--interactive.is-toggled,.fd-avatar[role=button].is-toggled,.fd-avatar[tabindex=\"0\"].is-toggled{--fdAvatarBorderColor:var(--fdAvatarBorderActiveColor,var(--sapButton_Active_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveColor,var(--sapButton_Active_Background));--fdAvatarColor:var(--fdAvatarActiveColor,var(--sapButton_Active_TextColor))}.fd-avatar--interactive.is-toggled.is-hover,.fd-avatar--interactive.is-toggled:hover,.fd-avatar[role=button].is-toggled.is-hover,.fd-avatar[role=button].is-toggled:hover,.fd-avatar[tabindex=\"0\"].is-toggled.is-hover,.fd-avatar[tabindex=\"0\"].is-toggled:hover{--fdAvatarBorderColor:var(--fdAvatarBorderActiveHoverColor,var(--sapButton_Selected_Hover_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveHoverColor,var(--sapButton_Selected_Hover_Background));--fdAvatarColor:var(--fdAvatarActiveHoverColor,var(--sapButton_Selected_TextColor))}.fd-avatar--interactive.is-focus,.fd-avatar--interactive:focus,.fd-avatar[role=button].is-focus,.fd-avatar[role=button]:focus,.fd-avatar[tabindex=\"0\"].is-focus,.fd-avatar[tabindex=\"0\"]:focus{padding-block:.125rem;padding-inline:.125rem;z-index:5}.fd-avatar__zoom-icon{--fdAvatarZoomIconColor:var(--sapButton_Emphasized_TextColor);--fdAvatarZoomIconBorderColor:var(--sapButton_Emphasized_BorderColor);--fdAvatarZoomIconBackground:var(--sapButton_Emphasized_Background)}.fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:inherit;line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdAvatarZoomIconBackground);border:.0625rem solid var(--fdAvatarZoomIconBorderColor);border-radius:100%;color:var(--fdAvatarZoomIconColor);font-size:var(--fdAvatarZoomIconFontSize);height:var(--fdAvatarZoomIconDimensions);min-width:var(--fdAvatarZoomIconDimensions);position:absolute;width:var(--fdAvatarZoomIconDimensions);z-index:5}.fd-avatar__zoom-icon [class*=sap-icon] [class*=sap-icon],.fd-avatar__zoom-icon [class*=sap-icon][class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon] [class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon][class*=sap-icon]{bottom:var(--fdAvatarZoomIconPosition);right:var(--fdAvatarZoomIconPosition)}.fd-avatar__zoom-icon [class*=sap-icon] [class*=sap-icon][dir=rtl],.fd-avatar__zoom-icon [class*=sap-icon][class*=sap-icon][dir=rtl],.fd-avatar__zoom-icon[class*=sap-icon] [class*=sap-icon][dir=rtl],.fd-avatar__zoom-icon[class*=sap-icon][class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar__zoom-icon [class*=sap-icon] [class*=sap-icon],[dir=rtl] .fd-avatar__zoom-icon [class*=sap-icon][class*=sap-icon],[dir=rtl] .fd-avatar__zoom-icon[class*=sap-icon] [class*=sap-icon],[dir=rtl] .fd-avatar__zoom-icon[class*=sap-icon][class*=sap-icon]{left:var(--fdAvatarZoomIconPosition);right:auto}.fd-avatar__zoom-icon--positive{--fdAvatarZoomIconColor:var(--sapPositiveTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapSuccessBackground)}.fd-avatar__zoom-icon--caution{--fdAvatarZoomIconColor:var(--sapCriticalTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapWarningBackground)}.fd-avatar__zoom-icon--negative{--fdAvatarZoomIconColor:var(--sapNegativeTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapErrorBackground)}.fd-avatar__zoom-icon--information{--fdAvatarZoomIconColor:var(--sapInformativeTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapInformationBackground)}.fd-avatar__zoom-icon--indication-1{--fdAvatarZoomIconColor:var(--sapIndicationColor_1_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_1_Background)}.fd-avatar__zoom-icon--indication-2{--fdAvatarZoomIconColor:var(--sapIndicationColor_2_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_2_Background)}.fd-avatar__zoom-icon--indication-3{--fdAvatarZoomIconColor:var(--sapIndicationColor_3_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_3_Background)}.fd-avatar__zoom-icon--indication-4{--fdAvatarZoomIconColor:var(--sapIndicationColor_4_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_4_Background)}.fd-avatar__zoom-icon--indication-5{--fdAvatarZoomIconColor:var(--sapIndicationColor_5_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_5_Background)}.fd-avatar__zoom-icon--indication-6{--fdAvatarZoomIconColor:var(--sapIndicationColor_6_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_6_Background)}.fd-avatar__zoom-icon--indication-7{--fdAvatarZoomIconColor:var(--sapIndicationColor_7_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_7_Background)}.fd-avatar__zoom-icon--indication-8{--fdAvatarZoomIconColor:var(--sapIndicationColor_8_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_8_Background)}.fd-avatar__zoom-icon--indication-9{--fdAvatarZoomIconColor:var(--sapIndicationColor_9_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_9_Background)}.fd-avatar__zoom-icon--indication-10{--fdAvatarZoomIconColor:var(--sapIndicationColor_10_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_10_Background)}.fd-avatar__icon [class*=sap-icon],.fd-avatar__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:inherit;line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center}.fd-avatar--circle{--fdAvatarBorderRadius:100%}.fd-avatar--circle.is-focus,.fd-avatar--circle:focus{outline:none}.fd-avatar--circle.is-focus:after,.fd-avatar--circle:focus:after{border-color:var(--sapContent_FocusColor);border-radius:var(--fdAvatar_Focus_Outline_Radius_Circle);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset);pointer-events:none;position:absolute}.fd-avatar--background-contain{--fdAvatarBackgroundSize:contain}.fd-avatar--transparent{--fdAvatarBorderColor:var(--sapAvatar_Lite_BorderColor);--fdAvatarBackgroundColor:var(--sapAvatar_Lite_Background);--fdAvatarColor:var(--sapContent_IconColor);--fdAvatarBorderHoverColor:var(--sapContent_IconColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_Lite_Background)}.fd-avatar--tile{--fdAvatarBorderColor:var(--sapAvatar_Lite_BorderColor);--fdAvatarBackgroundColor:var(--sapTile_Background);--fdAvatarColor:var(--sapTile_IconColor);--fdAvatarBorderHoverColor:var(--sapTile_IconColor);--fdAvatarHoverBackgroundColor:var(--sapTile_Background)}.fd-avatar--placeholder{--fdAvatarBorderColor:var(--sapAvatar_Lite_BorderColor);--fdAvatarBackgroundColor:var(--sapContent_ImagePlaceholderBackground);--fdAvatarColor:var(--sapContent_ImagePlaceholderForegroundColor);--fdAvatarBorderHoverColor:var(--sapContent_ImagePlaceholderForegroundColor);--fdAvatarHoverBackgroundColor:var(--sapContent_ImagePlaceholderBackground)}.fd-avatar--thumbnail{--fdAvatarBorderColor:var(--fdAvatar_Thumbnail_BorderColor);--fdAvatarHoverBorderColor:var(--sapContent_IconColor);--fdAvatarBackgroundColor:var(--sapAvatar_Lite_Background);--fdAvatarHoverBackgroundColor:var(--sapAvatar_Lite_Background)}.fd-avatar--border{--fdAvatarBorderColor:var(--sapGroup_ContentBorderColor);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor)}.fd-avatar--overflow{cursor:pointer;--fdAvatarBorderWidth:var(--fdAvatar_Overflow_Border_Width);--fdAvatarBorderColor:var(--sapButton_BorderColor);--fdAvatarBackgroundColor:var(--sapButton_Background);--fdAvatarColor:var(--sapButton_TextColor);--fdAvatarHoverBackgroundColor:var(--sapButton_Hover_Background);--fdAvatarHoverBorderColor:var(--sapButton_Hover_BorderColor);--fdAvatarBorderActiveColor:var(--sapButton_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapButton_Active_Background);--fdAvatarActiveColor:var(--sapButton_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapButton_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapButton_Active_Background);--fdAvatarActiveHoverColor:var(--sapButton_Active_TextColor)}.fd-avatar--overflow.is-disabled,.fd-avatar--overflow:disabled,.fd-avatar--overflow[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-avatar--accent-color-1,.fd-avatar--accent-color-1.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_1_BorderColor);--fdAvatarColor:var(--sapAvatar_1_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_1_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_1_Hover_Background)}.fd-avatar--accent-color-2,.fd-avatar--accent-color-2.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_2_BorderColor);--fdAvatarColor:var(--sapAvatar_2_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_2_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_2_Hover_Background)}.fd-avatar--accent-color-3,.fd-avatar--accent-color-3.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_3_BorderColor);--fdAvatarColor:var(--sapAvatar_3_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_3_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_3_Hover_Background)}.fd-avatar--accent-color-4,.fd-avatar--accent-color-4.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_4_BorderColor);--fdAvatarColor:var(--sapAvatar_4_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_4_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_4_Hover_Background)}.fd-avatar--accent-color-5,.fd-avatar--accent-color-5.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_5_BorderColor);--fdAvatarColor:var(--sapAvatar_5_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_5_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_5_Hover_Background)}.fd-avatar--accent-color-6,.fd-avatar--accent-color-6.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_6_BorderColor);--fdAvatarColor:var(--sapAvatar_6_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_6_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_6_Hover_Background)}.fd-avatar--accent-color-7,.fd-avatar--accent-color-7.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_7_BorderColor);--fdAvatarColor:var(--sapAvatar_7_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_7_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_7_Hover_Background)}.fd-avatar--accent-color-8,.fd-avatar--accent-color-8.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_8_BorderColor);--fdAvatarColor:var(--sapAvatar_8_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_8_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_8_Hover_Background)}.fd-avatar--accent-color-9,.fd-avatar--accent-color-9.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_9_BorderColor);--fdAvatarColor:var(--sapAvatar_9_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_9_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_9_Hover_Background)}.fd-avatar--accent-color-10,.fd-avatar--accent-color-10.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_10_BorderColor);--fdAvatarColor:var(--sapAvatar_10_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_10_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_10_Hover_Background)}.fd-avatar--indication-color-1,.fd-avatar--indication-color-1.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_1_BorderColor);--fdAvatarColor:var(--sapIndicationColor_1_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_1_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_1_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_1_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_1_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_1_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_1_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_1_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_1_Active_TextColor)}.fd-avatar--indication-color-2,.fd-avatar--indication-color-2.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_2_BorderColor);--fdAvatarColor:var(--sapIndicationColor_2_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_2_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_2_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_2_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_2_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_2_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_2_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_2_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_2_Active_TextColor)}.fd-avatar--indication-color-3,.fd-avatar--indication-color-3.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_3_BorderColor);--fdAvatarColor:var(--sapIndicationColor_3_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_3_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_3_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_3_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_3_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_3_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_3_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_3_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_3_Active_TextColor)}.fd-avatar--indication-color-4,.fd-avatar--indication-color-4.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_4_BorderColor);--fdAvatarColor:var(--sapIndicationColor_4_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_4_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_4_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_4_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_4_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_4_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_4_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_4_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_4_Active_TextColor)}.fd-avatar--indication-color-5,.fd-avatar--indication-color-5.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_5_BorderColor);--fdAvatarColor:var(--sapIndicationColor_5_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_5_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_5_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_5_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_5_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_5_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_5_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_5_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_5_Active_TextColor)}.fd-avatar--indication-color-6,.fd-avatar--indication-color-6.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_6_BorderColor);--fdAvatarColor:var(--sapIndicationColor_6_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_6_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_6_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_6_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_6_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_6_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_6_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_6_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_6_Active_TextColor)}.fd-avatar--indication-color-7,.fd-avatar--indication-color-7.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_7_BorderColor);--fdAvatarColor:var(--sapIndicationColor_7_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_7_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_7_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_7_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_7_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_7_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_7_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_7_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_7_Active_TextColor)}.fd-avatar--indication-color-8,.fd-avatar--indication-color-8.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_8_BorderColor);--fdAvatarColor:var(--sapIndicationColor_8_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_8_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_8_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_8_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_8_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_8_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_8_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_8_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_8_Active_TextColor)}.fd-avatar--indication-color-9,.fd-avatar--indication-color-9.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_9_BorderColor);--fdAvatarColor:var(--sapIndicationColor_9_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_9_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_9_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_9_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_9_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_9_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_9_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_9_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_9_Active_TextColor)}.fd-avatar--indication-color-10,.fd-avatar--indication-color-10.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_10_BorderColor);--fdAvatarColor:var(--sapIndicationColor_10_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_10_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_10_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_10_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_10_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_10_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_10_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_10_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_10_Active_TextColor)}.fd-avatar--xs{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:2rem;--fdAvatarFontSize:1rem;--fdAvatarFontStretch:condensed}.fd-avatar--xs .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xs .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--s{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:3rem;--fdAvatarFontSize:1.125rem;--fdAvatarFontStretch:condensed}.fd-avatar--s .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--s .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--sm{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:3rem;--fdAvatarFontSize:1.125rem;--fdAvatarFontStretch:condensed}.fd-avatar--sm .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--sm .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--m{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:4rem;--fdAvatarFontSize:1.5rem;--fdAvatarFontStretch:normal}.fd-avatar--m .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--m .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--md{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:4rem;--fdAvatarFontSize:1.5rem;--fdAvatarFontStretch:normal}.fd-avatar--md .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--md .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--l{--fdAvatarZoomIconOffset:-.1875rem;--fdAvatarRatio:5rem;--fdAvatarFontSize:2.25rem;--fdAvatarFontStretch:normal}.fd-avatar--l .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--l .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.25rem;--fdAvatarZoomIconFontSize:.875rem}.fd-avatar--lg{--fdAvatarZoomIconOffset:-.1875rem;--fdAvatarRatio:5rem;--fdAvatarFontSize:2.25rem;--fdAvatarFontStretch:normal}.fd-avatar--lg .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--lg .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.25rem;--fdAvatarZoomIconFontSize:.875rem}.fd-avatar--xl{--fdAvatarZoomIconOffset:-.25rem;--fdAvatarRatio:7rem;--fdAvatarFontSize:3rem;--fdAvatarFontStretch:normal}.fd-avatar--xl .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xl .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.75rem;--fdAvatarZoomIconFontSize:1rem}.fd-avatar--accent-color-1.fd-avatar--shell,.fd-avatar--accent-color-10.fd-avatar--shell,.fd-avatar--accent-color-2.fd-avatar--shell,.fd-avatar--accent-color-3.fd-avatar--shell,.fd-avatar--accent-color-4.fd-avatar--shell,.fd-avatar--accent-color-5.fd-avatar--shell,.fd-avatar--accent-color-6.fd-avatar--shell,.fd-avatar--accent-color-7.fd-avatar--shell,.fd-avatar--accent-color-8.fd-avatar--shell,.fd-avatar--accent-color-9.fd-avatar--shell,.fd-avatar--indication-color-1.fd-avatar--shell,.fd-avatar--indication-color-10.fd-avatar--shell,.fd-avatar--indication-color-2.fd-avatar--shell,.fd-avatar--indication-color-3.fd-avatar--shell,.fd-avatar--indication-color-4.fd-avatar--shell,.fd-avatar--indication-color-5.fd-avatar--shell,.fd-avatar--indication-color-6.fd-avatar--shell,.fd-avatar--indication-color-7.fd-avatar--shell,.fd-avatar--indication-color-8.fd-avatar--shell,.fd-avatar--indication-color-9.fd-avatar--shell{border:.0625rem solid var(--sapShell_InteractiveBorderColor)}.fd-avatar--l,.fd-avatar--lg,.fd-avatar--m,.fd-avatar--md,.fd-avatar--s,.fd-avatar--sm,.fd-avatar--xl,.fd-avatar--xs{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-avatar--l:not(.fd-avatar--circle),.fd-avatar--lg:not(.fd-avatar--circle),.fd-avatar--m:not(.fd-avatar--circle),.fd-avatar--md:not(.fd-avatar--circle),.fd-avatar--s:not(.fd-avatar--circle),.fd-avatar--sm:not(.fd-avatar--circle),.fd-avatar--xl:not(.fd-avatar--circle),.fd-avatar--xs:not(.fd-avatar--circle){--fdAvatarZoomIconPosition:var(--fdAvatarZoomIconOffset)}.fd-avatar.fd-avatar--xs,.fd-avatar.fd-avatar--s,.fd-avatar.fd-avatar--sm{--fdAvatarFontStretch: normal}\n/*! Bundled license information:\n\nfundamental-styles/dist/avatar.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "pipe", type: AvatarIconPipe, name: "fdAvatarIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
323
|
+
], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (abbreviate()) {\n {{ abbreviate() }}\n}\n@if (zoomGlyph() || valueState()) {\n <i\n role=\"presentation\"\n class=\"fd-avatar__zoom-icon\"\n [class]=\"valueState() | fdAvatarIcon: zoomGlyph()\"\n (mousedown)=\"zoomClicked($event)\"\n >\n </i>\n}\n@if (glyph() || showDefault()) {\n <fd-icon\n class=\"fd-avatar__icon\"\n role=\"presentation\"\n [font]=\"font()\"\n [glyph]=\"glyph() || 'person-placeholder'\"\n ></fd-icon>\n}\n<div #content [style.display]=\"'none'\">\n <ng-content></ng-content>\n</div>\n", styles: [".fd-avatar{--fdAvatarZoomIconPosition:0;background-color:var(--fdAvatarBackgroundColor);background-position:50%;background-repeat:no-repeat;background-size:var(--fdAvatarBackgroundSize);border:0;border:var(--fdAvatarBorderWidth,.0625rem) solid var(--fdAvatarBorderColor);border-radius:var(--fdAvatarBorderRadius);-webkit-box-shadow:var(--fdAvatarBoxShadow);box-shadow:var(--fdAvatarBoxShadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdAvatarColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdAvatarFontSize);font-stretch:var(--fdAvatarFontStretch);font-weight:400;forced-color-adjust:none;height:var(--fdAvatarRatio);line-height:normal;margin-block:0;margin-inline:0;max-height:var(--fdAvatarRatio);max-width:var(--fdAvatarRatio);min-height:var(--fdAvatarRatio);min-width:var(--fdAvatarRatio);padding-block:0;padding-inline:0;position:relative;text-shadow:var(--fdAvatarTextShadow);vertical-align:middle;width:var(--fdAvatarRatio)}.fd-avatar:after,.fd-avatar:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-avatar.is-focus,.fd-avatar:focus{outline:none}.fd-avatar.is-focus:after,.fd-avatar:focus:after{border-color:var(--sapContent_FocusColor);border-radius:var(--fdAvatar_Focus_Outline_Radius);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset);pointer-events:none;position:absolute}.fd-avatar--interactive,.fd-avatar[role=button],.fd-avatar[tabindex=\"0\"]{cursor:pointer}.fd-avatar--interactive.is-hover,.fd-avatar--interactive:hover,.fd-avatar[role=button].is-hover,.fd-avatar[role=button]:hover,.fd-avatar[tabindex=\"0\"].is-hover,.fd-avatar[tabindex=\"0\"]:hover{--fdAvatarBorderColor:var(--fdAvatarBorderHoverColor,var(--sapAvatar_Hover_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarHoverBackgroundColor,var(--sapAvatar_6_Hover_Background))}.fd-avatar--interactive.is-disabled,.fd-avatar--interactive:disabled,.fd-avatar--interactive[aria-disabled=true],.fd-avatar[role=button].is-disabled,.fd-avatar[role=button]:disabled,.fd-avatar[role=button][aria-disabled=true],.fd-avatar[tabindex=\"0\"].is-disabled,.fd-avatar[tabindex=\"0\"]:disabled,.fd-avatar[tabindex=\"0\"][aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-avatar--interactive.is-active,.fd-avatar--interactive:active,.fd-avatar[role=button].is-active,.fd-avatar[role=button]:active,.fd-avatar[tabindex=\"0\"].is-active,.fd-avatar[tabindex=\"0\"]:active{--fdAvatarBorderColor:var(--fdAvatarBorderActiveColor,var(--sapButton_Active_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveColor,var(--sapButton_Active_Background));--fdAvatarColor:var(--fdAvatarActiveColor,var(--sapButton_Active_TextColor))}.fd-avatar--interactive.is-active.is-hover,.fd-avatar--interactive.is-active:hover,.fd-avatar--interactive:active.is-hover,.fd-avatar--interactive:active:hover,.fd-avatar[role=button].is-active.is-hover,.fd-avatar[role=button].is-active:hover,.fd-avatar[role=button]:active.is-hover,.fd-avatar[role=button]:active:hover,.fd-avatar[tabindex=\"0\"].is-active.is-hover,.fd-avatar[tabindex=\"0\"].is-active:hover,.fd-avatar[tabindex=\"0\"]:active.is-hover,.fd-avatar[tabindex=\"0\"]:active:hover{--fdAvatarBorderColor:var(--fdAvatarBorderActiveHoverColor,var(--sapButton_Selected_Hover_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveHoverColor,var(--sapButton_Selected_Hover_Background));--fdAvatarColor:var(--fdAvatarActiveHoverColor,var(--sapButton_Selected_TextColor))}.fd-avatar--interactive.is-toggled,.fd-avatar[role=button].is-toggled,.fd-avatar[tabindex=\"0\"].is-toggled{--fdAvatarBorderColor:var(--fdAvatarBorderActiveColor,var(--sapButton_Active_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveColor,var(--sapButton_Active_Background));--fdAvatarColor:var(--fdAvatarActiveColor,var(--sapButton_Active_TextColor))}.fd-avatar--interactive.is-toggled.is-hover,.fd-avatar--interactive.is-toggled:hover,.fd-avatar[role=button].is-toggled.is-hover,.fd-avatar[role=button].is-toggled:hover,.fd-avatar[tabindex=\"0\"].is-toggled.is-hover,.fd-avatar[tabindex=\"0\"].is-toggled:hover{--fdAvatarBorderColor:var(--fdAvatarBorderActiveHoverColor,var(--sapButton_Selected_Hover_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveHoverColor,var(--sapButton_Selected_Hover_Background));--fdAvatarColor:var(--fdAvatarActiveHoverColor,var(--sapButton_Selected_TextColor))}.fd-avatar--interactive.is-focus,.fd-avatar--interactive:focus,.fd-avatar[role=button].is-focus,.fd-avatar[role=button]:focus,.fd-avatar[tabindex=\"0\"].is-focus,.fd-avatar[tabindex=\"0\"]:focus{padding-block:.125rem;padding-inline:.125rem;z-index:5}.fd-avatar__zoom-icon{--fdAvatarZoomIconColor:var(--sapButton_Emphasized_TextColor);--fdAvatarZoomIconBorderColor:var(--sapButton_Emphasized_BorderColor);--fdAvatarZoomIconBackground:var(--sapButton_Emphasized_Background)}.fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:inherit;line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdAvatarZoomIconBackground);border:.0625rem solid var(--fdAvatarZoomIconBorderColor);border-radius:100%;color:var(--fdAvatarZoomIconColor);font-size:var(--fdAvatarZoomIconFontSize);height:var(--fdAvatarZoomIconDimensions);min-width:var(--fdAvatarZoomIconDimensions);position:absolute;width:var(--fdAvatarZoomIconDimensions);z-index:5}.fd-avatar__zoom-icon [class*=sap-icon] [class*=sap-icon],.fd-avatar__zoom-icon [class*=sap-icon][class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon] [class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon][class*=sap-icon]{bottom:var(--fdAvatarZoomIconPosition);right:var(--fdAvatarZoomIconPosition)}.fd-avatar__zoom-icon [class*=sap-icon] [class*=sap-icon][dir=rtl],.fd-avatar__zoom-icon [class*=sap-icon][class*=sap-icon][dir=rtl],.fd-avatar__zoom-icon[class*=sap-icon] [class*=sap-icon][dir=rtl],.fd-avatar__zoom-icon[class*=sap-icon][class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar__zoom-icon [class*=sap-icon] [class*=sap-icon],[dir=rtl] .fd-avatar__zoom-icon [class*=sap-icon][class*=sap-icon],[dir=rtl] .fd-avatar__zoom-icon[class*=sap-icon] [class*=sap-icon],[dir=rtl] .fd-avatar__zoom-icon[class*=sap-icon][class*=sap-icon]{left:var(--fdAvatarZoomIconPosition);right:auto}.fd-avatar__zoom-icon--positive{--fdAvatarZoomIconColor:var(--sapPositiveTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapSuccessBackground)}.fd-avatar__zoom-icon--caution{--fdAvatarZoomIconColor:var(--sapCriticalTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapWarningBackground)}.fd-avatar__zoom-icon--negative{--fdAvatarZoomIconColor:var(--sapNegativeTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapErrorBackground)}.fd-avatar__zoom-icon--information{--fdAvatarZoomIconColor:var(--sapInformativeTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapInformationBackground)}.fd-avatar__zoom-icon--indication-1{--fdAvatarZoomIconColor:var(--sapIndicationColor_1_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_1_Background)}.fd-avatar__zoom-icon--indication-2{--fdAvatarZoomIconColor:var(--sapIndicationColor_2_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_2_Background)}.fd-avatar__zoom-icon--indication-3{--fdAvatarZoomIconColor:var(--sapIndicationColor_3_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_3_Background)}.fd-avatar__zoom-icon--indication-4{--fdAvatarZoomIconColor:var(--sapIndicationColor_4_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_4_Background)}.fd-avatar__zoom-icon--indication-5{--fdAvatarZoomIconColor:var(--sapIndicationColor_5_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_5_Background)}.fd-avatar__zoom-icon--indication-6{--fdAvatarZoomIconColor:var(--sapIndicationColor_6_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_6_Background)}.fd-avatar__zoom-icon--indication-7{--fdAvatarZoomIconColor:var(--sapIndicationColor_7_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_7_Background)}.fd-avatar__zoom-icon--indication-8{--fdAvatarZoomIconColor:var(--sapIndicationColor_8_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_8_Background)}.fd-avatar__zoom-icon--indication-9{--fdAvatarZoomIconColor:var(--sapIndicationColor_9_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_9_Background)}.fd-avatar__zoom-icon--indication-10{--fdAvatarZoomIconColor:var(--sapIndicationColor_10_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_10_Background)}.fd-avatar__icon [class*=sap-icon],.fd-avatar__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:inherit;line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center}.fd-avatar--circle{--fdAvatarBorderRadius:100%}.fd-avatar--circle.is-focus,.fd-avatar--circle:focus{outline:none}.fd-avatar--circle.is-focus:after,.fd-avatar--circle:focus:after{border-color:var(--sapContent_FocusColor);border-radius:var(--fdAvatar_Focus_Outline_Radius_Circle);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset);pointer-events:none;position:absolute}.fd-avatar--background-contain{--fdAvatarBackgroundSize:contain}.fd-avatar--transparent{--fdAvatarBorderColor:var(--sapAvatar_Lite_BorderColor);--fdAvatarBackgroundColor:var(--sapAvatar_Lite_Background);--fdAvatarColor:var(--sapContent_IconColor);--fdAvatarBorderHoverColor:var(--sapContent_IconColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_Lite_Background)}.fd-avatar--tile{--fdAvatarBorderColor:var(--sapAvatar_Lite_BorderColor);--fdAvatarBackgroundColor:var(--sapTile_Background);--fdAvatarColor:var(--sapTile_IconColor);--fdAvatarBorderHoverColor:var(--sapTile_IconColor);--fdAvatarHoverBackgroundColor:var(--sapTile_Background)}.fd-avatar--placeholder{--fdAvatarBorderColor:var(--sapAvatar_Lite_BorderColor);--fdAvatarBackgroundColor:var(--sapContent_ImagePlaceholderBackground);--fdAvatarColor:var(--sapContent_ImagePlaceholderForegroundColor);--fdAvatarBorderHoverColor:var(--sapContent_ImagePlaceholderForegroundColor);--fdAvatarHoverBackgroundColor:var(--sapContent_ImagePlaceholderBackground)}.fd-avatar--thumbnail{--fdAvatarBorderColor:var(--fdAvatar_Thumbnail_BorderColor);--fdAvatarHoverBorderColor:var(--sapContent_IconColor);--fdAvatarBackgroundColor:var(--sapAvatar_Lite_Background);--fdAvatarHoverBackgroundColor:var(--sapAvatar_Lite_Background)}.fd-avatar--border{--fdAvatarBorderColor:var(--sapGroup_ContentBorderColor);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor)}.fd-avatar--overflow{cursor:pointer;--fdAvatarBorderWidth:var(--fdAvatar_Overflow_Border_Width);--fdAvatarBorderColor:var(--sapButton_BorderColor);--fdAvatarBackgroundColor:var(--sapButton_Background);--fdAvatarColor:var(--sapButton_TextColor);--fdAvatarHoverBackgroundColor:var(--sapButton_Hover_Background);--fdAvatarHoverBorderColor:var(--sapButton_Hover_BorderColor);--fdAvatarBorderActiveColor:var(--sapButton_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapButton_Active_Background);--fdAvatarActiveColor:var(--sapButton_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapButton_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapButton_Active_Background);--fdAvatarActiveHoverColor:var(--sapButton_Active_TextColor)}.fd-avatar--overflow.is-disabled,.fd-avatar--overflow:disabled,.fd-avatar--overflow[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-avatar--accent-color-1,.fd-avatar--accent-color-1.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_1_BorderColor);--fdAvatarColor:var(--sapAvatar_1_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_1_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_1_Hover_Background)}.fd-avatar--accent-color-2,.fd-avatar--accent-color-2.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_2_BorderColor);--fdAvatarColor:var(--sapAvatar_2_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_2_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_2_Hover_Background)}.fd-avatar--accent-color-3,.fd-avatar--accent-color-3.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_3_BorderColor);--fdAvatarColor:var(--sapAvatar_3_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_3_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_3_Hover_Background)}.fd-avatar--accent-color-4,.fd-avatar--accent-color-4.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_4_BorderColor);--fdAvatarColor:var(--sapAvatar_4_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_4_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_4_Hover_Background)}.fd-avatar--accent-color-5,.fd-avatar--accent-color-5.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_5_BorderColor);--fdAvatarColor:var(--sapAvatar_5_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_5_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_5_Hover_Background)}.fd-avatar--accent-color-6,.fd-avatar--accent-color-6.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_6_BorderColor);--fdAvatarColor:var(--sapAvatar_6_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_6_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_6_Hover_Background)}.fd-avatar--accent-color-7,.fd-avatar--accent-color-7.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_7_BorderColor);--fdAvatarColor:var(--sapAvatar_7_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_7_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_7_Hover_Background)}.fd-avatar--accent-color-8,.fd-avatar--accent-color-8.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_8_BorderColor);--fdAvatarColor:var(--sapAvatar_8_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_8_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_8_Hover_Background)}.fd-avatar--accent-color-9,.fd-avatar--accent-color-9.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_9_BorderColor);--fdAvatarColor:var(--sapAvatar_9_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_9_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_9_Hover_Background)}.fd-avatar--accent-color-10,.fd-avatar--accent-color-10.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_10_BorderColor);--fdAvatarColor:var(--sapAvatar_10_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_10_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_10_Hover_Background)}.fd-avatar--indication-color-1,.fd-avatar--indication-color-1.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_1_BorderColor);--fdAvatarColor:var(--sapIndicationColor_1_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_1_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_1_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_1_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_1_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_1_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_1_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_1_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_1_Active_TextColor)}.fd-avatar--indication-color-2,.fd-avatar--indication-color-2.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_2_BorderColor);--fdAvatarColor:var(--sapIndicationColor_2_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_2_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_2_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_2_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_2_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_2_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_2_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_2_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_2_Active_TextColor)}.fd-avatar--indication-color-3,.fd-avatar--indication-color-3.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_3_BorderColor);--fdAvatarColor:var(--sapIndicationColor_3_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_3_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_3_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_3_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_3_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_3_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_3_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_3_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_3_Active_TextColor)}.fd-avatar--indication-color-4,.fd-avatar--indication-color-4.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_4_BorderColor);--fdAvatarColor:var(--sapIndicationColor_4_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_4_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_4_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_4_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_4_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_4_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_4_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_4_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_4_Active_TextColor)}.fd-avatar--indication-color-5,.fd-avatar--indication-color-5.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_5_BorderColor);--fdAvatarColor:var(--sapIndicationColor_5_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_5_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_5_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_5_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_5_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_5_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_5_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_5_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_5_Active_TextColor)}.fd-avatar--indication-color-6,.fd-avatar--indication-color-6.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_6_BorderColor);--fdAvatarColor:var(--sapIndicationColor_6_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_6_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_6_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_6_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_6_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_6_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_6_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_6_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_6_Active_TextColor)}.fd-avatar--indication-color-7,.fd-avatar--indication-color-7.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_7_BorderColor);--fdAvatarColor:var(--sapIndicationColor_7_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_7_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_7_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_7_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_7_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_7_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_7_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_7_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_7_Active_TextColor)}.fd-avatar--indication-color-8,.fd-avatar--indication-color-8.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_8_BorderColor);--fdAvatarColor:var(--sapIndicationColor_8_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_8_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_8_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_8_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_8_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_8_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_8_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_8_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_8_Active_TextColor)}.fd-avatar--indication-color-9,.fd-avatar--indication-color-9.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_9_BorderColor);--fdAvatarColor:var(--sapIndicationColor_9_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_9_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_9_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_9_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_9_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_9_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_9_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_9_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_9_Active_TextColor)}.fd-avatar--indication-color-10,.fd-avatar--indication-color-10.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_10_BorderColor);--fdAvatarColor:var(--sapIndicationColor_10_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_10_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_10_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_10_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_10_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_10_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_10_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_10_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_10_Active_TextColor)}.fd-avatar--xs{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:2rem;--fdAvatarFontSize:1rem;--fdAvatarFontStretch:condensed}.fd-avatar--xs .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xs .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--s{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:3rem;--fdAvatarFontSize:1.125rem;--fdAvatarFontStretch:condensed}.fd-avatar--s .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--s .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--sm{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:3rem;--fdAvatarFontSize:1.125rem;--fdAvatarFontStretch:condensed}.fd-avatar--sm .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--sm .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--m{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:4rem;--fdAvatarFontSize:1.5rem;--fdAvatarFontStretch:normal}.fd-avatar--m .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--m .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--md{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:4rem;--fdAvatarFontSize:1.5rem;--fdAvatarFontStretch:normal}.fd-avatar--md .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--md .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--l{--fdAvatarZoomIconOffset:-.1875rem;--fdAvatarRatio:5rem;--fdAvatarFontSize:2.25rem;--fdAvatarFontStretch:normal}.fd-avatar--l .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--l .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.25rem;--fdAvatarZoomIconFontSize:.875rem}.fd-avatar--lg{--fdAvatarZoomIconOffset:-.1875rem;--fdAvatarRatio:5rem;--fdAvatarFontSize:2.25rem;--fdAvatarFontStretch:normal}.fd-avatar--lg .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--lg .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.25rem;--fdAvatarZoomIconFontSize:.875rem}.fd-avatar--xl{--fdAvatarZoomIconOffset:-.25rem;--fdAvatarRatio:7rem;--fdAvatarFontSize:3rem;--fdAvatarFontStretch:normal}.fd-avatar--xl .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xl .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.75rem;--fdAvatarZoomIconFontSize:1rem}.fd-avatar--accent-color-1.fd-avatar--shell,.fd-avatar--accent-color-10.fd-avatar--shell,.fd-avatar--accent-color-2.fd-avatar--shell,.fd-avatar--accent-color-3.fd-avatar--shell,.fd-avatar--accent-color-4.fd-avatar--shell,.fd-avatar--accent-color-5.fd-avatar--shell,.fd-avatar--accent-color-6.fd-avatar--shell,.fd-avatar--accent-color-7.fd-avatar--shell,.fd-avatar--accent-color-8.fd-avatar--shell,.fd-avatar--accent-color-9.fd-avatar--shell,.fd-avatar--indication-color-1.fd-avatar--shell,.fd-avatar--indication-color-10.fd-avatar--shell,.fd-avatar--indication-color-2.fd-avatar--shell,.fd-avatar--indication-color-3.fd-avatar--shell,.fd-avatar--indication-color-4.fd-avatar--shell,.fd-avatar--indication-color-5.fd-avatar--shell,.fd-avatar--indication-color-6.fd-avatar--shell,.fd-avatar--indication-color-7.fd-avatar--shell,.fd-avatar--indication-color-8.fd-avatar--shell,.fd-avatar--indication-color-9.fd-avatar--shell{border:.0625rem solid var(--sapShell_InteractiveBorderColor)}.fd-avatar--l,.fd-avatar--lg,.fd-avatar--m,.fd-avatar--md,.fd-avatar--s,.fd-avatar--sm,.fd-avatar--xl,.fd-avatar--xs{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-avatar--l:not(.fd-avatar--circle),.fd-avatar--lg:not(.fd-avatar--circle),.fd-avatar--m:not(.fd-avatar--circle),.fd-avatar--md:not(.fd-avatar--circle),.fd-avatar--s:not(.fd-avatar--circle),.fd-avatar--sm:not(.fd-avatar--circle),.fd-avatar--xl:not(.fd-avatar--circle),.fd-avatar--xs:not(.fd-avatar--circle){--fdAvatarZoomIconPosition:var(--fdAvatarZoomIconOffset)}.fd-avatar.fd-avatar--xs,.fd-avatar.fd-avatar--s,.fd-avatar.fd-avatar--sm{--fdAvatarFontStretch: normal}\n/*! Bundled license information:\n\nfundamental-styles/dist/avatar.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "pipe", type: AvatarIconPipe, name: "fdAvatarIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
332
324
|
}
|
|
333
|
-
__decorate([
|
|
334
|
-
applyCssClass,
|
|
335
|
-
__metadata("design:type", Function),
|
|
336
|
-
__metadata("design:paramtypes", []),
|
|
337
|
-
__metadata("design:returntype", Array)
|
|
338
|
-
], AvatarComponent.prototype, "buildComponentCssClass", null);
|
|
339
325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
340
326
|
type: Component,
|
|
341
327
|
args: [{ selector: 'fd-avatar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -344,91 +330,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
344
330
|
useExisting: AvatarComponent
|
|
345
331
|
}
|
|
346
332
|
], host: {
|
|
347
|
-
'[
|
|
348
|
-
}, imports: [AvatarIconPipe, IconComponent], template: "@if (abbreviate) {\n {{ abbreviate }}\n}\n@if (zoomGlyph || valueState) {\n <i\n role=\"presentation\"\n class=\"fd-avatar__zoom-icon\"\n [class]=\"valueState | fdAvatarIcon: zoomGlyph\"\n (mousedown)=\"zoomClicked($event)\"\n >\n </i>\n}\n@if (glyph || showDefault) {\n <fd-icon\n class=\"fd-avatar__icon\"\n role=\"presentation\"\n [font]=\"font\"\n [glyph]=\"glyph || 'person-placeholder'\"\n ></fd-icon>\n}\n<div #content [style.display]=\"'none'\">\n <ng-content></ng-content>\n</div>\n", styles: [".fd-avatar{--fdAvatarZoomIconPosition:0;background-color:var(--fdAvatarBackgroundColor);background-position:50%;background-repeat:no-repeat;background-size:var(--fdAvatarBackgroundSize);border:0;border:var(--fdAvatarBorderWidth,.0625rem) solid var(--fdAvatarBorderColor);border-radius:var(--fdAvatarBorderRadius);-webkit-box-shadow:var(--fdAvatarBoxShadow);box-shadow:var(--fdAvatarBoxShadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdAvatarColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdAvatarFontSize);font-stretch:var(--fdAvatarFontStretch);font-weight:400;forced-color-adjust:none;height:var(--fdAvatarRatio);line-height:normal;margin-block:0;margin-inline:0;max-height:var(--fdAvatarRatio);max-width:var(--fdAvatarRatio);min-height:var(--fdAvatarRatio);min-width:var(--fdAvatarRatio);padding-block:0;padding-inline:0;position:relative;text-shadow:var(--fdAvatarTextShadow);vertical-align:middle;width:var(--fdAvatarRatio)}.fd-avatar:after,.fd-avatar:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-avatar.is-focus,.fd-avatar:focus{outline:none}.fd-avatar.is-focus:after,.fd-avatar:focus:after{border-color:var(--sapContent_FocusColor);border-radius:var(--fdAvatar_Focus_Outline_Radius);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset);pointer-events:none;position:absolute}.fd-avatar--interactive,.fd-avatar[role=button],.fd-avatar[tabindex=\"0\"]{cursor:pointer}.fd-avatar--interactive.is-hover,.fd-avatar--interactive:hover,.fd-avatar[role=button].is-hover,.fd-avatar[role=button]:hover,.fd-avatar[tabindex=\"0\"].is-hover,.fd-avatar[tabindex=\"0\"]:hover{--fdAvatarBorderColor:var(--fdAvatarBorderHoverColor,var(--sapAvatar_Hover_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarHoverBackgroundColor,var(--sapAvatar_6_Hover_Background))}.fd-avatar--interactive.is-disabled,.fd-avatar--interactive:disabled,.fd-avatar--interactive[aria-disabled=true],.fd-avatar[role=button].is-disabled,.fd-avatar[role=button]:disabled,.fd-avatar[role=button][aria-disabled=true],.fd-avatar[tabindex=\"0\"].is-disabled,.fd-avatar[tabindex=\"0\"]:disabled,.fd-avatar[tabindex=\"0\"][aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-avatar--interactive.is-active,.fd-avatar--interactive:active,.fd-avatar[role=button].is-active,.fd-avatar[role=button]:active,.fd-avatar[tabindex=\"0\"].is-active,.fd-avatar[tabindex=\"0\"]:active{--fdAvatarBorderColor:var(--fdAvatarBorderActiveColor,var(--sapButton_Active_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveColor,var(--sapButton_Active_Background));--fdAvatarColor:var(--fdAvatarActiveColor,var(--sapButton_Active_TextColor))}.fd-avatar--interactive.is-active.is-hover,.fd-avatar--interactive.is-active:hover,.fd-avatar--interactive:active.is-hover,.fd-avatar--interactive:active:hover,.fd-avatar[role=button].is-active.is-hover,.fd-avatar[role=button].is-active:hover,.fd-avatar[role=button]:active.is-hover,.fd-avatar[role=button]:active:hover,.fd-avatar[tabindex=\"0\"].is-active.is-hover,.fd-avatar[tabindex=\"0\"].is-active:hover,.fd-avatar[tabindex=\"0\"]:active.is-hover,.fd-avatar[tabindex=\"0\"]:active:hover{--fdAvatarBorderColor:var(--fdAvatarBorderActiveHoverColor,var(--sapButton_Selected_Hover_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveHoverColor,var(--sapButton_Selected_Hover_Background));--fdAvatarColor:var(--fdAvatarActiveHoverColor,var(--sapButton_Selected_TextColor))}.fd-avatar--interactive.is-toggled,.fd-avatar[role=button].is-toggled,.fd-avatar[tabindex=\"0\"].is-toggled{--fdAvatarBorderColor:var(--fdAvatarBorderActiveColor,var(--sapButton_Active_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveColor,var(--sapButton_Active_Background));--fdAvatarColor:var(--fdAvatarActiveColor,var(--sapButton_Active_TextColor))}.fd-avatar--interactive.is-toggled.is-hover,.fd-avatar--interactive.is-toggled:hover,.fd-avatar[role=button].is-toggled.is-hover,.fd-avatar[role=button].is-toggled:hover,.fd-avatar[tabindex=\"0\"].is-toggled.is-hover,.fd-avatar[tabindex=\"0\"].is-toggled:hover{--fdAvatarBorderColor:var(--fdAvatarBorderActiveHoverColor,var(--sapButton_Selected_Hover_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveHoverColor,var(--sapButton_Selected_Hover_Background));--fdAvatarColor:var(--fdAvatarActiveHoverColor,var(--sapButton_Selected_TextColor))}.fd-avatar--interactive.is-focus,.fd-avatar--interactive:focus,.fd-avatar[role=button].is-focus,.fd-avatar[role=button]:focus,.fd-avatar[tabindex=\"0\"].is-focus,.fd-avatar[tabindex=\"0\"]:focus{padding-block:.125rem;padding-inline:.125rem;z-index:5}.fd-avatar__zoom-icon{--fdAvatarZoomIconColor:var(--sapButton_Emphasized_TextColor);--fdAvatarZoomIconBorderColor:var(--sapButton_Emphasized_BorderColor);--fdAvatarZoomIconBackground:var(--sapButton_Emphasized_Background)}.fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:inherit;line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdAvatarZoomIconBackground);border:.0625rem solid var(--fdAvatarZoomIconBorderColor);border-radius:100%;color:var(--fdAvatarZoomIconColor);font-size:var(--fdAvatarZoomIconFontSize);height:var(--fdAvatarZoomIconDimensions);min-width:var(--fdAvatarZoomIconDimensions);position:absolute;width:var(--fdAvatarZoomIconDimensions);z-index:5}.fd-avatar__zoom-icon [class*=sap-icon] [class*=sap-icon],.fd-avatar__zoom-icon [class*=sap-icon][class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon] [class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon][class*=sap-icon]{bottom:var(--fdAvatarZoomIconPosition);right:var(--fdAvatarZoomIconPosition)}.fd-avatar__zoom-icon [class*=sap-icon] [class*=sap-icon][dir=rtl],.fd-avatar__zoom-icon [class*=sap-icon][class*=sap-icon][dir=rtl],.fd-avatar__zoom-icon[class*=sap-icon] [class*=sap-icon][dir=rtl],.fd-avatar__zoom-icon[class*=sap-icon][class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar__zoom-icon [class*=sap-icon] [class*=sap-icon],[dir=rtl] .fd-avatar__zoom-icon [class*=sap-icon][class*=sap-icon],[dir=rtl] .fd-avatar__zoom-icon[class*=sap-icon] [class*=sap-icon],[dir=rtl] .fd-avatar__zoom-icon[class*=sap-icon][class*=sap-icon]{left:var(--fdAvatarZoomIconPosition);right:auto}.fd-avatar__zoom-icon--positive{--fdAvatarZoomIconColor:var(--sapPositiveTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapSuccessBackground)}.fd-avatar__zoom-icon--caution{--fdAvatarZoomIconColor:var(--sapCriticalTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapWarningBackground)}.fd-avatar__zoom-icon--negative{--fdAvatarZoomIconColor:var(--sapNegativeTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapErrorBackground)}.fd-avatar__zoom-icon--information{--fdAvatarZoomIconColor:var(--sapInformativeTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapInformationBackground)}.fd-avatar__zoom-icon--indication-1{--fdAvatarZoomIconColor:var(--sapIndicationColor_1_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_1_Background)}.fd-avatar__zoom-icon--indication-2{--fdAvatarZoomIconColor:var(--sapIndicationColor_2_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_2_Background)}.fd-avatar__zoom-icon--indication-3{--fdAvatarZoomIconColor:var(--sapIndicationColor_3_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_3_Background)}.fd-avatar__zoom-icon--indication-4{--fdAvatarZoomIconColor:var(--sapIndicationColor_4_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_4_Background)}.fd-avatar__zoom-icon--indication-5{--fdAvatarZoomIconColor:var(--sapIndicationColor_5_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_5_Background)}.fd-avatar__zoom-icon--indication-6{--fdAvatarZoomIconColor:var(--sapIndicationColor_6_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_6_Background)}.fd-avatar__zoom-icon--indication-7{--fdAvatarZoomIconColor:var(--sapIndicationColor_7_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_7_Background)}.fd-avatar__zoom-icon--indication-8{--fdAvatarZoomIconColor:var(--sapIndicationColor_8_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_8_Background)}.fd-avatar__zoom-icon--indication-9{--fdAvatarZoomIconColor:var(--sapIndicationColor_9_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_9_Background)}.fd-avatar__zoom-icon--indication-10{--fdAvatarZoomIconColor:var(--sapIndicationColor_10_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_10_Background)}.fd-avatar__icon [class*=sap-icon],.fd-avatar__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:inherit;line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center}.fd-avatar--circle{--fdAvatarBorderRadius:100%}.fd-avatar--circle.is-focus,.fd-avatar--circle:focus{outline:none}.fd-avatar--circle.is-focus:after,.fd-avatar--circle:focus:after{border-color:var(--sapContent_FocusColor);border-radius:var(--fdAvatar_Focus_Outline_Radius_Circle);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset);pointer-events:none;position:absolute}.fd-avatar--background-contain{--fdAvatarBackgroundSize:contain}.fd-avatar--transparent{--fdAvatarBorderColor:var(--sapAvatar_Lite_BorderColor);--fdAvatarBackgroundColor:var(--sapAvatar_Lite_Background);--fdAvatarColor:var(--sapContent_IconColor);--fdAvatarBorderHoverColor:var(--sapContent_IconColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_Lite_Background)}.fd-avatar--tile{--fdAvatarBorderColor:var(--sapAvatar_Lite_BorderColor);--fdAvatarBackgroundColor:var(--sapTile_Background);--fdAvatarColor:var(--sapTile_IconColor);--fdAvatarBorderHoverColor:var(--sapTile_IconColor);--fdAvatarHoverBackgroundColor:var(--sapTile_Background)}.fd-avatar--placeholder{--fdAvatarBorderColor:var(--sapAvatar_Lite_BorderColor);--fdAvatarBackgroundColor:var(--sapContent_ImagePlaceholderBackground);--fdAvatarColor:var(--sapContent_ImagePlaceholderForegroundColor);--fdAvatarBorderHoverColor:var(--sapContent_ImagePlaceholderForegroundColor);--fdAvatarHoverBackgroundColor:var(--sapContent_ImagePlaceholderBackground)}.fd-avatar--thumbnail{--fdAvatarBorderColor:var(--fdAvatar_Thumbnail_BorderColor);--fdAvatarHoverBorderColor:var(--sapContent_IconColor);--fdAvatarBackgroundColor:var(--sapAvatar_Lite_Background);--fdAvatarHoverBackgroundColor:var(--sapAvatar_Lite_Background)}.fd-avatar--border{--fdAvatarBorderColor:var(--sapGroup_ContentBorderColor);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor)}.fd-avatar--overflow{cursor:pointer;--fdAvatarBorderWidth:var(--fdAvatar_Overflow_Border_Width);--fdAvatarBorderColor:var(--sapButton_BorderColor);--fdAvatarBackgroundColor:var(--sapButton_Background);--fdAvatarColor:var(--sapButton_TextColor);--fdAvatarHoverBackgroundColor:var(--sapButton_Hover_Background);--fdAvatarHoverBorderColor:var(--sapButton_Hover_BorderColor);--fdAvatarBorderActiveColor:var(--sapButton_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapButton_Active_Background);--fdAvatarActiveColor:var(--sapButton_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapButton_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapButton_Active_Background);--fdAvatarActiveHoverColor:var(--sapButton_Active_TextColor)}.fd-avatar--overflow.is-disabled,.fd-avatar--overflow:disabled,.fd-avatar--overflow[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-avatar--accent-color-1,.fd-avatar--accent-color-1.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_1_BorderColor);--fdAvatarColor:var(--sapAvatar_1_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_1_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_1_Hover_Background)}.fd-avatar--accent-color-2,.fd-avatar--accent-color-2.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_2_BorderColor);--fdAvatarColor:var(--sapAvatar_2_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_2_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_2_Hover_Background)}.fd-avatar--accent-color-3,.fd-avatar--accent-color-3.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_3_BorderColor);--fdAvatarColor:var(--sapAvatar_3_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_3_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_3_Hover_Background)}.fd-avatar--accent-color-4,.fd-avatar--accent-color-4.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_4_BorderColor);--fdAvatarColor:var(--sapAvatar_4_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_4_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_4_Hover_Background)}.fd-avatar--accent-color-5,.fd-avatar--accent-color-5.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_5_BorderColor);--fdAvatarColor:var(--sapAvatar_5_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_5_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_5_Hover_Background)}.fd-avatar--accent-color-6,.fd-avatar--accent-color-6.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_6_BorderColor);--fdAvatarColor:var(--sapAvatar_6_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_6_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_6_Hover_Background)}.fd-avatar--accent-color-7,.fd-avatar--accent-color-7.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_7_BorderColor);--fdAvatarColor:var(--sapAvatar_7_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_7_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_7_Hover_Background)}.fd-avatar--accent-color-8,.fd-avatar--accent-color-8.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_8_BorderColor);--fdAvatarColor:var(--sapAvatar_8_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_8_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_8_Hover_Background)}.fd-avatar--accent-color-9,.fd-avatar--accent-color-9.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_9_BorderColor);--fdAvatarColor:var(--sapAvatar_9_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_9_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_9_Hover_Background)}.fd-avatar--accent-color-10,.fd-avatar--accent-color-10.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_10_BorderColor);--fdAvatarColor:var(--sapAvatar_10_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_10_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_10_Hover_Background)}.fd-avatar--indication-color-1,.fd-avatar--indication-color-1.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_1_BorderColor);--fdAvatarColor:var(--sapIndicationColor_1_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_1_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_1_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_1_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_1_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_1_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_1_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_1_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_1_Active_TextColor)}.fd-avatar--indication-color-2,.fd-avatar--indication-color-2.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_2_BorderColor);--fdAvatarColor:var(--sapIndicationColor_2_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_2_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_2_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_2_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_2_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_2_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_2_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_2_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_2_Active_TextColor)}.fd-avatar--indication-color-3,.fd-avatar--indication-color-3.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_3_BorderColor);--fdAvatarColor:var(--sapIndicationColor_3_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_3_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_3_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_3_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_3_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_3_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_3_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_3_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_3_Active_TextColor)}.fd-avatar--indication-color-4,.fd-avatar--indication-color-4.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_4_BorderColor);--fdAvatarColor:var(--sapIndicationColor_4_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_4_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_4_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_4_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_4_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_4_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_4_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_4_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_4_Active_TextColor)}.fd-avatar--indication-color-5,.fd-avatar--indication-color-5.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_5_BorderColor);--fdAvatarColor:var(--sapIndicationColor_5_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_5_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_5_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_5_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_5_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_5_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_5_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_5_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_5_Active_TextColor)}.fd-avatar--indication-color-6,.fd-avatar--indication-color-6.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_6_BorderColor);--fdAvatarColor:var(--sapIndicationColor_6_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_6_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_6_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_6_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_6_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_6_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_6_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_6_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_6_Active_TextColor)}.fd-avatar--indication-color-7,.fd-avatar--indication-color-7.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_7_BorderColor);--fdAvatarColor:var(--sapIndicationColor_7_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_7_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_7_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_7_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_7_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_7_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_7_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_7_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_7_Active_TextColor)}.fd-avatar--indication-color-8,.fd-avatar--indication-color-8.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_8_BorderColor);--fdAvatarColor:var(--sapIndicationColor_8_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_8_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_8_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_8_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_8_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_8_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_8_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_8_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_8_Active_TextColor)}.fd-avatar--indication-color-9,.fd-avatar--indication-color-9.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_9_BorderColor);--fdAvatarColor:var(--sapIndicationColor_9_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_9_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_9_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_9_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_9_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_9_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_9_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_9_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_9_Active_TextColor)}.fd-avatar--indication-color-10,.fd-avatar--indication-color-10.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_10_BorderColor);--fdAvatarColor:var(--sapIndicationColor_10_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_10_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_10_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_10_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_10_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_10_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_10_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_10_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_10_Active_TextColor)}.fd-avatar--xs{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:2rem;--fdAvatarFontSize:1rem;--fdAvatarFontStretch:condensed}.fd-avatar--xs .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xs .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--s{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:3rem;--fdAvatarFontSize:1.125rem;--fdAvatarFontStretch:condensed}.fd-avatar--s .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--s .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--sm{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:3rem;--fdAvatarFontSize:1.125rem;--fdAvatarFontStretch:condensed}.fd-avatar--sm .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--sm .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--m{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:4rem;--fdAvatarFontSize:1.5rem;--fdAvatarFontStretch:normal}.fd-avatar--m .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--m .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--md{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:4rem;--fdAvatarFontSize:1.5rem;--fdAvatarFontStretch:normal}.fd-avatar--md .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--md .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--l{--fdAvatarZoomIconOffset:-.1875rem;--fdAvatarRatio:5rem;--fdAvatarFontSize:2.25rem;--fdAvatarFontStretch:normal}.fd-avatar--l .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--l .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.25rem;--fdAvatarZoomIconFontSize:.875rem}.fd-avatar--lg{--fdAvatarZoomIconOffset:-.1875rem;--fdAvatarRatio:5rem;--fdAvatarFontSize:2.25rem;--fdAvatarFontStretch:normal}.fd-avatar--lg .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--lg .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.25rem;--fdAvatarZoomIconFontSize:.875rem}.fd-avatar--xl{--fdAvatarZoomIconOffset:-.25rem;--fdAvatarRatio:7rem;--fdAvatarFontSize:3rem;--fdAvatarFontStretch:normal}.fd-avatar--xl .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xl .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.75rem;--fdAvatarZoomIconFontSize:1rem}.fd-avatar--accent-color-1.fd-avatar--shell,.fd-avatar--accent-color-10.fd-avatar--shell,.fd-avatar--accent-color-2.fd-avatar--shell,.fd-avatar--accent-color-3.fd-avatar--shell,.fd-avatar--accent-color-4.fd-avatar--shell,.fd-avatar--accent-color-5.fd-avatar--shell,.fd-avatar--accent-color-6.fd-avatar--shell,.fd-avatar--accent-color-7.fd-avatar--shell,.fd-avatar--accent-color-8.fd-avatar--shell,.fd-avatar--accent-color-9.fd-avatar--shell,.fd-avatar--indication-color-1.fd-avatar--shell,.fd-avatar--indication-color-10.fd-avatar--shell,.fd-avatar--indication-color-2.fd-avatar--shell,.fd-avatar--indication-color-3.fd-avatar--shell,.fd-avatar--indication-color-4.fd-avatar--shell,.fd-avatar--indication-color-5.fd-avatar--shell,.fd-avatar--indication-color-6.fd-avatar--shell,.fd-avatar--indication-color-7.fd-avatar--shell,.fd-avatar--indication-color-8.fd-avatar--shell,.fd-avatar--indication-color-9.fd-avatar--shell{border:.0625rem solid var(--sapShell_InteractiveBorderColor)}.fd-avatar--l,.fd-avatar--lg,.fd-avatar--m,.fd-avatar--md,.fd-avatar--s,.fd-avatar--sm,.fd-avatar--xl,.fd-avatar--xs{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-avatar--l:not(.fd-avatar--circle),.fd-avatar--lg:not(.fd-avatar--circle),.fd-avatar--m:not(.fd-avatar--circle),.fd-avatar--md:not(.fd-avatar--circle),.fd-avatar--s:not(.fd-avatar--circle),.fd-avatar--sm:not(.fd-avatar--circle),.fd-avatar--xl:not(.fd-avatar--circle),.fd-avatar--xs:not(.fd-avatar--circle){--fdAvatarZoomIconPosition:var(--fdAvatarZoomIconOffset)}.fd-avatar.fd-avatar--xs,.fd-avatar.fd-avatar--s,.fd-avatar.fd-avatar--sm{--fdAvatarFontStretch: normal}\n/*! Bundled license information:\n\nfundamental-styles/dist/avatar.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
type: HostBinding,
|
|
358
|
-
|
|
359
|
-
}], ariaLabel: [{
|
|
360
|
-
type: Input
|
|
361
|
-
}, {
|
|
362
|
-
type: HostBinding,
|
|
363
|
-
args: ['attr.aria-label']
|
|
364
|
-
}, {
|
|
365
|
-
type: HostBinding,
|
|
366
|
-
args: ['attr.alt']
|
|
367
|
-
}], ariaLabelledby: [{
|
|
368
|
-
type: Input
|
|
369
|
-
}, {
|
|
370
|
-
type: HostBinding,
|
|
371
|
-
args: ['attr.aria-labelledby']
|
|
372
|
-
}], label: [{
|
|
373
|
-
type: Input
|
|
374
|
-
}], size: [{
|
|
375
|
-
type: Input
|
|
376
|
-
}], font: [{
|
|
377
|
-
type: Input
|
|
378
|
-
}], glyph: [{
|
|
379
|
-
type: Input
|
|
380
|
-
}], zoomGlyph: [{
|
|
381
|
-
type: Input
|
|
382
|
-
}], circle: [{
|
|
383
|
-
type: Input
|
|
384
|
-
}], interactive: [{
|
|
385
|
-
type: Input
|
|
386
|
-
}], transparent: [{
|
|
387
|
-
type: Input
|
|
388
|
-
}], contain: [{
|
|
389
|
-
type: Input
|
|
390
|
-
}], placeholder: [{
|
|
391
|
-
type: Input
|
|
392
|
-
}], tile: [{
|
|
393
|
-
type: Input
|
|
394
|
-
}], border: [{
|
|
395
|
-
type: Input
|
|
396
|
-
}], colorAccent: [{
|
|
397
|
-
type: Input
|
|
398
|
-
}], colorIndication: [{
|
|
399
|
-
type: Input
|
|
400
|
-
}], random: [{
|
|
401
|
-
type: Input
|
|
402
|
-
}], clickable: [{
|
|
403
|
-
type: Input
|
|
404
|
-
}], valueState: [{
|
|
405
|
-
type: Input
|
|
406
|
-
}], image: [{
|
|
407
|
-
type: Input
|
|
408
|
-
}], alterIcon: [{
|
|
409
|
-
type: Input
|
|
410
|
-
}], backupImage: [{
|
|
411
|
-
type: Input
|
|
412
|
-
}], avatarClicked: [{
|
|
413
|
-
type: Output
|
|
414
|
-
}], zoomGlyphClicked: [{
|
|
415
|
-
type: Output
|
|
416
|
-
}], role: [{
|
|
417
|
-
type: HostBinding,
|
|
418
|
-
args: ['attr.role']
|
|
419
|
-
}], content: [{
|
|
420
|
-
type: ViewChild,
|
|
421
|
-
args: ['content']
|
|
422
|
-
}], buildComponentCssClass: [], _onClick: [{
|
|
423
|
-
type: HostListener,
|
|
424
|
-
args: ['click', ['$event']]
|
|
425
|
-
}, {
|
|
426
|
-
type: HostListener,
|
|
427
|
-
args: ['keydown.enter', ['$event']]
|
|
428
|
-
}, {
|
|
429
|
-
type: HostListener,
|
|
430
|
-
args: ['keydown.space', ['$event']]
|
|
431
|
-
}] } });
|
|
333
|
+
'[class]': 'cssClass()',
|
|
334
|
+
'[attr.tabindex]': 'tabindex()',
|
|
335
|
+
'[attr.id]': 'id()',
|
|
336
|
+
'[attr.aria-label]': 'ariaLabel()',
|
|
337
|
+
'[attr.aria-labelledby]': 'ariaLabelledby()',
|
|
338
|
+
'[attr.alt]': 'ariaLabel()',
|
|
339
|
+
'[attr.role]': 'role()',
|
|
340
|
+
'(click)': 'onClick($event)',
|
|
341
|
+
'(keydown.enter)': 'onClick($event)',
|
|
342
|
+
'(keydown.space)': 'onClick($event)'
|
|
343
|
+
}, imports: [AvatarIconPipe, IconComponent], template: "@if (abbreviate()) {\n {{ abbreviate() }}\n}\n@if (zoomGlyph() || valueState()) {\n <i\n role=\"presentation\"\n class=\"fd-avatar__zoom-icon\"\n [class]=\"valueState() | fdAvatarIcon: zoomGlyph()\"\n (mousedown)=\"zoomClicked($event)\"\n >\n </i>\n}\n@if (glyph() || showDefault()) {\n <fd-icon\n class=\"fd-avatar__icon\"\n role=\"presentation\"\n [font]=\"font()\"\n [glyph]=\"glyph() || 'person-placeholder'\"\n ></fd-icon>\n}\n<div #content [style.display]=\"'none'\">\n <ng-content></ng-content>\n</div>\n", styles: [".fd-avatar{--fdAvatarZoomIconPosition:0;background-color:var(--fdAvatarBackgroundColor);background-position:50%;background-repeat:no-repeat;background-size:var(--fdAvatarBackgroundSize);border:0;border:var(--fdAvatarBorderWidth,.0625rem) solid var(--fdAvatarBorderColor);border-radius:var(--fdAvatarBorderRadius);-webkit-box-shadow:var(--fdAvatarBoxShadow);box-shadow:var(--fdAvatarBoxShadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdAvatarColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdAvatarFontSize);font-stretch:var(--fdAvatarFontStretch);font-weight:400;forced-color-adjust:none;height:var(--fdAvatarRatio);line-height:normal;margin-block:0;margin-inline:0;max-height:var(--fdAvatarRatio);max-width:var(--fdAvatarRatio);min-height:var(--fdAvatarRatio);min-width:var(--fdAvatarRatio);padding-block:0;padding-inline:0;position:relative;text-shadow:var(--fdAvatarTextShadow);vertical-align:middle;width:var(--fdAvatarRatio)}.fd-avatar:after,.fd-avatar:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-avatar.is-focus,.fd-avatar:focus{outline:none}.fd-avatar.is-focus:after,.fd-avatar:focus:after{border-color:var(--sapContent_FocusColor);border-radius:var(--fdAvatar_Focus_Outline_Radius);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset);pointer-events:none;position:absolute}.fd-avatar--interactive,.fd-avatar[role=button],.fd-avatar[tabindex=\"0\"]{cursor:pointer}.fd-avatar--interactive.is-hover,.fd-avatar--interactive:hover,.fd-avatar[role=button].is-hover,.fd-avatar[role=button]:hover,.fd-avatar[tabindex=\"0\"].is-hover,.fd-avatar[tabindex=\"0\"]:hover{--fdAvatarBorderColor:var(--fdAvatarBorderHoverColor,var(--sapAvatar_Hover_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarHoverBackgroundColor,var(--sapAvatar_6_Hover_Background))}.fd-avatar--interactive.is-disabled,.fd-avatar--interactive:disabled,.fd-avatar--interactive[aria-disabled=true],.fd-avatar[role=button].is-disabled,.fd-avatar[role=button]:disabled,.fd-avatar[role=button][aria-disabled=true],.fd-avatar[tabindex=\"0\"].is-disabled,.fd-avatar[tabindex=\"0\"]:disabled,.fd-avatar[tabindex=\"0\"][aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-avatar--interactive.is-active,.fd-avatar--interactive:active,.fd-avatar[role=button].is-active,.fd-avatar[role=button]:active,.fd-avatar[tabindex=\"0\"].is-active,.fd-avatar[tabindex=\"0\"]:active{--fdAvatarBorderColor:var(--fdAvatarBorderActiveColor,var(--sapButton_Active_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveColor,var(--sapButton_Active_Background));--fdAvatarColor:var(--fdAvatarActiveColor,var(--sapButton_Active_TextColor))}.fd-avatar--interactive.is-active.is-hover,.fd-avatar--interactive.is-active:hover,.fd-avatar--interactive:active.is-hover,.fd-avatar--interactive:active:hover,.fd-avatar[role=button].is-active.is-hover,.fd-avatar[role=button].is-active:hover,.fd-avatar[role=button]:active.is-hover,.fd-avatar[role=button]:active:hover,.fd-avatar[tabindex=\"0\"].is-active.is-hover,.fd-avatar[tabindex=\"0\"].is-active:hover,.fd-avatar[tabindex=\"0\"]:active.is-hover,.fd-avatar[tabindex=\"0\"]:active:hover{--fdAvatarBorderColor:var(--fdAvatarBorderActiveHoverColor,var(--sapButton_Selected_Hover_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveHoverColor,var(--sapButton_Selected_Hover_Background));--fdAvatarColor:var(--fdAvatarActiveHoverColor,var(--sapButton_Selected_TextColor))}.fd-avatar--interactive.is-toggled,.fd-avatar[role=button].is-toggled,.fd-avatar[tabindex=\"0\"].is-toggled{--fdAvatarBorderColor:var(--fdAvatarBorderActiveColor,var(--sapButton_Active_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveColor,var(--sapButton_Active_Background));--fdAvatarColor:var(--fdAvatarActiveColor,var(--sapButton_Active_TextColor))}.fd-avatar--interactive.is-toggled.is-hover,.fd-avatar--interactive.is-toggled:hover,.fd-avatar[role=button].is-toggled.is-hover,.fd-avatar[role=button].is-toggled:hover,.fd-avatar[tabindex=\"0\"].is-toggled.is-hover,.fd-avatar[tabindex=\"0\"].is-toggled:hover{--fdAvatarBorderColor:var(--fdAvatarBorderActiveHoverColor,var(--sapButton_Selected_Hover_BorderColor));--fdAvatarBackgroundColor:var(--fdAvatarBackgroundActiveHoverColor,var(--sapButton_Selected_Hover_Background));--fdAvatarColor:var(--fdAvatarActiveHoverColor,var(--sapButton_Selected_TextColor))}.fd-avatar--interactive.is-focus,.fd-avatar--interactive:focus,.fd-avatar[role=button].is-focus,.fd-avatar[role=button]:focus,.fd-avatar[tabindex=\"0\"].is-focus,.fd-avatar[tabindex=\"0\"]:focus{padding-block:.125rem;padding-inline:.125rem;z-index:5}.fd-avatar__zoom-icon{--fdAvatarZoomIconColor:var(--sapButton_Emphasized_TextColor);--fdAvatarZoomIconBorderColor:var(--sapButton_Emphasized_BorderColor);--fdAvatarZoomIconBackground:var(--sapButton_Emphasized_Background)}.fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:inherit;line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdAvatarZoomIconBackground);border:.0625rem solid var(--fdAvatarZoomIconBorderColor);border-radius:100%;color:var(--fdAvatarZoomIconColor);font-size:var(--fdAvatarZoomIconFontSize);height:var(--fdAvatarZoomIconDimensions);min-width:var(--fdAvatarZoomIconDimensions);position:absolute;width:var(--fdAvatarZoomIconDimensions);z-index:5}.fd-avatar__zoom-icon [class*=sap-icon] [class*=sap-icon],.fd-avatar__zoom-icon [class*=sap-icon][class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon] [class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon][class*=sap-icon]{bottom:var(--fdAvatarZoomIconPosition);right:var(--fdAvatarZoomIconPosition)}.fd-avatar__zoom-icon [class*=sap-icon] [class*=sap-icon][dir=rtl],.fd-avatar__zoom-icon [class*=sap-icon][class*=sap-icon][dir=rtl],.fd-avatar__zoom-icon[class*=sap-icon] [class*=sap-icon][dir=rtl],.fd-avatar__zoom-icon[class*=sap-icon][class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar__zoom-icon [class*=sap-icon] [class*=sap-icon],[dir=rtl] .fd-avatar__zoom-icon [class*=sap-icon][class*=sap-icon],[dir=rtl] .fd-avatar__zoom-icon[class*=sap-icon] [class*=sap-icon],[dir=rtl] .fd-avatar__zoom-icon[class*=sap-icon][class*=sap-icon]{left:var(--fdAvatarZoomIconPosition);right:auto}.fd-avatar__zoom-icon--positive{--fdAvatarZoomIconColor:var(--sapPositiveTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapSuccessBackground)}.fd-avatar__zoom-icon--caution{--fdAvatarZoomIconColor:var(--sapCriticalTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapWarningBackground)}.fd-avatar__zoom-icon--negative{--fdAvatarZoomIconColor:var(--sapNegativeTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapErrorBackground)}.fd-avatar__zoom-icon--information{--fdAvatarZoomIconColor:var(--sapInformativeTextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapInformationBackground)}.fd-avatar__zoom-icon--indication-1{--fdAvatarZoomIconColor:var(--sapIndicationColor_1_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_1_Background)}.fd-avatar__zoom-icon--indication-2{--fdAvatarZoomIconColor:var(--sapIndicationColor_2_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_2_Background)}.fd-avatar__zoom-icon--indication-3{--fdAvatarZoomIconColor:var(--sapIndicationColor_3_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_3_Background)}.fd-avatar__zoom-icon--indication-4{--fdAvatarZoomIconColor:var(--sapIndicationColor_4_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_4_Background)}.fd-avatar__zoom-icon--indication-5{--fdAvatarZoomIconColor:var(--sapIndicationColor_5_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_5_Background)}.fd-avatar__zoom-icon--indication-6{--fdAvatarZoomIconColor:var(--sapIndicationColor_6_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_6_Background)}.fd-avatar__zoom-icon--indication-7{--fdAvatarZoomIconColor:var(--sapIndicationColor_7_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_7_Background)}.fd-avatar__zoom-icon--indication-8{--fdAvatarZoomIconColor:var(--sapIndicationColor_8_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_8_Background)}.fd-avatar__zoom-icon--indication-9{--fdAvatarZoomIconColor:var(--sapIndicationColor_9_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_9_Background)}.fd-avatar__zoom-icon--indication-10{--fdAvatarZoomIconColor:var(--sapIndicationColor_10_TextColor);--fdAvatarZoomIconBorderColor: ;--fdAvatarZoomIconBackground:var(--sapIndicationColor_10_Background)}.fd-avatar__icon [class*=sap-icon],.fd-avatar__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:inherit;line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center}.fd-avatar--circle{--fdAvatarBorderRadius:100%}.fd-avatar--circle.is-focus,.fd-avatar--circle:focus{outline:none}.fd-avatar--circle.is-focus:after,.fd-avatar--circle:focus:after{border-color:var(--sapContent_FocusColor);border-radius:var(--fdAvatar_Focus_Outline_Radius_Circle);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset) var(--fdAvatar_Focus_Outline_Offset);pointer-events:none;position:absolute}.fd-avatar--background-contain{--fdAvatarBackgroundSize:contain}.fd-avatar--transparent{--fdAvatarBorderColor:var(--sapAvatar_Lite_BorderColor);--fdAvatarBackgroundColor:var(--sapAvatar_Lite_Background);--fdAvatarColor:var(--sapContent_IconColor);--fdAvatarBorderHoverColor:var(--sapContent_IconColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_Lite_Background)}.fd-avatar--tile{--fdAvatarBorderColor:var(--sapAvatar_Lite_BorderColor);--fdAvatarBackgroundColor:var(--sapTile_Background);--fdAvatarColor:var(--sapTile_IconColor);--fdAvatarBorderHoverColor:var(--sapTile_IconColor);--fdAvatarHoverBackgroundColor:var(--sapTile_Background)}.fd-avatar--placeholder{--fdAvatarBorderColor:var(--sapAvatar_Lite_BorderColor);--fdAvatarBackgroundColor:var(--sapContent_ImagePlaceholderBackground);--fdAvatarColor:var(--sapContent_ImagePlaceholderForegroundColor);--fdAvatarBorderHoverColor:var(--sapContent_ImagePlaceholderForegroundColor);--fdAvatarHoverBackgroundColor:var(--sapContent_ImagePlaceholderBackground)}.fd-avatar--thumbnail{--fdAvatarBorderColor:var(--fdAvatar_Thumbnail_BorderColor);--fdAvatarHoverBorderColor:var(--sapContent_IconColor);--fdAvatarBackgroundColor:var(--sapAvatar_Lite_Background);--fdAvatarHoverBackgroundColor:var(--sapAvatar_Lite_Background)}.fd-avatar--border{--fdAvatarBorderColor:var(--sapGroup_ContentBorderColor);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor)}.fd-avatar--overflow{cursor:pointer;--fdAvatarBorderWidth:var(--fdAvatar_Overflow_Border_Width);--fdAvatarBorderColor:var(--sapButton_BorderColor);--fdAvatarBackgroundColor:var(--sapButton_Background);--fdAvatarColor:var(--sapButton_TextColor);--fdAvatarHoverBackgroundColor:var(--sapButton_Hover_Background);--fdAvatarHoverBorderColor:var(--sapButton_Hover_BorderColor);--fdAvatarBorderActiveColor:var(--sapButton_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapButton_Active_Background);--fdAvatarActiveColor:var(--sapButton_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapButton_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapButton_Active_Background);--fdAvatarActiveHoverColor:var(--sapButton_Active_TextColor)}.fd-avatar--overflow.is-disabled,.fd-avatar--overflow:disabled,.fd-avatar--overflow[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-avatar--accent-color-1,.fd-avatar--accent-color-1.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_1_BorderColor);--fdAvatarColor:var(--sapAvatar_1_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_1_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_1_Hover_Background)}.fd-avatar--accent-color-2,.fd-avatar--accent-color-2.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_2_BorderColor);--fdAvatarColor:var(--sapAvatar_2_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_2_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_2_Hover_Background)}.fd-avatar--accent-color-3,.fd-avatar--accent-color-3.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_3_BorderColor);--fdAvatarColor:var(--sapAvatar_3_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_3_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_3_Hover_Background)}.fd-avatar--accent-color-4,.fd-avatar--accent-color-4.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_4_BorderColor);--fdAvatarColor:var(--sapAvatar_4_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_4_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_4_Hover_Background)}.fd-avatar--accent-color-5,.fd-avatar--accent-color-5.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_5_BorderColor);--fdAvatarColor:var(--sapAvatar_5_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_5_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_5_Hover_Background)}.fd-avatar--accent-color-6,.fd-avatar--accent-color-6.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_6_BorderColor);--fdAvatarColor:var(--sapAvatar_6_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_6_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_6_Hover_Background)}.fd-avatar--accent-color-7,.fd-avatar--accent-color-7.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_7_BorderColor);--fdAvatarColor:var(--sapAvatar_7_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_7_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_7_Hover_Background)}.fd-avatar--accent-color-8,.fd-avatar--accent-color-8.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_8_BorderColor);--fdAvatarColor:var(--sapAvatar_8_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_8_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_8_Hover_Background)}.fd-avatar--accent-color-9,.fd-avatar--accent-color-9.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_9_BorderColor);--fdAvatarColor:var(--sapAvatar_9_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_9_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_9_Hover_Background)}.fd-avatar--accent-color-10,.fd-avatar--accent-color-10.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapAvatar_10_BorderColor);--fdAvatarColor:var(--sapAvatar_10_TextColor);--fdAvatarBackgroundColor:var(--sapAvatar_10_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapAvatar_10_Hover_Background)}.fd-avatar--indication-color-1,.fd-avatar--indication-color-1.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_1_BorderColor);--fdAvatarColor:var(--sapIndicationColor_1_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_1_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_1_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_1_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_1_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_1_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_1_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_1_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_1_Active_TextColor)}.fd-avatar--indication-color-2,.fd-avatar--indication-color-2.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_2_BorderColor);--fdAvatarColor:var(--sapIndicationColor_2_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_2_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_2_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_2_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_2_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_2_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_2_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_2_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_2_Active_TextColor)}.fd-avatar--indication-color-3,.fd-avatar--indication-color-3.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_3_BorderColor);--fdAvatarColor:var(--sapIndicationColor_3_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_3_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_3_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_3_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_3_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_3_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_3_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_3_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_3_Active_TextColor)}.fd-avatar--indication-color-4,.fd-avatar--indication-color-4.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_4_BorderColor);--fdAvatarColor:var(--sapIndicationColor_4_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_4_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_4_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_4_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_4_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_4_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_4_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_4_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_4_Active_TextColor)}.fd-avatar--indication-color-5,.fd-avatar--indication-color-5.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_5_BorderColor);--fdAvatarColor:var(--sapIndicationColor_5_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_5_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_5_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_5_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_5_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_5_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_5_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_5_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_5_Active_TextColor)}.fd-avatar--indication-color-6,.fd-avatar--indication-color-6.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_6_BorderColor);--fdAvatarColor:var(--sapIndicationColor_6_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_6_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_6_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_6_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_6_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_6_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_6_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_6_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_6_Active_TextColor)}.fd-avatar--indication-color-7,.fd-avatar--indication-color-7.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_7_BorderColor);--fdAvatarColor:var(--sapIndicationColor_7_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_7_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_7_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_7_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_7_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_7_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_7_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_7_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_7_Active_TextColor)}.fd-avatar--indication-color-8,.fd-avatar--indication-color-8.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_8_BorderColor);--fdAvatarColor:var(--sapIndicationColor_8_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_8_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_8_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_8_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_8_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_8_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_8_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_8_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_8_Active_TextColor)}.fd-avatar--indication-color-9,.fd-avatar--indication-color-9.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_9_BorderColor);--fdAvatarColor:var(--sapIndicationColor_9_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_9_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_9_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_9_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_9_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_9_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_9_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_9_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_9_Active_TextColor)}.fd-avatar--indication-color-10,.fd-avatar--indication-color-10.fd-avatar--overflow{--fdAvatarBorderColor:var(--sapIndicationColor_10_BorderColor);--fdAvatarColor:var(--sapIndicationColor_10_TextColor);--fdAvatarBackgroundColor:var(--sapIndicationColor_10_Background);--fdAvatarBorderHoverColor:var(--sapAvatar_Hover_BorderColor);--fdAvatarHoverBackgroundColor:var(--sapIndicationColor_10_Hover_Background);--fdAvatarBorderActiveColor:var(--sapIndicationColor_10_Active_BorderColor);--fdAvatarBackgroundActiveColor:var(--sapIndicationColor_10_Active_Background);--fdAvatarActiveColor:var(--sapIndicationColor_10_Active_TextColor);--fdAvatarBorderActiveHoverColor:var(--sapIndicationColor_10_Active_BorderColor);--fdAvatarBackgroundActiveHoverColor:var(--sapIndicationColor_10_Active_Background);--fdAvatarActiveHoverColor:var(--sapIndicationColor_10_Active_TextColor)}.fd-avatar--xs{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:2rem;--fdAvatarFontSize:1rem;--fdAvatarFontStretch:condensed}.fd-avatar--xs .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xs .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--s{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:3rem;--fdAvatarFontSize:1.125rem;--fdAvatarFontStretch:condensed}.fd-avatar--s .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--s .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--sm{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:3rem;--fdAvatarFontSize:1.125rem;--fdAvatarFontStretch:condensed}.fd-avatar--sm .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--sm .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--m{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:4rem;--fdAvatarFontSize:1.5rem;--fdAvatarFontStretch:normal}.fd-avatar--m .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--m .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--md{--fdAvatarZoomIconOffset:-.125rem;--fdAvatarRatio:4rem;--fdAvatarFontSize:1.5rem;--fdAvatarFontStretch:normal}.fd-avatar--md .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--md .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.125rem;--fdAvatarZoomIconFontSize:.75rem}.fd-avatar--l{--fdAvatarZoomIconOffset:-.1875rem;--fdAvatarRatio:5rem;--fdAvatarFontSize:2.25rem;--fdAvatarFontStretch:normal}.fd-avatar--l .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--l .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.25rem;--fdAvatarZoomIconFontSize:.875rem}.fd-avatar--lg{--fdAvatarZoomIconOffset:-.1875rem;--fdAvatarRatio:5rem;--fdAvatarFontSize:2.25rem;--fdAvatarFontStretch:normal}.fd-avatar--lg .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--lg .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.25rem;--fdAvatarZoomIconFontSize:.875rem}.fd-avatar--xl{--fdAvatarZoomIconOffset:-.25rem;--fdAvatarRatio:7rem;--fdAvatarFontSize:3rem;--fdAvatarFontStretch:normal}.fd-avatar--xl .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xl .fd-avatar__zoom-icon[class*=sap-icon]{--fdAvatarZoomIconDimensions:1.75rem;--fdAvatarZoomIconFontSize:1rem}.fd-avatar--accent-color-1.fd-avatar--shell,.fd-avatar--accent-color-10.fd-avatar--shell,.fd-avatar--accent-color-2.fd-avatar--shell,.fd-avatar--accent-color-3.fd-avatar--shell,.fd-avatar--accent-color-4.fd-avatar--shell,.fd-avatar--accent-color-5.fd-avatar--shell,.fd-avatar--accent-color-6.fd-avatar--shell,.fd-avatar--accent-color-7.fd-avatar--shell,.fd-avatar--accent-color-8.fd-avatar--shell,.fd-avatar--accent-color-9.fd-avatar--shell,.fd-avatar--indication-color-1.fd-avatar--shell,.fd-avatar--indication-color-10.fd-avatar--shell,.fd-avatar--indication-color-2.fd-avatar--shell,.fd-avatar--indication-color-3.fd-avatar--shell,.fd-avatar--indication-color-4.fd-avatar--shell,.fd-avatar--indication-color-5.fd-avatar--shell,.fd-avatar--indication-color-6.fd-avatar--shell,.fd-avatar--indication-color-7.fd-avatar--shell,.fd-avatar--indication-color-8.fd-avatar--shell,.fd-avatar--indication-color-9.fd-avatar--shell{border:.0625rem solid var(--sapShell_InteractiveBorderColor)}.fd-avatar--l,.fd-avatar--lg,.fd-avatar--m,.fd-avatar--md,.fd-avatar--s,.fd-avatar--sm,.fd-avatar--xl,.fd-avatar--xs{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-avatar--l:not(.fd-avatar--circle),.fd-avatar--lg:not(.fd-avatar--circle),.fd-avatar--m:not(.fd-avatar--circle),.fd-avatar--md:not(.fd-avatar--circle),.fd-avatar--s:not(.fd-avatar--circle),.fd-avatar--sm:not(.fd-avatar--circle),.fd-avatar--xl:not(.fd-avatar--circle),.fd-avatar--xs:not(.fd-avatar--circle){--fdAvatarZoomIconPosition:var(--fdAvatarZoomIconOffset)}.fd-avatar.fd-avatar--xs,.fd-avatar.fd-avatar--s,.fd-avatar.fd-avatar--sm{--fdAvatarFontStretch: normal}\n/*! Bundled license information:\n\nfundamental-styles/dist/avatar.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
|
|
344
|
+
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], font: [{ type: i0.Input, args: [{ isSignal: true, alias: "font", required: false }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], zoomGlyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomGlyph", required: false }] }], circle: [{ type: i0.Input, args: [{ isSignal: true, alias: "circle", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], contain: [{ type: i0.Input, args: [{ isSignal: true, alias: "contain", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], tile: [{ type: i0.Input, args: [{ isSignal: true, alias: "tile", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], colorAccent: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorAccent", required: false }] }], colorIndication: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorIndication", required: false }] }], random: [{ type: i0.Input, args: [{ isSignal: true, alias: "random", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], valueState: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueState", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], alterIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "alterIcon", required: false }] }], backupImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "backupImage", required: false }] }], avatarClicked: [{ type: i0.Output, args: ["avatarClicked"] }], zoomGlyphClicked: [{ type: i0.Output, args: ["zoomGlyphClicked"] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
|
|
432
345
|
|
|
433
346
|
/**
|
|
434
347
|
* @deprecated
|