@ui5/webcomponents-ai 0.0.0-4e88b8243 → 0.0.0-6827fdc09

package/CHANGELOG.md

@@ -3,6 +3,164 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.9.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0...v2.9.1-rc.0) (2025-04-10)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.9.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.3...v2.9.0) (2025-04-04)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.9.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.2...v2.9.0-rc.3) (2025-04-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.9.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.1...v2.9.0-rc.2) (2025-03-27)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.9.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.0...v2.9.0-rc.1) (2025-03-20)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.9.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.1-rc.0...v2.9.0-rc.0) (2025-03-13)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+## [2.8.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0...v2.8.1-rc.0) (2025-03-06)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.8.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.3...v2.8.0) (2025-03-04)
+
+
+### Features
+
+* **framework:** add `.currentTarget` to the type of event handler in TSX and UI5CustomEvent ([#10957](https://github.com/SAP/ui5-webcomponents/issues/10957)) ([f56753c](https://github.com/SAP/ui5-webcomponents/commit/f56753c5142d6e817b05d7e33bd160f09c2d5205))
+
+
+
+
+
+# [2.8.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.2...v2.8.0-rc.3) (2025-02-27)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.8.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.1...v2.8.0-rc.2) (2025-02-20)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.8.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.0...v2.8.0-rc.1) (2025-02-13)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.8.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0...v2.8.0-rc.0) (2025-02-06)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.7.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.2...v2.7.0) (2025-02-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.7.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.1...v2.7.0-rc.2) (2025-01-30)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.7.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.0...v2.7.0-rc.1) (2025-01-23)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.7.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2...v2.7.0-rc.0) (2025-01-16)
+
+
+### Bug Fixes
+
+* ai button and color palette bring their own items ([#10517](https://github.com/SAP/ui5-webcomponents/issues/10517)) ([11b9356](https://github.com/SAP/ui5-webcomponents/commit/11b9356a13d01ece1ebcf4185b61259b9ad6d364))
+
+
+
+
+
+## [2.6.2](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2-rc.0...v2.6.2) (2025-01-09)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+## [2.6.2-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.1...v2.6.2-rc.0) (2025-01-09)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+## [2.6.1](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0...v2.6.1) (2025-01-08)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
 # [2.6.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.5...v2.6.0) (2025-01-07)
 
 **Note:** Version bump only for package @ui5/webcomponents-ai

package/README.md

@@ -13,6 +13,7 @@ Provides web components implementing AI-related visual and interaction.
 | Web Component            | Tag name                       | Module import                                           |
 |--------------------------|--------------------------------|---------------------------------------------------------|
 | Button                   | `ui5-ai-button`                | `import "@ui5/webcomponents-ai/dist/Button.js";`        |
+| Button State             | `ui5-ai-button-state`          | comes with `ui5-ai-button`                              |
 | PromptInput              | `ui5-ai-prompt-input`          | `import "@ui5/webcomponents-ai/dist/PromptInput.js";`   |
 
 ## Provided assets
@@ -20,7 +21,7 @@ Provides web components implementing AI-related visual and interaction.
 
 | Assets | Module | Notes
 |------------|-----------|----------- 
-| `i18n`, `themes` | `@ui5/webcomponents-compat/dist/Assets.js` | Theming parameters and translations for the components  
+| `i18n`, `themes` | `@ui5/webcomponents-ai/dist/Assets.js` | Theming parameters and translations for the components  
 
 
 ## Resources

package/coverage/lcov-report/src/generated/themes/Button.css.ts.html

@@ -0,0 +1,109 @@
+
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Code coverage report for src/generated/themes/Button.css.ts</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../../../prettify.css" />
+    <link rel="stylesheet" href="../../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../../../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+    
+<body>
+<div class='wrapper'>
+    <div class='pad1'>
+        <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/generated/themes</a> Button.css.ts</h1>
+        <div class='clearfix'>
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Statements</span>
+                <span class='fraction'>4/4</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Branches</span>
+                <span class='fraction'>0/0</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Functions</span>
+                <span class='fraction'>2/2</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Lines</span>
+                <span class='fraction'>2/2</span>
+            </div>
+        
+            
+        </div>
+        <p class="quiet">
+            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+        </p>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input oninput="onInput()" type="search" id="fileSearch">
+            </div>
+        </template>
+    </div>
+    <div class='status-line high'></div>
+    <pre><table class="coverage">
+<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
+<a name='L2'></a><a href='#L2'>2</a>
+<a name='L3'></a><a href='#L3'>3</a>
+<a name='L4'></a><a href='#L4'>4</a>
+<a name='L5'></a><a href='#L5'>5</a>
+<a name='L6'></a><a href='#L6'>6</a>
+<a name='L7'></a><a href='#L7'>7</a>
+<a name='L8'></a><a href='#L8'>8</a>
+<a name='L9'></a><a href='#L9'>9</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+&nbsp;
+import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
+import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
+&nbsp;
+registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () =&gt; defaultThemeBase);
+registerThemePropertiesLoader("@ui5/webcomponents-ai", "sap_horizon", async () =&gt; defaultTheme);
+export default `:host{display:inline-block}:host([disabled]){pointer-events:none}.ui5-ai-button-text{display:inline-block}:host([icon-only]) .ui5-ai-button-text{min-width:0;margin-inline-start:0}.ui5-ai-button-hidden{position:absolute;top:-10000px;left:-10000px;visibility:hidden;display:block;width:fit-content}:host .ui5-ai-button-inner{width:100%}:host{width:auto;position:relative;transition:width .18s cubic-bezier(.67,1,.95,1.3) .12s}:host([icon-only]) .ui5-ai-button-inner[_end-icon=""]::part(textButton),:host(.ui5-ai-button-menu-to-button[icon-only]) .ui5-ai-button-inner::part(textButton){min-width:var(--_ui5-v2-7-0-rc-1_button_base_min_width)!important;max-width:var(--_ui5-v2-7-0-rc-1_button_base_min_width)!important}:host(.ui5-ai-button-menu-to-button) .ui5-ai-button-inner::part(button),:host(.ui5-ai-button-fade-out:not([icon-only])) .ui5-ai-button-inner::part(button){justify-content:flex-start}:host([icon-only]) .ui5-ai-button-inner[_end-icon]:not([_end-icon=""])::part(button),:host([icon-only]) .ui5-ai-button-inner[_hide-arrow-button]::part(button){justify-content:flex-start;padding-inline-start:var(--_ui5-v2-7-0-rc-1_button_base_padding)}:host(.ui5-ai-button-fade-in[icon-only]) .ui5-ai-button-inner[_end-icon=""]::part(button){max-width:var(--_ui5-v2-7-0-rc-1_button_base_min_width)}:host([icon-only]) .ui5-ai-button-inner[_end-icon=""]::part(textButton),:host(.ui5-ai-button-menu-to-button[icon-only]) .ui5-ai-button-inner::part(textButton){min-width:var(--_ui5-v2-7-0-rc-1_button_base_min_width);max-width:var(--_ui5-v2-7-0-rc-1_button_base_min_width)}:host(:not(.ui5-ai-button-fade-out):not(.ui5-ai-button-fade-mid):not(.ui5-ai-button-fade-in)) .ui5-ai-button-text,:host(:not(.ui5-ai-button-fade-out):not(.ui5-ai-button-fade-mid):not(.ui5-ai-button-fade-in)) ::part(endIcon),:host(:not(.ui5-ai-button-fade-out):not(.ui5-ai-button-fade-mid):not(.ui5-ai-button-fade-in)) ::part(arrowButton){opacity:1;transform:translateY(0)}:host(.ui5-ai-button-button-to-menu) .ui5-ai-button-inner::part(endIcon),:host(.ui5-ai-button-button-to-menu) .ui5-ai-button-inner::part(arrowButton){display:none;transform:translateY(0);opacity:0}:host(.ui5-ai-button-fade-out) .ui5-ai-button-text{opacity:0;transform:translateY(-1rem);transition:opacity .06s ease-in-out .12s,transform .08s ease-in-out .12s}:host(.ui5-ai-button-fade-out) ::part(icon){opacity:0;transform:translateY(-1rem);transition:opacity .05s ease-in-out 25ms,transform .1s ease-in-out 0s}:host(.ui5-ai-button-fade-out) ::part(endIcon){opacity:0;transform:translateY(-1rem);transition:opacity .06s ease-in-out .12s,transform .08s ease-in-out .12s}:host(.ui5-ai-button-fade-mid) .ui5-ai-button-text,:host(.ui5-ai-button-fade-mid) ::part(icon),:host(.ui5-ai-button-fade-mid) ::part(endIcon),:host(.ui5-ai-button-fade-mid) ::part(arrowButton){opacity:0;transform:translateY(1rem);transition:none}:host(.ui5-ai-button-fade-in) .ui5-ai-button-text{opacity:1;transform:translateY(0);transition:opacity .06s ease-in-out .12s,transform .08s ease-in-out .12s}:host(.ui5-ai-button-fade-in) ::part(icon){opacity:1;transform:translateY(0);transition:opacity .05s ease-in-out 25ms,transform .1s ease-in-out 0s}:host(.ui5-ai-button-fade-in) ::part(endIcon){opacity:1;transform:translateY(0);transition:opacity .06s ease-in-out .12s,transform .08s ease-in-out .12s}
+`</pre></td></tr></table></pre>
+
+                <div class='push'></div><!-- for sticky footer -->
+            </div><!-- /wrapper -->
+            <div class='footer quiet pad2 space-top1 center small'>
+                Code coverage generated by
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at 2025-01-25T14:47:45.733Z
+            </div>
+        <script src="../../../prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="../../../sorter.js"></script>
+        <script src="../../../block-navigation.js"></script>
+    </body>
+</html>
+    

package/coverage/lcov-report/src/generated/themes/index.html

@@ -0,0 +1,116 @@
+
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Code coverage report for src/generated/themes</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../../../prettify.css" />
+    <link rel="stylesheet" href="../../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../../../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+    
+<body>
+<div class='wrapper'>
+    <div class='pad1'>
+        <h1><a href="../../../index.html">All files</a> src/generated/themes</h1>
+        <div class='clearfix'>
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Statements</span>
+                <span class='fraction'>4/4</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Branches</span>
+                <span class='fraction'>0/0</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Functions</span>
+                <span class='fraction'>2/2</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Lines</span>
+                <span class='fraction'>2/2</span>
+            </div>
+        
+            
+        </div>
+        <p class="quiet">
+            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+        </p>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input oninput="onInput()" type="search" id="fileSearch">
+            </div>
+        </template>
+    </div>
+    <div class='status-line high'></div>
+    <div class="pad1">
+<table class="coverage-summary">
+<thead>
+<tr>
+   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
+   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
+   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
+   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
+   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
+   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
+   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
+</tr>
+</thead>
+<tbody><tr>
+	<td class="file high" data-value="Button.css.ts"><a href="Button.css.ts.html">Button.css.ts</a></td>
+	<td data-value="100" class="pic high">
+	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
+	</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="4" class="abs high">4/4</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="2" class="abs high">2/2</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="2" class="abs high">2/2</td>
+	</tr>
+
+</tbody>
+</table>
+</div>
+                <div class='push'></div><!-- for sticky footer -->
+            </div><!-- /wrapper -->
+            <div class='footer quiet pad2 space-top1 center small'>
+                Code coverage generated by
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at 2025-01-25T14:47:45.733Z
+            </div>
+        <script src="../../../prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="../../../sorter.js"></script>
+        <script src="../../../block-navigation.js"></script>
+    </body>
+</html>
+    

package/cypress/specs/Button.cy.tsx

@@ -0,0 +1,14 @@
+import Button from "../../src/Button.js";
+import ButtonState from "../../src/ButtonState.js";
+
+describe("Initial rendering", () => {
+	it("tests no config provided", () => {
+		cy.mount(
+			<Button>
+				<ButtonState name="generate" text="Generate" icon="ai">Click me</ButtonState>
+				<ButtonState name="generating" text="Stop Generating" icon="stop">Click me</ButtonState>
+				<ButtonState name="revise" text="Revise" icon="ai">Click me</ButtonState>
+			</Button>
+		);
+	});
+});

package/cypress/support/commands.ts

@@ -0,0 +1,40 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+import "@ui5/cypress-internal/commands.js";
+import "../../../main/cypress/support/commands.js";

package/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/cypress/support/component.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'

package/cypress/tsconfig.json

@@ -0,0 +1,47 @@
+{
+	"include": [
+		"./**/*"
+	],
+	"compilerOptions": {
+		"jsx": "react-jsx",
+		"jsxImportSource": "@ui5/webcomponents-base",
+		"module": "NodeNext",
+		"moduleResolution": "nodenext",
+		"types": [
+			"cypress",
+			"cypress-real-events",
+			"cypress-axe",
+		],
+		"paths": {
+			"@ui5/webcomponents-base/dist/*": [
+				"../../base/src/*"
+			],
+			"@ui5/webcomponents/dist/*": [
+				"../../main/src/*"
+			],
+			"@ui5/webcomponents-localization/dist/*": [
+				"../../localization/src/*"
+			],
+			"@ui5/webcomponents-theming/dist/*": [
+				"../../theming/src/*"
+			],
+			"@ui5/webcomponents-icons/dist/*": [
+				"../../icons/src/*"
+			],
+			"@ui5/webcomponents-icons-business-suite/dist/*": [
+				"../../icons-business-suite/src/*"
+			],
+			"@ui5/webcomponents-icons-tnt/dist/*": [
+				"../../icons-tnt/src/*"
+			]
+		},
+	},
+	"references": [
+		{
+			"path": "../"
+		},
+		{
+			"path": "../../main/cypress"
+		}
+	]
+}

package/cypress.config.js

@@ -0,0 +1,3 @@
+import cypressConfig from "@ui5/cypress-internal/cypress.config.js";
+
+export default cypressConfig;