@ui5/webcomponents 1.11.2 → 1.11.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/Avatar.d.ts +9 -3
  3. package/dist/Avatar.js +29 -10
  4. package/dist/Avatar.js.map +1 -1
  5. package/dist/assets/test/pages/{ComboBox.html.7265a8e1.js → ComboBox.html.f604a0f3.js} +1 -1
  6. package/dist/assets/test/pages/{Icon.html.52fc9fc3.js → Icon.html.7025f941.js} +1 -1
  7. package/dist/assets/test/pages/{Label.html.7c678114.js → Label.html.6bf18005.js} +1 -1
  8. package/dist/assets/test/pages/{Popups.html.51d27e67.js → Popups.html.858d303d.js} +1 -1
  9. package/dist/css/themes/Avatar.css +1 -1
  10. package/dist/generated/templates/AvatarTemplate.lit.js +2 -3
  11. package/dist/generated/themes/Avatar.css.js +1 -1
  12. package/dist/generated/themes/Avatar.css.js.map +1 -1
  13. package/dist/test/pages/72override.html +1 -1
  14. package/dist/test/pages/AnimanitionOff.html +1 -1
  15. package/dist/test/pages/Avatar.html +1 -1
  16. package/dist/test/pages/AvatarGroup.html +1 -1
  17. package/dist/test/pages/Badge.html +1 -1
  18. package/dist/test/pages/Breadcrumbs.html +1 -1
  19. package/dist/test/pages/BusyIndicator.html +1 -1
  20. package/dist/test/pages/Button.html +1 -1
  21. package/dist/test/pages/Calendar.html +1 -1
  22. package/dist/test/pages/Card.html +1 -1
  23. package/dist/test/pages/Carousel.html +1 -1
  24. package/dist/test/pages/CheckBox.html +1 -1
  25. package/dist/test/pages/ColorPalette.html +1 -1
  26. package/dist/test/pages/ColorPalettePopover.html +1 -1
  27. package/dist/test/pages/ColorPicker.html +1 -1
  28. package/dist/test/pages/ComboBox.html +2 -2
  29. package/dist/test/pages/Components.html +1 -1
  30. package/dist/test/pages/CoreControls.html +1 -1
  31. package/dist/test/pages/CoreControls_exp.html +1 -1
  32. package/dist/test/pages/CustomCSS.html +1 -1
  33. package/dist/test/pages/DatePicker.html +1 -1
  34. package/dist/test/pages/DatePicker_test_page.html +1 -1
  35. package/dist/test/pages/DateRangePicker.html +1 -1
  36. package/dist/test/pages/DateTimePicker.html +1 -1
  37. package/dist/test/pages/DayPicker.html +1 -1
  38. package/dist/test/pages/Dialog.html +1 -1
  39. package/dist/test/pages/DialogLifecycle.html +1 -1
  40. package/dist/test/pages/DialogSemantic.html +1 -1
  41. package/dist/test/pages/DurationPicker.html +1 -1
  42. package/dist/test/pages/Eventing.html +1 -1
  43. package/dist/test/pages/F6Test1.html +1 -1
  44. package/dist/test/pages/F6Test2.html +1 -1
  45. package/dist/test/pages/F6Test3.html +1 -1
  46. package/dist/test/pages/F6Test4.html +1 -1
  47. package/dist/test/pages/F6Test5.html +1 -1
  48. package/dist/test/pages/F6Test6.html +1 -1
  49. package/dist/test/pages/F6Test7.html +1 -1
  50. package/dist/test/pages/FileUploader.html +1 -1
  51. package/dist/test/pages/FontFace.html +1 -1
  52. package/dist/test/pages/FormSupport.html +1 -1
  53. package/dist/test/pages/HCB.html +1 -1
  54. package/dist/test/pages/Icon.html +2 -2
  55. package/dist/test/pages/Icon_and_theming.html +1 -1
  56. package/dist/test/pages/Icon_custom.html +1 -1
  57. package/dist/test/pages/Input.html +1 -1
  58. package/dist/test/pages/InputFieldLabels.html +1 -1
  59. package/dist/test/pages/InputFieldMinWidth.html +1 -1
  60. package/dist/test/pages/InputIcons.html +1 -1
  61. package/dist/test/pages/Input_quickview.html +1 -1
  62. package/dist/test/pages/InputsAlignment.html +1 -1
  63. package/dist/test/pages/InputsLazyLoading.html +1 -1
  64. package/dist/test/pages/ItemNavigation.html +1 -1
  65. package/dist/test/pages/Kitchen.html +1 -1
  66. package/dist/test/pages/Kitchen.openui5.html +1 -1
  67. package/dist/test/pages/Label.html +2 -2
  68. package/dist/test/pages/Link.html +1 -1
  69. package/dist/test/pages/List.html +1 -1
  70. package/dist/test/pages/ListGrowing_Button.html +1 -1
  71. package/dist/test/pages/ListGrowing_Scroll.html +1 -1
  72. package/dist/test/pages/List_keyboard_support.html +1 -1
  73. package/dist/test/pages/List_test_page.html +1 -1
  74. package/dist/test/pages/LitKeyFunction.html +1 -1
  75. package/dist/test/pages/MemoryLeak.html +1 -1
  76. package/dist/test/pages/Menu.html +1 -1
  77. package/dist/test/pages/MessagePage.html +1 -1
  78. package/dist/test/pages/MessageStrip.html +1 -1
  79. package/dist/test/pages/MultiComboBox.html +1 -1
  80. package/dist/test/pages/MultiInput.html +1 -1
  81. package/dist/test/pages/MultiInput_Suggestions.html +1 -1
  82. package/dist/test/pages/OpenUI5.html +1 -1
  83. package/dist/test/pages/Panel.html +1 -1
  84. package/dist/test/pages/Popover.html +1 -1
  85. package/dist/test/pages/PopoverArrowBounds.html +1 -1
  86. package/dist/test/pages/Popups.html +2 -2
  87. package/dist/test/pages/ProgressIndicator.html +1 -1
  88. package/dist/test/pages/RTL.html +1 -1
  89. package/dist/test/pages/RadioButton.html +1 -1
  90. package/dist/test/pages/RangeSlider.html +1 -1
  91. package/dist/test/pages/RatingIndicator.html +1 -1
  92. package/dist/test/pages/ResizeHandler.html +1 -1
  93. package/dist/test/pages/ResponsivePopover.html +1 -1
  94. package/dist/test/pages/SegmentedButton.html +1 -1
  95. package/dist/test/pages/Select.html +1 -1
  96. package/dist/test/pages/Simple.html +1 -1
  97. package/dist/test/pages/Slider.html +1 -1
  98. package/dist/test/pages/SplitButton.html +1 -1
  99. package/dist/test/pages/StepInput.html +1 -1
  100. package/dist/test/pages/Switch.html +1 -1
  101. package/dist/test/pages/TabContainer.html +1 -1
  102. package/dist/test/pages/Table-perf-pure.html +1 -1
  103. package/dist/test/pages/Table-perf.html +1 -1
  104. package/dist/test/pages/Table.html +1 -1
  105. package/dist/test/pages/Table2.html +1 -1
  106. package/dist/test/pages/TableAllPopin.html +1 -1
  107. package/dist/test/pages/TableCustomStyling.html +1 -1
  108. package/dist/test/pages/TableGrouping.html +1 -1
  109. package/dist/test/pages/TableGrowingWithButton.html +1 -1
  110. package/dist/test/pages/TableGrowingWithScroll.html +1 -1
  111. package/dist/test/pages/TableSelection.html +1 -1
  112. package/dist/test/pages/TextArea.html +1 -1
  113. package/dist/test/pages/TimePicker.html +1 -1
  114. package/dist/test/pages/TimeSelection.html +1 -1
  115. package/dist/test/pages/Title.html +1 -1
  116. package/dist/test/pages/Toast.html +1 -1
  117. package/dist/test/pages/ToggleButton.html +1 -1
  118. package/dist/test/pages/Tree.html +1 -1
  119. package/dist/test/pages/WheelSlider_Test_Page.html +1 -1
  120. package/dist/test/pages/base/AriaLabelHelper.html +1 -1
  121. package/dist/test/pages/base/DOMObserver.html +1 -1
  122. package/dist/test/pages/base/InvisibleMessage.html +1 -1
  123. package/dist/test/pages/form.html +1 -1
  124. package/dist/test/pages/i18n-defaultLang.html +1 -1
  125. package/dist/test/pages/i18n-demo.html +1 -1
  126. package/package.json +7 -7
  127. package/src/Avatar.hbs +12 -6
  128. package/src/Avatar.ts +37 -11
  129. package/src/themes/Avatar.css +16 -0
package/dist/test/pages/Table.html CHANGED
@@ -19,7 +19,7 @@
19
19
 
20
20
 
21
21
 
22
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
22
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
23
23
  <link rel="stylesheet" href="/assets/Table.e1ec9973.css">
24
24
  </head>
25
25
 
package/dist/test/pages/Table2.html CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
19
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
20
20
  <link rel="stylesheet" href="/assets/Table2.185517f2.css">
21
21
  </head>
22
22
 
package/dist/test/pages/TableAllPopin.html CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
23
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
24
24
  <link rel="stylesheet" href="/assets/TableAllPopin.ec8feace.css">
25
25
  </head>
26
26
 
package/dist/test/pages/TableCustomStyling.html CHANGED
@@ -19,7 +19,7 @@
19
19
 
20
20
 
21
21
 
22
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
22
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
23
23
  <link rel="stylesheet" href="/assets/TableCustomStyling.3de78436.css">
24
24
  </head>
25
25
 
package/dist/test/pages/TableGrouping.html CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
19
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
20
20
  <link rel="stylesheet" href="/assets/TableGrouping.05ded42c.css">
21
21
  </head>
22
22
 
package/dist/test/pages/TableGrowingWithButton.html CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
13
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
14
14
  <link rel="stylesheet" href="/assets/TableGrowingWithButton.cce942cc.css">
15
15
  </head>
16
16
 
package/dist/test/pages/TableGrowingWithScroll.html CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
13
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
14
14
  <link rel="stylesheet" href="/assets/TableGrowingWithScroll.5514d54d.css">
15
15
  </head>
16
16
 
package/dist/test/pages/TableSelection.html CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
19
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
20
20
  <link rel="stylesheet" href="/assets/TableSelection.de375a7c.css">
21
21
  </head>
22
22
 
package/dist/test/pages/TextArea.html CHANGED
@@ -23,7 +23,7 @@
23
23
 
24
24
 
25
25
 
26
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
26
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
27
27
  <link rel="stylesheet" href="/assets/TextArea.76f953a2.css">
28
28
  </head>
29
29
 
package/dist/test/pages/TimePicker.html CHANGED
@@ -13,7 +13,7 @@
13
13
 
14
14
 
15
15
 
16
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
16
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
17
17
  <link rel="stylesheet" href="/assets/TimePicker.ad7096e8.css">
18
18
  </head>
19
19
  <body class="timepicker1auto">
package/dist/test/pages/TimeSelection.html CHANGED
@@ -13,7 +13,7 @@
13
13
 
14
14
 
15
15
 
16
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
16
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
17
17
  <link rel="stylesheet" href="/assets/TimeSelection.f76266ae.css">
18
18
  </head>
19
19
  <body class="timeselection1auto">
package/dist/test/pages/Title.html CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
15
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
16
16
  <link rel="stylesheet" href="/assets/Title.d6aa17aa.css">
17
17
  </head>
18
18
 
package/dist/test/pages/Toast.html CHANGED
@@ -11,7 +11,7 @@
11
11
  <script>// delete Document.prototype.adoptedStyleSheets;</script>
12
12
 
13
13
 
14
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
14
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
15
15
  <link rel="stylesheet" href="/assets/Toast.d7517578.css">
16
16
  </head>
17
17
 
package/dist/test/pages/ToggleButton.html CHANGED
@@ -23,7 +23,7 @@
23
23
 
24
24
 
25
25
 
26
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
26
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
27
27
  <link rel="stylesheet" href="/assets/ToggleButton.666e069a.css">
28
28
  </head>
29
29
 
package/dist/test/pages/Tree.html CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
 
23
23
 
24
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
24
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
25
25
  <link rel="stylesheet" href="/assets/Tree.e496f991.css">
26
26
  </head>
27
27
 
package/dist/test/pages/WheelSlider_Test_Page.html CHANGED
@@ -17,7 +17,7 @@
17
17
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="></script>
18
18
 
19
19
 
20
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
20
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
21
21
  <link rel="stylesheet" href="/assets/WheelSlider_Test_Page.e2918081.css">
22
22
  </head>
23
23
  <body class="wheelslider_test_page1auto">
package/dist/test/pages/base/AriaLabelHelper.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
  <title>AriaLabelHelper</title>
8
8
 
9
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
9
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
10
10
  </head>
11
11
 
12
12
  <style>
package/dist/test/pages/base/DOMObserver.html CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
13
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
14
14
  </head>
15
15
 
16
16
  <body>
package/dist/test/pages/base/InvisibleMessage.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <title>InvisibleMessage</title>
8
8
 
9
9
 
10
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
10
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
11
11
  </head>
12
12
 
13
13
  <body style="background-color: var(--sapBackgroundColor);">
package/dist/test/pages/form.html CHANGED
@@ -11,7 +11,7 @@
11
11
 
12
12
 
13
13
 
14
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
14
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
15
15
  <link rel="stylesheet" href="/assets/form.a7c56399.css">
16
16
  </head>
17
17
 
package/dist/test/pages/i18n-defaultLang.html CHANGED
@@ -17,7 +17,7 @@
17
17
 
18
18
 
19
19
 
20
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
20
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
21
21
  <link rel="stylesheet" href="/assets/i18n-defaultLang.a3cc4720.css">
22
22
  </head>
23
23
  <body class="i18n-defaultlang1auto">
package/dist/test/pages/i18n-demo.html CHANGED
@@ -13,7 +13,7 @@
13
13
 
14
14
  <script>// delete Document.prototype.adoptedStyleSheets;</script>
15
15
 
16
- <script type="module" crossorigin src="/assets/bundle.common.67f9bef3.js"></script>
16
+ <script type="module" crossorigin src="/assets/bundle.common.6adcbdcc.js"></script>
17
17
  <link rel="stylesheet" href="/assets/i18n-demo.88e9e087.css">
18
18
  </head>
19
19
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ui5/webcomponents",
3
- "version": "1.11.2",
3
+ "version": "1.11.3",
4
4
  "description": "UI5 Web Components: webcomponents.main",
5
5
  "ui5": {
6
6
  "webComponentsPackage": true
@@ -42,14 +42,14 @@
42
42
  "directory": "packages/main"
43
43
  },
44
44
  "dependencies": {
45
- "@ui5/webcomponents-base": "1.11.2",
46
- "@ui5/webcomponents-icons": "1.11.2",
47
- "@ui5/webcomponents-localization": "1.11.2",
48
- "@ui5/webcomponents-theming": "1.11.2"
45
+ "@ui5/webcomponents-base": "1.11.3",
46
+ "@ui5/webcomponents-icons": "1.11.3",
47
+ "@ui5/webcomponents-localization": "1.11.3",
48
+ "@ui5/webcomponents-theming": "1.11.3"
49
49
  },
50
50
  "devDependencies": {
51
- "@ui5/webcomponents-tools": "1.11.2",
51
+ "@ui5/webcomponents-tools": "1.11.3",
52
52
  "chromedriver": "109.0.0"
53
53
  },
54
- "gitHead": "a1fc59e25491370693463306c0323f98faba0596"
54
+ "gitHead": "d60493a76598bd0de055ff9913f5ab79638439fb"
55
55
  }
package/src/Avatar.hbs CHANGED
@@ -1,5 +1,5 @@
1
- <div
2
- class="ui5-avatar-root"
1
+ <div
2
+ class="ui5-avatar-root"
3
3
  tabindex="{{tabindex}}"
4
4
  data-sap-focus-ref
5
5
  @keyup={{_onkeyup}}
@@ -12,10 +12,16 @@
12
12
  >
13
13
  {{#if hasImage}}
14
14
  <slot></slot>
15
- {{else if icon}}
16
- <ui5-icon class="ui5-avatar-icon" name="{{icon}}" accessible-name="{{accessibleNameText}}"></ui5-icon>
17
- {{else if initials}}
18
- <span class="ui5-avatar-initials">{{validInitials}}</span>
15
+ {{else}}
16
+ {{#if icon}}
17
+ <ui5-icon class="ui5-avatar-icon" name="{{icon}}" accessible-name="{{accessibleNameText}}"></ui5-icon>
18
+ {{/if}}
19
+
20
+ {{#if initials}}
21
+ <span class="ui5-avatar-initials">{{validInitials}}</span>
22
+ <ui5-icon class="ui5-avatar-icon ui5-avatar-icon-fallback" name="employee" accessible-name="{{accessibleNameText}}"></ui5-icon>
23
+ {{/if}}
24
+
19
25
  {{/if}}
20
26
 
21
27
  <slot name="badge"></slot>
package/src/Avatar.ts CHANGED
@@ -7,7 +7,9 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
7
7
  import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
8
8
  import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
9
9
  import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
10
-
10
+ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
11
+ import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
12
+ import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
11
13
  import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
12
14
  // Template
13
15
  import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
@@ -276,6 +278,12 @@ class Avatar extends UI5Element implements ITabbable {
276
278
 
277
279
  _onclick?: (e: MouseEvent) => void;
278
280
  static i18nBundle: I18nBundle;
281
+ _handleResizeBound: ResizeObserverCallback;
282
+
283
+ constructor() {
284
+ super();
285
+ this._handleResizeBound = this.handleResize.bind(this);
286
+ }
279
287
 
280
288
  static async onDefine() {
281
289
  Avatar.i18nBundle = await getI18nBundle("@ui5/webcomponents");
@@ -342,18 +350,35 @@ class Avatar extends UI5Element implements ITabbable {
342
350
  return this._hasImage;
343
351
  }
344
352
 
353
+ get initialsContainer(): HTMLObjectElement | null {
354
+ return this.getDomRef()!.querySelector(".ui5-avatar-initials");
355
+ }
356
+
345
357
  onBeforeRendering() {
346
358
  this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
347
359
  }
348
360
 
349
- onAfterRendering() {
350
- this._checkInitials();
361
+ async onAfterRendering() {
362
+ await renderFinished();
363
+ if (this.initials && !this.icon) {
364
+ this._checkInitials();
365
+ }
351
366
  }
352
367
 
353
- _setFallbackIcon() {
354
- // if there isn`t icon set in the avatar the default one is shown, when the initials are not valid or are missing
355
- this.icon = this.icon || "employee";
356
- return this.icon;
368
+ onEnterDOM() {
369
+ this.initialsContainer && ResizeHandler.register(this.initialsContainer,
370
+ this._handleResizeBound);
371
+ }
372
+
373
+ onExitDOM() {
374
+ this.initialsContainer && ResizeHandler.deregister(this.initialsContainer,
375
+ this._handleResizeBound);
376
+ }
377
+
378
+ handleResize() {
379
+ if (this.initials && !this.icon) {
380
+ this._checkInitials();
381
+ }
357
382
  }
358
383
 
359
384
  _checkInitials() {
@@ -361,15 +386,16 @@ class Avatar extends UI5Element implements ITabbable {
361
386
  avatarInitials = avatar.querySelector(".ui5-avatar-initials");
362
387
  // if there aren`t initalts set - the fallBack icon should be shown
363
388
  if (!this.validInitials) {
364
- this._setFallbackIcon();
389
+ avatarInitials!.classList.add("ui5-avatar-initials-hidden");
390
+ return;
365
391
  }
366
392
  // if initials` width is bigger than the avatar, an icon should be shown inside the avatar
393
+ avatarInitials && avatarInitials.classList.remove("ui5-avatar-initials-hidden");
367
394
  if (this.initials && this.initials.length === 3) {
368
- if (avatarInitials && avatarInitials.scrollWidth >= avatar.scrollWidth) {
369
- this._setFallbackIcon();
395
+ if (avatarInitials && avatarInitials.scrollWidth > avatar.scrollWidth) {
396
+ avatarInitials.classList.add("ui5-avatar-initials-hidden");
370
397
  }
371
398
  }
372
- return this.icon;
373
399
  }
374
400
 
375
401
  _onClickHandler(e: MouseEvent) {
package/src/themes/Avatar.css CHANGED
@@ -216,6 +216,22 @@
216
216
  color: inherit;
217
217
  }
218
218
 
219
+ .ui5-avatar-icon ~ .ui5-avatar-initials,
220
+ .ui5-avatar-icon ~ .ui5-avatar-icon-fallback {
221
+ display: none;
222
+ }
223
+
224
+ .ui5-avatar-initials:not(.ui5-avatar-initials-hidden) + .ui5-avatar-icon-fallback {
225
+ display: none;
226
+ }
227
+
228
+ .ui5-avatar-initials-hidden {
229
+ position: absolute;
230
+ visibility: hidden;
231
+ z-index: 0;
232
+ pointer-events: none;
233
+ }
234
+
219
235
  /* Slotted Badge */
220
236
  ::slotted([slot="badge"]) {
221
237
  position: absolute;