@ui5/webcomponents-ai 2.14.0 → 2.15.0-rc.2
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.
- package/CHANGELOG.md +27 -0
- package/README.md +6 -6
- package/dist/.tsbuildinfo +1 -1
- package/dist/Button.d.ts +4 -1
- package/dist/Button.js +4 -0
- package/dist/Button.js.map +1 -1
- package/dist/css/themes/Button.css +1 -1
- package/dist/custom-elements-internal.json +2 -2
- package/dist/custom-elements.json +2 -2
- package/dist/generated/themes/Button.css.d.ts +1 -1
- package/dist/generated/themes/Button.css.js +1 -1
- package/dist/generated/themes/Button.css.js.map +1 -1
- package/dist/vscode.html-custom-data.json +1 -1
- package/dist/web-types.json +3 -3
- package/package.json +22 -19
package/dist/Button.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import type ButtonState from "./ButtonState.js";
|
|
|
5
5
|
import "./ButtonState.js";
|
|
6
6
|
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
|
|
7
7
|
import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
|
|
8
|
-
type AIButtonRootAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "roleDescription" | "title">;
|
|
8
|
+
type AIButtonRootAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "roleDescription" | "title" | "ariaKeyShortcuts">;
|
|
9
9
|
type AIButtonArrowButtonAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "expanded" | "title">;
|
|
10
10
|
type AIButtonAccessibilityAttributes = {
|
|
11
11
|
root?: AIButtonRootAccessibilityAttributes;
|
|
@@ -88,6 +88,9 @@ declare class Button extends UI5Element {
|
|
|
88
88
|
* Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`.
|
|
89
89
|
* - **roleDescription**: Defines a human-readable description for the button's role.
|
|
90
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.
|
|
91
94
|
*
|
|
92
95
|
* - **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.
|
|
93
96
|
* - **hasPopup**: Indicates the type of popup triggered by the arrow button.
|
package/dist/Button.js
CHANGED
|
@@ -88,6 +88,9 @@ let Button = Button_1 = class Button extends UI5Element {
|
|
|
88
88
|
* Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`.
|
|
89
89
|
* - **roleDescription**: Defines a human-readable description for the button's role.
|
|
90
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.
|
|
91
94
|
*
|
|
92
95
|
* - **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.
|
|
93
96
|
* - **hasPopup**: Indicates the type of popup triggered by the arrow button.
|
|
@@ -244,6 +247,7 @@ let Button = Button_1 = class Button extends UI5Element {
|
|
|
244
247
|
hasPopup: this.accessibilityAttributes?.root?.hasPopup || "false",
|
|
245
248
|
roleDescription: this.accessibilityAttributes?.root?.roleDescription,
|
|
246
249
|
title: this.accessibilityAttributes?.root?.title || title,
|
|
250
|
+
ariaKeyShortcuts: this.accessibilityAttributes?.root?.ariaKeyShortcuts,
|
|
247
251
|
},
|
|
248
252
|
arrowButton: {
|
|
249
253
|
hasPopup: this.accessibilityAttributes?.arrowButton?.hasPopup,
|
package/dist/Button.js.map
CHANGED
|
@@ -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 { 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\";\n\n// Styles\nimport ButtonCss from \"./generated/themes/Button.css.js\";\nimport { i18n } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\n\ntype AIButtonRootAccessibilityAttributes = Pick<AccessibilityAttributes, \"hasPopup\" | \"roleDescription\" | \"title\">;\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 *\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\")\n\tstatic i18nBundle: 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.i18nBundle.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},\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
|
+
{"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 { 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\";\n\n// Styles\nimport ButtonCss from \"./generated/themes/Button.css.js\";\nimport { i18n } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.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\")\n\tstatic i18nBundle: 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.i18nBundle.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 +1 @@
|
|
|
1
|
-
: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-
|
|
1
|
+
: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-15-0-rc-2_button_base_min_width)!important;max-width:var(--_ui5-v2-15-0-rc-2_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-15-0-rc-2_button_base_padding)}:host(.ui5-ai-button-fade-in[icon-only]) .ui5-ai-button-inner[_end-icon=""]::part(button){max-width:var(--_ui5-v2-15-0-rc-2_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-15-0-rc-2_button_base_min_width);max-width:var(--_ui5-v2-15-0-rc-2_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}
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
]
|
|
111
111
|
},
|
|
112
112
|
"default": "{}",
|
|
113
|
-
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
113
|
+
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
114
114
|
"privacy": "public",
|
|
115
115
|
"_ui5since": "2.6.0"
|
|
116
116
|
}
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
}
|
|
178
178
|
},
|
|
179
179
|
{
|
|
180
|
-
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
180
|
+
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
181
181
|
"name": "accessibility-attributes",
|
|
182
182
|
"default": "{}",
|
|
183
183
|
"fieldName": "accessibilityAttributes",
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
]
|
|
97
97
|
},
|
|
98
98
|
"default": "{}",
|
|
99
|
-
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
99
|
+
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
100
100
|
"privacy": "public"
|
|
101
101
|
}
|
|
102
102
|
],
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
}
|
|
155
155
|
},
|
|
156
156
|
{
|
|
157
|
-
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
157
|
+
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
158
158
|
"name": "accessibility-attributes",
|
|
159
159
|
"default": "{}",
|
|
160
160
|
"fieldName": "accessibilityAttributes",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _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-
|
|
1
|
+
declare const _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-15-0-rc-2_button_base_min_width)!important;max-width:var(--_ui5-v2-15-0-rc-2_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-15-0-rc-2_button_base_padding)}:host(.ui5-ai-button-fade-in[icon-only]) .ui5-ai-button-inner[_end-icon=\"\"]::part(button){max-width:var(--_ui5-v2-15-0-rc-2_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-15-0-rc-2_button_base_min_width);max-width:var(--_ui5-v2-15-0-rc-2_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}\n";
|
|
2
2
|
export default _default;
|
|
@@ -3,6 +3,6 @@ import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/s
|
|
|
3
3
|
import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
4
4
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
5
5
|
registerThemePropertiesLoader("@" + "u" + "i" + "5" + "/" + "w" + "e" + "b" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s" + "-" + "a" + "i", "sap_horizon", async () => defaultTheme);
|
|
6
|
-
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-
|
|
6
|
+
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-15-0-rc-2_button_base_min_width)!important;max-width:var(--_ui5-v2-15-0-rc-2_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-15-0-rc-2_button_base_padding)}:host(.ui5-ai-button-fade-in[icon-only]) .ui5-ai-button-inner[_end-icon=""]::part(button){max-width:var(--_ui5-v2-15-0-rc-2_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-15-0-rc-2_button_base_min_width);max-width:var(--_ui5-v2-15-0-rc-2_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}
|
|
7
7
|
`;
|
|
8
8
|
//# sourceMappingURL=Button.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Button.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AACpM,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\" + \"-\" + \"a\" + \"i\", \"sap_horizon\", async () => defaultTheme);\nexport 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-
|
|
1
|
+
{"version":3,"file":"Button.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Button.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AACpM,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\" + \"-\" + \"a\" + \"i\", \"sap_horizon\", async () => defaultTheme);\nexport 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-15-0-rc-2_button_base_min_width)!important;max-width:var(--_ui5-v2-15-0-rc-2_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-15-0-rc-2_button_base_padding)}:host(.ui5-ai-button-fade-in[icon-only]) .ui5-ai-button-inner[_end-icon=\"\"]::part(button){max-width:var(--_ui5-v2-15-0-rc-2_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-15-0-rc-2_button_base_min_width);max-width:var(--_ui5-v2-15-0-rc-2_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}\n`"]}
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
"name": "accessibility-attributes",
|
|
37
|
-
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
37
|
+
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
38
38
|
"values": [{ "name": "AIButtonAccessibilityAttributes" }]
|
|
39
39
|
}
|
|
40
40
|
],
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@ui5/webcomponents-ai",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.15.0-rc.2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
{
|
|
38
38
|
"name": "accessibility-attributes",
|
|
39
|
-
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
39
|
+
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
40
40
|
"value": {
|
|
41
41
|
"type": "AIButtonAccessibilityAttributes",
|
|
42
42
|
"default": "{}"
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
},
|
|
86
86
|
{
|
|
87
87
|
"name": "accessibility-attributes",
|
|
88
|
-
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
88
|
+
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
89
89
|
"value": { "type": "AIButtonAccessibilityAttributes" }
|
|
90
90
|
}
|
|
91
91
|
],
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ui5/webcomponents-ai",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.15.0-rc.2",
|
|
4
4
|
"description": "UI5 Web Components: webcomponents.ai",
|
|
5
5
|
"ui5": {
|
|
6
6
|
"webComponentsPackage": true
|
|
@@ -8,8 +8,7 @@
|
|
|
8
8
|
"type": "module",
|
|
9
9
|
"author": "SAP SE (https://www.sap.com)",
|
|
10
10
|
"license": "Apache-2.0",
|
|
11
|
-
"
|
|
12
|
-
"customElements": "./dist/custom-elements.json",
|
|
11
|
+
"customElements": "dist/custom-elements.json",
|
|
13
12
|
"keywords": [
|
|
14
13
|
"openui5",
|
|
15
14
|
"sapui5",
|
|
@@ -18,23 +17,22 @@
|
|
|
18
17
|
"scripts": {
|
|
19
18
|
"clean": "wc-dev clean",
|
|
20
19
|
"lint": "wc-dev lint",
|
|
21
|
-
"lint:scope": "
|
|
20
|
+
"lint:scope": "wc-dev scope.lint",
|
|
22
21
|
"start": "wc-dev start",
|
|
23
22
|
"build": "wc-dev build",
|
|
24
23
|
"watch": "wc-dev watch",
|
|
25
|
-
"generate": "
|
|
26
|
-
"generateAPI": "
|
|
27
|
-
"bundle": "
|
|
28
|
-
"test": "
|
|
29
|
-
"test:cypress": "
|
|
24
|
+
"generate": "wc-dev generate",
|
|
25
|
+
"generateAPI": "wc-dev generateAPI",
|
|
26
|
+
"bundle": "wc-dev build.bundle",
|
|
27
|
+
"test": "yarn test:cypress",
|
|
28
|
+
"test:cypress": "wc-dev test-cy-ci",
|
|
30
29
|
"test:cypress:single": "npx cypress run --component --browser chrome --spec",
|
|
31
|
-
"test:cypress:open": "
|
|
30
|
+
"test:cypress:open": "wc-dev test-cy-open",
|
|
32
31
|
"test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
|
|
33
32
|
"create-ui5-element": "wc-create-ui5-element",
|
|
34
33
|
"prepublishOnly": "tsc -b"
|
|
35
34
|
},
|
|
36
35
|
"exports": {
|
|
37
|
-
"./.port": "./.port",
|
|
38
36
|
"./src/*": "./src/*",
|
|
39
37
|
"./dist/*": "./dist/*",
|
|
40
38
|
"./package.json": "./package.json",
|
|
@@ -44,19 +42,24 @@
|
|
|
44
42
|
},
|
|
45
43
|
"repository": {
|
|
46
44
|
"type": "git",
|
|
47
|
-
"url": "https://github.com/
|
|
45
|
+
"url": "https://github.com/UI5/webcomponents.git",
|
|
48
46
|
"directory": "packages/ai"
|
|
49
47
|
},
|
|
50
48
|
"dependencies": {
|
|
51
|
-
"@ui5/webcomponents": "2.
|
|
52
|
-
"@ui5/webcomponents-base": "2.
|
|
53
|
-
"@ui5/webcomponents-icons": "2.
|
|
54
|
-
"@ui5/webcomponents-theming": "2.
|
|
49
|
+
"@ui5/webcomponents": "2.15.0-rc.2",
|
|
50
|
+
"@ui5/webcomponents-base": "2.15.0-rc.2",
|
|
51
|
+
"@ui5/webcomponents-icons": "2.15.0-rc.2",
|
|
52
|
+
"@ui5/webcomponents-theming": "2.15.0-rc.2"
|
|
55
53
|
},
|
|
56
54
|
"devDependencies": {
|
|
55
|
+
"@custom-elements-manifest/analyzer": "^0.10.6",
|
|
57
56
|
"@ui5/cypress-internal": "0.0.0",
|
|
58
|
-
"@ui5/webcomponents-tools": "2.
|
|
59
|
-
"
|
|
57
|
+
"@ui5/webcomponents-tools": "2.15.0-rc.2",
|
|
58
|
+
"chokidar-cli": "^3.0.0",
|
|
59
|
+
"cypress": "^13.0.0",
|
|
60
|
+
"eslint": "^7.22.0",
|
|
61
|
+
"rimraf": "^6.0.1",
|
|
62
|
+
"vite": "5.4.8"
|
|
60
63
|
},
|
|
61
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "ed55cd91014aec191705b37b57e8cf5dc8cc95ce"
|
|
62
65
|
}
|