@fundamental-ngx/ui5-webcomponents-fiori 0.58.0-rc.52 → 0.58.0-rc.54

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 (157) hide show
  1. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori.mjs +1355 -0
  2. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori.mjs.map +1 -1
  3. package/index.d.ts +1079 -0
  4. package/package.json +2 -206
  5. package/barcode-scanner-dialog/index.d.ts +0 -31
  6. package/dynamic-page/index.d.ts +0 -39
  7. package/dynamic-page-header/index.d.ts +0 -14
  8. package/dynamic-page-title/index.d.ts +0 -14
  9. package/dynamic-side-content/index.d.ts +0 -56
  10. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-barcode-scanner-dialog.mjs +0 -89
  11. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-barcode-scanner-dialog.mjs.map +0 -1
  12. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-dynamic-page-header.mjs +0 -36
  13. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-dynamic-page-header.mjs.map +0 -1
  14. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-dynamic-page-title.mjs +0 -36
  15. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-dynamic-page-title.mjs.map +0 -1
  16. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-dynamic-page.mjs +0 -99
  17. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-dynamic-page.mjs.map +0 -1
  18. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-dynamic-side-content.mjs +0 -118
  19. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-dynamic-side-content.mjs.map +0 -1
  20. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-filter-item-option.mjs +0 -65
  21. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-filter-item-option.mjs.map +0 -1
  22. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-filter-item.mjs +0 -66
  23. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-filter-item.mjs.map +0 -1
  24. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-flexible-column-layout.mjs +0 -262
  25. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-flexible-column-layout.mjs.map +0 -1
  26. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-group-item.mjs +0 -65
  27. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-group-item.mjs.map +0 -1
  28. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-illustrated-message.mjs +0 -116
  29. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-illustrated-message.mjs.map +0 -1
  30. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-media-gallery-item.mjs +0 -70
  31. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-media-gallery-item.mjs.map +0 -1
  32. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-media-gallery.mjs +0 -119
  33. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-media-gallery.mjs.map +0 -1
  34. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-navigation-layout.mjs +0 -60
  35. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-navigation-layout.mjs.map +0 -1
  36. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-notification-list-group-item.mjs +0 -113
  37. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-notification-list-group-item.mjs.map +0 -1
  38. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-notification-list-item.mjs +0 -121
  39. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-notification-list-item.mjs.map +0 -1
  40. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-notification-list.mjs +0 -89
  41. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-notification-list.mjs.map +0 -1
  42. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-page.mjs +0 -80
  43. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-page.mjs.map +0 -1
  44. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-product-switch-item.mjs +0 -116
  45. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-product-switch-item.mjs.map +0 -1
  46. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-product-switch.mjs +0 -36
  47. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-product-switch.mjs.map +0 -1
  48. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-search-item-group.mjs +0 -36
  49. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-search-item-group.mjs.map +0 -1
  50. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-search-item-show-more.mjs +0 -87
  51. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-search-item-show-more.mjs.map +0 -1
  52. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-search-item.mjs +0 -105
  53. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-search-item.mjs.map +0 -1
  54. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-search-message-area.mjs +0 -65
  55. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-search-message-area.mjs.map +0 -1
  56. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-search-scope.mjs +0 -65
  57. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-search-scope.mjs.map +0 -1
  58. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-search.mjs +0 -137
  59. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-search.mjs.map +0 -1
  60. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-shell-bar-branding.mjs +0 -102
  61. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-shell-bar-branding.mjs.map +0 -1
  62. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-shell-bar-item.mjs +0 -109
  63. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-shell-bar-item.mjs.map +0 -1
  64. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-shell-bar-search.mjs +0 -142
  65. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-shell-bar-search.mjs.map +0 -1
  66. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-shell-bar-spacer.mjs +0 -36
  67. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-shell-bar-spacer.mjs.map +0 -1
  68. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-shell-bar.mjs +0 -242
  69. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-shell-bar.mjs.map +0 -1
  70. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-side-navigation-group.mjs +0 -80
  71. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-side-navigation-group.mjs.map +0 -1
  72. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-side-navigation-item.mjs +0 -170
  73. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-side-navigation-item.mjs.map +0 -1
  74. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-side-navigation-sub-item.mjs +0 -165
  75. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-side-navigation-sub-item.mjs.map +0 -1
  76. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-side-navigation.mjs +0 -90
  77. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-side-navigation.mjs.map +0 -1
  78. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-sort-item.mjs +0 -65
  79. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-sort-item.mjs.map +0 -1
  80. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-theming.mjs +0 -23
  81. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-theming.mjs.map +0 -1
  82. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-timeline-group-item.mjs +0 -84
  83. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-timeline-group-item.mjs.map +0 -1
  84. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-timeline-item.mjs +0 -111
  85. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-timeline-item.mjs.map +0 -1
  86. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-timeline.mjs +0 -110
  87. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-timeline.mjs.map +0 -1
  88. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-upload-collection-item.mjs +0 -152
  89. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-upload-collection-item.mjs.map +0 -1
  90. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-upload-collection.mjs +0 -116
  91. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-upload-collection.mjs.map +0 -1
  92. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-menu-account.mjs +0 -95
  93. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-menu-account.mjs.map +0 -1
  94. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-menu-item-group.mjs +0 -36
  95. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-menu-item-group.mjs.map +0 -1
  96. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-menu-item.mjs +0 -36
  97. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-menu-item.mjs.map +0 -1
  98. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-menu.mjs +0 -141
  99. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-menu.mjs.map +0 -1
  100. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-settings-dialog.mjs +0 -106
  101. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-settings-dialog.mjs.map +0 -1
  102. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-settings-item.mjs +0 -123
  103. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-settings-item.mjs.map +0 -1
  104. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-settings-view.mjs +0 -71
  105. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-user-settings-view.mjs.map +0 -1
  106. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-view-settings-dialog.mjs +0 -109
  107. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-view-settings-dialog.mjs.map +0 -1
  108. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-wizard-step.mjs +0 -105
  109. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-wizard-step.mjs.map +0 -1
  110. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-wizard.mjs +0 -80
  111. package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori-wizard.mjs.map +0 -1
  112. package/filter-item/index.d.ts +0 -23
  113. package/filter-item-option/index.d.ts +0 -22
  114. package/flexible-column-layout/index.d.ts +0 -109
  115. package/group-item/index.d.ts +0 -22
  116. package/illustrated-message/index.d.ts +0 -69
  117. package/media-gallery/index.d.ts +0 -57
  118. package/media-gallery-item/index.d.ts +0 -26
  119. package/navigation-layout/index.d.ts +0 -18
  120. package/notification-list/index.d.ts +0 -31
  121. package/notification-list-group-item/index.d.ts +0 -51
  122. package/notification-list-item/index.d.ts +0 -58
  123. package/page/index.d.ts +0 -35
  124. package/product-switch/index.d.ts +0 -14
  125. package/product-switch-item/index.d.ts +0 -56
  126. package/search/index.d.ts +0 -70
  127. package/search-item/index.d.ts +0 -44
  128. package/search-item-group/index.d.ts +0 -14
  129. package/search-item-show-more/index.d.ts +0 -30
  130. package/search-message-area/index.d.ts +0 -22
  131. package/search-scope/index.d.ts +0 -22
  132. package/shell-bar/index.d.ts +0 -160
  133. package/shell-bar-branding/index.d.ts +0 -44
  134. package/shell-bar-item/index.d.ts +0 -50
  135. package/shell-bar-search/index.d.ts +0 -74
  136. package/shell-bar-spacer/index.d.ts +0 -14
  137. package/side-navigation/index.d.ts +0 -33
  138. package/side-navigation-group/index.d.ts +0 -35
  139. package/side-navigation-item/index.d.ts +0 -105
  140. package/side-navigation-sub-item/index.d.ts +0 -101
  141. package/sort-item/index.d.ts +0 -22
  142. package/theming/index.d.ts +0 -11
  143. package/timeline/index.d.ts +0 -50
  144. package/timeline-group-item/index.d.ts +0 -27
  145. package/timeline-item/index.d.ts +0 -50
  146. package/upload-collection/index.d.ts +0 -54
  147. package/upload-collection-item/index.d.ts +0 -85
  148. package/user-menu/index.d.ts +0 -73
  149. package/user-menu-account/index.d.ts +0 -46
  150. package/user-menu-item/index.d.ts +0 -14
  151. package/user-menu-item-group/index.d.ts +0 -14
  152. package/user-settings-dialog/index.d.ts +0 -45
  153. package/user-settings-item/index.d.ts +0 -59
  154. package/user-settings-view/index.d.ts +0 -27
  155. package/view-settings-dialog/index.d.ts +0 -47
  156. package/wizard/index.d.ts +0 -24
  157. package/wizard-step/index.d.ts +0 -58
@@ -190,6 +190,48 @@ class BarcodeScannerDialog {
190
190
  * Fires when the scan fails with error.
191
191
  */
192
192
  this.ui5ScanError = output();
193
+ /**
194
+ * Available slots for content projection in this component.
195
+ *
196
+ * Slots allow you to insert custom content into predefined areas of the web component.
197
+ * Use the `slot` attribute on child elements to target specific slots.
198
+ *
199
+ * - **header**: Defines the header HTML Element.
200
+
201
+ **Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.
202
+ `accessibleName` should be used.
203
+ * - **footer**: Defines the footer HTML Element.
204
+
205
+ **Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.
206
+ This means you need to include your own mechanism within the custom `footer` to close the dialog,
207
+ such as a button with an event listener that closes the dialog.
208
+
209
+ **Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,
210
+ allowing users to close the dialog without any additional implementation.
211
+ *
212
+ * @example
213
+ * ```html
214
+ * <ui5-barcode-scanner-dialog>
215
+ * <div slot="header">Custom header content</div>
216
+ * <p>Default slot content</p>
217
+ * </ui5-barcode-scanner-dialog>
218
+ * ```
219
+ *
220
+ * @readonly
221
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
222
+ */
223
+ this.slots = [
224
+ {
225
+ "name": "header",
226
+ "description": "Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.",
227
+ "since": "2.4.0"
228
+ },
229
+ {
230
+ "name": "footer",
231
+ "description": "Defines the footer HTML Element.\n\n**Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.\nThis means you need to include your own mechanism within the custom `footer` to close the dialog,\nsuch as a button with an event listener that closes the dialog.\n\n**Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,\nallowing users to close the dialog without any additional implementation.",
232
+ "since": "2.4.0"
233
+ }
234
+ ];
193
235
  this.elementRef = inject(ElementRef);
194
236
  this.injector = inject(Injector);
195
237
  }
@@ -277,6 +319,46 @@ class DynamicPage {
277
319
  * Fired when the expand/collapse area of the title is toggled.
278
320
  */
279
321
  this.ui5TitleToggle = output();
322
+ /**
323
+ * Available slots for content projection in this component.
324
+ *
325
+ * Slots allow you to insert custom content into predefined areas of the web component.
326
+ * Use the `slot` attribute on child elements to target specific slots.
327
+ *
328
+ * - **(default)**: Defines the content of the Dynamic Page.
329
+ * - **titleArea**: Defines the title HTML Element.
330
+ * - **headerArea**: Defines the header HTML Element.
331
+ * - **footerArea**: Defines the footer HTML Element.
332
+ *
333
+ * @example
334
+ * ```html
335
+ * <ui5-dynamic-page>
336
+ * <div slot="header">Custom header content</div>
337
+ * <p>Default slot content</p>
338
+ * </ui5-dynamic-page>
339
+ * ```
340
+ *
341
+ * @readonly
342
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
343
+ */
344
+ this.slots = [
345
+ {
346
+ "name": "default",
347
+ "description": "Defines the content of the Dynamic Page."
348
+ },
349
+ {
350
+ "name": "titleArea",
351
+ "description": "Defines the title HTML Element."
352
+ },
353
+ {
354
+ "name": "headerArea",
355
+ "description": "Defines the header HTML Element."
356
+ },
357
+ {
358
+ "name": "footerArea",
359
+ "description": "Defines the footer HTML Element."
360
+ }
361
+ ];
280
362
  this.elementRef = inject(ElementRef);
281
363
  this.injector = inject(Injector);
282
364
  }
@@ -343,6 +425,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
343
425
  class DynamicPageHeader {
344
426
  constructor() {
345
427
  // className is now passed
428
+ /**
429
+ * Available slots for content projection in this component.
430
+ *
431
+ * Slots allow you to insert custom content into predefined areas of the web component.
432
+ * Use the `slot` attribute on child elements to target specific slots.
433
+ *
434
+ * - **(default)**: Defines the content of the Dynamic Page Header.
435
+ *
436
+ * @example
437
+ * ```html
438
+ * <ui5-dynamic-page-header>
439
+ * <div slot="header">Custom header content</div>
440
+ * <p>Default slot content</p>
441
+ * </ui5-dynamic-page-header>
442
+ * ```
443
+ *
444
+ * @readonly
445
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
446
+ */
447
+ this.slots = [
448
+ {
449
+ "name": "default",
450
+ "description": "Defines the content of the Dynamic Page Header."
451
+ }
452
+ ];
346
453
  this.elementRef = inject(ElementRef);
347
454
  this.injector = inject(Injector);
348
455
  }
@@ -369,6 +476,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
369
476
  class DynamicPageTitle {
370
477
  constructor() {
371
478
  // className is now passed
479
+ /**
480
+ * Available slots for content projection in this component.
481
+ *
482
+ * Slots allow you to insert custom content into predefined areas of the web component.
483
+ * Use the `slot` attribute on child elements to target specific slots.
484
+ *
485
+ * - **heading**: Defines the content of the Heading of the Dynamic Page.
486
+
487
+ The font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:
488
+
489
+ **Expanded:** `var(--sapObjectHeader_Title_FontSize)`
490
+
491
+ **Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`
492
+ * - **snappedHeading**: Defines the heading that is shown only when the header is snapped.
493
+ * - **snappedTitleOnMobile**: Defines the content of the snapped title on mobile devices.
494
+
495
+ This slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.
496
+ It should be used to provide a simplified, single-line title that takes up less space on smaller screens.
497
+
498
+ **Note:**
499
+ - The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.
500
+ - The slot is intended for a single `ui5-title` component.
501
+ * - **actionsBar**: Defines the bar with actions in the Dynamic page title.
502
+ * - **navigationBar**: Defines the bar with navigation actions in the Dynamic page title.
503
+ * - **(default)**: Defines the content of the Dynamic page title.
504
+ * - **subheading**: Defines the content of the title that is shown only when the header is not snapped.
505
+ * - **snappedSubheading**: Defines the content of the title that is shown only when the header is snapped.
506
+ * - **breadcrumbs**: Defines the content of the breadcrumbs inside Dynamic Page Title.
507
+ *
508
+ * @example
509
+ * ```html
510
+ * <ui5-dynamic-page-title>
511
+ * <div slot="header">Custom header content</div>
512
+ * <p>Default slot content</p>
513
+ * </ui5-dynamic-page-title>
514
+ * ```
515
+ *
516
+ * @readonly
517
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
518
+ */
519
+ this.slots = [
520
+ {
521
+ "name": "heading",
522
+ "description": "Defines the content of the Heading of the Dynamic Page.\n\nThe font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\n**Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\n**Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`"
523
+ },
524
+ {
525
+ "name": "snappedHeading",
526
+ "description": "Defines the heading that is shown only when the header is snapped."
527
+ },
528
+ {
529
+ "name": "snappedTitleOnMobile",
530
+ "description": "Defines the content of the snapped title on mobile devices.\n\nThis slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\nIt should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\n**Note:**\n- The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n- The slot is intended for a single `ui5-title` component.",
531
+ "since": "2.3.0"
532
+ },
533
+ {
534
+ "name": "actionsBar",
535
+ "description": "Defines the bar with actions in the Dynamic page title."
536
+ },
537
+ {
538
+ "name": "navigationBar",
539
+ "description": "Defines the bar with navigation actions in the Dynamic page title."
540
+ },
541
+ {
542
+ "name": "default",
543
+ "description": "Defines the content of the Dynamic page title."
544
+ },
545
+ {
546
+ "name": "subheading",
547
+ "description": "Defines the content of the title that is shown only when the header is not snapped."
548
+ },
549
+ {
550
+ "name": "snappedSubheading",
551
+ "description": "Defines the content of the title that is shown only when the header is snapped."
552
+ },
553
+ {
554
+ "name": "breadcrumbs",
555
+ "description": "Defines the content of the breadcrumbs inside Dynamic Page Title."
556
+ }
557
+ ];
372
558
  this.elementRef = inject(ElementRef);
373
559
  this.injector = inject(Injector);
374
560
  }
@@ -435,6 +621,36 @@ class DynamicSideContent {
435
621
  * Fires when the current breakpoint has been changed.
436
622
  */
437
623
  this.ui5LayoutChange = output();
624
+ /**
625
+ * Available slots for content projection in this component.
626
+ *
627
+ * Slots allow you to insert custom content into predefined areas of the web component.
628
+ * Use the `slot` attribute on child elements to target specific slots.
629
+ *
630
+ * - **(default)**: Defines the main content.
631
+ * - **sideContent**: Defines the side content.
632
+ *
633
+ * @example
634
+ * ```html
635
+ * <ui5-dynamic-side-content>
636
+ * <div slot="header">Custom header content</div>
637
+ * <p>Default slot content</p>
638
+ * </ui5-dynamic-side-content>
639
+ * ```
640
+ *
641
+ * @readonly
642
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
643
+ */
644
+ this.slots = [
645
+ {
646
+ "name": "default",
647
+ "description": "Defines the main content."
648
+ },
649
+ {
650
+ "name": "sideContent",
651
+ "description": "Defines the side content."
652
+ }
653
+ ];
438
654
  this.elementRef = inject(ElementRef);
439
655
  this.injector = inject(Injector);
440
656
  }
@@ -511,6 +727,31 @@ class FilterItem {
511
727
  This text is typically used to show the number of selected filter options within this category.
512
728
  */
513
729
  this.additionalText = input(...(ngDevMode ? [undefined, { debugName: "additionalText" }] : [])); // className is now passed
730
+ /**
731
+ * Available slots for content projection in this component.
732
+ *
733
+ * Slots allow you to insert custom content into predefined areas of the web component.
734
+ * Use the `slot` attribute on child elements to target specific slots.
735
+ *
736
+ * - **values**: Defines the filter options available for this filter category.
737
+ *
738
+ * @example
739
+ * ```html
740
+ * <ui5-filter-item>
741
+ * <div slot="header">Custom header content</div>
742
+ * <p>Default slot content</p>
743
+ * </ui5-filter-item>
744
+ * ```
745
+ *
746
+ * @readonly
747
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
748
+ */
749
+ this.slots = [
750
+ {
751
+ "name": "values",
752
+ "description": "Defines the filter options available for this filter category."
753
+ }
754
+ ];
514
755
  this.elementRef = inject(ElementRef);
515
756
  this.injector = inject(Injector);
516
757
  }
@@ -698,6 +939,41 @@ class FlexibleColumnLayout {
698
939
  * Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.
699
940
  */
700
941
  this.ui5LayoutConfigurationChange = output();
942
+ /**
943
+ * Available slots for content projection in this component.
944
+ *
945
+ * Slots allow you to insert custom content into predefined areas of the web component.
946
+ * Use the `slot` attribute on child elements to target specific slots.
947
+ *
948
+ * - **startColumn**: Defines the content in the start column.
949
+ * - **midColumn**: Defines the content in the middle column.
950
+ * - **endColumn**: Defines the content in the end column.
951
+ *
952
+ * @example
953
+ * ```html
954
+ * <ui5-flexible-column-layout>
955
+ * <div slot="header">Custom header content</div>
956
+ * <p>Default slot content</p>
957
+ * </ui5-flexible-column-layout>
958
+ * ```
959
+ *
960
+ * @readonly
961
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
962
+ */
963
+ this.slots = [
964
+ {
965
+ "name": "startColumn",
966
+ "description": "Defines the content in the start column."
967
+ },
968
+ {
969
+ "name": "midColumn",
970
+ "description": "Defines the content in the middle column."
971
+ },
972
+ {
973
+ "name": "endColumn",
974
+ "description": "Defines the content in the end column."
975
+ }
976
+ ];
701
977
  this.elementRef = inject(ElementRef);
702
978
  this.injector = inject(Injector);
703
979
  // Internal signal to track columnLayout from layout-change events
@@ -975,6 +1251,49 @@ class IllustratedMessage {
975
1251
  When set to `true`, the attributes `role="presentation"` and `aria-hidden="true"` are applied to the SVG element.
976
1252
  */
977
1253
  this.decorative = input(false, ...(ngDevMode ? [{ debugName: "decorative", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
1254
+ /**
1255
+ * Available slots for content projection in this component.
1256
+ *
1257
+ * Slots allow you to insert custom content into predefined areas of the web component.
1258
+ * Use the `slot` attribute on child elements to target specific slots.
1259
+ *
1260
+ * - **title**: Defines the title of the component.
1261
+
1262
+ **Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.
1263
+ * - **subtitle**: Defines the subtitle of the component.
1264
+
1265
+ **Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.
1266
+ * - **(default)**: Defines the component actions.
1267
+
1268
+ **Note:** Not displayed when the `design` property is set to `Base`.
1269
+ *
1270
+ * @example
1271
+ * ```html
1272
+ * <ui5-illustrated-message>
1273
+ * <div slot="header">Custom header content</div>
1274
+ * <p>Default slot content</p>
1275
+ * </ui5-illustrated-message>
1276
+ * ```
1277
+ *
1278
+ * @readonly
1279
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
1280
+ */
1281
+ this.slots = [
1282
+ {
1283
+ "name": "title",
1284
+ "description": "Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.",
1285
+ "since": "1.7.0"
1286
+ },
1287
+ {
1288
+ "name": "subtitle",
1289
+ "description": "Defines the subtitle of the component.\n\n**Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.",
1290
+ "since": "1.0.0-rc.16"
1291
+ },
1292
+ {
1293
+ "name": "default",
1294
+ "description": "Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`."
1295
+ }
1296
+ ];
978
1297
  this.elementRef = inject(ElementRef);
979
1298
  this.injector = inject(Injector);
980
1299
  }
@@ -1068,6 +1387,35 @@ class MediaGallery {
1068
1387
  the enlarged content of the currently selected item.
1069
1388
  */
1070
1389
  this.ui5DisplayAreaClick = output();
1390
+ /**
1391
+ * Available slots for content projection in this component.
1392
+ *
1393
+ * Slots allow you to insert custom content into predefined areas of the web component.
1394
+ * Use the `slot` attribute on child elements to target specific slots.
1395
+ *
1396
+ * - **(default)**: Defines the component items.
1397
+
1398
+ **Note:** Only one selected item is allowed.
1399
+
1400
+ **Note:** Use the `ui5-media-gallery-item` component to define the desired items.
1401
+ *
1402
+ * @example
1403
+ * ```html
1404
+ * <ui5-media-gallery>
1405
+ * <div slot="header">Custom header content</div>
1406
+ * <p>Default slot content</p>
1407
+ * </ui5-media-gallery>
1408
+ * ```
1409
+ *
1410
+ * @readonly
1411
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
1412
+ */
1413
+ this.slots = [
1414
+ {
1415
+ "name": "default",
1416
+ "description": "Defines the component items.\n\n**Note:** Only one selected item is allowed.\n\n**Note:** Use the `ui5-media-gallery-item` component to define the desired items."
1417
+ }
1418
+ ];
1071
1419
  this.elementRef = inject(ElementRef);
1072
1420
  this.injector = inject(Injector);
1073
1421
  }
@@ -1147,6 +1495,36 @@ class MediaGalleryItem {
1147
1495
  * Determines the layout of the item container.
1148
1496
  */
1149
1497
  this.layout = input("Square", ...(ngDevMode ? [{ debugName: "layout" }] : [])); // className is now passed
1498
+ /**
1499
+ * Available slots for content projection in this component.
1500
+ *
1501
+ * Slots allow you to insert custom content into predefined areas of the web component.
1502
+ * Use the `slot` attribute on child elements to target specific slots.
1503
+ *
1504
+ * - **(default)**: Defines the content of the component.
1505
+ * - **thumbnail**: Defines the content of the thumbnail.
1506
+ *
1507
+ * @example
1508
+ * ```html
1509
+ * <ui5-media-gallery-item>
1510
+ * <div slot="header">Custom header content</div>
1511
+ * <p>Default slot content</p>
1512
+ * </ui5-media-gallery-item>
1513
+ * ```
1514
+ *
1515
+ * @readonly
1516
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
1517
+ */
1518
+ this.slots = [
1519
+ {
1520
+ "name": "default",
1521
+ "description": "Defines the content of the component."
1522
+ },
1523
+ {
1524
+ "name": "thumbnail",
1525
+ "description": "Defines the content of the thumbnail."
1526
+ }
1527
+ ];
1150
1528
  this.elementRef = inject(ElementRef);
1151
1529
  this.injector = inject(Injector);
1152
1530
  }
@@ -1199,6 +1577,41 @@ class NavigationLayout {
1199
1577
  * Specifies the navigation layout mode.
1200
1578
  */
1201
1579
  this.mode = input("Auto", ...(ngDevMode ? [{ debugName: "mode" }] : [])); // className is now passed
1580
+ /**
1581
+ * Available slots for content projection in this component.
1582
+ *
1583
+ * Slots allow you to insert custom content into predefined areas of the web component.
1584
+ * Use the `slot` attribute on child elements to target specific slots.
1585
+ *
1586
+ * - **header**: Defines the header.
1587
+ * - **sideContent**: Defines the side content.
1588
+ * - **(default)**: Defines the content.
1589
+ *
1590
+ * @example
1591
+ * ```html
1592
+ * <ui5-navigation-layout>
1593
+ * <div slot="header">Custom header content</div>
1594
+ * <p>Default slot content</p>
1595
+ * </ui5-navigation-layout>
1596
+ * ```
1597
+ *
1598
+ * @readonly
1599
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
1600
+ */
1601
+ this.slots = [
1602
+ {
1603
+ "name": "header",
1604
+ "description": "Defines the header."
1605
+ },
1606
+ {
1607
+ "name": "sideContent",
1608
+ "description": "Defines the side content."
1609
+ },
1610
+ {
1611
+ "name": "default",
1612
+ "description": "Defines the content."
1613
+ }
1614
+ ];
1202
1615
  this.elementRef = inject(ElementRef);
1203
1616
  this.injector = inject(Injector);
1204
1617
  }
@@ -1261,6 +1674,31 @@ class NotificationList {
1261
1674
  * Fired when an item is toggled.
1262
1675
  */
1263
1676
  this.ui5ItemToggle = output();
1677
+ /**
1678
+ * Available slots for content projection in this component.
1679
+ *
1680
+ * Slots allow you to insert custom content into predefined areas of the web component.
1681
+ * Use the `slot` attribute on child elements to target specific slots.
1682
+ *
1683
+ * - **(default)**: Defines the items of the component.
1684
+ *
1685
+ * @example
1686
+ * ```html
1687
+ * <ui5-notification-list>
1688
+ * <div slot="header">Custom header content</div>
1689
+ * <p>Default slot content</p>
1690
+ * </ui5-notification-list>
1691
+ * ```
1692
+ *
1693
+ * @readonly
1694
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
1695
+ */
1696
+ this.slots = [
1697
+ {
1698
+ "name": "default",
1699
+ "description": "Defines the items of the component."
1700
+ }
1701
+ ];
1264
1702
  this.elementRef = inject(ElementRef);
1265
1703
  this.injector = inject(Injector);
1266
1704
  }
@@ -1360,6 +1798,32 @@ class NotificationListGroupItem {
1360
1798
  * Fired when additional items are requested.
1361
1799
  */
1362
1800
  this.ui5LoadMore = output();
1801
+ /**
1802
+ * Available slots for content projection in this component.
1803
+ *
1804
+ * Slots allow you to insert custom content into predefined areas of the web component.
1805
+ * Use the `slot` attribute on child elements to target specific slots.
1806
+ *
1807
+ * - **(default)**: Defines the items of the `ui5-li-notification-group`,
1808
+ usually `ui5-li-notification` items.
1809
+ *
1810
+ * @example
1811
+ * ```html
1812
+ * <ui5-li-notification-group>
1813
+ * <div slot="header">Custom header content</div>
1814
+ * <p>Default slot content</p>
1815
+ * </ui5-li-notification-group>
1816
+ * ```
1817
+ *
1818
+ * @readonly
1819
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
1820
+ */
1821
+ this.slots = [
1822
+ {
1823
+ "name": "default",
1824
+ "description": "Defines the items of the `ui5-li-notification-group`,\nusually `ui5-li-notification` items."
1825
+ }
1826
+ ];
1363
1827
  this.elementRef = inject(ElementRef);
1364
1828
  this.injector = inject(Injector);
1365
1829
  }
@@ -1470,6 +1934,59 @@ class NotificationListItem {
1470
1934
  * Fired when the `Close` button is pressed.
1471
1935
  */
1472
1936
  this.ui5Close = output();
1937
+ /**
1938
+ * Available slots for content projection in this component.
1939
+ *
1940
+ * Slots allow you to insert custom content into predefined areas of the web component.
1941
+ * Use the `slot` attribute on child elements to target specific slots.
1942
+ *
1943
+ * - **avatar**: Defines the avatar, displayed in the `ui5-li-notification`.
1944
+
1945
+ **Note:** Consider using the `ui5-avatar` to display icons, initials or images.
1946
+
1947
+ **Note:** In order to be complaint with the UX guidlines and for best experience,
1948
+ we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`
1949
+ you can set its `size` property to `XS` to get the required size - `<ui5-avatar size="XS"></ui5-avatar>`.
1950
+ * - **menu**: Defines the menu, displayed in the `ui5-li-notification`.
1951
+
1952
+ **Note:** Use this for implementing actions.
1953
+
1954
+ **Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.
1955
+ * - **footnotes**: Defines the elements, displayed in the footer of the of the component.
1956
+ * - **(default)**: Defines the content of the `ui5-li-notification`,
1957
+ usually a description of the notification.
1958
+
1959
+ **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
1960
+ *
1961
+ * @example
1962
+ * ```html
1963
+ * <ui5-li-notification>
1964
+ * <div slot="header">Custom header content</div>
1965
+ * <p>Default slot content</p>
1966
+ * </ui5-li-notification>
1967
+ * ```
1968
+ *
1969
+ * @readonly
1970
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
1971
+ */
1972
+ this.slots = [
1973
+ {
1974
+ "name": "avatar",
1975
+ "description": "Defines the avatar, displayed in the `ui5-li-notification`.\n\n**Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\n**Note:** In order to be complaint with the UX guidlines and for best experience,\nwe recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\nyou can set its `size` property to `XS` to get the required size - `<ui5-avatar size=\"XS\"></ui5-avatar>`."
1976
+ },
1977
+ {
1978
+ "name": "menu",
1979
+ "description": "Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0."
1980
+ },
1981
+ {
1982
+ "name": "footnotes",
1983
+ "description": "Defines the elements, displayed in the footer of the of the component."
1984
+ },
1985
+ {
1986
+ "name": "default",
1987
+ "description": "Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."
1988
+ }
1989
+ ];
1473
1990
  this.elementRef = inject(ElementRef);
1474
1991
  this.injector = inject(Injector);
1475
1992
  }
@@ -1559,6 +2076,41 @@ class Page {
1559
2076
  * Defines the footer visibility.
1560
2077
  */
1561
2078
  this.hideFooter = input(false, ...(ngDevMode ? [{ debugName: "hideFooter", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
2079
+ /**
2080
+ * Available slots for content projection in this component.
2081
+ *
2082
+ * Slots allow you to insert custom content into predefined areas of the web component.
2083
+ * Use the `slot` attribute on child elements to target specific slots.
2084
+ *
2085
+ * - **header**: Defines the header HTML Element.
2086
+ * - **(default)**: Defines the content HTML Element.
2087
+ * - **footer**: Defines the footer HTML Element.
2088
+ *
2089
+ * @example
2090
+ * ```html
2091
+ * <ui5-page>
2092
+ * <div slot="header">Custom header content</div>
2093
+ * <p>Default slot content</p>
2094
+ * </ui5-page>
2095
+ * ```
2096
+ *
2097
+ * @readonly
2098
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
2099
+ */
2100
+ this.slots = [
2101
+ {
2102
+ "name": "header",
2103
+ "description": "Defines the header HTML Element."
2104
+ },
2105
+ {
2106
+ "name": "default",
2107
+ "description": "Defines the content HTML Element."
2108
+ },
2109
+ {
2110
+ "name": "footer",
2111
+ "description": "Defines the footer HTML Element."
2112
+ }
2113
+ ];
1562
2114
  this.elementRef = inject(ElementRef);
1563
2115
  this.injector = inject(Injector);
1564
2116
  }
@@ -1609,6 +2161,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
1609
2161
  class ProductSwitch {
1610
2162
  constructor() {
1611
2163
  // className is now passed
2164
+ /**
2165
+ * Available slots for content projection in this component.
2166
+ *
2167
+ * Slots allow you to insert custom content into predefined areas of the web component.
2168
+ * Use the `slot` attribute on child elements to target specific slots.
2169
+ *
2170
+ * - **(default)**: Defines the items of the `ui5-product-switch`.
2171
+ *
2172
+ * @example
2173
+ * ```html
2174
+ * <ui5-product-switch>
2175
+ * <div slot="header">Custom header content</div>
2176
+ * <p>Default slot content</p>
2177
+ * </ui5-product-switch>
2178
+ * ```
2179
+ *
2180
+ * @readonly
2181
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
2182
+ */
2183
+ this.slots = [
2184
+ {
2185
+ "name": "default",
2186
+ "description": "Defines the items of the `ui5-product-switch`."
2187
+ }
2188
+ ];
1612
2189
  this.elementRef = inject(ElementRef);
1613
2190
  this.injector = inject(Injector);
1614
2191
  }
@@ -1675,6 +2252,35 @@ class ProductSwitchItem {
1675
2252
  click/tap or by using the Enter or Space key.
1676
2253
  */
1677
2254
  this.ui5Click = output();
2255
+ /**
2256
+ * Available slots for content projection in this component.
2257
+ *
2258
+ * Slots allow you to insert custom content into predefined areas of the web component.
2259
+ * Use the `slot` attribute on child elements to target specific slots.
2260
+ *
2261
+ * - **image**: Defines an image to be displayed instead of the standard icon.
2262
+
2263
+ **Note:** The image slot takes precedence over the icon property.
2264
+ **Note:** We recommend using non-interactive ui5-avatar with size S, Square shape and Transparent colorScheme for best alignment.
2265
+ *
2266
+ * @example
2267
+ * ```html
2268
+ * <ui5-product-switch-item>
2269
+ * <div slot="header">Custom header content</div>
2270
+ * <p>Default slot content</p>
2271
+ * </ui5-product-switch-item>
2272
+ * ```
2273
+ *
2274
+ * @readonly
2275
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
2276
+ */
2277
+ this.slots = [
2278
+ {
2279
+ "name": "image",
2280
+ "description": "Defines an image to be displayed instead of the standard icon.\n\n**Note:** The image slot takes precedence over the icon property.\n**Note:** We recommend using non-interactive ui5-avatar with size S, Square shape and Transparent colorScheme for best alignment.",
2281
+ "since": "2.14.0"
2282
+ }
2283
+ ];
1678
2284
  this.elementRef = inject(ElementRef);
1679
2285
  this.injector = inject(Injector);
1680
2286
  }
@@ -1795,6 +2401,60 @@ class Search {
1795
2401
  * Fired when the user has triggered search with Enter key or Search Button press.
1796
2402
  */
1797
2403
  this.ui5Search = output();
2404
+ /**
2405
+ * Available slots for content projection in this component.
2406
+ *
2407
+ * Slots allow you to insert custom content into predefined areas of the web component.
2408
+ * Use the `slot` attribute on child elements to target specific slots.
2409
+ *
2410
+ * - **(default)**: Defines the Search suggestion items.
2411
+ * - **action**: Defines the popup footer action button.
2412
+ * - **illustration**: Defines the illustrated message to be shown in the popup.
2413
+ * - **messageArea**: Defines the illustrated message to be shown in the popup.
2414
+ * - **scopes**: Defines the component scope options.
2415
+ * - **filterButton**: Defines the filter button slot, used to display an additional filtering button.
2416
+ This slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.
2417
+
2418
+ **Note:** Scope button and Filter button are mutually exclusive.
2419
+ *
2420
+ * @example
2421
+ * ```html
2422
+ * <ui5-search>
2423
+ * <div slot="header">Custom header content</div>
2424
+ * <p>Default slot content</p>
2425
+ * </ui5-search>
2426
+ * ```
2427
+ *
2428
+ * @readonly
2429
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
2430
+ */
2431
+ this.slots = [
2432
+ {
2433
+ "name": "default",
2434
+ "description": "Defines the Search suggestion items."
2435
+ },
2436
+ {
2437
+ "name": "action",
2438
+ "description": "Defines the popup footer action button."
2439
+ },
2440
+ {
2441
+ "name": "illustration",
2442
+ "description": "Defines the illustrated message to be shown in the popup."
2443
+ },
2444
+ {
2445
+ "name": "messageArea",
2446
+ "description": "Defines the illustrated message to be shown in the popup."
2447
+ },
2448
+ {
2449
+ "name": "scopes",
2450
+ "description": "Defines the component scope options."
2451
+ },
2452
+ {
2453
+ "name": "filterButton",
2454
+ "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.",
2455
+ "since": "2.11.0"
2456
+ }
2457
+ ];
1798
2458
  this.elementRef = inject(ElementRef);
1799
2459
  this.injector = inject(Injector);
1800
2460
  }
@@ -1896,6 +2556,44 @@ class SearchItem {
1896
2556
  * Fired when delete button is pressed.
1897
2557
  */
1898
2558
  this.ui5Delete = output();
2559
+ /**
2560
+ * Available slots for content projection in this component.
2561
+ *
2562
+ * Slots allow you to insert custom content into predefined areas of the web component.
2563
+ * Use the `slot` attribute on child elements to target specific slots.
2564
+ *
2565
+ * - **image**: **Note:** While the slot allows the option of setting a custom avatar, to comply with the
2566
+ design guidelines, use the `ui5-avatar` with size - XS.
2567
+ * - **actions**: Defines the actionable elements.
2568
+ This slot allows placing additional interactive elements (such as buttons, icons, or tags)
2569
+ next to the delete button, providing flexible customization for various user actions.
2570
+
2571
+ **Note:** While the slot is flexible, for consistency with design guidelines,
2572
+ it's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.
2573
+ *
2574
+ * @example
2575
+ * ```html
2576
+ * <ui5-search-item>
2577
+ * <div slot="header">Custom header content</div>
2578
+ * <p>Default slot content</p>
2579
+ * </ui5-search-item>
2580
+ * ```
2581
+ *
2582
+ * @readonly
2583
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
2584
+ */
2585
+ this.slots = [
2586
+ {
2587
+ "name": "image",
2588
+ "description": "**Note:** While the slot allows the option of setting a custom avatar, to comply with the\ndesign guidelines, use the `ui5-avatar` with size - XS.",
2589
+ "since": "2.12.0"
2590
+ },
2591
+ {
2592
+ "name": "actions",
2593
+ "description": "Defines the actionable elements.\nThis slot allows placing additional interactive elements (such as buttons, icons, or tags)\nnext to the delete button, providing flexible customization for various user actions.\n\n**Note:** While the slot is flexible, for consistency with design guidelines,\nit's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.",
2594
+ "since": "2.16.0"
2595
+ }
2596
+ ];
1899
2597
  this.elementRef = inject(ElementRef);
1900
2598
  this.injector = inject(Injector);
1901
2599
  }
@@ -2295,6 +2993,98 @@ class ShellBar {
2295
2993
  **Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.
2296
2994
  */
2297
2995
  this.ui5ContentItemVisibilityChange = output();
2996
+ /**
2997
+ * Available slots for content projection in this component.
2998
+ *
2999
+ * Slots allow you to insert custom content into predefined areas of the web component.
3000
+ * Use the `slot` attribute on child elements to target specific slots.
3001
+ *
3002
+ * - **assistant**: Defines the assistant slot.
3003
+ * - **branding**: Defines the branding slot.
3004
+ The `ui5-shellbar-branding` component is intended to be placed inside this slot.
3005
+ Content placed here takes precedence over the `primaryTitle` property and the `logo` content slot.
3006
+
3007
+ **Note:** The `branding` slot is in an experimental state and is a subject to change.
3008
+ * - **(default)**: Defines the `ui5-shellbar` additional items.
3009
+
3010
+ **Note:**
3011
+ You can use the `<ui5-shellbar-item></ui5-shellbar-item>`.
3012
+ * - **profile**: You can pass `ui5-avatar` to set the profile image/icon.
3013
+ If no profile slot is set - profile will be excluded from actions.
3014
+
3015
+ **Note:** We recommend not using the `size` attribute of `ui5-avatar` because
3016
+ it should have specific size by design in the context of `ui5-shellbar` profile.
3017
+ * - **logo**: Defines the logo of the `ui5-shellbar`.
3018
+ For example, you can use `ui5-avatar` or `img` elements as logo.
3019
+ * - **menuItems**: Defines the items displayed in menu after a click on a start button.
3020
+
3021
+ **Note:** You can use the `<ui5-li></ui5-li>` and its ancestors.
3022
+ * - **searchField**: Defines the `ui5-input`, that will be used as a search field.
3023
+ * - **startButton**: Defines a `ui5-button` in the bar that will be placed in the beginning.
3024
+ We encourage this slot to be used for a menu button.
3025
+ It gets overstyled to match ShellBar's styling.
3026
+ * - **content**: Define the items displayed in the content area.
3027
+
3028
+ Use the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.
3029
+ Lower values will be hidden first.
3030
+
3031
+ **Note:** The `content` slot is in an experimental state and is a subject to change.
3032
+ *
3033
+ * @example
3034
+ * ```html
3035
+ * <ui5-shellbar>
3036
+ * <div slot="header">Custom header content</div>
3037
+ * <p>Default slot content</p>
3038
+ * </ui5-shellbar>
3039
+ * ```
3040
+ *
3041
+ * @readonly
3042
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
3043
+ */
3044
+ this.slots = [
3045
+ {
3046
+ "name": "assistant",
3047
+ "description": "Defines the assistant slot.",
3048
+ "since": "2.0.0"
3049
+ },
3050
+ {
3051
+ "name": "branding",
3052
+ "description": "Defines the branding slot.\nThe `ui5-shellbar-branding` component is intended to be placed inside this slot.\nContent placed here takes precedence over the `primaryTitle` property and the `logo` content slot.\n\n**Note:** The `branding` slot is in an experimental state and is a subject to change.",
3053
+ "since": "2.12.0"
3054
+ },
3055
+ {
3056
+ "name": "default",
3057
+ "description": "Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the `<ui5-shellbar-item></ui5-shellbar-item>`."
3058
+ },
3059
+ {
3060
+ "name": "profile",
3061
+ "description": "You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile.",
3062
+ "since": "1.0.0-rc.6"
3063
+ },
3064
+ {
3065
+ "name": "logo",
3066
+ "description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.",
3067
+ "since": "1.0.0-rc.8"
3068
+ },
3069
+ {
3070
+ "name": "menuItems",
3071
+ "description": "Defines the items displayed in menu after a click on a start button.\n\n**Note:** You can use the `<ui5-li></ui5-li>` and its ancestors.",
3072
+ "since": "0.10"
3073
+ },
3074
+ {
3075
+ "name": "searchField",
3076
+ "description": "Defines the `ui5-input`, that will be used as a search field."
3077
+ },
3078
+ {
3079
+ "name": "startButton",
3080
+ "description": "Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a menu button.\nIt gets overstyled to match ShellBar's styling."
3081
+ },
3082
+ {
3083
+ "name": "content",
3084
+ "description": "Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change.",
3085
+ "since": "2.7.0"
3086
+ }
3087
+ ];
2298
3088
  this.elementRef = inject(ElementRef);
2299
3089
  this.injector = inject(Injector);
2300
3090
  }
@@ -2436,6 +3226,39 @@ class ShellBarBranding {
2436
3226
  * Fired, when the logo is activated.
2437
3227
  */
2438
3228
  this.ui5Click = output();
3229
+ /**
3230
+ * Available slots for content projection in this component.
3231
+ *
3232
+ * Slots allow you to insert custom content into predefined areas of the web component.
3233
+ * Use the `slot` attribute on child elements to target specific slots.
3234
+ *
3235
+ * - **(default)**: Defines the title for the ui5-shellbar-branding component.
3236
+
3237
+ **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
3238
+ * - **logo**: Defines the logo of the `ui5-shellbar`.
3239
+ For example, you can use `ui5-avatar` or `img` elements as logo.
3240
+ *
3241
+ * @example
3242
+ * ```html
3243
+ * <ui5-shellbar-branding>
3244
+ * <div slot="header">Custom header content</div>
3245
+ * <p>Default slot content</p>
3246
+ * </ui5-shellbar-branding>
3247
+ * ```
3248
+ *
3249
+ * @readonly
3250
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
3251
+ */
3252
+ this.slots = [
3253
+ {
3254
+ "name": "default",
3255
+ "description": "Defines the title for the ui5-shellbar-branding component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."
3256
+ },
3257
+ {
3258
+ "name": "logo",
3259
+ "description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo."
3260
+ }
3261
+ ];
2439
3262
  this.elementRef = inject(ElementRef);
2440
3263
  this.injector = inject(Injector);
2441
3264
  }
@@ -2657,6 +3480,60 @@ class ShellBarSearch {
2657
3480
  * Fired when the user has triggered search with Enter key or Search Button press.
2658
3481
  */
2659
3482
  this.ui5Search = output();
3483
+ /**
3484
+ * Available slots for content projection in this component.
3485
+ *
3486
+ * Slots allow you to insert custom content into predefined areas of the web component.
3487
+ * Use the `slot` attribute on child elements to target specific slots.
3488
+ *
3489
+ * - **(default)**: Defines the Search suggestion items.
3490
+ * - **action**: Defines the popup footer action button.
3491
+ * - **illustration**: Defines the illustrated message to be shown in the popup.
3492
+ * - **messageArea**: Defines the illustrated message to be shown in the popup.
3493
+ * - **scopes**: Defines the component scope options.
3494
+ * - **filterButton**: Defines the filter button slot, used to display an additional filtering button.
3495
+ This slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.
3496
+
3497
+ **Note:** Scope button and Filter button are mutually exclusive.
3498
+ *
3499
+ * @example
3500
+ * ```html
3501
+ * <ui5-shellbar-search>
3502
+ * <div slot="header">Custom header content</div>
3503
+ * <p>Default slot content</p>
3504
+ * </ui5-shellbar-search>
3505
+ * ```
3506
+ *
3507
+ * @readonly
3508
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
3509
+ */
3510
+ this.slots = [
3511
+ {
3512
+ "name": "default",
3513
+ "description": "Defines the Search suggestion items."
3514
+ },
3515
+ {
3516
+ "name": "action",
3517
+ "description": "Defines the popup footer action button."
3518
+ },
3519
+ {
3520
+ "name": "illustration",
3521
+ "description": "Defines the illustrated message to be shown in the popup."
3522
+ },
3523
+ {
3524
+ "name": "messageArea",
3525
+ "description": "Defines the illustrated message to be shown in the popup."
3526
+ },
3527
+ {
3528
+ "name": "scopes",
3529
+ "description": "Defines the component scope options."
3530
+ },
3531
+ {
3532
+ "name": "filterButton",
3533
+ "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.",
3534
+ "since": "2.11.0"
3535
+ }
3536
+ ];
2660
3537
  this.elementRef = inject(ElementRef);
2661
3538
  this.injector = inject(Injector);
2662
3539
  }
@@ -2774,6 +3651,46 @@ class SideNavigation {
2774
3651
  * Fired when the selection has changed via user interaction
2775
3652
  */
2776
3653
  this.ui5SelectionChange = output();
3654
+ /**
3655
+ * Available slots for content projection in this component.
3656
+ *
3657
+ * Slots allow you to insert custom content into predefined areas of the web component.
3658
+ * Use the `slot` attribute on child elements to target specific slots.
3659
+ *
3660
+ * - **(default)**: Defines the main items of the component.
3661
+ * - **fixedItems**: Defines the fixed items at the bottom of the component.
3662
+
3663
+ **Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items)
3664
+ * - **header**: Defines the header of the `ui5-side-navigation`.
3665
+
3666
+ **Note:** The header is displayed when the component is expanded - the property `collapsed` is false;
3667
+ *
3668
+ * @example
3669
+ * ```html
3670
+ * <ui5-side-navigation>
3671
+ * <div slot="header">Custom header content</div>
3672
+ * <p>Default slot content</p>
3673
+ * </ui5-side-navigation>
3674
+ * ```
3675
+ *
3676
+ * @readonly
3677
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
3678
+ */
3679
+ this.slots = [
3680
+ {
3681
+ "name": "default",
3682
+ "description": "Defines the main items of the component."
3683
+ },
3684
+ {
3685
+ "name": "fixedItems",
3686
+ "description": "Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)"
3687
+ },
3688
+ {
3689
+ "name": "header",
3690
+ "description": "Defines the header of the `ui5-side-navigation`.\n\n**Note:** The header is displayed when the component is expanded - the property `collapsed` is false;",
3691
+ "since": "1.0.0-rc.11"
3692
+ }
3693
+ ];
2777
3694
  this.elementRef = inject(ElementRef);
2778
3695
  this.injector = inject(Injector);
2779
3696
  }
@@ -2857,6 +3774,31 @@ class SideNavigationGroup {
2857
3774
  when the component is collapsed ("icon only" design is visualized) or the item text is truncated.
2858
3775
  */
2859
3776
  this.tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : [])); // className is now passed
3777
+ /**
3778
+ * Available slots for content projection in this component.
3779
+ *
3780
+ * Slots allow you to insert custom content into predefined areas of the web component.
3781
+ * Use the `slot` attribute on child elements to target specific slots.
3782
+ *
3783
+ * - **(default)**: Defines nested items by passing `ui5-side-navigation-item` to the default slot.
3784
+ *
3785
+ * @example
3786
+ * ```html
3787
+ * <ui5-side-navigation-group>
3788
+ * <div slot="header">Custom header content</div>
3789
+ * <p>Default slot content</p>
3790
+ * </ui5-side-navigation-group>
3791
+ * ```
3792
+ *
3793
+ * @readonly
3794
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
3795
+ */
3796
+ this.slots = [
3797
+ {
3798
+ "name": "default",
3799
+ "description": "Defines nested items by passing `ui5-side-navigation-item` to the default slot."
3800
+ }
3801
+ ];
2860
3802
  this.elementRef = inject(ElementRef);
2861
3803
  this.injector = inject(Injector);
2862
3804
  }
@@ -2995,6 +3937,31 @@ class SideNavigationItem {
2995
3937
  * Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.
2996
3938
  */
2997
3939
  this.ui5Click = output();
3940
+ /**
3941
+ * Available slots for content projection in this component.
3942
+ *
3943
+ * Slots allow you to insert custom content into predefined areas of the web component.
3944
+ * Use the `slot` attribute on child elements to target specific slots.
3945
+ *
3946
+ * - **(default)**: Defines nested items by passing `ui5-side-navigation-sub-item` to the default slot.
3947
+ *
3948
+ * @example
3949
+ * ```html
3950
+ * <ui5-side-navigation-item>
3951
+ * <div slot="header">Custom header content</div>
3952
+ * <p>Default slot content</p>
3953
+ * </ui5-side-navigation-item>
3954
+ * ```
3955
+ *
3956
+ * @readonly
3957
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
3958
+ */
3959
+ this.slots = [
3960
+ {
3961
+ "name": "default",
3962
+ "description": "Defines nested items by passing `ui5-side-navigation-sub-item` to the default slot."
3963
+ }
3964
+ ];
2998
3965
  this.elementRef = inject(ElementRef);
2999
3966
  this.injector = inject(Injector);
3000
3967
  }
@@ -3311,6 +4278,31 @@ class Timeline {
3311
4278
  **Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.
3312
4279
  */
3313
4280
  this.ui5LoadMore = output();
4281
+ /**
4282
+ * Available slots for content projection in this component.
4283
+ *
4284
+ * Slots allow you to insert custom content into predefined areas of the web component.
4285
+ * Use the `slot` attribute on child elements to target specific slots.
4286
+ *
4287
+ * - **(default)**: Determines the content of the `ui5-timeline`.
4288
+ *
4289
+ * @example
4290
+ * ```html
4291
+ * <ui5-timeline>
4292
+ * <div slot="header">Custom header content</div>
4293
+ * <p>Default slot content</p>
4294
+ * </ui5-timeline>
4295
+ * ```
4296
+ *
4297
+ * @readonly
4298
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
4299
+ */
4300
+ this.slots = [
4301
+ {
4302
+ "name": "default",
4303
+ "description": "Determines the content of the `ui5-timeline`."
4304
+ }
4305
+ ];
3314
4306
  this.elementRef = inject(ElementRef);
3315
4307
  this.injector = inject(Injector);
3316
4308
  }
@@ -3388,6 +4380,31 @@ class TimelineGroupItem {
3388
4380
  * Fired when the group item is expanded or collapsed.
3389
4381
  */
3390
4382
  this.ui5Toggle = output();
4383
+ /**
4384
+ * Available slots for content projection in this component.
4385
+ *
4386
+ * Slots allow you to insert custom content into predefined areas of the web component.
4387
+ * Use the `slot` attribute on child elements to target specific slots.
4388
+ *
4389
+ * - **(default)**: Determines the content of the `ui5-timeline-group-item`.
4390
+ *
4391
+ * @example
4392
+ * ```html
4393
+ * <ui5-timeline-group-item>
4394
+ * <div slot="header">Custom header content</div>
4395
+ * <p>Default slot content</p>
4396
+ * </ui5-timeline-group-item>
4397
+ * ```
4398
+ *
4399
+ * @readonly
4400
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
4401
+ */
4402
+ this.slots = [
4403
+ {
4404
+ "name": "default",
4405
+ "description": "Determines the content of the `ui5-timeline-group-item`."
4406
+ }
4407
+ ];
3391
4408
  this.elementRef = inject(ElementRef);
3392
4409
  this.injector = inject(Injector);
3393
4410
  }
@@ -3485,6 +4502,31 @@ class TimelineItem {
3485
4502
  attribute is not set.
3486
4503
  */
3487
4504
  this.ui5NameClick = output();
4505
+ /**
4506
+ * Available slots for content projection in this component.
4507
+ *
4508
+ * Slots allow you to insert custom content into predefined areas of the web component.
4509
+ * Use the `slot` attribute on child elements to target specific slots.
4510
+ *
4511
+ * - **(default)**: Defines the content of the `ui5-timeline-item`.
4512
+ *
4513
+ * @example
4514
+ * ```html
4515
+ * <ui5-timeline-item>
4516
+ * <div slot="header">Custom header content</div>
4517
+ * <p>Default slot content</p>
4518
+ * </ui5-timeline-item>
4519
+ * ```
4520
+ *
4521
+ * @readonly
4522
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
4523
+ */
4524
+ this.slots = [
4525
+ {
4526
+ "name": "default",
4527
+ "description": "Defines the content of the `ui5-timeline-item`."
4528
+ }
4529
+ ];
3488
4530
  this.elementRef = inject(ElementRef);
3489
4531
  this.injector = inject(Injector);
3490
4532
  }
@@ -3590,6 +4632,42 @@ class UploadCollection {
3590
4632
  in `Single` and `Multiple` modes.
3591
4633
  */
3592
4634
  this.ui5SelectionChange = output();
4635
+ /**
4636
+ * Available slots for content projection in this component.
4637
+ *
4638
+ * Slots allow you to insert custom content into predefined areas of the web component.
4639
+ * Use the `slot` attribute on child elements to target specific slots.
4640
+ *
4641
+ * - **(default)**: Defines the items of the `ui5-upload-collection`.
4642
+
4643
+ **Note:** Use `ui5-upload-collection-item` for the intended design.
4644
+ * - **header**: Defines the `ui5-upload-collection` header.
4645
+
4646
+ **Note:** If `header` slot is provided,
4647
+ the labelling of the `UploadCollection` is a responsibility of the application developer.
4648
+ `accessibleName` should be used.
4649
+ *
4650
+ * @example
4651
+ * ```html
4652
+ * <ui5-upload-collection>
4653
+ * <div slot="header">Custom header content</div>
4654
+ * <p>Default slot content</p>
4655
+ * </ui5-upload-collection>
4656
+ * ```
4657
+ *
4658
+ * @readonly
4659
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
4660
+ */
4661
+ this.slots = [
4662
+ {
4663
+ "name": "default",
4664
+ "description": "Defines the items of the `ui5-upload-collection`.\n\n**Note:** Use `ui5-upload-collection-item` for the intended design."
4665
+ },
4666
+ {
4667
+ "name": "header",
4668
+ "description": "Defines the `ui5-upload-collection` header.\n\n**Note:** If `header` slot is provided,\nthe labelling of the `UploadCollection` is a responsibility of the application developer.\n`accessibleName` should be used."
4669
+ }
4670
+ ];
3593
4671
  this.elementRef = inject(ElementRef);
3594
4672
  this.injector = inject(Injector);
3595
4673
  }
@@ -3727,6 +4805,38 @@ class UploadCollectionItem {
3727
4805
  **Note:** Retry button is displayed when `uploadState` property is set to `Error`.
3728
4806
  */
3729
4807
  this.ui5Retry = output();
4808
+ /**
4809
+ * Available slots for content projection in this component.
4810
+ *
4811
+ * Slots allow you to insert custom content into predefined areas of the web component.
4812
+ * Use the `slot` attribute on child elements to target specific slots.
4813
+ *
4814
+ * - **(default)**: Hold the description of the `ui5-upload-collection-item`. Will be shown below the file name.
4815
+ * - **thumbnail**: A thumbnail, which will be shown in the beginning of the `ui5-upload-collection-item`.
4816
+
4817
+ **Note:** Use `ui5-icon` or `img` for the intended design.
4818
+ *
4819
+ * @example
4820
+ * ```html
4821
+ * <ui5-upload-collection-item>
4822
+ * <div slot="header">Custom header content</div>
4823
+ * <p>Default slot content</p>
4824
+ * </ui5-upload-collection-item>
4825
+ * ```
4826
+ *
4827
+ * @readonly
4828
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
4829
+ */
4830
+ this.slots = [
4831
+ {
4832
+ "name": "default",
4833
+ "description": "Hold the description of the `ui5-upload-collection-item`. Will be shown below the file name."
4834
+ },
4835
+ {
4836
+ "name": "thumbnail",
4837
+ "description": "A thumbnail, which will be shown in the beginning of the `ui5-upload-collection-item`.\n\n**Note:** Use `ui5-icon` or `img` for the intended design."
4838
+ }
4839
+ ];
3730
4840
  this.elementRef = inject(ElementRef);
3731
4841
  this.injector = inject(Injector);
3732
4842
  }
@@ -3857,6 +4967,39 @@ class UserMenu {
3857
4967
  * Fired when the "Sign Out" button is selected.
3858
4968
  */
3859
4969
  this.ui5SignOutClick = output();
4970
+ /**
4971
+ * Available slots for content projection in this component.
4972
+ *
4973
+ * Slots allow you to insert custom content into predefined areas of the web component.
4974
+ * Use the `slot` attribute on child elements to target specific slots.
4975
+ *
4976
+ * - **(default)**: Defines the menu items.
4977
+ * - **accounts**: Defines the user accounts.
4978
+
4979
+ **Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless
4980
+ there is an item with `selected` property set to `true`.
4981
+ *
4982
+ * @example
4983
+ * ```html
4984
+ * <ui5-user-menu>
4985
+ * <div slot="header">Custom header content</div>
4986
+ * <p>Default slot content</p>
4987
+ * </ui5-user-menu>
4988
+ * ```
4989
+ *
4990
+ * @readonly
4991
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
4992
+ */
4993
+ this.slots = [
4994
+ {
4995
+ "name": "default",
4996
+ "description": "Defines the menu items."
4997
+ },
4998
+ {
4999
+ "name": "accounts",
5000
+ "description": "Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`."
5001
+ }
5002
+ ];
3860
5003
  this.elementRef = inject(ElementRef);
3861
5004
  this.injector = inject(Injector);
3862
5005
  }
@@ -4016,6 +5159,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
4016
5159
  class UserMenuItem {
4017
5160
  constructor() {
4018
5161
  // className is now passed
5162
+ /**
5163
+ * Available slots for content projection in this component.
5164
+ *
5165
+ * Slots allow you to insert custom content into predefined areas of the web component.
5166
+ * Use the `slot` attribute on child elements to target specific slots.
5167
+ *
5168
+ * - **(default)**: Defines the items of this component.
5169
+
5170
+ **Note:** Use `ui5-user-menu-item` for the intended design.
5171
+ *
5172
+ * @example
5173
+ * ```html
5174
+ * <ui5-user-menu-item>
5175
+ * <div slot="header">Custom header content</div>
5176
+ * <p>Default slot content</p>
5177
+ * </ui5-user-menu-item>
5178
+ * ```
5179
+ *
5180
+ * @readonly
5181
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
5182
+ */
5183
+ this.slots = [
5184
+ {
5185
+ "name": "default",
5186
+ "description": "Defines the items of this component.\n\n**Note:** Use `ui5-user-menu-item` for the intended design."
5187
+ }
5188
+ ];
4019
5189
  this.elementRef = inject(ElementRef);
4020
5190
  this.injector = inject(Injector);
4021
5191
  }
@@ -4097,6 +5267,38 @@ class UserSettingsDialog {
4097
5267
  * Fired when a settings dialog is closed.
4098
5268
  */
4099
5269
  this.ui5Close = output();
5270
+ /**
5271
+ * Available slots for content projection in this component.
5272
+ *
5273
+ * Slots allow you to insert custom content into predefined areas of the web component.
5274
+ * Use the `slot` attribute on child elements to target specific slots.
5275
+ *
5276
+ * - **(default)**: Defines the user settings items.
5277
+
5278
+ **Note:** If no setting item is set as `selected`, the first one will be selected.
5279
+ * - **fixedItems**: Defines the fixed user settings items.
5280
+ *
5281
+ * @example
5282
+ * ```html
5283
+ * <ui5-user-settings-dialog>
5284
+ * <div slot="header">Custom header content</div>
5285
+ * <p>Default slot content</p>
5286
+ * </ui5-user-settings-dialog>
5287
+ * ```
5288
+ *
5289
+ * @readonly
5290
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
5291
+ */
5292
+ this.slots = [
5293
+ {
5294
+ "name": "default",
5295
+ "description": "Defines the user settings items.\n\n**Note:** If no setting item is set as `selected`, the first one will be selected."
5296
+ },
5297
+ {
5298
+ "name": "fixedItems",
5299
+ "description": "Defines the fixed user settings items."
5300
+ }
5301
+ ];
4100
5302
  this.elementRef = inject(ElementRef);
4101
5303
  this.injector = inject(Injector);
4102
5304
  }
@@ -4207,6 +5409,41 @@ class UserSettingsItem {
4207
5409
  * Fired when a selected view changed.
4208
5410
  */
4209
5411
  this.ui5SelectionChange = output();
5412
+ /**
5413
+ * Available slots for content projection in this component.
5414
+ *
5415
+ * Slots allow you to insert custom content into predefined areas of the web component.
5416
+ * Use the `slot` attribute on child elements to target specific slots.
5417
+ *
5418
+ * - **(default)**: Defines the page views of the user settings item.
5419
+
5420
+ If there are no tab views, the first page view will be shown unless there is selected one. If there is selected page
5421
+ view it will be shown no matter if there are tab views.
5422
+
5423
+ The page views are displayed by default if there is no selected tab view.
5424
+ * - **tabs**: Defines the tab views of the user settings item.
5425
+ *
5426
+ * @example
5427
+ * ```html
5428
+ * <ui5-user-settings-item>
5429
+ * <div slot="header">Custom header content</div>
5430
+ * <p>Default slot content</p>
5431
+ * </ui5-user-settings-item>
5432
+ * ```
5433
+ *
5434
+ * @readonly
5435
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
5436
+ */
5437
+ this.slots = [
5438
+ {
5439
+ "name": "default",
5440
+ "description": "Defines the page views of the user settings item.\n\nIf there are no tab views, the first page view will be shown unless there is selected one. If there is selected page\nview it will be shown no matter if there are tab views.\n\nThe page views are displayed by default if there is no selected tab view."
5441
+ },
5442
+ {
5443
+ "name": "tabs",
5444
+ "description": "Defines the tab views of the user settings item."
5445
+ }
5446
+ ];
4210
5447
  this.elementRef = inject(ElementRef);
4211
5448
  this.injector = inject(Injector);
4212
5449
  }
@@ -4289,6 +5526,31 @@ class UserSettingsView {
4289
5526
  and controls the visibility of the back button.
4290
5527
  */
4291
5528
  this.secondary = input(false, ...(ngDevMode ? [{ debugName: "secondary", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
5529
+ /**
5530
+ * Available slots for content projection in this component.
5531
+ *
5532
+ * Slots allow you to insert custom content into predefined areas of the web component.
5533
+ * Use the `slot` attribute on child elements to target specific slots.
5534
+ *
5535
+ * - **(default)**: Defines the content of the view.
5536
+ *
5537
+ * @example
5538
+ * ```html
5539
+ * <ui5-user-settings-view>
5540
+ * <div slot="header">Custom header content</div>
5541
+ * <p>Default slot content</p>
5542
+ * </ui5-user-settings-view>
5543
+ * ```
5544
+ *
5545
+ * @readonly
5546
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
5547
+ */
5548
+ this.slots = [
5549
+ {
5550
+ "name": "default",
5551
+ "description": "Defines the content of the view."
5552
+ }
5553
+ ];
4292
5554
  this.elementRef = inject(ElementRef);
4293
5555
  this.injector = inject(Injector);
4294
5556
  }
@@ -4369,6 +5631,47 @@ class ViewSettingsDialog {
4369
5631
  * Fired after the dialog is closed.
4370
5632
  */
4371
5633
  this.ui5Close = output();
5634
+ /**
5635
+ * Available slots for content projection in this component.
5636
+ *
5637
+ * Slots allow you to insert custom content into predefined areas of the web component.
5638
+ * Use the `slot` attribute on child elements to target specific slots.
5639
+ *
5640
+ * - **sortItems**: Defines the list of items against which the user could sort data.
5641
+
5642
+ **Note:** If you want to use this slot, you need to import used item: `import "@ui5/webcomponents-fiori/dist/SortItem.js";`
5643
+ * - **filterItems**: Defines the `filterItems` list.
5644
+
5645
+ **Note:** If you want to use this slot, you need to import used item: `import "@ui5/webcomponents-fiori/dist/FilterItem.js";`
5646
+ * - **groupItems**: Defines the list of items against which the user could group data.
5647
+
5648
+ **Note:** If you want to use this slot, you need to import used item: `import "@ui5/webcomponents-fiori/dist/GroupItem.js";`
5649
+ *
5650
+ * @example
5651
+ * ```html
5652
+ * <ui5-view-settings-dialog>
5653
+ * <div slot="header">Custom header content</div>
5654
+ * <p>Default slot content</p>
5655
+ * </ui5-view-settings-dialog>
5656
+ * ```
5657
+ *
5658
+ * @readonly
5659
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
5660
+ */
5661
+ this.slots = [
5662
+ {
5663
+ "name": "sortItems",
5664
+ "description": "Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`"
5665
+ },
5666
+ {
5667
+ "name": "filterItems",
5668
+ "description": "Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`"
5669
+ },
5670
+ {
5671
+ "name": "groupItems",
5672
+ "description": "Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`"
5673
+ }
5674
+ ];
4372
5675
  this.elementRef = inject(ElementRef);
4373
5676
  this.injector = inject(Injector);
4374
5677
  }
@@ -4445,6 +5748,33 @@ class Wizard {
4445
5748
  or by clicking on the steps within the component header.
4446
5749
  */
4447
5750
  this.ui5StepChange = output();
5751
+ /**
5752
+ * Available slots for content projection in this component.
5753
+ *
5754
+ * Slots allow you to insert custom content into predefined areas of the web component.
5755
+ * Use the `slot` attribute on child elements to target specific slots.
5756
+ *
5757
+ * - **(default)**: Defines the steps.
5758
+
5759
+ **Note:** Use the available `ui5-wizard-step` component.
5760
+ *
5761
+ * @example
5762
+ * ```html
5763
+ * <ui5-wizard>
5764
+ * <div slot="header">Custom header content</div>
5765
+ * <p>Default slot content</p>
5766
+ * </ui5-wizard>
5767
+ * ```
5768
+ *
5769
+ * @readonly
5770
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
5771
+ */
5772
+ this.slots = [
5773
+ {
5774
+ "name": "default",
5775
+ "description": "Defines the steps.\n\n**Note:** Use the available `ui5-wizard-step` component."
5776
+ }
5777
+ ];
4448
5778
  this.elementRef = inject(ElementRef);
4449
5779
  this.injector = inject(Injector);
4450
5780
  }
@@ -4550,6 +5880,31 @@ class WizardStep {
4550
5880
  and later add new steps when it becomes clear how the wizard flow should continue.
4551
5881
  */
4552
5882
  this.branching = input(false, ...(ngDevMode ? [{ debugName: "branching", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
5883
+ /**
5884
+ * Available slots for content projection in this component.
5885
+ *
5886
+ * Slots allow you to insert custom content into predefined areas of the web component.
5887
+ * Use the `slot` attribute on child elements to target specific slots.
5888
+ *
5889
+ * - **(default)**: Defines the step content.
5890
+ *
5891
+ * @example
5892
+ * ```html
5893
+ * <ui5-wizard-step>
5894
+ * <div slot="header">Custom header content</div>
5895
+ * <p>Default slot content</p>
5896
+ * </ui5-wizard-step>
5897
+ * ```
5898
+ *
5899
+ * @readonly
5900
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
5901
+ */
5902
+ this.slots = [
5903
+ {
5904
+ "name": "default",
5905
+ "description": "Defines the step content."
5906
+ }
5907
+ ];
4553
5908
  this.elementRef = inject(ElementRef);
4554
5909
  this.injector = inject(Injector);
4555
5910
  }