@fundamental-ngx/ui5-webcomponents-ai 0.58.0-rc.7 → 0.58.0-rc.71

package/README.md

@@ -1,3 +1,72 @@
 # ui5-webcomponents-ai
 
-package ui5-webcomponents-ai
+Angular component wrappers around the [@ui5/webcomponents-ai](https://www.npmjs.com/package/@ui5/webcomponents-ai) npm package.
+
+## Overview
+
+This library provides Angular components that wrap UI5 AI Web Components, bringing AI-powered UI elements to your Angular applications. These components integrate AI features like prompt inputs and AI-enhanced buttons with Angular's change detection and template syntax.
+
+- 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-ai
+```
+
+## Usage
+
+Import the AI components you need:
+
+```typescript
+import { Button } from '@fundamental-ngx/ui5-webcomponents-ai/button';
+import { PromptInput } from '@fundamental-ngx/ui5-webcomponents-ai/prompt-input';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [Button, PromptInput],
+  template: `
+    <ui5-ai-button (click)="handleAIAction()">AI Action</ui5-ai-button>
+    <ui5-prompt-input [(value)]="prompt"></ui5-prompt-input>
+  `
+})
+export class ExampleComponent {
+  prompt = '';
+  
+  handleAIAction() {
+    console.log('AI 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/fesm2022/fundamental-ngx-ui5-webcomponents-ai.mjs

@@ -161,6 +161,33 @@ class Button {
       [Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys.
          */
         this.ui5ArrowButtonClick = output();
+        /**
+         * 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 available states of the component.
+      **Note:** Although this slot accepts HTML Elements, it is strongly recommended that
+      you only use `ui5-ai-button-state` components in order to preserve the intended design.
+         *
+         * @example
+         * ```html
+         * <ui5-ai-button>
+         *   <div slot="header">Custom header content</div>
+         *   <p>Default slot content</p>
+         * </ui5-ai-button>
+         * ```
+         *
+         * @readonly
+         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+         */
+        this.slots = [
+            {
+                "name": "default",
+                "description": "Defines the available states of the component.\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that\nyou only use `ui5-ai-button-state` components in order to preserve the intended design."
+            }
+        ];
         this.elementRef = inject(ElementRef);
         this.injector = inject(Injector);
     }
@@ -339,6 +366,31 @@ class Input {
          * Fired when the user selects the version navigation buttons.
          */
         this.ui5VersionChange = output();
+        /**
+         * 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.
+         *
+         * - **actions**: Defines the items of the menu for the component.
+         *
+         * @example
+         * ```html
+         * <ui5-ai-input>
+         *   <div slot="header">Custom header content</div>
+         *   <p>Default slot content</p>
+         * </ui5-ai-input>
+         * ```
+         *
+         * @readonly
+         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+         */
+        this.slots = [
+            {
+                "name": "actions",
+                "description": "Defines the items of the menu for the component."
+            }
+        ];
         this.elementRef = inject(ElementRef);
         this.injector = inject(Injector);
     }
@@ -472,6 +524,48 @@ class PromptInput {
       or on focusout.
          */
         this.ui5Change = output();
+        /**
+         * 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.
+         * - **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-ai-prompt-input>
+         *   <div slot="header">Custom header content</div>
+         *   <p>Default slot content</p>
+         * </ui5-ai-prompt-input>
+         * ```
+         *
+         * @readonly
+         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+         */
+        this.slots = [
+            {
+                "name": "default",
+                "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items."
+            },
+            {
+                "name": "valueStateMessage",
+                "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
+                "since": "2.0.0"
+            }
+        ];
         this.elementRef = inject(ElementRef);
         this.injector = inject(Injector);
     }
@@ -571,6 +665,31 @@ class TextArea {
          * Fired when the user requests to stop AI text generation.
          */
         this.ui5StopGeneration = output();
+        /**
+         * 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.
+         *
+         * - **menu**: Defines a slot for `ui5-menu` integration. This slot allows you to pass a `ui5-menu` instance that will be associated with the assistant.
+         *
+         * @example
+         * ```html
+         * <ui5-ai-textarea>
+         *   <div slot="header">Custom header content</div>
+         *   <p>Default slot content</p>
+         * </ui5-ai-textarea>
+         * ```
+         *
+         * @readonly
+         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+         */
+        this.slots = [
+            {
+                "name": "menu",
+                "description": "Defines a slot for `ui5-menu` integration. This slot allows you to pass a `ui5-menu` instance that will be associated with the assistant."
+            }
+        ];
         this.elementRef = inject(ElementRef);
         this.injector = inject(Injector);
     }