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

package/input/index.d.ts

@@ -120,6 +120,50 @@ declare class Input implements AfterViewInit {
      * Fired when the suggestions picker is closed.
      */
     ui5Close: _angular_core.OutputEmitterRef<UI5CustomEvent<_Input, "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 suggestion items.
+  
+  **Note:** The suggestions would be displayed only if the `showSuggestions`
+  property is set to `true`.
+  
+  **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.
+     * - **icon**: Defines the icon to be displayed in the component.
+     * - **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 component is in `Information`, `Critical` or `Negative` value state.
+  
+  **Note:** If the component has `suggestionItems`,
+  the `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.
+     *
+     * @example
+     * ```html
+     * <ui5-input>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-input>
+     * ```
+     *
+     * @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<_Input>;
     injector: Injector;
     get element(): _Input;

package/label/index.d.ts

@@ -29,6 +29,31 @@ declare class Label implements AfterViewInit {
   **Note:** for option "Normal" the text will wrap and the words will not be broken based on hyphenation.
      */
     wrappingType: _angular_core.InputSignal<"None" | "Normal" | 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-label>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-label>
+     * ```
+     *
+     * @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<_Label>;
     injector: Injector;
     get element(): _Label;

package/link/index.d.ts

@@ -112,6 +112,31 @@ declare class Link implements AfterViewInit {
   or by using the Enter key.
      */
     ui5Click: _angular_core.OutputEmitterRef<UI5CustomEvent<_Link, "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.
+     *
+     * @example
+     * ```html
+     * <ui5-link>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-link>
+     * ```
+     *
+     * @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<_Link>;
     injector: Injector;
     get element(): _Link;

package/list/index.d.ts

@@ -150,6 +150,35 @@ declare class List implements AfterViewInit {
   **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
      */
     ui5Move: _angular_core.OutputEmitterRef<UI5CustomEvent<_List, "move">>;
+    /**
+     * 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.
+  
+  **Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-group` for the intended design.
+     * - **header**: Defines the component header.
+  
+  **Note:** When `header` is set, the
+  `headerText` property is ignored.
+     *
+     * @example
+     * ```html
+     * <ui5-list>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-list>
+     * ```
+     *
+     * @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<_List>;
     injector: Injector;
     get element(): _List;

package/list-item-custom/index.d.ts

@@ -56,6 +56,38 @@ declare class ListItemCustom implements AfterViewInit {
      * Fired when the user clicks on the detail button when type is `Detail`.
      */
     ui5DetailClick: _angular_core.OutputEmitterRef<UI5CustomEvent<_ListItemCustom, "detail-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 content of the component.
+     * - **deleteButton**: Defines the delete button, displayed in "Delete" mode.
+  **Note:** While the slot allows custom buttons, to match
+  design guidelines, please use the `ui5-button` component.
+  **Note:** When the slot is not present, a built-in delete button will be displayed.
+     *
+     * @example
+     * ```html
+     * <ui5-li-custom>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-li-custom>
+     * ```
+     *
+     * @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<_ListItemCustom>;
     injector: Injector;
     get element(): _ListItemCustom;

package/list-item-group/index.d.ts

@@ -38,6 +38,32 @@ declare class ListItemGroup implements AfterViewInit {
   **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
      */
     ui5Move: _angular_core.OutputEmitterRef<UI5CustomEvent<_ListItemGroup, "move">>;
+    /**
+     * 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 <code>ui5-li-group</code>.
+     * - **header**: Defines the header of the component.
+  
+  **Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.
+     *
+     * @example
+     * ```html
+     * <ui5-li-group>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-li-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;
+    }[];
     elementRef: ElementRef<_ListItemGroup>;
     injector: Injector;
     get element(): _ListItemGroup;

package/list-item-standard/index.d.ts

@@ -99,6 +99,50 @@ declare class ListItemStandard implements AfterViewInit {
      * Fired when the user clicks on the detail button when type is `Detail`.
      */
     ui5DetailClick: _angular_core.OutputEmitterRef<UI5CustomEvent<_ListItemStandard, "detail-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 custom formatted text of the component.
+  
+  **Note:** For optimal text wrapping and a consistent layout, it is strongly recommended to use the `text` property.
+  
+  Use the `default` slot only when custom formatting with HTML elements (e.g., `<b>`, `<i>`) is required.
+  Be aware that wrapping (via `wrappingType="Normal"`) may not function correctly with custom HTML content in the `default` slot.
+  
+  If both `text` and `default` slot are used, the `text` property takes precedence.
+     * - **image**: **Note:** While the slot allows option for setting custom avatar, to match the
+  design guidelines, please use the `ui5-avatar` with it's default size - S.
+  
+  **Note:** If bigger `ui5-avatar` needs to be used, then the size of the
+  `ui5-li` should be customized in order to fit.
+     * - **deleteButton**: Defines the delete button, displayed in "Delete" mode.
+  **Note:** While the slot allows custom buttons, to match
+  design guidelines, please use the `ui5-button` component.
+  **Note:** When the slot is not present, a built-in delete button will be displayed.
+     *
+     * @example
+     * ```html
+     * <ui5-li>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-li>
+     * ```
+     *
+     * @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<_ListItemStandard>;
     injector: Injector;
     get element(): _ListItemStandard;

package/menu/index.d.ts

@@ -58,6 +58,31 @@ declare class Menu implements AfterViewInit {
      * Fired after the menu is closed.
      */
     ui5Close: _angular_core.OutputEmitterRef<UI5CustomEvent<_Menu, "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 items of this component.
+  
+  **Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.
+     *
+     * @example
+     * ```html
+     * <ui5-menu>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-menu>
+     * ```
+     *
+     * @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<_Menu>;
     injector: Injector;
     get element(): _Menu;

package/menu-item/index.d.ts

@@ -117,6 +117,60 @@ declare class MenuItem implements AfterViewInit {
      * Fired when the user clicks on the detail button when type is `Detail`.
      */
     ui5DetailClick: _angular_core.OutputEmitterRef<UI5CustomEvent<_MenuItem, "detail-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 items of this component.
+  
+  **Note:** The slot can hold menu item and menu separator items.
+  
+  If there are items added to this slot, an arrow will be displayed at the end
+  of the item in order to indicate that there are items added. In that case components added
+  to `endContent` slot or `additionalText` content will not be displayed.
+  
+  The priority of what will be displayed at the end of the menu item is as follows:
+  sub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.
+     * - **endContent**: Defines the components that should be displayed at the end of the menu item.
+  
+  **Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`
+  or `ui5-icon` in order to preserve the intended design. If there are components added to this slot,
+  and there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,
+  nether `additionalText` nor components added to this slot would be displayed.
+  
+  The priority of what will be displayed at the end of the menu item is as follows:
+  sub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.
+  
+  Application developers are responsible for ensuring that interactive elements placed in the `endContent` slot
+  have the correct accessibility behaviour, including their enabled or disabled states.
+  The menu does not manage these aspects when the menu item state changes.
+     * - **deleteButton**: Defines the delete button, displayed in "Delete" mode.
+  **Note:** While the slot allows custom buttons, to match
+  design guidelines, please use the `ui5-button` component.
+  **Note:** When the slot is not present, a built-in delete button will be displayed.
+     *
+     * @example
+     * ```html
+     * <ui5-menu-item>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-menu-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;
+        since?: undefined;
+    } | {
+        name: string;
+        description: string;
+        since: string;
+    })[];
     elementRef: ElementRef<_MenuItem>;
     injector: Injector;
     get element(): _MenuItem;

package/menu-item-group/index.d.ts

@@ -7,6 +7,30 @@ declare class MenuItemGroup implements AfterViewInit {
      * Defines the component's check mode.
      */
     checkMode: i0.InputSignal<"None" | "Single" | "Multiple" | 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 items of this component.
+  **Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both.
+     *
+     * @example
+     * ```html
+     * <ui5-menu-item-group>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-menu-item-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;
+    }[];
     elementRef: ElementRef<_MenuItemGroup>;
     injector: Injector;
     get element(): _MenuItemGroup;

package/message-strip/index.d.ts

@@ -30,6 +30,37 @@ declare class MessageStrip implements AfterViewInit {
   click/tap or by using the Enter or Space key.
      */
     ui5Close: _angular_core.OutputEmitterRef<UI5CustomEvent<_MessageStrip, "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 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.
+     * - **icon**: Defines the content to be displayed as graphical element within the component.
+  
+  **Note:** If no icon is given, the default icon for the component type will be used.
+  The SAP-icons font provides numerous options.
+  
+  See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+     *
+     * @example
+     * ```html
+     * <ui5-message-strip>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-message-strip>
+     * ```
+     *
+     * @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<_MessageStrip>;
     injector: Injector;
     get element(): _MessageStrip;

package/multi-combo-box/index.d.ts

@@ -97,6 +97,42 @@ declare class MultiComboBox implements AfterViewInit {
      * Fired when selection is changed by user interaction.
      */
     ui5SelectionChange: _angular_core.OutputEmitterRef<UI5CustomEvent<_MultiComboBox, "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.
+     * - **icon**: Defines the icon to be displayed in the component.
+     * - **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 component is in `Information`, `Critical` or `Negative` value state.
+     *
+     * @example
+     * ```html
+     * <ui5-multi-combobox>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-multi-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<_MultiComboBox>;
     injector: Injector;
     get element(): _MultiComboBox;

package/multi-combo-box-item-group/index.d.ts

@@ -38,6 +38,32 @@ declare class MultiComboBoxItemGroup implements AfterViewInit {
   **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
      */
     ui5Move: _angular_core.OutputEmitterRef<UI5CustomEvent<_MultiComboBoxItemGroup, "move">>;
+    /**
+     * 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 <code>ui5-mcb-item-group</code>.
+     * - **header**: Defines the header of the component.
+  
+  **Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.
+     *
+     * @example
+     * ```html
+     * <ui5-mcb-item-group>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-mcb-item-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;
+    }[];
     elementRef: ElementRef<_MultiComboBoxItemGroup>;
     injector: Injector;
     get element(): _MultiComboBoxItemGroup;

package/multi-input/index.d.ts

@@ -136,6 +136,51 @@ declare class MultiInput implements AfterViewInit {
      * Fired when the suggestions picker is closed.
      */
     ui5Close: _angular_core.OutputEmitterRef<UI5CustomEvent<_MultiInput, "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.
+     *
+     * - **tokens**: Defines the component tokens.
+     * - **(default)**: Defines the suggestion items.
+  
+  **Note:** The suggestions would be displayed only if the `showSuggestions`
+  property is set to `true`.
+  
+  **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.
+     * - **icon**: Defines the icon to be displayed in the component.
+     * - **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 component is in `Information`, `Critical` or `Negative` value state.
+  
+  **Note:** If the component has `suggestionItems`,
+  the `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.
+     *
+     * @example
+     * ```html
+     * <ui5-multi-input>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-multi-input>
+     * ```
+     *
+     * @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<_MultiInput>;
     injector: Injector;
     get element(): _MultiInput;

package/option/index.d.ts

@@ -28,6 +28,31 @@ declare class Option implements AfterViewInit {
      * Defines the selected state of the component.
      */
     selected: _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 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-option>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-option>
+     * ```
+     *
+     * @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<_Option>;
     injector: Injector;
     get element(): _Option;

package/option-custom/index.d.ts

@@ -21,6 +21,29 @@ declare class OptionCustom implements AfterViewInit {
      * Defines the selected state of the component.
      */
     selected: _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 content of the component.
+     *
+     * @example
+     * ```html
+     * <ui5-option-custom>
+     *   <div slot="header">Custom header content</div>
+     *   <p>Default slot content</p>
+     * </ui5-option-custom>
+     * ```
+     *
+     * @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<_OptionCustom>;
     injector: Injector;
     get element(): _OptionCustom;