@fundamental-ngx/ui5-webcomponents 0.58.0-rc.8 → 0.58.0-rc.80

package/README.md

@@ -1,3 +1,72 @@
 # ui5-webcomponents
 
-ui5-wecomponents package
+Angular component wrappers around the [@ui5/webcomponents](https://www.npmjs.com/package/@ui5/webcomponents) npm package.
+
+## Overview
+
+This library provides Angular components that wrap UI5 Web Components, allowing you to use UI5's powerful web components seamlessly within your Angular applications. Each Angular component corresponds to a UI5 Web Component and provides:
+
+- Angular-friendly API (inputs, outputs, template syntax)
+- TypeScript type definitions
+- Full integration with Angular's change detection
+- Standalone components support
+
+## Installation
+
+```bash
+npm install @fundamental-ngx/ui5-webcomponents
+```
+
+## Usage
+
+Import the components you need directly:
+
+```typescript
+import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
+import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [Button, Input],
+  template: `
+    <ui5-button (click)="handleClick()">Click Me</ui5-button>
+    <ui5-input [(value)]="inputValue"></ui5-input>
+  `
+})
+export class ExampleComponent {
+  inputValue = '';
+  
+  handleClick() {
+    console.log('Button clicked!');
+  }
+}
+```
+
+### Using Angular Components Inside UI5 Components
+
+Angular components often use selectors with hyphens (e.g. `<app-item>`, `<app-value>`).
+UI5 interprets such tags as custom elements and may wait **up to 1 second** for their registration, causing delayed rendering inside components like `<ui5-table-cell>`.
+
+To avoid this, configure UI5 to ignore Angular component prefixes:
+
+```ts
+// ui5-init.ts
+import { ignoreCustomElements } from '@ui5/webcomponents-base/dist/IgnoreCustomElements.js';
+
+ignoreCustomElements('app-');
+```
+
+Import it before Angular bootstraps:
+```ts
+// main.ts
+import './ui5-init';
+```
+
+This prevents unnecessary waiting, ensures smooth rendering, and improves performance when mixing Angular components with UI5 Web Components.
+
+## Resources
+
+- [UI5 Web Components Documentation](https://ui5.github.io/webcomponents/)
+- [Fundamental NGX Documentation](https://sap.github.io/fundamental-ngx)
+- [GitHub Repository](https://github.com/SAP/fundamental-ngx)

package/avatar/index.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { AfterViewInit, ElementRef, Injector } from '@angular/core';
 import _Avatar, { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';
+export { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';
 import { UI5CustomEvent } from '@ui5/webcomponents-base';
 
 declare class Avatar implements AfterViewInit {
@@ -90,6 +91,40 @@ declare class Avatar implements AfterViewInit {
   property is set to `true`.
      */
     ui5Click: _angular_core.OutputEmitterRef<UI5CustomEvent<_Avatar, "click">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Receives the desired `<img>` tag
+  
+  **Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>
+  `ui5-avatar:not(:defined) {`<br/>
+  &nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>
+  `}`
+     * - **badge**: Defines the optional badge that will be used for visual affordance.
+  
+  **Note:** While the slot allows for custom badges, to achieve
+  the Fiori design, you can use the `ui5-tag` with `ui5-icon`
+  in the corresponding `icon` slot, without text nodes.
+     *
+     * @example
+     * ```html
+     * <ui5-avatar>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-avatar>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+        since: string;
+    }[];
     elementRef: ElementRef<_Avatar>;
     injector: Injector;
     get element(): _Avatar;

package/avatar-group/index.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { AfterViewInit, ElementRef, Injector } from '@angular/core';
 import _AvatarGroup, { AvatarGroupAccessibilityAttributes, IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';
+export { AvatarGroupAccessibilityAttributes, IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';
 import { UI5CustomEvent } from '@ui5/webcomponents-base';
 import AvatarColorScheme from '@ui5/webcomponents/dist/types/AvatarColorScheme.js';
 
@@ -47,6 +48,44 @@ declare class AvatarGroup implements AfterViewInit {
   component has changed
      */
     ui5Overflow: _angular_core.OutputEmitterRef<UI5CustomEvent<_AvatarGroup, "overflow">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the items of the component. Use the `ui5-avatar` component as an item.
+  
+  **Note:** The UX guidelines recommends using avatars with "Circle" shape.
+  
+  Moreover, if you use avatars with "Square" shape, there will be visual inconsistency
+  as the built-in overflow action has "Circle" shape.
+     * - **overflowButton**: Defines the overflow button of the component.
+  
+  **Note:** We recommend using the `ui5-button` component.
+  
+  **Note:** If this slot is not used, the component will display the built-in overflow button.
+     *
+     * @example
+     * ```html
+     * <ui5-avatar-group>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-avatar-group>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: ({
+        name: string;
+        description: string;
+        since?: undefined;
+    } | {
+        name: string;
+        description: string;
+        since: string;
+    })[];
     elementRef: ElementRef<_AvatarGroup>;
     injector: Injector;
     get element(): _AvatarGroup;

package/bar/index.d.ts

@@ -17,12 +17,45 @@ declare class Bar implements AfterViewInit {
   - If there is only one or no active element, it is recommended to avoid using the "toolbar" role, as it implies a grouping of multiple interactive controls.
      */
     accessibleRole: _angular_core.InputSignal<"Toolbar" | "None" | undefined>;
+    /**
+     * Defines the accessible ARIA name of the component.
+     */
+    accessibleName: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Receives id(or many ids) of the elements that label the bar.
+     */
+    accessibleNameRef: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **startContent**: Defines the content at the start of the bar.
+     * - **(default)**: Defines the content in the middle of the bar.
+     * - **endContent**: Defines the content at the end of the bar.
+     *
+     * @example
+     * ```html
+     * <ui5-bar>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-bar>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_Bar>;
     injector: Injector;
     get element(): _Bar;
     ngAfterViewInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Bar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Bar, "ui5-bar, [ui5-bar]", ["ui5Bar"], { "design": { "alias": "design"; "required": false; "isSignal": true; }; "accessibleRole": { "alias": "accessibleRole"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Bar, "ui5-bar, [ui5-bar]", ["ui5Bar"], { "design": { "alias": "design"; "required": false; "isSignal": true; }; "accessibleRole": { "alias": "accessibleRole"; "required": false; "isSignal": true; }; "accessibleName": { "alias": "accessibleName"; "required": false; "isSignal": true; }; "accessibleNameRef": { "alias": "accessibleNameRef"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { Bar };

package/breadcrumbs/index.d.ts

@@ -22,6 +22,31 @@ declare class Breadcrumbs implements AfterViewInit {
   **Note:** You can prevent browser location change by calling `event.preventDefault()`.
      */
     ui5ItemClick: _angular_core.OutputEmitterRef<UI5CustomEvent<_Breadcrumbs, "item-click">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the component items.
+  
+  **Note:** Use the `ui5-breadcrumbs-item` component to define the desired items.
+     *
+     * @example
+     * ```html
+     * <ui5-breadcrumbs>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-breadcrumbs>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_Breadcrumbs>;
     injector: Injector;
     get element(): _Breadcrumbs;

package/breadcrumbs-item/index.d.ts

@@ -27,6 +27,31 @@ declare class BreadcrumbsItem implements AfterViewInit {
      * Defines the accessible ARIA name of the item.
      */
     accessibleName: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the text of the component.
+  
+  **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+     *
+     * @example
+     * ```html
+     * <ui5-breadcrumbs-item>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-breadcrumbs-item>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_BreadcrumbsItem>;
     injector: Injector;
     get element(): _BreadcrumbsItem;

package/busy-indicator/index.d.ts

@@ -23,6 +23,29 @@ declare class BusyIndicator implements AfterViewInit {
      * Defines the placement of the text.
      */
     textPlacement: _angular_core.InputSignal<"Top" | "Bottom" | undefined>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Determines the content over which the component will appear.
+     *
+     * @example
+     * ```html
+     * <ui5-busy-indicator>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-busy-indicator>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_BusyIndicator>;
     injector: Injector;
     get element(): _BusyIndicator;

package/button/index.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { AfterViewInit, ElementRef, Injector } from '@angular/core';
 import _Button, { ButtonAccessibilityAttributes } from '@ui5/webcomponents/dist/Button.js';
+export { ButtonAccessibilityAttributes } from '@ui5/webcomponents/dist/Button.js';
 import { UI5CustomEvent } from '@ui5/webcomponents-base';
 
 declare class Button implements AfterViewInit {
@@ -106,6 +107,37 @@ declare class Button implements AfterViewInit {
   **Note:** The event will not be fired if the `disabled` property is set to `true`.
      */
     ui5Click: _angular_core.OutputEmitterRef<UI5CustomEvent<_Button, "click">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the text of the component.
+  
+  **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+     * - **badge**: Adds a badge to the button.
+     *
+     * @example
+     * ```html
+     * <ui5-button>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-button>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: ({
+        name: string;
+        description: string;
+        since?: undefined;
+    } | {
+        name: string;
+        description: string;
+        since: string;
+    })[];
     elementRef: ElementRef<_Button>;
     injector: Injector;
     get element(): _Button;

package/calendar/index.d.ts

@@ -66,6 +66,41 @@ declare class Calendar implements AfterViewInit {
   create instances of `ui5-date` for the newly selected dates. In that case you should do this manually.
      */
     ui5SelectionChange: _angular_core.OutputEmitterRef<UI5CustomEvent<_Calendar, "selection-change">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **calendarLegend**: Defines the calendar legend of the component.
+     * - **(default)**: Defines the selected date or dates (depending on the `selectionMode` property)
+  for this calendar as instances of `ui5-date` or `ui5-date-range`.
+  Use `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.
+     * - **specialDates**: Defines the special dates, visually emphasized in the calendar.
+     * - **disabledDates**: Defines the disabled date ranges that cannot be selected in the calendar.
+  Use `ui5-date-range` elements to specify ranges of disabled dates.
+  Each range can define a start date, an end date, or both.
+     *
+     * @example
+     * ```html
+     * <ui5-calendar>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-calendar>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: ({
+        name: string;
+        description: string;
+        since: string;
+    } | {
+        name: string;
+        description: string;
+        since?: undefined;
+    })[];
     elementRef: ElementRef<_Calendar>;
     injector: Injector;
     get element(): _Calendar;

package/calendar-legend/index.d.ts

@@ -19,6 +19,29 @@ declare class CalendarLegend implements AfterViewInit {
      * Hides the Working day item in the legend.
      */
     hideWorkingDay: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the items of the component.
+     *
+     * @example
+     * ```html
+     * <ui5-calendar-legend>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-calendar-legend>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_CalendarLegend>;
     injector: Injector;
     get element(): _CalendarLegend;

package/card/index.d.ts

@@ -21,6 +21,37 @@ declare class Card implements AfterViewInit {
      * Defines the delay in milliseconds, after which the loading indicator will show up for this card.
      */
     loadingDelay: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the content of the component.
+     * - **header**: Defines the header of the component.
+  
+  **Note:** Use `ui5-card-header` for the intended design.
+     *
+     * @example
+     * ```html
+     * <ui5-card>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-card>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: ({
+        name: string;
+        description: string;
+        since?: undefined;
+    } | {
+        name: string;
+        description: string;
+        since: string;
+    })[];
     elementRef: ElementRef<_Card>;
     injector: Injector;
     get element(): _Card;

package/card-header/index.d.ts

@@ -27,6 +27,30 @@ declare class CardHeader implements AfterViewInit {
   **Note:** The event would be fired only if the `interactive` property is set to true.
      */
     ui5Click: _angular_core.OutputEmitterRef<UI5CustomEvent<_CardHeader, "click">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **avatar**: Defines an avatar image, displayed in the left most part of the header.
+     * - **action**: Defines an action, displayed in the right most part of the header.
+     *
+     * @example
+     * ```html
+     * <ui5-card-header>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-card-header>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_CardHeader>;
     injector: Injector;
     get element(): _CardHeader;

package/carousel/index.d.ts

@@ -77,6 +77,32 @@ declare class Carousel implements AfterViewInit {
   based on the `items-per-page` property.
      */
     ui5Navigate: _angular_core.OutputEmitterRef<UI5CustomEvent<_Carousel, "navigate">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the content of the component.
+  
+  **Note:** Items with the `hidden` attribute will be automatically excluded from carousel navigation and page calculations.
+  They will not be displayed or accessible via keyboard navigation. See [sample](./#carousel-with-hidden-items).
+     *
+     * @example
+     * ```html
+     * <ui5-carousel>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-carousel>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_Carousel>;
     injector: Injector;
     get element(): _Carousel;

package/color-palette/index.d.ts

@@ -8,6 +8,29 @@ declare class ColorPalette implements AfterViewInit {
      * Fired when the user selects a color.
      */
     ui5ItemClick: i0.OutputEmitterRef<UI5CustomEvent<_ColorPalette, "item-click">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the `ui5-color-palette-item` elements.
+     *
+     * @example
+     * ```html
+     * <ui5-color-palette>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-color-palette>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_ColorPalette>;
     injector: Injector;
     get element(): _ColorPalette;

package/color-palette-popover/index.d.ts

@@ -40,6 +40,29 @@ declare class ColorPalettePopover implements AfterViewInit {
      * Fired when the `ui5-color-palette-popover` is closed due to user interaction.
      */
     ui5Close: _angular_core.OutputEmitterRef<UI5CustomEvent<_ColorPalettePopover, "close">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the content of the component.
+     *
+     * @example
+     * ```html
+     * <ui5-color-palette-popover>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-color-palette-popover>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: {
+        name: string;
+        description: string;
+    }[];
     elementRef: ElementRef<_ColorPalettePopover>;
     injector: Injector;
     get element(): _ColorPalettePopover;

package/combo-box/index.d.ts

@@ -91,6 +91,42 @@ declare class ComboBox implements AfterViewInit {
      * Fired when selection is changed by user interaction
      */
     ui5SelectionChange: _angular_core.OutputEmitterRef<UI5CustomEvent<_ComboBox, "selection-change">>;
+    /**
+     * Available slots for content projection in this component.
+     *
+     * Slots allow you to insert custom content into predefined areas of the web component.
+     * Use the `slot` attribute on child elements to target specific slots.
+     *
+     * - **(default)**: Defines the component items.
+     * - **valueStateMessage**: Defines the value state message that will be displayed as pop up under the component.
+  The value state message slot should contain only one root element.
+  
+  **Note:** If not specified, a default text (in the respective language) will be displayed.
+  
+  **Note:** The `valueStateMessage` would be displayed,
+  when the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.
+     * - **icon**: Defines the icon to be displayed in the input field.
+     *
+     * @example
+     * ```html
+     * <ui5-combobox>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-combobox>
+     * ```
+     *
+     * @readonly
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+     */
+    readonly slots: ({
+        name: string;
+        description: string;
+        since?: undefined;
+    } | {
+        name: string;
+        description: string;
+        since: string;
+    })[];
     elementRef: ElementRef<_ComboBox>;
     injector: Injector;
     get element(): _ComboBox;