@ui5/webcomponents-ai 0.0.0-9261ac932 → 0.0.0-acc6fea96
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 +160 -0
- package/README.md +4 -3
- package/dist/Button.d.ts +45 -32
- package/dist/Button.js +118 -82
- package/dist/Button.js.map +1 -1
- package/dist/ButtonState.d.ts +7 -0
- package/dist/ButtonState.js +13 -0
- package/dist/ButtonState.js.map +1 -1
- package/dist/ButtonTemplate.d.ts +2 -0
- package/dist/ButtonTemplate.js +6 -0
- package/dist/ButtonTemplate.js.map +1 -0
- package/dist/PromptInput.d.ts +5 -1
- package/dist/PromptInput.js +4 -13
- package/dist/PromptInput.js.map +1 -1
- package/dist/PromptInputTemplate.d.ts +2 -0
- package/dist/PromptInputTemplate.js +12 -0
- package/dist/PromptInputTemplate.js.map +1 -0
- package/dist/css/themes/Button.css +1 -1
- package/dist/custom-elements-internal.json +54 -2
- package/dist/custom-elements.json +47 -2
- package/dist/generated/assets/i18n/messagebundle_en_US_saptrc.json +1 -1
- package/dist/generated/assets/themes/sap_horizon/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_dark/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcb/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcw/parameters-bundle.css.json +1 -1
- package/dist/generated/themes/Button.css.d.ts +2 -3
- package/dist/generated/themes/Button.css.js +2 -3
- package/dist/generated/themes/Button.css.js.map +1 -1
- package/dist/generated/themes/PromptInput.css.d.ts +2 -3
- package/dist/generated/themes/PromptInput.css.js +2 -3
- package/dist/generated/themes/PromptInput.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.d.ts +2 -3
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -2
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.d.ts +2 -3
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js +1 -2
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.d.ts +2 -3
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js +1 -2
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.d.ts +2 -3
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js +1 -2
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/vscode.html-custom-data.json +11 -1
- package/dist/web-types.json +31 -3
- package/package.json +7 -7
- package/src/ButtonTemplate.tsx +26 -0
- package/src/PromptInputTemplate.tsx +49 -0
- package/src/i18n/messagebundle_en_US_saptrc.properties +2 -2
- package/src/themes/Button.css +75 -21
- package/dist/generated/templates/ButtonTemplate.lit.d.ts +0 -4
- package/dist/generated/templates/ButtonTemplate.lit.js +0 -6
- package/dist/generated/templates/ButtonTemplate.lit.js.map +0 -1
- package/dist/generated/templates/PromptInputTemplate.lit.d.ts +0 -4
- package/dist/generated/templates/PromptInputTemplate.lit.js +0 -8
- package/dist/generated/templates/PromptInputTemplate.lit.js.map +0 -1
- package/src/Button.hbs +0 -17
- package/src/PromptInput.hbs +0 -36
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.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport MainButton from \"@ui5/webcomponents/dist/Button.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport ButtonState from \"./ButtonState.js\";\n\nimport ButtonTemplate from \"./generated/templates/ButtonTemplate.lit.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 represents a button used in AI-related scenarios.\n * It enables users to trigger actions by clicking or tapping the `ui5-ai-button`, or by pressing\n * certain keyboard keys, such as Enter.\n *\n * ### Usage\n *\n * For the `ui5-ai-button` UI, you can define one or more states of the button by placing `ai-button-state` components in its default slot.\n * Each state have a name that identifies it and can have text, icon and end icon defined (in any combination) depending on the state purpose.\n *\n * You can choose from a set of predefined designs (the same as for regular `ui5-button` component) that allow different styling to correspond to the triggered action.\n *\n * `ui5-ai-button` can be activated by clicking or tapping it. The state can be changed in `click` event handler.\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: litRender,\n\ttemplate: ButtonTemplate,\n\tstyles: ButtonCss,\n\tdependencies: [MainButton, Icon, ButtonState],\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})\nclass Button extends UI5Element {\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 * 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 * Initiates button elements fade-out phase.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfadeOut = false;\n\n\t/**\n\t * Initiates button fade middle phase.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfadeMid = false;\n\n\t/**\n\t * Initiates button elements fade-in phase.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfadeIn = 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 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\tonBeforeRendering(): void {\n\t\tif (this.fadeOut || this.fadeIn) {\n\t\t\treturn;\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\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\n\t\tconst button = this._mainButton;\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} else if (button) {\n\t\t\tconst buttonWidth = button.offsetWidth;\n\t\t\tconst hiddenButton = this.shadowRoot?.querySelector(\".ui5-ai-button-hidden\") as MainButton;\n\t\t\tbutton.style.width = `${buttonWidth}px`;\n\t\t\thiddenButton.icon = newStateObject.icon;\n\t\t\thiddenButton.endIcon = newStateObject.endIcon;\n\t\t\thiddenButton.textContent = newStateObject.text || null;\n\n\t\t\tawait renderFinished();\n\t\t\tconst hiddenButtonWidth = hiddenButton.offsetWidth;\n\t\t\tthis.fadeOut = true;\n\t\t\tbutton.style.width = `${hiddenButtonWidth}px`;\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.fadeMid = true;\n\t\t\t\tthis._currentStateObject = newStateObject;\n\t\t\t\tthis._fadeIn();\n\t\t\t}, fadeOutDuration);\n\t\t}\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 = 60;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.fadeIn = true;\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.fadeOut = false;\n\t\t\tthis.fadeMid = false;\n\t\t\tthis.fadeIn = false;\n\t\t}, fadeResetDuration);\n\n\t\t// reset the button's width after animations\n\t\tconst button = this._mainButton;\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: MouseEvent): void {\n\t\te.stopImmediatePropagation();\n\t\tthis.fireDecoratorEvent(\"click\");\n\t}\n\n\tget _mainButton() {\n\t\treturn this.shadowRoot?.querySelector(\"[ui5-button]\") as MainButton;\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\treturn this._currentStateObject?.endIcon;\n\t}\n\n\tget _hasText() {\n\t\treturn !!this._stateText;\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 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\";\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-click\", {\n\tbubbles: true,\n})\n\nclass Button extends UI5Element {\n\teventDetails!: {\n\t\t\"click\": void;\n\t\t\"arrow-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\tactiveArrowButton = 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?.splitMode;\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?.splitMode ? \"\" : 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.activeArrowButton;\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.splitMode && newStateObject.splitMode) || (!currentState.endIcon && !!newStateObject.endIcon)) {\n\t\t\tthis.classList.add(\"ui5-ai-button-button-to-menu\");\n\t\t}\n\t\tif ((currentState.splitMode && !newStateObject.splitMode) || (!!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-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-click\");\n\t}\n}\n\nButton.define();\nexport default Button;\n"]}
|
package/dist/ButtonState.d.ts
CHANGED
@@ -56,5 +56,12 @@ declare class ButtonState extends UI5Element {
|
|
56
56
|
* @public
|
57
57
|
*/
|
58
58
|
endIcon?: string;
|
59
|
+
/**
|
60
|
+
* Defines if the component is in split button mode.
|
61
|
+
* @default false
|
62
|
+
* @since 2.6.0
|
63
|
+
* @public
|
64
|
+
*/
|
65
|
+
splitMode: boolean;
|
59
66
|
}
|
60
67
|
export default ButtonState;
|
package/dist/ButtonState.js
CHANGED
@@ -30,6 +30,16 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
30
30
|
* @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.
|
31
31
|
*/
|
32
32
|
let ButtonState = class ButtonState extends UI5Element {
|
33
|
+
constructor() {
|
34
|
+
super(...arguments);
|
35
|
+
/**
|
36
|
+
* Defines if the component is in split button mode.
|
37
|
+
* @default false
|
38
|
+
* @since 2.6.0
|
39
|
+
* @public
|
40
|
+
*/
|
41
|
+
this.splitMode = false;
|
42
|
+
}
|
33
43
|
};
|
34
44
|
__decorate([
|
35
45
|
property()
|
@@ -43,6 +53,9 @@ __decorate([
|
|
43
53
|
__decorate([
|
44
54
|
property()
|
45
55
|
], ButtonState.prototype, "endIcon", void 0);
|
56
|
+
__decorate([
|
57
|
+
property({ type: Boolean })
|
58
|
+
], ButtonState.prototype, "splitMode", void 0);
|
46
59
|
ButtonState = __decorate([
|
47
60
|
customElement("ui5-ai-button-state")
|
48
61
|
], ButtonState);
|
package/dist/ButtonState.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ButtonState.js","sourceRoot":"","sources":["../src/ButtonState.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;
|
1
|
+
{"version":3,"file":"ButtonState.js","sourceRoot":"","sources":["../src/ButtonState.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QA2CC;;;;;WAKG;QAEH,cAAS,GAAG,KAAK,CAAC;IACnB,CAAC;CAAA,CAAA;AA5CA;IADC,QAAQ,EAAE;yCACG;AAQd;IADC,QAAQ,EAAE;yCACG;AAad;IADC,QAAQ,EAAE;yCACG;AAad;IADC,QAAQ,EAAE;4CACM;AASjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACV;AAlDb,WAAW;IADhB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,WAAW,CAmDhB;AAED,WAAW,CAAC,MAAM,EAAE,CAAC;AACrB,eAAe,WAAW,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * `ui5-ai-button-state` is the item to use for defining states of `ui5-ai-button` components.\n *\n * ### Usage\n *\n * `ui5-si-button-state` is an abstract element, representing a state of `ui5-ai-button`. It is meant to be used in the `states` slot\n * of `ui5-ai-button` and should be used as standalone component.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/AiButtonState.js\";`\n * @constructor\n * @extends UI5Element\n * @abstract\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@customElement(\"ui5-ai-button-state\")\nclass ButtonState extends UI5Element {\n\t/**\n\t * Defines the name of the button state.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines the text of the button in this state.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines the icon to be displayed as graphical element within the component before the text.\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * **Example:**\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines the icon to be displayed as graphical element within the component after the text.\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * **Example:**\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tendIcon?: string;\n\n\t/**\n\t * Defines if the component is in split button mode.\n\t * @default false\n\t * @since 2.6.0\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tsplitMode = false;\n}\n\nButtonState.define();\nexport default ButtonState;\n"]}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
|
2
|
+
import SplitButton from "@ui5/webcomponents/dist/SplitButton.js";
|
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 })] }));
|
5
|
+
}
|
6
|
+
//# sourceMappingURL=ButtonTemplate.js.map
|
@@ -0,0 +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"]}
|
package/dist/PromptInput.d.ts
CHANGED
@@ -1,7 +1,6 @@
|
|
1
1
|
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
2
2
|
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
|
3
3
|
import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
|
4
|
-
import "@ui5/webcomponents-icons/dist/paper-plane.js";
|
5
4
|
import type { IInputSuggestionItem, InputEventDetail } from "@ui5/webcomponents/dist/Input.js";
|
6
5
|
/**
|
7
6
|
* @class
|
@@ -21,6 +20,11 @@ import type { IInputSuggestionItem, InputEventDetail } from "@ui5/webcomponents/
|
|
21
20
|
* @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.
|
22
21
|
*/
|
23
22
|
declare class PromptInput extends UI5Element {
|
23
|
+
eventDetails: {
|
24
|
+
submit: void;
|
25
|
+
input: void;
|
26
|
+
change: void;
|
27
|
+
};
|
24
28
|
/**
|
25
29
|
* Defines the value of the component.
|
26
30
|
*
|
package/dist/PromptInput.js
CHANGED
@@ -8,17 +8,13 @@ var PromptInput_1;
|
|
8
8
|
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
9
9
|
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
|
10
10
|
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
11
|
-
import event from "@ui5/webcomponents-base/dist/decorators/event.js";
|
11
|
+
import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
|
12
12
|
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
|
13
13
|
import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
|
14
|
-
import
|
15
|
-
import "@ui5/webcomponents-icons/dist/paper-plane.js";
|
16
|
-
import Input from "@ui5/webcomponents/dist/Input.js";
|
17
|
-
import Label from "@ui5/webcomponents/dist/Label.js";
|
18
|
-
import Button from "@ui5/webcomponents/dist/Button.js";
|
14
|
+
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
|
19
15
|
import { isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
|
20
16
|
import { PROMPT_INPUT_CHARACTERS_LEFT, PROMPT_INPUT_CHARACTERS_EXCEEDED, } from "./generated/i18n/i18n-defaults.js";
|
21
|
-
import PromptInputTemplate from "./
|
17
|
+
import PromptInputTemplate from "./PromptInputTemplate.js";
|
22
18
|
// Styles
|
23
19
|
import PromptInputCss from "./generated/themes/PromptInput.css.js";
|
24
20
|
/**
|
@@ -188,14 +184,9 @@ __decorate([
|
|
188
184
|
PromptInput = PromptInput_1 = __decorate([
|
189
185
|
customElement({
|
190
186
|
tag: "ui5-ai-prompt-input",
|
191
|
-
renderer:
|
187
|
+
renderer: jsxRenderer,
|
192
188
|
styles: PromptInputCss,
|
193
189
|
template: PromptInputTemplate,
|
194
|
-
dependencies: [
|
195
|
-
Input,
|
196
|
-
Label,
|
197
|
-
Button,
|
198
|
-
],
|
199
190
|
})
|
200
191
|
/**
|
201
192
|
* Fired when the input operation has finished by pressing Enter
|
package/dist/PromptInput.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"PromptInput.js","sourceRoot":"","sources":["../src/PromptInput.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.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.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport \"@ui5/webcomponents-icons/dist/paper-plane.js\";\nimport type { IInputSuggestionItem, InputEventDetail } from \"@ui5/webcomponents/dist/Input.js\";\nimport Input from \"@ui5/webcomponents/dist/Input.js\";\nimport Label from \"@ui5/webcomponents/dist/Label.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport {\n\tisEnter,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport {\n\tPROMPT_INPUT_CHARACTERS_LEFT,\n\tPROMPT_INPUT_CHARACTERS_EXCEEDED,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport PromptInputTemplate from \"./generated/templates/PromptInputTemplate.lit.js\";\n\n// Styles\nimport PromptInputCss from \"./generated/themes/PromptInput.css.js\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-ai-prompt-input` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.\n *\n * **Note:** The web component is in an experimental state\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-ai/dist/PromptInput.js\n * @class\n * @constructor\n * @public\n * @extends UI5Element\n * @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.\n */\n@customElement({\n\ttag: \"ui5-ai-prompt-input\",\n\trenderer: litRender,\n\tstyles: PromptInputCss,\n\ttemplate: PromptInputTemplate,\n\tdependencies: [\n\t\tInput,\n\t\tLabel,\n\t\tButton,\n\t],\n})\n\n/**\n * Fired when the input operation has finished by pressing Enter\n * or AI button is clicked.\n *\n * @since 2.0.0\n * @public\n */\n@event(\"submit\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the value of the component changes at each keystroke,\n * and when a suggestion item has been selected.\n *\n * @since 2.0.0\n * @public\n */\n@event(\"input\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the input operation has finished by pressing Enter\n * or on focusout.\n *\n * @since 2.0.0\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n})\nclass PromptInput extends UI5Element {\n\t/**\n\t * Defines the value of the component.\n\t *\n\t * @default \"\"\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property()\n\tvalue = \"\";\n\n\t/**\n\t * Defines a short hint intended to aid the user with data entry when the\n\t * component has no value.\n\t * @default undefined\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property()\n\tplaceholder?: string;\n\n\t/**\n\t * Defines the label of the input field.\n\t *\n\t * @default undefined\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property()\n\tlabel?: string;\n\n\t/**\n\t * Defines whether the clear icon of the input will be shown.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tshowClearIcon = false;\n\n\t/**\n\t * Determines whether the characters exceeding the maximum allowed character count are visible\n\t * in the component.\n\t *\n\t * If set to `false`, the user is not allowed to enter more characters than what is set in the\n\t * `maxlength` property.\n\t * If set to `true` the characters exceeding the `maxlength` value are selected on\n\t * paste and the counter below the component displays their number.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tshowExceededText = false;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t *\n\t * **Note:** A disabled component is completely noninteractive.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines whether the component is read-only.\n\t *\n\t * **Note:** A read-only component is not editable,\n\t * but still provides visual feedback upon user interaction.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\treadonly = false;\n\n\t/**\n\t * Sets the maximum number of characters available in the input field.\n\t *\n\t * @default undefined\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property({ type: Number })\n\tmaxlength?: number;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property()\n\tvalueState: `${ValueState}` = \"None\"\n\n\t/**\n\t * Defines whether the component should show suggestions, if such are present.\n\t *\n\t * **Note:** You need to import the `InputSuggestions` module\n\t * from `\"@ui5/webcomponents/dist/features/InputSuggestions.js\"` to enable this functionality.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowSuggestions = false;\n\n\t/**\n\t * Defines the suggestion items.\n\t *\n\t * **Note:** The suggestions would be displayed only if the `showSuggestions`\n\t * property is set to `true`.\n\t *\n\t * **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\t *\n\t * **Note:** Importing the Input Suggestions Support feature:\n\t *\n\t * `import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";`\n\t *\n\t * automatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience.\n\t * @public\n\t */\n\t\t@slot({ type: HTMLElement, \"default\": true })\n\t\tsuggestionItems!: Array<IInputSuggestionItem>;\n\n\t/**\n\t * Defines the value state message that will be displayed as pop up under the component.\n\t * The value state message slot should contain only one root element.\n\t *\n\t * **Note:** If not specified, a default text (in the respective language) will be displayed.\n\t *\n\t * **Note:** The `valueStateMessage` would be displayed,\n\t * when the component is in `Information`, `Critical` or `Negative` value state.\n\t *\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\tinvalidateOnChildChange: true,\n\t})\n\tvalueStateMessage!: Array<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents-ai\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireDecoratorEvent(\"submit\");\n\t\t}\n\t}\n\n\t_onInnerInput(e: CustomEvent<InputEventDetail>) {\n\t\tthis.value = (e.target as Input).value;\n\n\t\tthis.fireDecoratorEvent(\"input\");\n\t}\n\n\t_onInnerChange() {\n\t\tthis.fireDecoratorEvent(\"change\");\n\t}\n\n\t_onButtonClick() {\n\t\tthis.fireDecoratorEvent(\"submit\");\n\t}\n\n\t_onTypeAhead(e: CustomEvent): void {\n\t\tthis.value = (e.target as Input).value;\n\t}\n\n\tget _exceededText() {\n\t\tif (this.showExceededText) {\n\t\t\tlet leftCharactersCount;\n\t\t\tconst maxLength = this.maxlength;\n\n\t\t\tif (maxLength !== undefined) {\n\t\t\t\tleftCharactersCount = maxLength - this.value.length;\n\n\t\t\t\tif (leftCharactersCount >= 0) {\n\t\t\t\t\treturn PromptInput.i18nBundle.getText(PROMPT_INPUT_CHARACTERS_LEFT, leftCharactersCount);\n\t\t\t\t}\n\n\t\t\t\treturn PromptInput.i18nBundle.getText(PROMPT_INPUT_CHARACTERS_EXCEEDED, Math.abs(leftCharactersCount));\n\t\t\t}\n\t\t}\n\t}\n\n\tget _maxLenght() {\n\t\treturn this.maxlength || undefined;\n\t}\n\n\tget _submitButtonDisabled() {\n\t\treturn (this.value.length <= 0) || this.disabled || this.readonly;\n\t}\n}\n\nPromptInput.define();\n\nexport default PromptInput;\n"]}
|
1
|
+
{"version":3,"file":"PromptInput.js","sourceRoot":"","sources":["../src/PromptInput.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.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 i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport type { IInputSuggestionItem, InputEventDetail } from \"@ui5/webcomponents/dist/Input.js\";\nimport type Input from \"@ui5/webcomponents/dist/Input.js\";\nimport {\n\tisEnter,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport {\n\tPROMPT_INPUT_CHARACTERS_LEFT,\n\tPROMPT_INPUT_CHARACTERS_EXCEEDED,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport PromptInputTemplate from \"./PromptInputTemplate.js\";\n\n// Styles\nimport PromptInputCss from \"./generated/themes/PromptInput.css.js\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-ai-prompt-input` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.\n *\n * **Note:** The web component is in an experimental state\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-ai/dist/PromptInput.js\n * @class\n * @constructor\n * @public\n * @extends UI5Element\n * @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.\n */\n@customElement({\n\ttag: \"ui5-ai-prompt-input\",\n\trenderer: jsxRenderer,\n\tstyles: PromptInputCss,\n\ttemplate: PromptInputTemplate,\n})\n\n/**\n * Fired when the input operation has finished by pressing Enter\n * or AI button is clicked.\n *\n * @since 2.0.0\n * @public\n */\n@event(\"submit\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the value of the component changes at each keystroke,\n * and when a suggestion item has been selected.\n *\n * @since 2.0.0\n * @public\n */\n@event(\"input\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the input operation has finished by pressing Enter\n * or on focusout.\n *\n * @since 2.0.0\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n})\nclass PromptInput extends UI5Element {\n\teventDetails!: {\n\t\tsubmit: void;\n\t\tinput: void;\n\t\tchange: void;\n\t}\n\t/**\n\t * Defines the value of the component.\n\t *\n\t * @default \"\"\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property()\n\tvalue = \"\";\n\n\t/**\n\t * Defines a short hint intended to aid the user with data entry when the\n\t * component has no value.\n\t * @default undefined\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property()\n\tplaceholder?: string;\n\n\t/**\n\t * Defines the label of the input field.\n\t *\n\t * @default undefined\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property()\n\tlabel?: string;\n\n\t/**\n\t * Defines whether the clear icon of the input will be shown.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tshowClearIcon = false;\n\n\t/**\n\t * Determines whether the characters exceeding the maximum allowed character count are visible\n\t * in the component.\n\t *\n\t * If set to `false`, the user is not allowed to enter more characters than what is set in the\n\t * `maxlength` property.\n\t * If set to `true` the characters exceeding the `maxlength` value are selected on\n\t * paste and the counter below the component displays their number.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tshowExceededText = false;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t *\n\t * **Note:** A disabled component is completely noninteractive.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines whether the component is read-only.\n\t *\n\t * **Note:** A read-only component is not editable,\n\t * but still provides visual feedback upon user interaction.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\treadonly = false;\n\n\t/**\n\t * Sets the maximum number of characters available in the input field.\n\t *\n\t * @default undefined\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property({ type: Number })\n\tmaxlength?: number;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@property()\n\tvalueState: `${ValueState}` = \"None\"\n\n\t/**\n\t * Defines whether the component should show suggestions, if such are present.\n\t *\n\t * **Note:** You need to import the `InputSuggestions` module\n\t * from `\"@ui5/webcomponents/dist/features/InputSuggestions.js\"` to enable this functionality.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowSuggestions = false;\n\n\t/**\n\t * Defines the suggestion items.\n\t *\n\t * **Note:** The suggestions would be displayed only if the `showSuggestions`\n\t * property is set to `true`.\n\t *\n\t * **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\t *\n\t * **Note:** Importing the Input Suggestions Support feature:\n\t *\n\t * `import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";`\n\t *\n\t * automatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience.\n\t * @public\n\t */\n\t\t@slot({ type: HTMLElement, \"default\": true })\n\t\tsuggestionItems!: Array<IInputSuggestionItem>;\n\n\t/**\n\t * Defines the value state message that will be displayed as pop up under the component.\n\t * The value state message slot should contain only one root element.\n\t *\n\t * **Note:** If not specified, a default text (in the respective language) will be displayed.\n\t *\n\t * **Note:** The `valueStateMessage` would be displayed,\n\t * when the component is in `Information`, `Critical` or `Negative` value state.\n\t *\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\tinvalidateOnChildChange: true,\n\t})\n\tvalueStateMessage!: Array<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents-ai\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireDecoratorEvent(\"submit\");\n\t\t}\n\t}\n\n\t_onInnerInput(e: CustomEvent<InputEventDetail>) {\n\t\tthis.value = (e.target as Input).value;\n\n\t\tthis.fireDecoratorEvent(\"input\");\n\t}\n\n\t_onInnerChange() {\n\t\tthis.fireDecoratorEvent(\"change\");\n\t}\n\n\t_onButtonClick() {\n\t\tthis.fireDecoratorEvent(\"submit\");\n\t}\n\n\t_onTypeAhead(e: CustomEvent): void {\n\t\tthis.value = (e.target as Input).value;\n\t}\n\n\tget _exceededText() {\n\t\tif (this.showExceededText) {\n\t\t\tlet leftCharactersCount;\n\t\t\tconst maxLength = this.maxlength;\n\n\t\t\tif (maxLength !== undefined) {\n\t\t\t\tleftCharactersCount = maxLength - this.value.length;\n\n\t\t\t\tif (leftCharactersCount >= 0) {\n\t\t\t\t\treturn PromptInput.i18nBundle.getText(PROMPT_INPUT_CHARACTERS_LEFT, leftCharactersCount);\n\t\t\t\t}\n\n\t\t\t\treturn PromptInput.i18nBundle.getText(PROMPT_INPUT_CHARACTERS_EXCEEDED, Math.abs(leftCharactersCount));\n\t\t\t}\n\t\t}\n\t}\n\n\tget _maxLenght() {\n\t\treturn this.maxlength || undefined;\n\t}\n\n\tget _submitButtonDisabled() {\n\t\treturn (this.value.length <= 0) || this.disabled || this.readonly;\n\t}\n}\n\nPromptInput.define();\n\nexport default PromptInput;\n"]}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
|
2
|
+
import Label from "@ui5/webcomponents/dist/Label.js";
|
3
|
+
import Input from "@ui5/webcomponents/dist/Input.js";
|
4
|
+
import Button from "@ui5/webcomponents/dist/Button.js";
|
5
|
+
import paperPlane from "@ui5/webcomponents-icons/dist/paper-plane.js";
|
6
|
+
export default function PromptInputTemplate() {
|
7
|
+
return (_jsxs("div", { class: "ai-prompt-input-wrapper", children: [this.label &&
|
8
|
+
_jsx(Label, { for: "input", children: this.label }), _jsxs("div", { class: "ai-prompt-input-form-wrapper", children: [_jsxs("div", { class: "ai-prompt-inner-input-wrapper", children: [_jsxs(Input, { id: "input", value: this.value, placeholder: this.placeholder, valueState: this.valueState, showClearIcon: this.showClearIcon, disabled: this.disabled, readonly: this.readonly, showSuggestions: this.showSuggestions, onKeyDown: this._onkeydown, onInput: this._onInnerInput, onChange: this._onInnerChange, onTypeAhead: this._onTypeAhead, children: [_jsx("slot", {}), this.valueStateMessage.length > 0 &&
|
9
|
+
_jsx("slot", { name: "valueStateMessage", slot: "valueStateMessage" })] }), this.showExceededText &&
|
10
|
+
_jsx(Label, { class: "ai-prompt-input-counter", children: this._exceededText })] }), _jsx(Button, { icon: paperPlane, disabled: this._submitButtonDisabled, class: "ai-prompt-input-button", design: "Emphasized", onClick: this._onButtonClick })] })] }));
|
11
|
+
}
|
12
|
+
//# sourceMappingURL=PromptInputTemplate.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"PromptInputTemplate.js","sourceRoot":"","sources":["../src/PromptInputTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,UAAU,MAAM,8CAA8C,CAAC;AAEtE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,eAAK,KAAK,EAAC,yBAAyB,aAClC,IAAI,CAAC,KAAK;gBACV,KAAC,KAAK,IAAC,GAAG,EAAC,OAAO,YAAE,IAAI,CAAC,KAAK,GAAS,EAGxC,eAAK,KAAK,EAAC,8BAA8B,aACxC,eAAK,KAAK,EAAC,+BAA+B,aACzC,MAAC,KAAK,IACL,EAAE,EAAC,OAAO,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,WAAW,EAAE,IAAI,CAAC,YAAY,aAE9B,gBAAa,EACZ,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC;wCACjC,eAAM,IAAI,EAAC,mBAAmB,EAAC,IAAI,EAAC,mBAAmB,GAAQ,IAEzD,EAEP,IAAI,CAAC,gBAAgB;gCACrB,KAAC,KAAK,IAAC,KAAK,EAAC,yBAAyB,YAAE,IAAI,CAAC,aAAa,GAAS,IAE/D,EACN,KAAC,MAAM,IACN,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,IAAI,CAAC,qBAAqB,EACpC,KAAK,EAAC,wBAAwB,EAC9B,MAAM,EAAC,YAAY,EACnB,OAAO,EAAE,IAAI,CAAC,cAAc,GACpB,IACJ,IACD,CAAC,CAAC;AACV,CAAC","sourcesContent":["import type PromptInput from \"./PromptInput.js\";\nimport Label from \"@ui5/webcomponents/dist/Label.js\";\nimport Input from \"@ui5/webcomponents/dist/Input.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport paperPlane from \"@ui5/webcomponents-icons/dist/paper-plane.js\";\n\nexport default function PromptInputTemplate(this: PromptInput) {\n\treturn (\n\t\t<div class=\"ai-prompt-input-wrapper\">\n\t\t\t{this.label &&\n\t\t\t\t<Label for=\"input\">{this.label}</Label>\n\t\t\t}\n\n\t\t\t<div class=\"ai-prompt-input-form-wrapper\">\n\t\t\t\t<div class=\"ai-prompt-inner-input-wrapper\">\n\t\t\t\t\t<Input\n\t\t\t\t\t\tid=\"input\"\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tvalueState={this.valueState}\n\t\t\t\t\t\tshowClearIcon={this.showClearIcon}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\t\tshowSuggestions={this.showSuggestions}\n\t\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\t\tonInput={this._onInnerInput}\n\t\t\t\t\t\tonChange={this._onInnerChange}\n\t\t\t\t\t\tonTypeAhead={this._onTypeAhead}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t{this.valueStateMessage.length > 0 &&\n\t\t\t\t\t\t\t<slot name=\"valueStateMessage\" slot=\"valueStateMessage\"></slot>\n\t\t\t\t\t\t}\n\t\t\t\t\t</Input>\n\n\t\t\t\t\t{this.showExceededText &&\n\t\t\t\t\t\t<Label class=\"ai-prompt-input-counter\">{this._exceededText}</Label>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<Button\n\t\t\t\t\ticon={paperPlane}\n\t\t\t\t\tdisabled={this._submitButtonDisabled}\n\t\t\t\t\tclass=\"ai-prompt-input-button\"\n\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\tonClick={this._onButtonClick}>\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>);\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
|
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-6-0_button_base_min_width)!important;max-width:var(--_ui5-v2-6-0_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-6-0_button_base_padding)}:host(.ui5-ai-button-fade-in[icon-only]) .ui5-ai-button-inner[_end-icon=""]::part(button){max-width:var(--_ui5-v2-6-0_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-6-0_button_base_min_width);max-width:var(--_ui5-v2-6-0_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}
|
@@ -14,12 +14,12 @@
|
|
14
14
|
"declarations": [
|
15
15
|
{
|
16
16
|
"kind": "class",
|
17
|
-
"description": "### Overview\n\nThe `ui5-ai-button` component
|
17
|
+
"description": "### Overview\n\nThe `ui5-ai-button` component serves as a button for AI-related scenarios. Users can trigger actions by clicking or tapping the `ui5-ai-button`\nor by pressing keyboard keys like [Enter] or [Space].\n\n### Usage\n\nFor 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.\nEach state has a name for identification and can include text, an icon, and an end icon, as needed for its purpose.\nYou can define a split mode for the `ui5-ai-button`, which will results in displaying an arrow button for additional actions.\n\nYou can choose from a set of predefined designs for `ui5-ai-button` (as in `ui5-button`) to match the desired styling.\n\nThe `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\nin split mode, you can activate the default button action by clicking or tapping it, or by pressing keyboard keys like [Enter] or [Space].\nYou can activate the arrow button by clicking or tapping it, or by pressing keyboard keys like [Arrow Up], [Arrow Down], or [F4].\nTo 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\";`",
|
18
18
|
"name": "Button",
|
19
19
|
"slots": [
|
20
20
|
{
|
21
21
|
"name": "default",
|
22
|
-
"description": "Defines the available states of the component.\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that
|
22
|
+
"description": "Defines the available states of the component.\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that\nyou only use `ui5-ai-button-state` components in order to preserve the intended design.",
|
23
23
|
"_ui5propertyName": "states",
|
24
24
|
"_ui5type": {
|
25
25
|
"text": "Array<ButtonState>",
|
@@ -71,6 +71,18 @@
|
|
71
71
|
"description": "Defines the current state of the component.",
|
72
72
|
"default": "undefined",
|
73
73
|
"privacy": "public"
|
74
|
+
},
|
75
|
+
{
|
76
|
+
"kind": "field",
|
77
|
+
"name": "activeArrowButton",
|
78
|
+
"type": {
|
79
|
+
"text": "boolean"
|
80
|
+
},
|
81
|
+
"default": "false",
|
82
|
+
"description": "Defines the active state of the arrow button in split mode.\nSet to true when the button is in split mode and a menu with additional options\nis opened by the arrow button. Set back to false when the menu is closed.",
|
83
|
+
"privacy": "public",
|
84
|
+
"_ui5since": "2.6.0",
|
85
|
+
"_ui5noAttribute": true
|
74
86
|
}
|
75
87
|
],
|
76
88
|
"events": [
|
@@ -84,6 +96,17 @@
|
|
84
96
|
"_ui5Cancelable": false,
|
85
97
|
"_ui5allowPreventDefault": false,
|
86
98
|
"_ui5Bubbles": true
|
99
|
+
},
|
100
|
+
{
|
101
|
+
"name": "arrow-click",
|
102
|
+
"_ui5privacy": "public",
|
103
|
+
"type": {
|
104
|
+
"text": "CustomEvent"
|
105
|
+
},
|
106
|
+
"description": "Fired when the component is in split mode and after the arrow button\nis 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.",
|
107
|
+
"_ui5Cancelable": false,
|
108
|
+
"_ui5allowPreventDefault": false,
|
109
|
+
"_ui5Bubbles": true
|
87
110
|
}
|
88
111
|
],
|
89
112
|
"attributes": [
|
@@ -113,6 +136,15 @@
|
|
113
136
|
"type": {
|
114
137
|
"text": "string | undefined"
|
115
138
|
}
|
139
|
+
},
|
140
|
+
{
|
141
|
+
"description": "Defines the active state of the arrow button in split mode.\nSet to true when the button is in split mode and a menu with additional options\nis opened by the arrow button. Set back to false when the menu is closed.",
|
142
|
+
"name": "active-arrow-button",
|
143
|
+
"default": "false",
|
144
|
+
"fieldName": "activeArrowButton",
|
145
|
+
"type": {
|
146
|
+
"text": "boolean"
|
147
|
+
}
|
116
148
|
}
|
117
149
|
],
|
118
150
|
"superclass": {
|
@@ -194,6 +226,17 @@
|
|
194
226
|
"description": "Defines the icon to be displayed as graphical element within the component after the text.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
|
195
227
|
"default": "undefined",
|
196
228
|
"privacy": "public"
|
229
|
+
},
|
230
|
+
{
|
231
|
+
"kind": "field",
|
232
|
+
"name": "splitMode",
|
233
|
+
"type": {
|
234
|
+
"text": "boolean"
|
235
|
+
},
|
236
|
+
"default": "false",
|
237
|
+
"description": "Defines if the component is in split button mode.",
|
238
|
+
"privacy": "public",
|
239
|
+
"_ui5since": "2.6.0"
|
197
240
|
}
|
198
241
|
],
|
199
242
|
"attributes": [
|
@@ -232,6 +275,15 @@
|
|
232
275
|
"type": {
|
233
276
|
"text": "string | undefined"
|
234
277
|
}
|
278
|
+
},
|
279
|
+
{
|
280
|
+
"description": "Defines if the component is in split button mode.",
|
281
|
+
"name": "split-mode",
|
282
|
+
"default": "false",
|
283
|
+
"fieldName": "splitMode",
|
284
|
+
"type": {
|
285
|
+
"text": "boolean"
|
286
|
+
}
|
235
287
|
}
|
236
288
|
],
|
237
289
|
"superclass": {
|
@@ -14,12 +14,12 @@
|
|
14
14
|
"declarations": [
|
15
15
|
{
|
16
16
|
"kind": "class",
|
17
|
-
"description": "### Overview\n\nThe `ui5-ai-button` component
|
17
|
+
"description": "### Overview\n\nThe `ui5-ai-button` component serves as a button for AI-related scenarios. Users can trigger actions by clicking or tapping the `ui5-ai-button`\nor by pressing keyboard keys like [Enter] or [Space].\n\n### Usage\n\nFor 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.\nEach state has a name for identification and can include text, an icon, and an end icon, as needed for its purpose.\nYou can define a split mode for the `ui5-ai-button`, which will results in displaying an arrow button for additional actions.\n\nYou can choose from a set of predefined designs for `ui5-ai-button` (as in `ui5-button`) to match the desired styling.\n\nThe `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\nin split mode, you can activate the default button action by clicking or tapping it, or by pressing keyboard keys like [Enter] or [Space].\nYou can activate the arrow button by clicking or tapping it, or by pressing keyboard keys like [Arrow Up], [Arrow Down], or [F4].\nTo 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\";`",
|
18
18
|
"name": "Button",
|
19
19
|
"slots": [
|
20
20
|
{
|
21
21
|
"name": "default",
|
22
|
-
"description": "Defines the available states of the component.\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that
|
22
|
+
"description": "Defines the available states of the component.\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that\nyou only use `ui5-ai-button-state` components in order to preserve the intended design."
|
23
23
|
}
|
24
24
|
],
|
25
25
|
"members": [
|
@@ -59,6 +59,16 @@
|
|
59
59
|
"description": "Defines the current state of the component.",
|
60
60
|
"default": "undefined",
|
61
61
|
"privacy": "public"
|
62
|
+
},
|
63
|
+
{
|
64
|
+
"kind": "field",
|
65
|
+
"name": "activeArrowButton",
|
66
|
+
"type": {
|
67
|
+
"text": "boolean"
|
68
|
+
},
|
69
|
+
"default": "false",
|
70
|
+
"description": "Defines the active state of the arrow button in split mode.\nSet to true when the button is in split mode and a menu with additional options\nis opened by the arrow button. Set back to false when the menu is closed.",
|
71
|
+
"privacy": "public"
|
62
72
|
}
|
63
73
|
],
|
64
74
|
"events": [
|
@@ -68,6 +78,13 @@
|
|
68
78
|
"text": "CustomEvent"
|
69
79
|
},
|
70
80
|
"description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key."
|
81
|
+
},
|
82
|
+
{
|
83
|
+
"name": "arrow-click",
|
84
|
+
"type": {
|
85
|
+
"text": "CustomEvent"
|
86
|
+
},
|
87
|
+
"description": "Fired when the component is in split mode and after the arrow button\nis 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."
|
71
88
|
}
|
72
89
|
],
|
73
90
|
"attributes": [
|
@@ -97,6 +114,15 @@
|
|
97
114
|
"type": {
|
98
115
|
"text": "string | undefined"
|
99
116
|
}
|
117
|
+
},
|
118
|
+
{
|
119
|
+
"description": "Defines the active state of the arrow button in split mode.\nSet to true when the button is in split mode and a menu with additional options\nis opened by the arrow button. Set back to false when the menu is closed.",
|
120
|
+
"name": "active-arrow-button",
|
121
|
+
"default": "false",
|
122
|
+
"fieldName": "activeArrowButton",
|
123
|
+
"type": {
|
124
|
+
"text": "boolean"
|
125
|
+
}
|
100
126
|
}
|
101
127
|
],
|
102
128
|
"superclass": {
|
@@ -175,6 +201,16 @@
|
|
175
201
|
"description": "Defines the icon to be displayed as graphical element within the component after the text.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
|
176
202
|
"default": "undefined",
|
177
203
|
"privacy": "public"
|
204
|
+
},
|
205
|
+
{
|
206
|
+
"kind": "field",
|
207
|
+
"name": "splitMode",
|
208
|
+
"type": {
|
209
|
+
"text": "boolean"
|
210
|
+
},
|
211
|
+
"default": "false",
|
212
|
+
"description": "Defines if the component is in split button mode.",
|
213
|
+
"privacy": "public"
|
178
214
|
}
|
179
215
|
],
|
180
216
|
"attributes": [
|
@@ -213,6 +249,15 @@
|
|
213
249
|
"type": {
|
214
250
|
"text": "string | undefined"
|
215
251
|
}
|
252
|
+
},
|
253
|
+
{
|
254
|
+
"description": "Defines if the component is in split button mode.",
|
255
|
+
"name": "split-mode",
|
256
|
+
"default": "false",
|
257
|
+
"fieldName": "splitMode",
|
258
|
+
"type": {
|
259
|
+
"text": "boolean"
|
260
|
+
}
|
216
261
|
}
|
217
262
|
],
|
218
263
|
"superclass": {
|
@@ -1 +1 @@
|
|
1
|
-
{"PROMPT_INPUT_CHARACTERS_LEFT":"
|
1
|
+
{"PROMPT_INPUT_CHARACTERS_LEFT":"ApfX3Ybp+LpUZGYmQzr70w_{0} characters remaining","PROMPT_INPUT_CHARACTERS_EXCEEDED":"j5kNPkXE7zFJCcHSJi7nbg_{0} characters over limit"}
|
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
""
|
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
""
|
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
""
|
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
""
|
@@ -1,3 +1,2 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
export default styleData;
|
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-6-0_button_base_min_width)!important;max-width:var(--_ui5-v2-6-0_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-6-0_button_base_padding)}:host(.ui5-ai-button-fade-in[icon-only]) .ui5-ai-button-inner[_end-icon=\"\"]::part(button){max-width:var(--_ui5-v2-6-0_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-6-0_button_base_min_width);max-width:var(--_ui5-v2-6-0_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
|
+
export default _default;
|
@@ -3,7 +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("@ui5/webcomponents-ai", "sap_horizon", async () => defaultTheme);
|
6
|
-
|
7
|
-
|
8
|
-
export default styleData;
|
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-0_button_base_min_width)!important;max-width:var(--_ui5-v2-6-0_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-6-0_button_base_padding)}:host(.ui5-ai-button-fade-in[icon-only]) .ui5-ai-button-inner[_end-icon=""]::part(button){max-width:var(--_ui5-v2-6-0_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-6-0_button_base_min_width);max-width:var(--_ui5-v2-6-0_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
|
+
`;
|
9
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":"
|
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,4BAA4B,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACzG,6BAA6B,CAAC,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAChG,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(\"@ui5/webcomponents-ai\", \"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-6-0_button_base_min_width)!important;max-width:var(--_ui5-v2-6-0_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-6-0_button_base_padding)}:host(.ui5-ai-button-fade-in[icon-only]) .ui5-ai-button-inner[_end-icon=\"\"]::part(button){max-width:var(--_ui5-v2-6-0_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-6-0_button_base_min_width);max-width:var(--_ui5-v2-6-0_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`"]}
|
@@ -1,3 +1,2 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
export default styleData;
|
1
|
+
declare const _default: ".ai-prompt-input-button{margin-left:.5rem;margin-top:3px}.ai-prompt-input-wrapper{display:flex;flex-direction:column;width:270px}.ai-prompt-input-form-wrapper{display:flex;flex:1}.ai-prompt-input-counter{font-size:.75rem;align-self:flex-end}#input{width:100%}.ai-prompt-inner-input-wrapper{display:flex;flex-direction:column;flex:1}\n";
|
2
|
+
export default _default;
|