@ui5/webcomponents-ai 0.0.0-6827fdc09 → 0.0.0-6daff23a5

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 (218) hide show
  1. package/.ui5-cem-aliases.json +4 -0
  2. package/CHANGELOG.md +403 -0
  3. package/LICENSE.txt +201 -0
  4. package/README.md +10 -8
  5. package/dist/.tsbuildinfo +1 -1
  6. package/dist/Assets-fetch.d.ts +3 -0
  7. package/dist/Assets-fetch.js +6 -0
  8. package/dist/Assets-fetch.js.map +1 -0
  9. package/dist/Assets-node.d.ts +14 -0
  10. package/dist/Assets-node.js +17 -0
  11. package/dist/Assets-node.js.map +1 -0
  12. package/dist/Button.d.ts +37 -0
  13. package/dist/Button.js +56 -2
  14. package/dist/Button.js.map +1 -1
  15. package/dist/ButtonTemplate.js +1 -1
  16. package/dist/ButtonTemplate.js.map +1 -1
  17. package/dist/Input.d.ts +143 -0
  18. package/dist/Input.js +288 -0
  19. package/dist/Input.js.map +1 -0
  20. package/dist/InputTemplate.d.ts +10 -0
  21. package/dist/InputTemplate.js +28 -0
  22. package/dist/InputTemplate.js.map +1 -0
  23. package/dist/TextArea.d.ts +118 -0
  24. package/dist/TextArea.js +230 -0
  25. package/dist/TextArea.js.map +1 -0
  26. package/dist/TextAreaTemplate.d.ts +2 -0
  27. package/dist/TextAreaTemplate.js +13 -0
  28. package/dist/TextAreaTemplate.js.map +1 -0
  29. package/dist/ToolbarLabel.d.ts +39 -0
  30. package/dist/ToolbarLabel.js +67 -0
  31. package/dist/ToolbarLabel.js.map +1 -0
  32. package/dist/ToolbarLabelTemplate.d.ts +2 -0
  33. package/dist/ToolbarLabelTemplate.js +5 -0
  34. package/dist/ToolbarLabelTemplate.js.map +1 -0
  35. package/dist/Versioning.d.ts +95 -0
  36. package/dist/Versioning.js +187 -0
  37. package/dist/Versioning.js.map +1 -0
  38. package/dist/VersioningTemplate.d.ts +4 -0
  39. package/dist/VersioningTemplate.js +9 -0
  40. package/dist/VersioningTemplate.js.map +1 -0
  41. package/dist/WritingAssistant.d.ts +100 -0
  42. package/dist/WritingAssistant.js +197 -0
  43. package/dist/WritingAssistant.js.map +1 -0
  44. package/dist/WritingAssistantTemplate.d.ts +2 -0
  45. package/dist/WritingAssistantTemplate.js +12 -0
  46. package/dist/WritingAssistantTemplate.js.map +1 -0
  47. package/dist/bundle.esm.js +2 -0
  48. package/dist/bundle.esm.js.map +1 -1
  49. package/dist/css/themes/Button.css +1 -1
  50. package/dist/css/themes/Input.css +1 -0
  51. package/dist/css/themes/PromptInput.css +1 -1
  52. package/dist/css/themes/TextArea.css +1 -0
  53. package/dist/css/themes/Versioning.css +1 -0
  54. package/dist/css/themes/WritingAssistant.css +1 -0
  55. package/dist/custom-elements-internal.json +427 -0
  56. package/dist/custom-elements.json +368 -0
  57. package/dist/generated/assets/i18n/messagebundle_ar.json +1 -1
  58. package/dist/generated/assets/i18n/messagebundle_bg.json +1 -1
  59. package/dist/generated/assets/i18n/messagebundle_ca.json +1 -1
  60. package/dist/generated/assets/i18n/messagebundle_cnr.json +1 -1
  61. package/dist/generated/assets/i18n/messagebundle_cs.json +1 -1
  62. package/dist/generated/assets/i18n/messagebundle_cy.json +1 -1
  63. package/dist/generated/assets/i18n/messagebundle_da.json +1 -1
  64. package/dist/generated/assets/i18n/messagebundle_de.json +1 -1
  65. package/dist/generated/assets/i18n/messagebundle_el.json +1 -1
  66. package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
  67. package/dist/generated/assets/i18n/messagebundle_en_GB.json +1 -1
  68. package/dist/generated/assets/i18n/messagebundle_en_US_sappsd.json +1 -1
  69. package/dist/generated/assets/i18n/messagebundle_en_US_saprigi.json +1 -1
  70. package/dist/generated/assets/i18n/messagebundle_en_US_saptrc.json +1 -1
  71. package/dist/generated/assets/i18n/messagebundle_es.json +1 -1
  72. package/dist/generated/assets/i18n/messagebundle_es_MX.json +1 -1
  73. package/dist/generated/assets/i18n/messagebundle_et.json +1 -1
  74. package/dist/generated/assets/i18n/messagebundle_fi.json +1 -1
  75. package/dist/generated/assets/i18n/messagebundle_fr.json +1 -1
  76. package/dist/generated/assets/i18n/messagebundle_fr_CA.json +1 -1
  77. package/dist/generated/assets/i18n/messagebundle_hi.json +1 -1
  78. package/dist/generated/assets/i18n/messagebundle_hr.json +1 -1
  79. package/dist/generated/assets/i18n/messagebundle_hu.json +1 -1
  80. package/dist/generated/assets/i18n/messagebundle_id.json +1 -1
  81. package/dist/generated/assets/i18n/messagebundle_it.json +1 -1
  82. package/dist/generated/assets/i18n/messagebundle_iw.json +1 -1
  83. package/dist/generated/assets/i18n/messagebundle_ja.json +1 -1
  84. package/dist/generated/assets/i18n/messagebundle_kk.json +1 -1
  85. package/dist/generated/assets/i18n/messagebundle_ko.json +1 -1
  86. package/dist/generated/assets/i18n/messagebundle_lt.json +1 -1
  87. package/dist/generated/assets/i18n/messagebundle_lv.json +1 -1
  88. package/dist/generated/assets/i18n/messagebundle_mk.json +1 -1
  89. package/dist/generated/assets/i18n/messagebundle_ms.json +1 -1
  90. package/dist/generated/assets/i18n/messagebundle_nl.json +1 -1
  91. package/dist/generated/assets/i18n/messagebundle_no.json +1 -1
  92. package/dist/generated/assets/i18n/messagebundle_pl.json +1 -1
  93. package/dist/generated/assets/i18n/messagebundle_pt.json +1 -1
  94. package/dist/generated/assets/i18n/messagebundle_pt_PT.json +1 -1
  95. package/dist/generated/assets/i18n/messagebundle_ro.json +1 -1
  96. package/dist/generated/assets/i18n/messagebundle_ru.json +1 -1
  97. package/dist/generated/assets/i18n/messagebundle_sh.json +1 -1
  98. package/dist/generated/assets/i18n/messagebundle_sk.json +1 -1
  99. package/dist/generated/assets/i18n/messagebundle_sl.json +1 -1
  100. package/dist/generated/assets/i18n/messagebundle_sr.json +1 -1
  101. package/dist/generated/assets/i18n/messagebundle_sv.json +1 -1
  102. package/dist/generated/assets/i18n/messagebundle_th.json +1 -1
  103. package/dist/generated/assets/i18n/messagebundle_tr.json +1 -1
  104. package/dist/generated/assets/i18n/messagebundle_uk.json +1 -1
  105. package/dist/generated/assets/i18n/messagebundle_vi.json +1 -1
  106. package/dist/generated/assets/i18n/messagebundle_zh_CN.json +1 -1
  107. package/dist/generated/assets/i18n/messagebundle_zh_TW.json +1 -1
  108. package/dist/generated/i18n/i18n-defaults.d.ts +15 -1
  109. package/dist/generated/i18n/i18n-defaults.js +15 -1
  110. package/dist/generated/i18n/i18n-defaults.js.map +1 -1
  111. package/dist/generated/json-imports/Themes-fetch.js +1 -1
  112. package/dist/generated/json-imports/Themes-fetch.js.map +1 -1
  113. package/dist/generated/json-imports/Themes-node.d.ts +1 -0
  114. package/dist/generated/json-imports/Themes-node.js +21 -0
  115. package/dist/generated/json-imports/Themes-node.js.map +1 -0
  116. package/dist/generated/json-imports/Themes.js +1 -1
  117. package/dist/generated/json-imports/Themes.js.map +1 -1
  118. package/dist/generated/json-imports/i18n-fetch.js +1 -1
  119. package/dist/generated/json-imports/i18n-fetch.js.map +1 -1
  120. package/dist/generated/json-imports/i18n-node.d.ts +1 -0
  121. package/dist/generated/json-imports/i18n-node.js +120 -0
  122. package/dist/generated/json-imports/i18n-node.js.map +1 -0
  123. package/dist/generated/json-imports/i18n.js +1 -1
  124. package/dist/generated/json-imports/i18n.js.map +1 -1
  125. package/dist/generated/themes/Button.css.d.ts +1 -1
  126. package/dist/generated/themes/Button.css.js +3 -3
  127. package/dist/generated/themes/Button.css.js.map +1 -1
  128. package/dist/generated/themes/Input.css.d.ts +2 -0
  129. package/dist/generated/themes/Input.css.js +8 -0
  130. package/dist/generated/themes/Input.css.js.map +1 -0
  131. package/dist/generated/themes/PromptInput.css.d.ts +1 -1
  132. package/dist/generated/themes/PromptInput.css.js +3 -3
  133. package/dist/generated/themes/PromptInput.css.js.map +1 -1
  134. package/dist/generated/themes/TextArea.css.d.ts +2 -0
  135. package/dist/generated/themes/TextArea.css.js +8 -0
  136. package/dist/generated/themes/TextArea.css.js.map +1 -0
  137. package/dist/generated/themes/Versioning.css.d.ts +2 -0
  138. package/dist/generated/themes/Versioning.css.js +8 -0
  139. package/dist/generated/themes/Versioning.css.js.map +1 -0
  140. package/dist/generated/themes/WritingAssistant.css.d.ts +2 -0
  141. package/dist/generated/themes/WritingAssistant.css.js +8 -0
  142. package/dist/generated/themes/WritingAssistant.css.js.map +1 -0
  143. package/dist/vscode.html-custom-data.json +54 -0
  144. package/dist/web-types.json +174 -1
  145. package/package-scripts.cjs +0 -1
  146. package/package.json +24 -21
  147. package/src/ButtonTemplate.tsx +1 -0
  148. package/src/InputTemplate.tsx +197 -0
  149. package/src/TextArea.css +45 -0
  150. package/src/TextAreaTemplate.tsx +90 -0
  151. package/src/ToolbarLabelTemplate.tsx +9 -0
  152. package/src/VersioningTemplate.tsx +34 -0
  153. package/src/WritingAssistantTemplate.tsx +49 -0
  154. package/src/i18n/messagebundle.properties +43 -1
  155. package/src/i18n/messagebundle_ar.properties +20 -0
  156. package/src/i18n/messagebundle_bg.properties +20 -0
  157. package/src/i18n/messagebundle_ca.properties +20 -0
  158. package/src/i18n/messagebundle_cnr.properties +20 -0
  159. package/src/i18n/messagebundle_cs.properties +20 -0
  160. package/src/i18n/messagebundle_cy.properties +20 -0
  161. package/src/i18n/messagebundle_da.properties +20 -0
  162. package/src/i18n/messagebundle_de.properties +20 -0
  163. package/src/i18n/messagebundle_el.properties +20 -0
  164. package/src/i18n/messagebundle_en.properties +20 -0
  165. package/src/i18n/messagebundle_en_GB.properties +20 -0
  166. package/src/i18n/messagebundle_en_US_sappsd.properties +28 -0
  167. package/src/i18n/messagebundle_en_US_saprigi.properties +28 -0
  168. package/src/i18n/messagebundle_en_US_saptrc.properties +28 -0
  169. package/src/i18n/messagebundle_es.properties +20 -0
  170. package/src/i18n/messagebundle_es_MX.properties +21 -1
  171. package/src/i18n/messagebundle_et.properties +20 -0
  172. package/src/i18n/messagebundle_fi.properties +20 -0
  173. package/src/i18n/messagebundle_fr.properties +20 -0
  174. package/src/i18n/messagebundle_fr_CA.properties +20 -0
  175. package/src/i18n/messagebundle_hi.properties +20 -0
  176. package/src/i18n/messagebundle_hr.properties +22 -2
  177. package/src/i18n/messagebundle_hu.properties +20 -0
  178. package/src/i18n/messagebundle_id.properties +20 -0
  179. package/src/i18n/messagebundle_it.properties +20 -0
  180. package/src/i18n/messagebundle_iw.properties +20 -0
  181. package/src/i18n/messagebundle_ja.properties +20 -0
  182. package/src/i18n/messagebundle_kk.properties +20 -0
  183. package/src/i18n/messagebundle_ko.properties +20 -0
  184. package/src/i18n/messagebundle_lt.properties +20 -0
  185. package/src/i18n/messagebundle_lv.properties +20 -0
  186. package/src/i18n/messagebundle_mk.properties +20 -0
  187. package/src/i18n/messagebundle_ms.properties +20 -0
  188. package/src/i18n/messagebundle_nl.properties +20 -0
  189. package/src/i18n/messagebundle_no.properties +20 -0
  190. package/src/i18n/messagebundle_pl.properties +20 -0
  191. package/src/i18n/messagebundle_pt.properties +20 -0
  192. package/src/i18n/messagebundle_pt_PT.properties +20 -0
  193. package/src/i18n/messagebundle_ro.properties +20 -0
  194. package/src/i18n/messagebundle_ru.properties +20 -0
  195. package/src/i18n/messagebundle_sh.properties +20 -0
  196. package/src/i18n/messagebundle_sk.properties +20 -0
  197. package/src/i18n/messagebundle_sl.properties +20 -0
  198. package/src/i18n/messagebundle_sr.properties +20 -0
  199. package/src/i18n/messagebundle_sv.properties +20 -0
  200. package/src/i18n/messagebundle_th.properties +22 -2
  201. package/src/i18n/messagebundle_tr.properties +20 -0
  202. package/src/i18n/messagebundle_uk.properties +20 -0
  203. package/src/i18n/messagebundle_vi.properties +20 -0
  204. package/src/i18n/messagebundle_zh_CN.properties +20 -0
  205. package/src/i18n/messagebundle_zh_TW.properties +20 -0
  206. package/src/themes/Input.css +83 -0
  207. package/src/themes/PromptInput.css +5 -1
  208. package/src/themes/TextArea.css +45 -0
  209. package/src/themes/Versioning.css +20 -0
  210. package/src/themes/WritingAssistant.css +45 -0
  211. package/tsconfig.json +6 -0
  212. package/coverage/lcov-report/src/generated/themes/Button.css.ts.html +0 -109
  213. package/coverage/lcov-report/src/generated/themes/index.html +0 -116
  214. package/cypress/specs/Button.cy.tsx +0 -14
  215. package/cypress/support/commands.ts +0 -40
  216. package/cypress/support/component-index.html +0 -12
  217. package/cypress/support/component.ts +0 -17
  218. package/cypress/tsconfig.json +0 -47
@@ -0,0 +1,3 @@
1
+ import "@ui5/webcomponents/dist/Assets-fetch.js";
2
+ import "./generated/json-imports/Themes-fetch.js";
3
+ import "./generated/json-imports/i18n-fetch.js";
@@ -0,0 +1,6 @@
1
+ // main package assets (transitively base, theming and icons)
2
+ import "@ui5/webcomponents/dist/Assets-fetch.js";
3
+ // own ai package assets
4
+ import "./generated/json-imports/Themes-fetch.js";
5
+ import "./generated/json-imports/i18n-fetch.js";
6
+ //# sourceMappingURL=Assets-fetch.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Assets-fetch.js","sourceRoot":"","sources":["../src/Assets-fetch.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,yCAAyC,CAAC;AAEjD,wBAAwB;AACxB,OAAO,0CAA0C,CAAC;AAClD,OAAO,wCAAwC,CAAC","sourcesContent":["// main package assets (transitively base, theming and icons)\nimport \"@ui5/webcomponents/dist/Assets-fetch.js\";\n\n// own ai package assets\nimport \"./generated/json-imports/Themes-fetch.js\";\nimport \"./generated/json-imports/i18n-fetch.js\";\n"]}
@@ -0,0 +1,14 @@
1
+ /**
2
+ * The `Assets-node` entry point is used to import all CLDR, theming, and i18n assets.
3
+ *
4
+ * It serves as an alternative to the `Assets` and `Assets-fetch` modules and supports the
5
+ * `with: { type: 'json' }` import attribute for loading JSON files.
6
+ *
7
+ * This import attribute is required in some environments, such as Node.js with server-side rendering (SSR).
8
+ *
9
+ * Example usage:
10
+ * await import("../assets/i18n/messagebundle_bg.json", { with: { type: 'json' } })
11
+ */
12
+ import "@ui5/webcomponents/dist/Assets-node.js";
13
+ import "./generated/json-imports/Themes-node.js";
14
+ import "./generated/json-imports/i18n-node.js";
@@ -0,0 +1,17 @@
1
+ /**
2
+ * The `Assets-node` entry point is used to import all CLDR, theming, and i18n assets.
3
+ *
4
+ * It serves as an alternative to the `Assets` and `Assets-fetch` modules and supports the
5
+ * `with: { type: 'json' }` import attribute for loading JSON files.
6
+ *
7
+ * This import attribute is required in some environments, such as Node.js with server-side rendering (SSR).
8
+ *
9
+ * Example usage:
10
+ * await import("../assets/i18n/messagebundle_bg.json", { with: { type: 'json' } })
11
+ */
12
+ // main package assets (transitively base, theming and icons)
13
+ import "@ui5/webcomponents/dist/Assets-node.js";
14
+ // own ai package assets
15
+ import "./generated/json-imports/Themes-node.js";
16
+ import "./generated/json-imports/i18n-node.js";
17
+ //# sourceMappingURL=Assets-node.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Assets-node.js","sourceRoot":"","sources":["../src/Assets-node.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,6DAA6D;AAC7D,OAAO,wCAAwC,CAAC;AAEhD,wBAAwB;AACxB,OAAO,yCAAyC,CAAC;AACjD,OAAO,uCAAuC,CAAC","sourcesContent":["/**\n * The `Assets-node` entry point is used to import all CLDR, theming, and i18n assets.\n *\n * It serves as an alternative to the `Assets` and `Assets-fetch` modules and supports the\n * `with: { type: 'json' }` import attribute for loading JSON files.\n *\n * This import attribute is required in some environments, such as Node.js with server-side rendering (SSR).\n *\n * Example usage:\n * await import(\"../assets/i18n/messagebundle_bg.json\", { with: { type: 'json' } })\n */\n\n// main package assets (transitively base, theming and icons)\nimport \"@ui5/webcomponents/dist/Assets-node.js\";\n\n// own ai package assets\nimport \"./generated/json-imports/Themes-node.js\";\nimport \"./generated/json-imports/i18n-node.js\";\n"]}
package/dist/Button.d.ts CHANGED
@@ -3,6 +3,14 @@ import type SplitButton from "@ui5/webcomponents/dist/SplitButton.js";
3
3
  import type ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
4
4
  import type ButtonState from "./ButtonState.js";
5
5
  import "./ButtonState.js";
6
+ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
7
+ import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
8
+ type AIButtonRootAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "roleDescription" | "title" | "ariaKeyShortcuts">;
9
+ type AIButtonArrowButtonAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "expanded" | "title">;
10
+ type AIButtonAccessibilityAttributes = {
11
+ root?: AIButtonRootAccessibilityAttributes;
12
+ arrowButton?: AIButtonArrowButtonAccessibilityAttributes;
13
+ };
6
14
  /**
7
15
  * @class
8
16
  *
@@ -69,6 +77,32 @@ declare class Button extends UI5Element {
69
77
  * @since 2.6.0
70
78
  */
71
79
  arrowButtonPressed: boolean;
80
+ /**
81
+ * Defines the additional accessibility attributes that will be applied to the component.
82
+ *
83
+ * This property allows for fine-tuned control of ARIA attributes for screen reader support.
84
+ * It accepts an object with the following optional fields:
85
+ *
86
+ * - **root**: Accessibility attributes that will be applied to the root element.
87
+ * - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).
88
+ * Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`.
89
+ * - **roleDescription**: Defines a human-readable description for the button's role.
90
+ * Accepts any string value.
91
+ * - **title**: Specifies a tooltip or description for screen readers.
92
+ * Accepts any string value.
93
+ * - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.
94
+ *
95
+ * - **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.
96
+ * - **hasPopup**: Indicates the type of popup triggered by the arrow button.
97
+ * Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`.
98
+ * - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.
99
+ * Accepts boolean values: `true` or `false`.
100
+ *
101
+ * @public
102
+ * @since 2.6.0
103
+ * @default {}
104
+ */
105
+ accessibilityAttributes: AIButtonAccessibilityAttributes;
72
106
  /**
73
107
  * Keeps the current state object of the component.
74
108
  * @private
@@ -90,6 +124,7 @@ declare class Button extends UI5Element {
90
124
  states: Array<ButtonState>;
91
125
  _splitButton?: SplitButton;
92
126
  _hiddenSplitButton?: SplitButton;
127
+ static i18nBundleAi: I18nBundle;
93
128
  get _hideArrowButton(): boolean;
94
129
  get _effectiveState(): string;
95
130
  get _effectiveStateObject(): ButtonState | undefined;
@@ -124,5 +159,7 @@ declare class Button extends UI5Element {
124
159
  * @private
125
160
  */
126
161
  _onArrowClick(e: CustomEvent): void;
162
+ get _computedAccessibilityAttributes(): AIButtonAccessibilityAttributes;
127
163
  }
128
164
  export default Button;
165
+ export type { AIButtonAccessibilityAttributes, };
package/dist/Button.js CHANGED
@@ -4,16 +4,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
4
4
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
+ var Button_1;
7
8
  import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
8
9
  import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
9
10
  import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
10
11
  import property from "@ui5/webcomponents-base/dist/decorators/property.js";
12
+ import { i18n } from "@ui5/webcomponents-base/dist/decorators.js";
11
13
  import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
12
14
  import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
13
15
  import query from "@ui5/webcomponents-base/dist/decorators/query.js";
14
16
  import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
17
+ import { BUTTON_TOOLTIP_TEXT } from "./generated/i18n/i18n-defaults.js";
15
18
  import "./ButtonState.js";
16
19
  import ButtonTemplate from "./ButtonTemplate.js";
20
+ import { getEffectiveAriaLabelText, getAssociatedLabelForTexts, getAllAccessibleNameRefTexts, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
17
21
  // Styles
18
22
  import ButtonCss from "./generated/themes/Button.css.js";
19
23
  /**
@@ -47,7 +51,7 @@ import ButtonCss from "./generated/themes/Button.css.js";
47
51
  * @public
48
52
  * @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.
49
53
  */
50
- let Button = class Button extends UI5Element {
54
+ let Button = Button_1 = class Button extends UI5Element {
51
55
  constructor() {
52
56
  super(...arguments);
53
57
  /**
@@ -73,6 +77,32 @@ let Button = class Button extends UI5Element {
73
77
  * @since 2.6.0
74
78
  */
75
79
  this.arrowButtonPressed = false;
80
+ /**
81
+ * Defines the additional accessibility attributes that will be applied to the component.
82
+ *
83
+ * This property allows for fine-tuned control of ARIA attributes for screen reader support.
84
+ * It accepts an object with the following optional fields:
85
+ *
86
+ * - **root**: Accessibility attributes that will be applied to the root element.
87
+ * - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).
88
+ * Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`.
89
+ * - **roleDescription**: Defines a human-readable description for the button's role.
90
+ * Accepts any string value.
91
+ * - **title**: Specifies a tooltip or description for screen readers.
92
+ * Accepts any string value.
93
+ * - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.
94
+ *
95
+ * - **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.
96
+ * - **hasPopup**: Indicates the type of popup triggered by the arrow button.
97
+ * Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`.
98
+ * - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.
99
+ * Accepts boolean values: `true` or `false`.
100
+ *
101
+ * @public
102
+ * @since 2.6.0
103
+ * @default {}
104
+ */
105
+ this.accessibilityAttributes = {};
76
106
  /**
77
107
  * Determines if the button is in icon-only mode.
78
108
  * This property is animation related only.
@@ -208,6 +238,24 @@ let Button = class Button extends UI5Element {
208
238
  e.stopImmediatePropagation();
209
239
  this.fireDecoratorEvent("arrow-button-click");
210
240
  }
241
+ get _computedAccessibilityAttributes() {
242
+ const labelRefTexts = getAllAccessibleNameRefTexts(this) || getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this) || "";
243
+ const mainTitle = this._hasText ? Button_1.i18nBundleAi.getText(BUTTON_TOOLTIP_TEXT, this._stateText) : "";
244
+ const title = `${mainTitle} ${labelRefTexts}`.trim();
245
+ return {
246
+ root: {
247
+ hasPopup: this.accessibilityAttributes?.root?.hasPopup || "false",
248
+ roleDescription: this.accessibilityAttributes?.root?.roleDescription,
249
+ title: this.accessibilityAttributes?.root?.title || title,
250
+ ariaKeyShortcuts: this.accessibilityAttributes?.root?.ariaKeyShortcuts,
251
+ },
252
+ arrowButton: {
253
+ hasPopup: this.accessibilityAttributes?.arrowButton?.hasPopup,
254
+ expanded: this.accessibilityAttributes?.arrowButton?.expanded,
255
+ title: this.accessibilityAttributes?.arrowButton?.title,
256
+ },
257
+ };
258
+ }
211
259
  };
212
260
  __decorate([
213
261
  property()
@@ -221,6 +269,9 @@ __decorate([
221
269
  __decorate([
222
270
  property({ type: Boolean, noAttribute: true })
223
271
  ], Button.prototype, "arrowButtonPressed", void 0);
272
+ __decorate([
273
+ property({ type: Object })
274
+ ], Button.prototype, "accessibilityAttributes", void 0);
224
275
  __decorate([
225
276
  property({ type: Object })
226
277
  ], Button.prototype, "_currentStateObject", void 0);
@@ -236,7 +287,10 @@ __decorate([
236
287
  __decorate([
237
288
  query(".ui5-ai-button-hidden[ui5-split-button]")
238
289
  ], Button.prototype, "_hiddenSplitButton", void 0);
239
- Button = __decorate([
290
+ __decorate([
291
+ i18n("@ui5/webcomponents-ai")
292
+ ], Button, "i18nBundleAi", void 0);
293
+ Button = Button_1 = __decorate([
240
294
  customElement({
241
295
  tag: "ui5-ai-button",
242
296
  languageAware: true,
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type SplitButton from \"@ui5/webcomponents/dist/SplitButton.js\";\nimport type ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport type ButtonState from \"./ButtonState.js\";\nimport \"./ButtonState.js\";\n\nimport ButtonTemplate from \"./ButtonTemplate.js\";\n\n// Styles\nimport ButtonCss from \"./generated/themes/Button.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-ai-button` component serves as a button for AI-related scenarios. Users can trigger actions by clicking or tapping the `ui5-ai-button`\n * or by pressing keyboard keys like [Enter] or [Space].\n *\n * ### Usage\n *\n * For the `ui5-ai-button` user interface, you can define one or more button states by placing `ui5-ai-button-state` components in their default slot.\n * Each state has a name for identification and can include text, an icon, and an end icon, as needed for its purpose.\n * You can define a split mode for the `ui5-ai-button`, which will results in displaying an arrow button for additional actions.\n *\n * You can choose from a set of predefined designs for `ui5-ai-button` (as in `ui5-button`) to match the desired styling.\n *\n * The `ui5-ai-button` can be activated by clicking or tapping it. You can change the button state in the click event handler. When the button is\n * in split mode, you can activate the default button action by clicking or tapping it, or by pressing keyboard keys like [Enter] or [Space].\n * You can activate the arrow button by clicking or tapping it, or by pressing keyboard keys like [Arrow Up], [Arrow Down], or [F4].\n * To display additional actions, you can attach a menu to the arrow button.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-ai/dist/Button.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.\n */\n\n@customElement({\n\ttag: \"ui5-ai-button\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: ButtonTemplate,\n\tstyles: ButtonCss,\n\tshadowRootOptions: { delegatesFocus: true },\n})\n\n/**\n * Fired when the component is activated either with a\n * mouse/tap or by using the Enter or Space key.\n * @public\n */\n@event(\"click\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the component is in split mode and after the arrow button\n * is activated either by clicking or tapping it or by using the [Arrow Up] / [Arrow Down],\n * [Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys.\n * @public\n */\n@event(\"arrow-button-click\", {\n\tbubbles: true,\n})\n\nclass Button extends UI5Element {\n\teventDetails!: {\n\t\t\"click\": void;\n\t\t\"arrow-button-click\": void;\n\t}\n\t/**\n\t * Defines the component design.\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property()\n\tdesign?: `${ButtonDesign}` = \"Default\"\n\n\t/**\n\t * Defines whether the component is disabled.\n\t * A disabled component can't be pressed or\n\t * focused, and it is not in the tab chain.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines the current state of the component.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tstate?: string;\n\n\t/**\n\t * Defines the active state of the arrow button in split mode.\n\t * Set to true when the button is in split mode and a menu with additional options\n\t * is opened by the arrow button. Set back to false when the menu is closed.\n\t * @default false\n\t * @public\n\t * @since 2.6.0\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\tarrowButtonPressed = false;\n\n\t/**\n\t * Keeps the current state object of the component.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_currentStateObject?: ButtonState;\n\n\t/**\n\t * Determines if the button is in icon-only mode.\n\t * This property is animation related only.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\ticonOnly? = false;\n\n\t/**\n\t * Defines the available states of the component.\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that\n\t * you only use `ui5-ai-button-state` components in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tstates!: Array<ButtonState>;\n\n\t@query(\"[ui5-split-button]\")\n\t_splitButton?: SplitButton;\n\n\t@query(\".ui5-ai-button-hidden[ui5-split-button]\")\n\t_hiddenSplitButton?: SplitButton;\n\n\tget _hideArrowButton() {\n\t\treturn !this._effectiveStateObject?.showArrowButton;\n\t}\n\n\tget _effectiveState() {\n\t\treturn this.state || (this.states.length && this.states[0].name) || \"\";\n\t}\n\n\tget _effectiveStateObject() {\n\t\treturn this.states.find(state => state.name === this._effectiveState);\n\t}\n\n\tget _stateIconOnly() {\n\t\treturn !this._stateText && !!this._stateIcon;\n\t}\n\n\tget _stateText() {\n\t\treturn this._currentStateObject?.text;\n\t}\n\n\tget _stateIcon() {\n\t\treturn this._currentStateObject?.icon;\n\t}\n\n\tget _stateEndIcon() {\n\t\tconst endIcon = this._effectiveStateObject?.showArrowButton ? \"\" : this._effectiveStateObject?.endIcon;\n\t\treturn endIcon;\n\t}\n\n\tget _hasText() {\n\t\treturn !!this._stateText;\n\t}\n\n\tonBeforeRendering(): void {\n\t\tconst splitButton = this._splitButton;\n\n\t\tif (splitButton) {\n\t\t\tsplitButton.activeArrowButton = this.arrowButtonPressed;\n\t\t}\n\n\t\tif (!this._currentStateObject?.name) {\n\t\t\tthis._currentStateObject = this._effectiveStateObject;\n\t\t}\n\n\t\tconst currentStateName = this._currentStateObject?.name || \"\";\n\n\t\tthis.iconOnly = this._stateIconOnly;\n\t\tif (currentStateName !== \"\" && currentStateName !== this._effectiveState) {\n\t\t\tthis._fadeOut();\n\t\t}\n\t}\n\n\t/**\n\t * Starts the fade-out animation.\n\t * @private\n\t */\n\tasync _fadeOut(): Promise<void> {\n\t\tconst fadeOutDuration = 180;\n\t\tconst button = this._splitButton;\n\t\tconst hiddenButton = this._hiddenSplitButton;\n\t\tconst newStateObject = this._effectiveStateObject;\n\n\t\tif (!newStateObject) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(`State with name=\"${this.state}\" doesn't exist!`);\n\t\t\treturn;\n\t\t}\n\n\t\tif (!button || !hiddenButton) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst buttonWidth = button.offsetWidth;\n\t\tconst currentState: Partial<ButtonState> = this._currentStateObject || {};\n\n\t\tif ((!currentState.showArrowButton && newStateObject.showArrowButton) || (!currentState.endIcon && !!newStateObject.endIcon)) {\n\t\t\tthis.classList.add(\"ui5-ai-button-button-to-menu\");\n\t\t}\n\t\tif ((currentState.showArrowButton && !newStateObject.showArrowButton) || (!!currentState.endIcon && !newStateObject.endIcon)) {\n\t\t\tthis.classList.add(\"ui5-ai-button-menu-to-button\");\n\t\t}\n\n\t\tthis.style.width = `${buttonWidth}px`;\n\t\thiddenButton.icon = newStateObject.icon;\n\t\thiddenButton._endIcon = newStateObject.endIcon;\n\t\thiddenButton.textContent = newStateObject.text || null;\n\t\thiddenButton._hideArrowButton = this._hideArrowButton;\n\n\t\tawait renderFinished();\n\t\tconst hiddenButtonWidth = hiddenButton.offsetWidth;\n\t\tthis.style.width = `${hiddenButtonWidth}px`;\n\t\tthis.classList.add(\"ui5-ai-button-fade-out\");\n\n\t\tsetTimeout(() => {\n\t\t\tthis.classList.add(\"ui5-ai-button-fade-mid\");\n\t\t\tbutton._hideArrowButton = this._hideArrowButton;\n\t\t\tthis._fadeIn();\n\t\t}, fadeOutDuration);\n\t}\n\n\t/**\n\t * Starts the fade-in animation.\n\t * @private\n\t */\n\t_fadeIn(): void {\n\t\tconst fadeInDuration = 160;\n\n\t\tsetTimeout(() => {\n\t\t\tconst newStateObject = this._effectiveStateObject;\n\t\t\tthis._currentStateObject = newStateObject;\n\t\t\tthis.classList.add(\"ui5-ai-button-fade-in\");\n\t\t\tthis._resetFade();\n\t\t}, fadeInDuration);\n\t}\n\n\t/**\n\t * Resets the fade phases when the animation is completed.\n\t * @private\n\t */\n\t_resetFade(): void {\n\t\tconst fadeResetDuration = 160;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.classList.remove(\"ui5-ai-button-fade-out\");\n\t\t\tthis.classList.remove(\"ui5-ai-button-fade-mid\");\n\t\t\tthis.classList.remove(\"ui5-ai-button-fade-in\");\n\t\t\tthis.classList.remove(\"ui5-ai-button-button-to-menu\");\n\t\t\tthis.classList.remove(\"ui5-ai-button-menu-to-button\");\n\t\t}, fadeResetDuration);\n\n\t\t// reset the button's width after animations\n\t\tconst button = this._splitButton;\n\n\t\tif (button) {\n\t\t\tbutton.style.width = \"\";\n\t\t}\n\t}\n\n\t/**\n\t * Handles the click event.\n\t * @private\n\t */\n\t_onClick(e: CustomEvent): void {\n\t\te.stopImmediatePropagation();\n\t\tthis.fireDecoratorEvent(\"click\");\n\t}\n\n\t/**\n\t * Handles the arrow-button-click event when `ui5-ai-button` is in split mode.\n\t * @private\n\t */\n\t_onArrowClick(e: CustomEvent): void {\n\t\te.stopImmediatePropagation();\n\t\tthis.fireDecoratorEvent(\"arrow-button-click\");\n\t}\n}\n\nButton.define();\nexport default Button;\n"]}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport { i18n } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type SplitButton from \"@ui5/webcomponents/dist/SplitButton.js\";\nimport type ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport type ButtonState from \"./ButtonState.js\";\nimport { BUTTON_TOOLTIP_TEXT } from \"./generated/i18n/i18n-defaults.js\";\nimport \"./ButtonState.js\";\nimport ButtonTemplate from \"./ButtonTemplate.js\";\nimport {\n\tgetEffectiveAriaLabelText,\n\tgetAssociatedLabelForTexts,\n\tgetAllAccessibleNameRefTexts,\n} from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\n\n// Styles\nimport ButtonCss from \"./generated/themes/Button.css.js\";\n\ntype AIButtonRootAccessibilityAttributes = Pick<AccessibilityAttributes, \"hasPopup\" | \"roleDescription\" | \"title\" | \"ariaKeyShortcuts\">;\ntype AIButtonArrowButtonAccessibilityAttributes = Pick<AccessibilityAttributes, \"hasPopup\" | \"expanded\" | \"title\">;\ntype AIButtonAccessibilityAttributes = { root?: AIButtonRootAccessibilityAttributes, arrowButton?: AIButtonArrowButtonAccessibilityAttributes}\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-ai-button` component serves as a button for AI-related scenarios. Users can trigger actions by clicking or tapping the `ui5-ai-button`\n * or by pressing keyboard keys like [Enter] or [Space].\n *\n * ### Usage\n *\n * For the `ui5-ai-button` user interface, you can define one or more button states by placing `ui5-ai-button-state` components in their default slot.\n * Each state has a name for identification and can include text, an icon, and an end icon, as needed for its purpose.\n * You can define a split mode for the `ui5-ai-button`, which will results in displaying an arrow button for additional actions.\n *\n * You can choose from a set of predefined designs for `ui5-ai-button` (as in `ui5-button`) to match the desired styling.\n *\n * The `ui5-ai-button` can be activated by clicking or tapping it. You can change the button state in the click event handler. When the button is\n * in split mode, you can activate the default button action by clicking or tapping it, or by pressing keyboard keys like [Enter] or [Space].\n * You can activate the arrow button by clicking or tapping it, or by pressing keyboard keys like [Arrow Up], [Arrow Down], or [F4].\n * To display additional actions, you can attach a menu to the arrow button.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-ai/dist/Button.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.\n */\n\n@customElement({\n\ttag: \"ui5-ai-button\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: ButtonTemplate,\n\tstyles: ButtonCss,\n\tshadowRootOptions: { delegatesFocus: true },\n})\n\n/**\n * Fired when the component is activated either with a\n * mouse/tap or by using the Enter or Space key.\n * @public\n */\n@event(\"click\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the component is in split mode and after the arrow button\n * is activated either by clicking or tapping it or by using the [Arrow Up] / [Arrow Down],\n * [Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys.\n * @public\n */\n@event(\"arrow-button-click\", {\n\tbubbles: true,\n})\n\nclass Button extends UI5Element {\n\teventDetails!: {\n\t\t\"click\": void;\n\t\t\"arrow-button-click\": void;\n\t}\n\t/**\n\t * Defines the component design.\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property()\n\tdesign?: `${ButtonDesign}` = \"Default\"\n\n\t/**\n\t * Defines whether the component is disabled.\n\t * A disabled component can't be pressed or\n\t * focused, and it is not in the tab chain.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines the current state of the component.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tstate?: string;\n\n\t/**\n\t * Defines the active state of the arrow button in split mode.\n\t * Set to true when the button is in split mode and a menu with additional options\n\t * is opened by the arrow button. Set back to false when the menu is closed.\n\t * @default false\n\t * @public\n\t * @since 2.6.0\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\tarrowButtonPressed = false;\n\n\t/**\n \t * Defines the additional accessibility attributes that will be applied to the component.\n\t *\n\t * This property allows for fine-tuned control of ARIA attributes for screen reader support.\n\t * It accepts an object with the following optional fields:\n\t *\n\t * - **root**: Accessibility attributes that will be applied to the root element.\n\t * - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n\t * Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n\t * - **roleDescription**: Defines a human-readable description for the button's role.\n\t * Accepts any string value.\n\t * - **title**: Specifies a tooltip or description for screen readers.\n\t * Accepts any string value.\n\t * - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\t *\n\t * - **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n\t * - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n\t * Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n\t * - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n\t * Accepts boolean values: `true` or `false`.\n\t *\n\t * @public\n\t * @since 2.6.0\n\t * @default {}\n \t*/\n\t@property({ type: Object })\n\taccessibilityAttributes: AIButtonAccessibilityAttributes = {};\n\n\t/**\n\t * Keeps the current state object of the component.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_currentStateObject?: ButtonState;\n\n\t/**\n\t * Determines if the button is in icon-only mode.\n\t * This property is animation related only.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\ticonOnly? = false;\n\n\t/**\n\t * Defines the available states of the component.\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that\n\t * you only use `ui5-ai-button-state` components in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tstates!: Array<ButtonState>;\n\n\t@query(\"[ui5-split-button]\")\n\t_splitButton?: SplitButton;\n\n\t@query(\".ui5-ai-button-hidden[ui5-split-button]\")\n\t_hiddenSplitButton?: SplitButton;\n\n\t@i18n(\"@ui5/webcomponents-ai\")\n\tstatic i18nBundleAi: I18nBundle;\n\n\tget _hideArrowButton() {\n\t\treturn !this._effectiveStateObject?.showArrowButton;\n\t}\n\n\tget _effectiveState() {\n\t\treturn this.state || (this.states.length && this.states[0].name) || \"\";\n\t}\n\n\tget _effectiveStateObject() {\n\t\treturn this.states.find(state => state.name === this._effectiveState);\n\t}\n\n\tget _stateIconOnly() {\n\t\treturn !this._stateText && !!this._stateIcon;\n\t}\n\n\tget _stateText() {\n\t\treturn this._currentStateObject?.text;\n\t}\n\n\tget _stateIcon() {\n\t\treturn this._currentStateObject?.icon;\n\t}\n\n\tget _stateEndIcon() {\n\t\tconst endIcon = this._effectiveStateObject?.showArrowButton ? \"\" : this._effectiveStateObject?.endIcon;\n\t\treturn endIcon;\n\t}\n\n\tget _hasText() {\n\t\treturn !!this._stateText;\n\t}\n\n\tonBeforeRendering(): void {\n\t\tconst splitButton = this._splitButton;\n\n\t\tif (splitButton) {\n\t\t\tsplitButton.activeArrowButton = this.arrowButtonPressed;\n\t\t}\n\n\t\tif (!this._currentStateObject?.name) {\n\t\t\tthis._currentStateObject = this._effectiveStateObject;\n\t\t}\n\n\t\tconst currentStateName = this._currentStateObject?.name || \"\";\n\n\t\tthis.iconOnly = this._stateIconOnly;\n\t\tif (currentStateName !== \"\" && currentStateName !== this._effectiveState) {\n\t\t\tthis._fadeOut();\n\t\t}\n\t}\n\n\t/**\n\t * Starts the fade-out animation.\n\t * @private\n\t */\n\tasync _fadeOut(): Promise<void> {\n\t\tconst fadeOutDuration = 180;\n\t\tconst button = this._splitButton;\n\t\tconst hiddenButton = this._hiddenSplitButton;\n\t\tconst newStateObject = this._effectiveStateObject;\n\n\t\tif (!newStateObject) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(`State with name=\"${this.state}\" doesn't exist!`);\n\t\t\treturn;\n\t\t}\n\n\t\tif (!button || !hiddenButton) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst buttonWidth = button.offsetWidth;\n\t\tconst currentState: Partial<ButtonState> = this._currentStateObject || {};\n\n\t\tif ((!currentState.showArrowButton && newStateObject.showArrowButton) || (!currentState.endIcon && !!newStateObject.endIcon)) {\n\t\t\tthis.classList.add(\"ui5-ai-button-button-to-menu\");\n\t\t}\n\t\tif ((currentState.showArrowButton && !newStateObject.showArrowButton) || (!!currentState.endIcon && !newStateObject.endIcon)) {\n\t\t\tthis.classList.add(\"ui5-ai-button-menu-to-button\");\n\t\t}\n\n\t\tthis.style.width = `${buttonWidth}px`;\n\t\thiddenButton.icon = newStateObject.icon;\n\t\thiddenButton._endIcon = newStateObject.endIcon;\n\t\thiddenButton.textContent = newStateObject.text || null;\n\t\thiddenButton._hideArrowButton = this._hideArrowButton;\n\n\t\tawait renderFinished();\n\t\tconst hiddenButtonWidth = hiddenButton.offsetWidth;\n\t\tthis.style.width = `${hiddenButtonWidth}px`;\n\t\tthis.classList.add(\"ui5-ai-button-fade-out\");\n\n\t\tsetTimeout(() => {\n\t\t\tthis.classList.add(\"ui5-ai-button-fade-mid\");\n\t\t\tbutton._hideArrowButton = this._hideArrowButton;\n\t\t\tthis._fadeIn();\n\t\t}, fadeOutDuration);\n\t}\n\n\t/**\n\t * Starts the fade-in animation.\n\t * @private\n\t */\n\t_fadeIn(): void {\n\t\tconst fadeInDuration = 160;\n\n\t\tsetTimeout(() => {\n\t\t\tconst newStateObject = this._effectiveStateObject;\n\t\t\tthis._currentStateObject = newStateObject;\n\t\t\tthis.classList.add(\"ui5-ai-button-fade-in\");\n\t\t\tthis._resetFade();\n\t\t}, fadeInDuration);\n\t}\n\n\t/**\n\t * Resets the fade phases when the animation is completed.\n\t * @private\n\t */\n\t_resetFade(): void {\n\t\tconst fadeResetDuration = 160;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.classList.remove(\"ui5-ai-button-fade-out\");\n\t\t\tthis.classList.remove(\"ui5-ai-button-fade-mid\");\n\t\t\tthis.classList.remove(\"ui5-ai-button-fade-in\");\n\t\t\tthis.classList.remove(\"ui5-ai-button-button-to-menu\");\n\t\t\tthis.classList.remove(\"ui5-ai-button-menu-to-button\");\n\t\t}, fadeResetDuration);\n\n\t\t// reset the button's width after animations\n\t\tconst button = this._splitButton;\n\n\t\tif (button) {\n\t\t\tbutton.style.width = \"\";\n\t\t}\n\t}\n\n\t/**\n\t * Handles the click event.\n\t * @private\n\t */\n\t_onClick(e: CustomEvent): void {\n\t\te.stopImmediatePropagation();\n\t\tthis.fireDecoratorEvent(\"click\");\n\t}\n\n\t/**\n\t * Handles the arrow-button-click event when `ui5-ai-button` is in split mode.\n\t * @private\n\t */\n\t_onArrowClick(e: CustomEvent): void {\n\t\te.stopImmediatePropagation();\n\t\tthis.fireDecoratorEvent(\"arrow-button-click\");\n\t}\n\n\tget _computedAccessibilityAttributes(): AIButtonAccessibilityAttributes {\n\t\tconst labelRefTexts = getAllAccessibleNameRefTexts(this) || getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this) || \"\";\n\n\t\tconst mainTitle = this._hasText ? Button.i18nBundleAi.getText(BUTTON_TOOLTIP_TEXT, this._stateText as string) : \"\";\n\t\tconst title = `${mainTitle} ${labelRefTexts}`.trim();\n\n\t\treturn {\n\t\t\troot: {\n\t\t\t\thasPopup: this.accessibilityAttributes?.root?.hasPopup || \"false\",\n\t\t\t\troleDescription: this.accessibilityAttributes?.root?.roleDescription,\n\t\t\t\ttitle: this.accessibilityAttributes?.root?.title || title,\n\t\t\t\tariaKeyShortcuts: this.accessibilityAttributes?.root?.ariaKeyShortcuts,\n\t\t\t},\n\t\t\tarrowButton: {\n\t\t\t\thasPopup: this.accessibilityAttributes?.arrowButton?.hasPopup,\n\t\t\t\texpanded: this.accessibilityAttributes?.arrowButton?.expanded,\n\t\t\t\ttitle: this.accessibilityAttributes?.arrowButton?.title,\n\t\t\t},\n\t\t};\n\t}\n}\n\nButton.define();\nexport default Button;\nexport type {\n\tAIButtonAccessibilityAttributes,\n};\n"]}
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
2
2
  import SplitButton from "@ui5/webcomponents/dist/SplitButton.js";
3
3
  export default function ButtonTemplate() {
4
- return (_jsxs(_Fragment, { children: [_jsx(SplitButton, { class: "ui5-ai-button-inner", design: this.design, icon: this._stateIcon, disabled: this.disabled, _endIcon: this._stateEndIcon, _hideArrowButton: this._hideArrowButton, onClick: this._onClick, onArrowClick: this._onArrowClick, children: this._hasText && (_jsx("div", { class: "ui5-ai-button-text", children: this._stateText })) }), _jsx(SplitButton, { class: "ui5-ai-button-hidden", design: this.design })] }));
4
+ return (_jsxs(_Fragment, { children: [_jsx(SplitButton, { class: "ui5-ai-button-inner", design: this.design, icon: this._stateIcon, disabled: this.disabled, _endIcon: this._stateEndIcon, _hideArrowButton: this._hideArrowButton, onClick: this._onClick, onArrowClick: this._onArrowClick, accessibilityAttributes: this._computedAccessibilityAttributes, children: this._hasText && (_jsx("div", { class: "ui5-ai-button-text", children: this._stateText })) }), _jsx(SplitButton, { class: "ui5-ai-button-hidden", design: this.design })] }));
5
5
  }
6
6
  //# sourceMappingURL=ButtonTemplate.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonTemplate.js","sourceRoot":"","sources":["../src/ButtonTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,MAAM,wCAAwC,CAAC;AAGjE,MAAM,CAAC,OAAO,UAAU,cAAc;IACrC,OAAO,CAAC,8BACP,KAAC,WAAW,IACX,KAAK,EAAC,qBAAqB,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,YAAY,EAAE,IAAI,CAAC,aAAa,YAE/B,IAAI,CAAC,QAAQ,IAAI,CACjB,cAAK,KAAK,EAAC,oBAAoB,YAAE,IAAI,CAAC,UAAU,GAAO,CACvD,GACY,EAEd,KAAC,WAAW,IACX,KAAK,EAAC,sBAAsB,EAC5B,MAAM,EAAE,IAAI,CAAC,MAAM,GAClB,IACA,CAAC,CAAC;AACN,CAAC","sourcesContent":["import SplitButton from \"@ui5/webcomponents/dist/SplitButton.js\";\nimport type Button from \"./Button.js\";\n\nexport default function ButtonTemplate(this: Button) {\n\treturn (<>\n\t\t<SplitButton\n\t\t\tclass=\"ui5-ai-button-inner\"\n\t\t\tdesign={this.design}\n\t\t\ticon={this._stateIcon}\n\t\t\tdisabled={this.disabled}\n\t\t\t_endIcon={this._stateEndIcon}\n\t\t\t_hideArrowButton={this._hideArrowButton}\n\t\t\tonClick={this._onClick}\n\t\t\tonArrowClick={this._onArrowClick}\n\t\t>\n\t\t\t{this._hasText && (\n\t\t\t\t<div class=\"ui5-ai-button-text\">{this._stateText}</div>\n\t\t\t)}\n\t\t</SplitButton>\n\n\t\t<SplitButton\n\t\t\tclass=\"ui5-ai-button-hidden\"\n\t\t\tdesign={this.design}\n\t\t/>\n\t</>);\n}\n"]}
1
+ {"version":3,"file":"ButtonTemplate.js","sourceRoot":"","sources":["../src/ButtonTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,MAAM,wCAAwC,CAAC;AAGjE,MAAM,CAAC,OAAO,UAAU,cAAc;IACrC,OAAO,CAAC,8BACP,KAAC,WAAW,IACX,KAAK,EAAC,qBAAqB,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,uBAAuB,EAAE,IAAI,CAAC,gCAAgC,YAE7D,IAAI,CAAC,QAAQ,IAAI,CACjB,cAAK,KAAK,EAAC,oBAAoB,YAAE,IAAI,CAAC,UAAU,GAAO,CACvD,GACY,EAEd,KAAC,WAAW,IACX,KAAK,EAAC,sBAAsB,EAC5B,MAAM,EAAE,IAAI,CAAC,MAAM,GAClB,IACA,CAAC,CAAC;AACN,CAAC","sourcesContent":["import SplitButton from \"@ui5/webcomponents/dist/SplitButton.js\";\nimport type Button from \"./Button.js\";\n\nexport default function ButtonTemplate(this: Button) {\n\treturn (<>\n\t\t<SplitButton\n\t\t\tclass=\"ui5-ai-button-inner\"\n\t\t\tdesign={this.design}\n\t\t\ticon={this._stateIcon}\n\t\t\tdisabled={this.disabled}\n\t\t\t_endIcon={this._stateEndIcon}\n\t\t\t_hideArrowButton={this._hideArrowButton}\n\t\t\tonClick={this._onClick}\n\t\t\tonArrowClick={this._onArrowClick}\n\t\t\taccessibilityAttributes={this._computedAccessibilityAttributes}\n\t\t>\n\t\t\t{this._hasText && (\n\t\t\t\t<div class=\"ui5-ai-button-text\">{this._stateText}</div>\n\t\t\t)}\n\t\t</SplitButton>\n\n\t\t<SplitButton\n\t\t\tclass=\"ui5-ai-button-hidden\"\n\t\t\tdesign={this.design}\n\t\t/>\n\t</>);\n}\n"]}
@@ -0,0 +1,143 @@
1
+ import BaseInput from "@ui5/webcomponents/dist/Input.js";
2
+ import type Menu from "@ui5/webcomponents/dist/Menu.js";
3
+ import type { MenuItemClickEventDetail } from "@ui5/webcomponents/dist/Menu.js";
4
+ type InputVersionChangeEventDetail = {
5
+ backwards: boolean;
6
+ };
7
+ /**
8
+ * @class
9
+ *
10
+ * ### Overview
11
+ *
12
+ * The `ui5-ai-input` component extends the standard `ui5-input` with **AI Writing Assistant** capabilities.
13
+ *
14
+ * ### Structure
15
+ *
16
+ * The `ui5-ai-input` consists of the following main parts:
17
+ *
18
+ * - **Input Field** – Inherits all standard Input behaviors.
19
+ * - **AI Action Button** – Appears when focused or loading, providing access to AI-related actions or stopping generation.
20
+ *
21
+ * The component automatically determines which elements to render based on its internal state:
22
+ * - The AI Button is only shown when there are available `actions`.
23
+ * - The version navigation appears only when `totalVersions > 1`.
24
+ *
25
+ * ### Keyboard Support
26
+ *
27
+ * - **Shift + F4** — Opens the AI menu.
28
+ * - **Ctrl + Shift + Z / Y** — Navigates backward/forward between AI-generated versions.
29
+ *
30
+ * ### ES6 Module Import
31
+ *
32
+ * `import "@ui5/webcomponents-ai/dist/Input.js";`
33
+ *
34
+ * @constructor
35
+ * @extends BaseInput
36
+ * @since 2.16.0
37
+ * @experimental The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change.
38
+ * @public
39
+ */
40
+ declare class Input extends BaseInput {
41
+ eventDetails: BaseInput["eventDetails"] & {
42
+ "version-change": InputVersionChangeEventDetail;
43
+ "stop-generation": void;
44
+ "button-click": void;
45
+ "item-click": MenuItemClickEventDetail;
46
+ };
47
+ /**
48
+ * Indicates the index of the currently displayed version.
49
+ *
50
+ * @default 0
51
+ * @public
52
+ */
53
+ currentVersion: number;
54
+ /**
55
+ * Indicates the total number of result versions available.
56
+ *
57
+ * When not set or set to 0, the versioning will be hidden.
58
+ *
59
+ * @default 0
60
+ * @public
61
+ */
62
+ totalVersions: number;
63
+ /**
64
+ * Defines whether the AI Writing Assistant is currently loading.
65
+ *
66
+ * When `true`, indicates that an AI action is in progress.
67
+ *
68
+ * @default false
69
+ * @public
70
+ */
71
+ loading: boolean;
72
+ /**
73
+ * Indicates if the menu is open.
74
+ * @default 0
75
+ * @private
76
+ */
77
+ _isMenuOpen: boolean;
78
+ /**
79
+ * Defines the items of the menu for the component.
80
+ * @public
81
+ */
82
+ actions: Array<HTMLElement>;
83
+ _previousCurrentStep: number;
84
+ _previousTotalSteps: number;
85
+ isFocused: boolean;
86
+ _onfocusin(e: FocusEvent): void;
87
+ _onfocusout(e: FocusEvent): void;
88
+ /**
89
+ * Manages the focus when the navigation buttons become disabled/enabled.
90
+ * Automatically moves the focus to the available button when the user reaches the boundaries.
91
+ * @private
92
+ */
93
+ _manageVersionButtonsFocus(): void;
94
+ /**
95
+ * Handles the click event for the AI generate Button.
96
+ * Fires the appropriate event based on the AI Button state.
97
+ * @private
98
+ */
99
+ _handleAIButtonClick(e: Event): void;
100
+ /**
101
+ * Handles the escape event for the AI generate Button.
102
+ * @private
103
+ */
104
+ _handleAIButtonKeydown: (e: KeyboardEvent) => void;
105
+ /**
106
+ * Handles the version change event from the versioning component.
107
+ *
108
+ * @param {CustomEvent} e - The version change event
109
+ */
110
+ _handleVersionChange(e: CustomEvent<{
111
+ backwards: boolean;
112
+ }>): void;
113
+ /**
114
+ * Handles the click event for the "Previous Version" button.
115
+ * Updates the current version index and syncs content.
116
+ * @private
117
+ */
118
+ _handlePreviousButtonClick(): void;
119
+ /**
120
+ * Handles the click event for the "Next Version" button.
121
+ * Updates the current version index and syncs content.
122
+ * @private
123
+ */
124
+ _handleNextButtonClick(): void;
125
+ _onMenuIconClick(e: CustomEvent<MenuItemClickEventDetail>): void;
126
+ /**
127
+ * Handles keydown events for keyboard shortcuts.
128
+ * @private
129
+ */
130
+ _onkeydown(e: KeyboardEvent): void;
131
+ /**
132
+ * Handles visibility of the Writing Assistant Button.
133
+ * If there are no items, the Writing Assistant Button would not be rendered.
134
+ */
135
+ get hasActions(): boolean;
136
+ get ariaLabel(): string;
137
+ get stopGeneratingTooltip(): string;
138
+ get nextButtonAccessibleName(): string;
139
+ get previousButtonAccessibleName(): string;
140
+ get menu(): Menu;
141
+ }
142
+ export type { InputVersionChangeEventDetail, MenuItemClickEventDetail as InputItemClickEventDetail };
143
+ export default Input;